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

Available since 2023.1.5541.


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.Calendar property

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

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

Default Value



const dp = new DayPilot.Calendar("dp", {
  zoomLevels: [
        properties: {
            cellHeight: 20,
            headerHeight: 30,

            cellHeight: 25,
            headerHeight: 35,
        properties :{
            cellHeight: 30,
            headerHeight: 40,

  // ...



See also