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: Swapping Events (Drag and Drop)
How to implement event swapping using drag an drop in the JavaScript Scheduler component. Detect events at the target position and move the target event to the source position after drop. The Scheduler provides real-time feedback during dragging.
Oct 10, 2026
React Scheduler with Horizontal Timeline (Open-Source)
Open-source React Scheduler with a readable year-view timeline, theme switching, editable events, and custom event rendering.
Oct 10, 2026
JavaScript Scheduler: Use Shift+Drag to Start Selection over Events
How to override the drag behavior to allow time range selection to be started anywhere in the Scheduler grid (over cells or events).
Oct 10, 2026
React Scheduler: Large Datasets and Performance
What things to look at when you are not happy with the React Scheduler component performance.
Oct 9, 2026
JavaScript Scheduler: Dragging Items from Events
How to drag items from events out of the Scheduler and drop it on a custom drop target. The source event data object is attached to the dragged item and can be read on drop.
Oct 9, 2026
JavaScript Scheduler: Skip Non-Business Cells during Drag and Drop
How to add custom logic to the Scheduler component that skips non-business cells during drag and drop operations (event creating, event resizing, event moving).
Oct 6, 2026
ASP.NET Core Doctor Appointment Scheduling Tutorial (.NET 10)
ASP.NET Core application for doctor appointment scheduling. The application works with three roles: manager (define available appointment slots), patient (request an appointment using one of the available slots), and doctor (manage existing appointments).
Oct 6, 2026
Angular Scheduler UI with Spring Boot Backend (Java)
Angular project that shows how to create Scheduler UI using DayPilot Pro for Angular. Includes a backend REST/JSON application implemented using Spring Boot (Java).
Oct 5, 2026
ASP.NET Core Production Workflow Scheduling Tutorial
Schedule manufacturing jobs by assigning tasks to individual machines using drag and drop. Includes an ASP.NET Core application for download, data is stored in an SQL Server database.
Oct 5, 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.
Oct 5, 2026
Angular Scheduler: Infinite Scrolling
How to enable infinite scrolling for the Angular Scheduler component. Includes configuration hints and tweaks that improve Scheduler responsiveness and user experience.
Oct 2, 2026
Angular Scheduler: Next/Previous Buttons
Angular project that shows how to implement next/previous/today buttons that change the month displayed by the Angular Scheduler component.
Oct 1, 2026
Vue.js Scheduler Quick Start Tutorial
Vue.js project that includes Scheduler component with basic configuration and all required boilerplate code.
Sep 29, 2026
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.
Sep 29, 2026
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.
Sep 29, 2026
Angular Scheduler: How to Disable Time Slots
How to disable selected time slots of the Angular Scheduler using drag and drop.
Sep 29, 2026
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