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

Scheduler Web Component Tutorials

Below, you can find a list of tutorials that show how to use the Scheduler UI component to create scheduling, reservation and project management web applications.

All tutorials include a downloadable project with source code which you can use to build your own solution. The tutorial text explains how to install, configure and customize the scheduler component.

See also Scheduler UI Builder - an online configurator application that lets you customize the Scheduler and generate a web project as a zip file (JavaScript/HTML5, Angular, React and Vue.js projects are supported).

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
JavaScript Scheduler: Date Picker in the Upper-Left Corner
JavaScript Scheduler: Date Picker in the Upper-Left Corner
How to embed a calendar icon in the upper-left corner of DayPilot Scheduler, hook it up to an inline DatePicker, and update the visible timeline.
javascript scheduler datepicker open-source
Dec 14, 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
How to Add Custom Progress Bar to React Scheduler Events
How to Add Custom Progress Bar to React Scheduler Events
The React Scheduler component allows customization of event content. This tutorial shows how to add a custom progress bar using event active areas.
react scheduler jsx javascript react19 open-source
Dec 7, 2025
JavaScript Scheduler: Use Custom Button to Scroll to Next Event
JavaScript Scheduler: Use Custom Button to Scroll to Next Event
How to implement Previous and Next buttons that find the nearest event outside the current viewport of the JavaScript Scheduler component.
javascript scheduler open-source
Dec 2, 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: Zoom (Open-Source)
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 21 Scheduler Quick Start Project
Angular 21 Scheduler Quick Start Project
A quick-start project with a pre-configured Angular Scheduler component. You can download this project and use it as a starting point for your own Angular 21 calendar/scheduler application.
angular scheduler typescript quick-start angular21
Dec 1, 2025
JavaScript Scheduler: Use Diagonally Split Cells for Check-In/Check-Out
JavaScript Scheduler: Use Diagonally Split Cells for Check-In/Check-Out
Learn how to modify the reservation edges to split the start and end cell diagonally. This provides a visual hint that the check-in and check-out days are only partially occupied.
javascript scheduler reservation open-source
Nov 3, 2025
React Scheduler: TypeScript Project
React Scheduler: TypeScript Project
This tutorial shows how to use the React Scheduler component to create a reservation application in React, using TypeScript language.
react scheduler typescript react19 open-source
Oct 21, 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
JavaScript Scheduler: How to Integrate a Date Picker
JavaScript Scheduler: How to Integrate a Date Picker
How to link the JavaScript Scheduler component to a date picker that can change the visible date.
javascript scheduler navigator date-picker open-source
Oct 10, 2025
Vue Scheduler: Undo/Redo for Drag and Drop Actions
Vue Scheduler: Undo/Redo for Drag and Drop Actions
How to add "Undo" and "Redo" buttons to the Vue Scheduler. The UndoService maintains history of changes and allows unlimited undo/redo.
vuejs scheduler undo javascript open-source
Oct 6, 2025
JavaScript Scheduler: Read-Only Mode
JavaScript Scheduler: Read-Only Mode
How to switch the JavaScript Scheduler to read-only mode (disables all drag-and-drop) and how to disable drag-and-drop for specific events.
javascript scheduler read-only open-source
Oct 5, 2025
JavaScript Scheduler: Event Types
JavaScript Scheduler: Event Types
How to define your own Scheduler event types and customize the appearance. You can change the event type using a context menu or a modal dialog.
javascript scheduler customization open-source
Oct 5, 2025
JavaScript Scheduler: Alternating Column Colors
JavaScript Scheduler: Alternating Column Colors
How to set alternating colors for JavaScript Scheduler columns (time headers and grid).
javascript html5 scheduler open-source
Oct 4, 2025
How to Add Interactive Elements to Vue Scheduler Events Using Templates
How to Add Interactive Elements to Vue Scheduler Events Using Templates
Vue templates supported by the Scheduler component allow you to add dynamic content to events, such as checkboxes, drop-down lists, or attachment upload buttons.
javascript vuejs vue3 scheduler template open-source
Oct 2, 2025
Vue Scheduler: Using Cell Templates to Show Slot Prices
Vue Scheduler: Using Cell Templates to Show Slot Prices
How to use Vue templates to display dynamic reservation prices in each Scheduler time slot. Slot prices are defined using pricing plans independently for each day of the week.
vuejs vue3 scheduler template javascript open-source
Oct 2, 2025
React JSX Components in Scheduler Grid Cells
React JSX Components in Scheduler Grid Cells
How to render custom React JSX component in the Scheduler grid cells.
react react19 jsx scheduler customization javascript open-source
Oct 2, 2025
Articles 1-20 of 219 Next

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.