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.

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.
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.
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.
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.
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.
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 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.
Articles 1-7 of 7