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: 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
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