DayPilotBelow, 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).
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.
Sep 14, 2026
React Scheduler: How to Manage Resources
Explore the built-in UI elements that let your users manage (create, edit, move, delete) resources displayed using the React Scheduler component.
Jul 31, 2026
JavaScript Scheduler: How to Unschedule Events
When removing events from the scheduler, it is possible to remove them completely or to move them to a queue of unscheduled tasks or a row with unassigned events (while keeping the scheduled time).
Jul 31, 2026
JavaScript Scheduler: Event Placement Strategies
An overview of Scheduler settings that let you control the vertical event position within rows. Includes custom sorting, forcing a specific line within a row, dedicated lines, keeping related events together using virtual containers.
Jul 29, 2026
Vue Scheduler: Row Header Templates
How to customize the Vue Scheduler row header using Vue templates: add icons, badges, buttons and Vue components.
Jul 15, 2026
React Scheduler: Rendering JSX in Time Header and Upper-Left Corner
How to render custom React JSX components in the Scheduler time header and upper-left corner.
Jul 15, 2026
React Scheduler: Rendering JSX Components in Row Headers
How to insert React components or direct JSX into Scheduler row headers.
Jul 15, 2026
Vue Scheduler: Availability/Utilization Histogram
How to calculate resource utilization percentage and display a histogram at the top of the Vue Scheduler component.
Jun 22, 2026
Angular 22 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 22 calendar/scheduler application.
Jun 15, 2026
Angular Scheduler: Row Filtering
Angular application with real-time filtering of Scheduler component rows (by name, by number of events).
Jun 5, 2026
React Scheduler: External Drag and Drop
How to activate external items so they can be dragged to the React Scheduler component.
Jun 2, 2026
JavaScript Scheduler: Displaying Holidays
How to configure the JavaScript Scheduler component to display global and resource-specific holidays and prevent user actions in holiday cells.
May 31, 2026
PHP Shift Planning System (JavaScript/HTML5 Frontend, MySQL Database)
A tutorial that shows how to create a PHP shift planning system - a web application that lets you manage shifts for multiple locations using a visual JavaScript scheduler component.
May 27, 2026
Tutorial: Machine/Production Job Scheduling Web Application (Spring/Java)
Tutorial with source code - a web application for scheduling dependent machine/production jobs, implemented in Spring Boot (Java).
May 19, 2026
Angular Scheduler: Row Searching Tutorial
How to find, focus and highlight a Scheduler row that matches the search criteria.
May 18, 2026
Angular Scheduler: Undo/Redo
Angular tutorial that shows how to implement undo/redo functionality for the DayPilot Lite Angular Scheduler UI component.
May 18, 2026
JavaScript Scheduler: Select a Time Range over Multiple Rows
The JavaScript Scheduler allows selecting a time range over multiple adjacent rows at once.
May 14, 2026
JavaScript Scheduler: Copy Multiple Events
Copy multiple Scheduler events using copy & paste or using drag and drop.
May 14, 2026
Angular Scheduler: Event Links
Angular tutorial that shows how to link related events in the Angular Scheduler UI component.
May 14, 2026
Vue Timesheet
Learn how to use the Vue Scheduler component to add a drag-and-drop timesheet UI to your Vue application, calculate daily totals and style the timesheet using CSS.
May 14, 2026