DayPilot.Scheduler.zoomLevels

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

Available since 2019.2.3860.

Items

Array item properties:

• properties (object) - an object with properties to be applied; required
• id (string) - optional zoom level ID

Each item needs to contain an object called properties which specifies the values to be set during a zoom level change. It can contain other properties at the top level (such "name" in the example below) which will be ignored.

Each of the properties items will be applied as a DayPilot.Scheduler property. 

Named zoom levels are supported since version 2020.2.4345.

If the item is a function, it will be executed and the result will be assigned to the specified Scheduler property. The function will receive an args object with the following structure as a parameter:

• args.date - the reference date (determined using DayPilot.Scheduler.zoomPosition).
• args.level - the zoom level item that is being applied

Default Value

[]

Example

dp.zoomLevels = [
  {
    name: "Year",
    id: "year",
    properties: {
      scale: "Day",
      cellWidth: 40,
      timeHeaders: [{groupBy: "Year"}, {groupBy: "Month", format: "MMMM"}, {groupBy: "Day", format: "d"}],
      startDate: function (args) { return args.date.firstDayOfYear(); },
      days: function (args) { return 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: function(args) { return args.date.firstDayOfMonth(); },
      days: function(args) { return args.date.daysInMonth();},
    }
  },
];

To activate a zoom level, use zoom.setActive() method:

dp.zoom.setActive(0);

// or

dp.zoom.setActive("year");