How to zoom in and zoom out the schedule using the mouse scrolling event
This knowledge base article explains how to zoom in and out the schedule using the mouse scrolling event and timescale in JavaScript Scheduler.
Zoom-in and Zoom-out
Step 1: Create a default JS Scheduler with the Timeline views by referring to the following link.
https://ej2.syncfusion.com/javascript/documentation/schedule/getting-started/#getting-started
Step 2: Create an object for the Schedule by using the following code.
var schObj = document.querySelector('.e-schedule').ej2_instances[0];
Step 3: Use the following code to Zoom in and out the schedule when performing the mouse scroll operation.
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;
}
}
});
Step 4: Use the following code to reset the header rows when performing the navigation operation from Timeline Month view to Timeline views.
navigating: function (args) {
if (args.currentView != "TimelineMonth") {
this.headerRows = [];
}
}
Step 5: Run the sample and scroll the mouse wheel, the Zoom in and Zoom out operations will be performed on the Scheduler.
Example: Zoom in and Zoom out the Scheduler on mouse scroll action
