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).
ASP.NET Core Timesheet (.NET 10, SQL Server, Entity Framework)
How to create a drag-and-drop timesheet application in ASP.NET Core (.NET 10) with SQL Server and Entity Framework.
Oct 19, 2026
JavaScript Scheduler: Expandable Event Groups
How to group related events into a single event in the JavaScript Scheduler component and add expand [+] and collapse [-] icons that allow changing the event visibility.
Oct 18, 2026
JavaScript Scheduler: A Guide to Touch and Mobile Support
Build a touch-friendly JavaScript Scheduler with DayPilot. Create, move and resize events, open an event menu, and edit dates and resources on phones, tablets and desktop browsers.
Oct 18, 2026
Angular Scheduler: How to Add Components to the Upper-Left Corner
How to add a custom Angular component to the upper-left corner of the Scheduler.
Oct 16, 2026
ASP.NET Core Shift Planning (Entity Framework, .NET 10)
This tutorial explains how to create a visual ASP.NET Core application for scheduling shifts (multiple locations and employees). It uses a modern UI that lets you manage shifts using drag and drop.
Oct 16, 2026
React Scheduler: Timeline Zoom
How to add a zoom feature to the React Scheduler timeline. You can change the zoom level (and timeline resolution) using a "range" control and "zoom in" and "zoom out" buttons.
Oct 15, 2026
Angular Scheduler: Add Angular Components to Row Headers
Learn how to insert custom components in Angular Scheduler row headers.
Oct 15, 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 15, 2026
JavaScript Scheduler: Events as Drag and Drop Target
How to configure Scheduler event boxes to accept items from an external list (drag and drop). Implemented using standard HTML5 drag and drop API.
Oct 14, 2026
Angular Scheduler: Rendering Angular Components Inside Events
How to add custom components to events displayed in the Angular Scheduler.
Oct 14, 2026
React Scheduler: How to Enable Undo/Redo
The React Scheduler component can record all drag and drop actions and allow unlimited undo/redo. See how to add undo/redo buttons and display the full history.
Oct 14, 2026
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