Zoom

The Scheduler supports switching between zoom levels. The zoom levels can be defined as a set of properties/calculated values.

There is no built-in zoom UI control but you can easily create your own, e.g using HTML5 range <input> control.

Available since 2019.2.3860.

JavaScript Scheduler

Example:

var dp = new DayPilot.Scheduler("dp");
dp.zoomLevels = [
  {
    name: "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",
    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();},
    }
  },
];


// ...

dp.init();

// ...

dp.zoom.setActive(1);

See Also

• DayPilot.Scheduler.zoomLevels
• DayPilot.Scheduler.zoomPosition
• DayPilot.Scheduler.zoom.setActive()

JavaScript Tutorial

JavaScript Scheduler: Zoom

Angular Scheduler

In the Angular Scheduler component, you can use the following properties of the config object to configure the zoom feature:

• zoomLevels - defines the array of zoom levels
• zoomPosition - defines the zoom anchor
• zoom - the current zoom level

Example:

config: DayPilot.SchedulerConfig = {
  zoom: 0,
  zoomPosition: "left",
  zoomLevels: [
    {
      name: "Year",
      properties: {
        scale: "Day",
        cellWidth: 40,
        timeHeaders: [{groupBy: "Year"}, {groupBy: "Month", format: "MMMM"}, {groupBy: "Day", format: "d"}],
        startDate: args => { return args.date.firstDayOfYear(); },
        days: args => { return args.date.daysInYear(); },
      }
    },
    // ...
  ]

};

The zoom property of the config can be used to change the zoom level:

this.config.zoom = 1;

Angular Tutorial

• Angular Scheduler: Zoom

React Scheduler

In the React Scheduler component, you can use the zoomLevel, zoomPosition and zoom attributes of the <DayPilotScheduler> JSX tag to customize the zoom:

import React, {Component} from 'react';
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

class Scheduler extends Component {

  constructor(props) {
    super(props);

    this.state = {
      zoom: 0,
      // ...
    };
  }


  render() {
    return (
      <div>
        <DayPilotScheduler
          zoom={this.state.zoom}
          zoomPosition={"middle")
          zoomLevels={[
            {
              name: "Days",
              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(),
              }
            },
            // ...
          ]}
        />
      </div>
    );
  }
}

export default Scheduler;

React Tutorial

• React Scheduler: Timeline Zoom