DayPilot.Calendar.zoomLevels

The zoomLevels property (array) specifies the zoom levels available in the JavaScript Calendar component.

Available since 2023.1.5541.

Declaration

DayPilot.Calendar.zoomLevels

Default Value

[]

Notes

Each zoom level can define a set of DayPilot.Calendar properties that will be applied when the level becomes active.

By default, no zoom level is active and the current zoom level is -1. You can set the initial zoom level using the zoom property or switch levels later using DayPilot.Calendar.zoom.setActive().

Item structure:

• properties (object) - required object containing the calendar property values to apply

• id (string) - optional zoom level identifier

• Additional top-level item properties such as name are allowed and ignored by the calendar itself.

• If a property value is a function, it will be executed and its return value will be assigned to the target calendar property. The function receives an args object with args.level pointing to the applied zoom level item.

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  zoomLevels: [
    {
      name: "30-minute cells",
      id: "30min",
      properties: {
        cellDuration: 30,
        cellHeight: 30,
      },
    },
    {
      name: "15-minute cells",
      id: "15min",
      properties: {
        cellDuration: 15,
        cellHeight: 20,
      },
    },
    {
      name: "10-minute cells",
      id: "10min",
      properties: {
        cellDuration: args => args.level.id === "10min" ? 10 : 15,
        cellHeight: 20,
      },
    },
  ],
  // ...
});
calendar.init();

Angular

<daypilot-calendar [config]="config"></daypilot-calendar>

config: DayPilot.CalendarConfig = {
  zoomLevels: [
    {
      name: "30-minute cells",
      id: "30min",
      properties: {
        cellDuration: 30,
        cellHeight: 30,
      },
    },
  ],
  // ...
};

React

<DayPilotCalendar
  zoomLevels={[
    {
      name: "30-minute cells",
      id: "30min",
      properties: {
        cellDuration: 30,
        cellHeight: 30,
      },
    },
  ]}
  {/* ... */}
/>

Vue

<DayPilotCalendar
  :zoomLevels="[
    {
      name: '30-minute cells',
      id: '30min',
      properties: {
        cellDuration: 30,
        cellHeight: 30,
      },
    },
  ]"
  <!-- ... -->
/>

See Also

DayPilot.Calendar.zoom.setActive()

Calendar Zoom [doc.daypilot.org]

DayPilot.Calendar Class