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".

Horizontal

navigator date picker horizontal orientation

Vertical

navigator date picker vertical orientation

JavaScript Example

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

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

<script>

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

  nav.init();

</script>