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).
Vue Scheduler: Undo/Redo for Drag and Drop Actions
How to add "Undo" and "Redo" buttons to the Vue Scheduler. The UndoService maintains history of changes and allows unlimited undo/redo.
Nov 9, 2026
Angular Scheduler: Event Links
Angular tutorial that shows how to link related events in the Angular Scheduler UI component.
Nov 3, 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.
Nov 3, 2026
React Scheduler: Visually Connect Tasks using Links
Links can be used to display relationships between tasks in the React Scheduler UI component. Learn about the most common use cases and configuration options.
Nov 3, 2026
JavaScript Scheduler: Keyboard Navigation
How to enable keyboard navigation in the JavaScript Scheduler component. Use the keyboard to focus cells in the grid, select a time range and edit existing events.
Nov 3, 2026
JavaScript Scheduler: How to Export HTML to Image
How to configure the image export of the JavaScript Scheduler to include rich HTML content.
Nov 1, 2026
Angular Scheduler: Freeze Headers during Export to Excel (XLSX)
How to export the Scheduler view to Angular, including frozen time headers (X axis) and row headers (Y axis). Add a custom row with utilization summary to the frozen headers.
Oct 28, 2026
JavaScript Scheduler: Resource Utilization Chart for Rows
How to dynamically calculate the utilization percentage for each resource and display a chart with utilization details in the Scheduler row headers.
Oct 28, 2026
JavaScript Scheduler: Find Next Free Slot
Add an icon to the JavaScript Scheduler row headers that will let users scroll to the next free slot in the row.
Oct 26, 2026
React Scheduler: External Drag and Drop
How to activate external items so they can be dragged to the React Scheduler component.
Oct 24, 2026
Angular Scheduler: Row Filtering
Angular application with real-time filtering of Scheduler component rows (by name, by number of events).
Oct 24, 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).
Oct 24, 2026
React JSX Components in Scheduler Grid Cells
How to render custom React JSX component in the Scheduler grid cells.
Oct 22, 2026
Angular Scheduler: Rendering Angular Components Inside Events
How to add custom components to events displayed in the Angular Scheduler.
Oct 22, 2026
Angular Scheduler: Add Angular Components to Row Headers
Learn how to insert custom components in Angular Scheduler row headers.
Oct 22, 2026
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