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).
Next.js Scheduler with Horizontal Timeline (Open-Source)
Build a Next.js scheduler with a horizontal timeline (one year, day-by-day) featuring a date picker with scroll synchronization, a timeline header context menu for bulk day actions, and column highlighting.
Sep 28, 2026
Vue Scheduler: Build a Reservation Application in 5 Minutes
Vue.js application for scheduling resource reservations. Built using a customizable Scheduler UI component - flexible timeline, drag and drop support.
Sep 26, 2026
Next.js Scheduler: How to Show Planned vs. Actual Task Durations using Task Versions
How to build a visual schedule in Next.js that displays the planned version of a task above its actual version. This makes it easy to compare durations and track deviations from the original plan.
Sep 24, 2026
React Scheduler: PDF Export/Printing
How to export the current React Scheduler view to a multi-page PDF document with a specified number of rows per page.
Sep 22, 2026
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.
Sep 22, 2026
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