Zoom in and zoom out the schedule in EJ2 JavaScript 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.
index.js
index.html
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 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.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-calendars/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet">    
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-schedule/styles/material.css" rel="stylesheet">
    
    

<script src="https://cdn.syncfusion.com/ej2/23.2.4/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>