Zoom in and zoom out in EJ2 JavaScript Scheduler control

18 Mar 20258 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.

var scheduleObj = new ej.schedule.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: function (args) {
    if (args.currentView != "TimelineMonth") {
      this.headerRows = [];
    }
  },
  eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo("#Schedule");

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

<head>
  <title>Schedule Typescript Control</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/32.1.19/ej2-base/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-calendars/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-dropdowns/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-schedule/styles/material.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
  <script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

  <div id="container">
    <div id="Schedule"></div>
  </div>


  <script>
    var ele = document.getElementById('container');
    if (ele) {
      ele.style.visibility = "visible";
    }   
  </script>
  <script src="index.js" type="text/javascript"></script>
</body>

</html>