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).
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.
Sep 21, 2026
Vue Scheduler: How to Display Holidays
How to display global and row-specific holidays in the Vue Scheduler. Optionally, disable the drag and drop operations for the holiday cells.
Sep 20, 2026
React Scheduler: Full Screen Layout
How to integrate the React Scheduler component into a full screen page layout. The full screen mode will allow rendering optimizations to be applied correctly and avoid a confusing duplicate vertical scrollbar.
Sep 20, 2026
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.
Sep 18, 2026
React Scheduler: How to Display Slot Details using Background Events
How to move the React Scheduler events to the background so they can be used to display additional time slot information.
Sep 17, 2026
React: Milestone Scheduler
How to display milestones in the React Scheduler component. You can use custom shapes, icons, colors and connect the milestones using links.
Sep 17, 2026
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