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
JavaScript Tutorial
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
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;