DayPilotDayPilot
Products
Support
DayPilot Code
JavaScript
Angular
React
Vue
ASP.NET
ASP.NET Core
PHP
Spring Boot
Open-Source

Scheduler Web Component Tutorials

Below, 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 Work Order Scheduling (JavaScript, C#, Entity Framework, .NET 10)
ASP.NET Core Work Order Scheduling (JavaScript, C#, Entity Framework, .NET 10)
ASP.NET Core application with drag and drop UI that lets you assign and schedule work orders. Includes a queue of unscheduled tasks, graphical team availability/utilization, context menu with additional actions, dialog for editing work order details.
asp.net-corejavascriptschedulerwork-orderentity-frameworksql-serverc#dotnet10
Mar 23, 2026
Angular: How To Build Annual Leave Scheduling Application (ASP.NET Core Backend)
Angular: How To Build Annual Leave Scheduling Application (ASP.NET Core Backend)
Build an Angular annual leave scheduling application with REST backend created using ASP.NET Core and Entity Framework.
angularangular21schedulertypescriptannual-leaveasp.net-corec#entity-frameworksql-serverdotnet10zoneless
Mar 22, 2026
Tutorial: ASP.NET Core Hotel Room Booking App
Tutorial: ASP.NET Core Hotel Room Booking App
Learn how to build an ASP.NET Core-based hotel room booking management application featuring a drag-and-drop interface, filter functionality, integration with SQL Server and Entity Framework, all visualized using a JavaScript Scheduler component.
asp.net-coresql-serverc#hoteljavascriptentity-frameworksql-serverschedulerfrozenfilteringrow-header-columnsdotnet10reservation
Mar 22, 2026
PHP Restaurant Table Reservation Application (HTML5/JavaScript Frontend)
PHP Restaurant Table Reservation Application (HTML5/JavaScript Frontend)
PHP application that lets you record restaurant table reservations and find a free table using a visual user interface. With MySQL database storage.
phpjavascriptschedulerrestaurantmysqltablereservation
Mar 22, 2026
Angular Scheduler: Read-Only and Edit Mode Switching
Angular Scheduler: Read-Only and Edit Mode Switching
Angular 21 application that shows how to switch the Angular Scheduler (which is in "edit" mode by default) to read-only mode.
angularangular21schedulertypescriptread-onlyzonelessopen-source
Mar 21, 2026
ASP.NET Core Doctor Appointment Scheduling Tutorial (.NET 10)
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).
calendarschedulerjavascriptasp.net-coreentity-frameworksql-serverc#doctordotnet10
Mar 21, 2026
JavaScript Scheduler: Switching Day/Week/Month Views
JavaScript Scheduler: Switching Day/Week/Month Views
How to define day/week/month views for the JavaScript Scheduler. The current view can be switched using custom buttons.
javascriptschedulerzoomdayweekmonthopen-source
Mar 21, 2026
Next.js Scheduler with Horizontal Timeline (Open-Source)
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.
next.jsnextjs16reactreact19typescriptschedulertimelineopen-source
Feb 14, 2026
PHP Hotel Room Booking System (JavaScript/HTML5, MySQL)
PHP Hotel Room Booking System (JavaScript/HTML5, MySQL)
A tutorial that shows how to create a PHP reservation system for hotel rooms with JavaScript/HTML5 frontend. The user interface includes a visual scheduling calendar with drag and drop support. MySQL and SQLite databases.
html5javascriptschedulerphphotelreservationmysqlrow-header-columns
Feb 11, 2026
Angular Scheduler: CSS Themes
Angular Scheduler: CSS Themes
How to change the Angular Scheduler component appearance using a CSS theme. You can use one of the predefined themes or create your own theme using an online tool.
angularangular21schedulercssthemezonelessopen-source
Jan 30, 2026
Improve Angular Scheduler Performance using Lazy Loading (Code Splitting)
Improve Angular Scheduler Performance using Lazy Loading (Code Splitting)
Use Angular lazy loading feature to improve the initial load time of your Scheduler application.
angularangular21schedulerperformancelazy-loadingcode-splittingtypescriptopen-source
Jan 25, 2026
JavaScript Scheduler: Event Types
JavaScript Scheduler: Event Types
How to define your own Scheduler event types and customize the appearance. You can change the event type using a context menu or a modal dialog.
javascriptschedulercustomizationopen-source
Jan 24, 2026
JavaScript Scheduler: Pushing Existing Events Back (Drag and Drop)
JavaScript Scheduler: Pushing Existing Events Back (Drag and Drop)
How to configure the JavaScript Scheduler to automatically move existing events later when a new event is dragged and dropped, to avoid overlaps.
javascriptschedulerdrag-dropopen-source
Jan 24, 2026
React Scheduler: Rendering JSX in Events
React Scheduler: Rendering JSX in Events
How to render custom JSX in events displayed by the React Scheduler component.
reactreact19schedulerjavascriptjsxopen-source
Jan 23, 2026
Angular Scheduler: Highlighting Holidays
Angular Scheduler: Highlighting Holidays
Angular tutorial that shows how to highlight global and resource-specific holidays in the Angular Scheduler UI component.
angularangular21schedulerholidaystypescriptopen-sourcezoneless
Jan 16, 2026
React Scheduler with Horizontal Timeline (Open-Source)
React Scheduler with Horizontal Timeline (Open-Source)
A lightweight, open-source React Scheduler component with a horizontal timeline, drag-and-drop support, customizable appearance, and smooth performance for large data sets.
reactreact19scheduleropen-sourcetimeline
Jan 14, 2026
JavaScript Scheduler: Use Diagonally Split Cells for Check-In/Check-Out
JavaScript Scheduler: Use Diagonally Split Cells for Check-In/Check-Out
Learn how to modify the reservation edges to split the start and end cell diagonally. This provides a visual hint that the check-in and check-out days are only partially occupied.
javascriptschedulerreservationopen-source
Jan 14, 2026
How to Use CSS Themes with the React Scheduler Component
How to Use CSS Themes with the React Scheduler Component
Learn how to change a React Scheduler CSS theme, create and apply your own theme and override individual styles.
reactschedulercssthemejavascriptreact19open-source
Jan 9, 2026
React Scheduler: TypeScript Project
React Scheduler: TypeScript Project
This tutorial shows how to use the React Scheduler component to create a reservation application in React, using TypeScript language.
reactschedulertypescriptreact19open-source
Jan 7, 2026
Next.js Scheduler with DayPilot: A Step-by-Step Guide
Next.js Scheduler with DayPilot: A Step-by-Step Guide
Learn how to incorporate the React Scheduler in a Next.js application, focusing on configuration, event handling, and using the direct API.
next.jsreactschedulertypescriptnextjs16
Jan 6, 2026
Articles 1-20 of 220 Next

Products

Resources

Tools

About Us

DayPilot Pro

HTML5 event calendar/scheduling components. Available for JavaScript/Angular/React/Vue, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars.