You can set the date picker component orientation using the orientation property.

  • The orientation affects how the month are arranged. It only applies when the date picker is configured to display multiple months.
  • The default orientation is "Vertical".


navigator date picker horizontal orientation


navigator date picker vertical orientation

JavaScript Example

In the JavaScript date picker component, use the orientation property:

<div id="nav"></div>


  const nav = new DayPilot.Navigator("nav", {
    // ...
    orientation: "Horizontal",
    showMonths: 3