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).

JavaScript Scheduler: Highlighting Related Events
JavaScript Scheduler: Highlighting Related Events
How to highlight related Scheduler events on hover or click.
javascriptschedulerrelated-events
Apr 12, 2026
JavaScript Scheduler: Resource Context Menu
JavaScript Scheduler: Resource Context Menu
How to add context menu to resources/rows of the JavaScript Scheduler (edit, delete, add child resource).
javascriptschedulercontext-menu
Apr 11, 2026
JavaScript Scheduler: Limited Drag and Drop Range
JavaScript Scheduler: Limited Drag and Drop Range
How to limit the horizontal (date/time) position of an event and display the allowed range using event versions.
javascriptschedulerdrag-drop
Apr 11, 2026
HTML5 Doctor Appointment Scheduling (JavaScript/PHP/MySQL)
HTML5 Doctor Appointment Scheduling (JavaScript/PHP/MySQL)
HTML5 web application for managing doctor appointments. Includes public and administration interface. Patients can request an appointment in one of the slots predefined using the administration interface. Implemented in PHP/MySQL.
html5javascriptdoctorappointmentcalendarschedulermysqlphpsqlite
Apr 10, 2026
ASP.NET Core Scheduler (.NET 10)
ASP.NET Core Scheduler (.NET 10)
How to use JavaScript/HTML5 Scheduler control from DayPilot Pro package in an ASP.NET Core web application.
html5javascriptschedulerasp.net-corec#dotnet10entity-frameworksql-serversqlitefrozenrow-header-columns
Apr 10, 2026
Tutorial: JavaScript Scheduler Time Header Customization
Tutorial: JavaScript Scheduler Time Header Customization
How to customize JavaScript Scheduler time headers using built-in groups, custom HTML, and active areas.
javascriptschedulercustomizationtime-headeractive-areas
Apr 9, 2026
React Scheduler: Rendering JSX in Time Header and Upper-Left Corner
React Scheduler: Rendering JSX in Time Header and Upper-Left Corner
How to render custom React JSX components in the Scheduler time header and upper-left corner.
reactreact19schedulerjavascriptjsx
Apr 9, 2026
React: Activity Planning System (Node, Express, PostgreSQL)
React: Activity Planning System (Node, Express, PostgreSQL)
Plan activities for multiple areas/departments side by side. Use drag and drop to schedule events and milestones.
reactreact19schedulernodepostgresqlexpressjavascriptactivity
Apr 8, 2026
Tutorial: Machine/Production Job Scheduling Web Application (Spring/Java)
Tutorial: Machine/Production Job Scheduling Web Application (Spring/Java)
Tutorial with source code - a web application for scheduling dependent machine/production jobs, implemented in Spring Boot (Java).
javascripthtml5schedulermachineproductionspring-bootjavalinks
Apr 8, 2026
PHP Tennis Court Reservation (HTML5/JavaScript Frontend, MySQL Database)
PHP Tennis Court Reservation (HTML5/JavaScript Frontend, MySQL Database)
Simple web application that displays tennis court availability and lets the users create a reservation using drag and drop. Includes a PHP project with sample MySQL/SQLite database.
html5javascripttenniscourtreservationschedulerphpmysql
Apr 7, 2026
ASP.NET Core Shift Planning (Entity Framework, .NET 10)
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.
asp.net-corejavascriptschedulershiftentity-frameworksql-serverc#dotnet10links
Apr 7, 2026
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
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.