By default, the Navigator date picker always displays six rows (weeks) per month. This is the maximum number of rows needed to show a full month of 31 days.

  • Each month has the same height.
  • Some months are shorter and may result in an empty row at the bottom. For the last month, the empty row will be filled with the appropriate days from the following month.

You can also switch the date picker (rowsPerMonth property) to "Auto" mode which hides the empty row at the bottom.

Six (default mode)

navigator date picker rows per month six

Auto

navigator date picker rows per month auto

JavaScript Example

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

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

<script>

  const nav = new DayPilot.Navigator("nav", {
    // ...
    rowsPerMonth: "Auto"
  });

  nav.init();

</script>