Calendar/Scheduler Zoom Tutorials

Learn how to implement zoom in your application when using the JavaScript Calendar or Scheduler component.

The built-in zoom feature supports quick switching between predefined zoom levels. It can be used to magnify the calendar grid or to change the timeline resolution.

Users can change the zoom level using a slider component or plus/minus buttons.

JavaScript Calendar: Use the Zoom Feature to Magnify the Calendar Grid

You can use the zoom feature in the Calendar to define custom magnification levels. Users can zoom using a slider or the [-] and [+] buttons.

May 20, 2026

JavaScript Scheduler: Switching Day/Week/Month Views

How to define day/week/month views for the JavaScript Scheduler. The current view can be switched using custom buttons.

javascript scheduler zoom day week month open-source

Mar 21, 2026

React Scheduler: Timeline Zoom

How to add a zoom feature to the React Scheduler timeline. You can change the zoom level (and timeline resolution) using a "range" control and "zoom in" and "zoom out" buttons.

react scheduler zoom timeline javascript react19 open-source

Dec 15, 2025

JavaScript Scheduler: Zoom (Open-Source)

How to change the zoom level of the JavaScript Scheduler component in real time using a slider and (+)/(-) buttons.

javascript scheduler zoom html5 open-source

Dec 1, 2025

Angular Scheduler: Zoom

How to add a zoom feature to the Angular Scheduler component.

angular angular15 scheduler zoom typescript

Dec 8, 2022

Articles 1-5 of 5

Products

Resources

Tools

About Us

Contact

DayPilot Pro

HTML5 event calendar/scheduling components. Available for JavaScript/Angular/React/Vue, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars.