javascript-scheduler-zoom.png

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

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

Tutorial

JavaScript Scheduler: Zoom

Angular

Tutorial: