DayPilot.Scheduler.zoomLevels

The zoomLevels property (array) specifies the Scheduler zoom levels.

Available since 2019.2.3860.

Declaration

DayPilot.Scheduler.zoomLevels

Default Value

[]

Notes

Each array item defines one zoom level.

• properties (object) is required and contains the Scheduler properties applied when the zoom level becomes active.

• id (string) is optional and lets you activate the zoom level by name.

Additional top-level fields such as name can be present, but they are ignored by the zoom engine.

Each entry inside properties is applied as a DayPilot.Scheduler property.

Named zoom levels are supported since version 2020.2.4345.

If a property value is a function, it is executed during the zoom change and its return value is assigned to the corresponding Scheduler property. The function receives an args object with the following fields:

• args.date - the reference date determined using DayPilot.Scheduler.zoomPosition.

• args.level - the zoom level item being applied.

Examples

JavaScript

const dp = new DayPilot.Scheduler("dp", {
  zoomLevels: [
    {
      name: "Year",
      id: "year",
      properties: {
        scale: "Day",
        cellWidth: 40,
        timeHeaders: [
          { groupBy: "Year" },
          { groupBy: "Month", format: "MMMM" },
          { groupBy: "Day", format: "d" },
        ],
        startDate: args => args.date.firstDayOfYear(),
        days: args => args.date.daysInYear(),
      },
    },
    {
      name: "Month",
      id: "month",
      properties: {
        scale: "CellDuration",
        cellDuration: 720,
        cellWidth: 40,
        timeHeaders: [
          { groupBy: "Month" },
          { groupBy: "Day", format: "ddd d" },
          { groupBy: "Cell", format: "tt" },
        ],
        startDate: args => args.date.firstDayOfMonth(),
        days: args => args.date.daysInMonth(),
      },
    },
  ],
  // ...
});
dp.init();

To activate a zoom level, call DayPilot.Scheduler.zoom.setActive():

dp.zoom.setActive(0);

// or

dp.zoom.setActive("year");

Angular

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

config: DayPilot.SchedulerConfig = {
  zoomLevels: [
    {
      id: "year",
      properties: {
        scale: "Day",
        startDate: args => args.date.firstDayOfYear(),
        days: args => args.date.daysInYear(),
      },
    },
  ],
  // ...
};

React

const zoomLevels = [
  {
    id: "year",
    properties: {
      scale: "Day",
      startDate: args => args.date.firstDayOfYear(),
      days: args => args.date.daysInYear(),
    },
  },
];

<DayPilotScheduler
  zoomLevels={zoomLevels}
  {/* ... */}
/>

Vue

const zoomLevels = [
  {
    id: "year",
    properties: {
      scale: "Day",
      startDate: args => args.date.firstDayOfYear(),
      days: args => args.date.daysInYear(),
    },
  },
];

<DayPilotScheduler
  :zoomLevels="zoomLevels"
  <!-- ... -->
/>

See Also

DayPilot.Scheduler.zoom.setActive()

DayPilot.Scheduler.zoomPosition

Scheduler Zoom [doc.daypilot.org]

DayPilot.Scheduler Class