DayPilotDayPilot
Products
Support
DayPilot Code
JavaScript
Angular
React
Vue
ASP.NET
ASP.NET Core
PHP
Spring Boot
Open-Source

Timeline Component Tutorials

The timeline scheduling component displays events on a continuous time axis with flexible resolution - from minutes to months. It’s ideal for resource-based planning (rooms, machines, people) or time-centric views, with support for horizontal and vertical timelines, zooming, and fully customizable time cells. The tutorials below show how to build and tailor timeline UIs in JavaScript, React, Angular, and Vue.

React Scheduler: Timeline Zoom
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
Vue Scheduler with Horizontal Timeline (Open-Source)
Vue Scheduler with Horizontal Timeline (Open-Source)
Build a horizontal, resource-based timeline using the open-source Vue Scheduler and customize event appearance with Vue templates and CSS.
vuejs vue3 javascript scheduler open-source timeline
Dec 13, 2025
React Scheduler with Horizontal Timeline (Open-Source)
React Scheduler with Horizontal Timeline (Open-Source)
A lightweight, open-source React Scheduler component with a horizontal timeline, drag-and-drop support, customizable appearance, and smooth performance for large data sets.
react react19 scheduler open-source timeline
Dec 11, 2025
Angular Scheduler with Horizontal Timeline (Open-Source)
Angular Scheduler with Horizontal Timeline (Open-Source)
Plan and visualize your resources in Angular with this lightweight, Apache‑licensed Scheduler - with a horizontal timeline, multi‑row time headers, CSS themes, dynamic event content and large‑dataset performance.
angular scheduler angular21 open-source timeline
Dec 1, 2025
JavaScript Scheduler with Horizontal Timeline (Open-Source)
JavaScript Scheduler with Horizontal Timeline (Open-Source)
Use the open-source JavaScript Scheduler to build a horizontal timeline for multiple resources: adjust the appearance, add custom controls, configure the timeline, show a context menu, and switch the visible month.
javascript scheduler open-source timeline
Oct 10, 2025
Vue Scheduler with Vertical Timeline
Vue Scheduler with Vertical Timeline
How to use the Vue Calendar component to create a scheduler UI with a vertical timeline and resources displayed as columns. Configure advanced features, such as responsive layout, column groups, and content customization using Vue templates.
vuejs calendar resource-calendar javascript vue3 timeline
Nov 29, 2024
Angular Scheduler: Timeline Customization
Angular Scheduler: Timeline Customization
How to create a custom timeline for the Angular Scheduler component. The manual mode lets you create the timeline by defining individual time cells.
angular angular18 scheduler timeline
Sep 10, 2024
React Scheduler with a Vertical Timeline
React Scheduler with a Vertical Timeline
How to create dynamic calendars and schedulers with a vertical timeline, customizable time cells, and resource display in React.
react react18 calendar timeline resource-calendar
Jan 29, 2024
Articles 1-8 of 8

Products

Resources

Tools

About Us

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.