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

API: zoomLevels.

The examples define Days and Hours zoom levels with matching time headers. Each button calls zoom.setActive() to apply the selected level's properties together.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

Keep zoomLevels in the typed config. The button methods reach the zoom API through this.scheduler.control.

import {Component, ViewChild} from "@angular/core";
import {DayPilot, DayPilotModule, DayPilotSchedulerComponent} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    <button (click)="action0()">Days</button>
    <button (click)="action1()">Hours</button>
    <daypilot-scheduler [config]="config" #scheduler></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  @ViewChild("scheduler") scheduler!: DayPilotSchedulerComponent;
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    zoomLevels: [{name: "Days", properties: {scale: "Day", cellWidth: 40, timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}}, {name: "Hours", properties: {scale: "Hour", cellWidth: 40, timeHeaders: [{groupBy: "Day"}, {groupBy: "Hour"}]}}]
  };
  async action0() {
    const dp = this.scheduler.control;
    dp.zoom.setActive(0);
  }
  async action1() {
    const dp = this.scheduler.control;
    dp.zoom.setActive(1);
  }
}

Angular Tutorial

• Angular Scheduler: Zoom

React

Pass zoomLevels as a prop and use the control retained by controlRef in the Days and Hours click handlers.

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

export default function SchedulerExample() {
  const scheduler = useRef(null);
  async function action0() {
    const dp = scheduler.current;
    dp.zoom.setActive(0);
  }
  async function action1() {
    const dp = scheduler.current;
    dp.zoom.setActive(1);
  }
  return <div>
    <button onClick={action0}>Days</button>
    <button onClick={action1}>Hours</button>
    <DayPilotScheduler
      controlRef={control => { scheduler.current = control; }}
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
      zoomLevels={[{name: "Days", properties: {scale: "Day", cellWidth: 40, timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}}, {name: "Hours", properties: {scale: "Hour", cellWidth: 40, timeHeaders: [{groupBy: "Day"}, {groupBy: "Hour"}]}}]}
    />
  </div>;
}

React Tutorial

• React Scheduler: Timeline Zoom

Vue

Bind :zoomLevels to the script array. The two @click functions use the Scheduler template ref to select a zoom level.

<script setup>
import {ref} from "vue";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const scheduler = ref(null);
const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
const zoomLevels = [{name: "Days", properties: {scale: "Day", cellWidth: 40, timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}}, {name: "Hours", properties: {scale: "Hour", cellWidth: 40, timeHeaders: [{groupBy: "Day"}, {groupBy: "Hour"}]}}];
async function action0() {
  const dp = scheduler.value.control;
  dp.zoom.setActive(0);
}
async function action1() {
  const dp = scheduler.value.control;
  dp.zoom.setActive(1);
}
</script>

<template>
  <div>
    <button @click="action0">Days</button>
    <button @click="action1">Hours</button>
    <DayPilotScheduler ref="scheduler"
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :zoomLevels="zoomLevels"
    />
  </div>
</template>