Zoom in and zoom out the schedule in EJ2 TypeScript Schedule control

27 Apr 20238 minutes to read

By default Scheduler component doesn’t have the Zoom in/out support. Using the timeScale and headerRows properties of our scheduler, we can achieve this.

Refer to the following code example.

import { Schedule, Week, Month, Agenda, TimelineViews, TimelineMonth, NavigatingEventArgs } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';

Schedule.Inject(Month, Week, Agenda, TimelineViews, TimelineMonth);
let scheduleObj: Schedule = new Schedule({
  height: "600px",
  width: "100%",
  selectedDate: new Date(2020, 2, 12),
  currentView: "TimelineWeek",
  views: ["TimelineDay", "TimelineWeek", "TimelineMonth"],
  timeScale: {
    enable: true,
    interval: 60,
    slotCount: 2
  },
   navigating: (args: NavigatingEventArgs) => {
    if (args.currentView != "TimelineMonth") {
      scheduleObj.headerRows = [];
    }
  },
  eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');

window.addEventListener("wheel", event => {
  const delta = Math.sign(event.deltaY);
  if (scheduleObj.currentView === "TimelineMonth") {
    var len = scheduleObj.headerRows.length;
    if (delta < 0) {
      if (len == 0) {
        scheduleObj.setProperties({
          headerRows: [{ option: "Date" }]
        });
      } else if (len == 1) {
        scheduleObj.setProperties({
          headerRows: [{ option: "Week" }, { option: "Date" }]
        });
      } else if (len == 2) {
        scheduleObj.setProperties({
          headerRows: [
            { option: "Month" },
            { option: "Week" },
            { option: "Date" }
          ]
        });
      } else if (len == 3) {
        scheduleObj.setProperties({
          headerRows: [
            { option: "Year" },
            { option: "Month" },
            { option: "Week" },
            { option: "Date" }
          ]
        });
      }
    } else if (delta > 0) {
      if (len == 2) {
        scheduleObj.setProperties({
          headerRows: [{ option: "Date" }]
        });
      } else if (len == 3) {
        scheduleObj.setProperties({
          headerRows: [{ option: "Week" }, { option: "Date" }]
        });
      } else if (len == 4) {
        scheduleObj.setProperties({
          headerRows: [
            { option: "Month" },
            { option: "Week" },
            { option: "Date" }
          ]
        });
      } else if (len == 5) {
        scheduleObj.setProperties({
          headerRows: [
            { option: "Year" },
            { option: "Month" },
            { option: "Week" },
            { option: "Date" }
          ]
        });
      }
    }
  } else {
    if (delta > 0 && scheduleObj.timeScale.slotCount > 1) {
      scheduleObj.timeScale.slotCount -= 1;
    } else if (delta < 0 && scheduleObj.timeScale.slotCount <= 8) {
      scheduleObj.timeScale.slotCount += 1;
    }
  }
});
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Schedule Typescript Component</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Schedule Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet" />    
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-schedule/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>

<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
        <div id="container">
            <div id="Schedule"></div>
        </div>
</body>

</html>