Zoom

The Scheduler supports switching between zoom levels.

You can use the zoom API to implement timeline zoom (change the time units and headers) or magnification (dimensions of elements, font size).

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

You can use the zoomLevels property to define a set of zoom levels. Each level specifies a set of properties that will be applied when this zoom level is active. Each property can be either a fixed value or a function that calculates the value dynamically.

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