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

AJAX Scheduler for JavaScript/PHP
AJAX Scheduler for JavaScript/PHP
This tutorial shows how to use DayPilot AJAX Scheduler to create a JavaScript/HTML5 event scheduler application with PHP backend.
Angular Hotel Room Booking Tutorial (PHP/MySQL)
Angular Hotel Room Booking Tutorial (PHP/MySQL)
Angular hotel room reservation application. The user interface supports managing rooms (create, edit, delete, change status) and reservations (create, edit, move, delete, change status). Includes a PHP/MySQL backend with token-based authentication.
Angular Restaurant Table Reservation (PHP/MySQL)
Angular Restaurant Table Reservation (PHP/MySQL)
Angular application that lets you manage restaurant table reservations. Includes a PHP/MySQL backend.
Angular Scheduler: Date Navigation
Angular Scheduler: Date Navigation
Angular 11 application that uses DayPilot Navigator component as a date picker for the Scheduler.
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.
Angular Scheduler: Displaying Event Phases
Angular Scheduler: Displaying Event Phases
Angular 11 project that shows how to display events split into phases in the Scheduler component.
Hotel Room Booking Tutorial (ASP.NET, C#, VB, SQL Server)
Hotel Room Booking Tutorial (ASP.NET, C#, VB, SQL Server)
ASP.NET web application for managing hotel room reservations using drag and drop. Includes sample code in C# and VB. SQL Server database.
Using JavaScript/HTML5 Scheduler in Spring Boot (Java)
Using JavaScript/HTML5 Scheduler in Spring Boot (Java)
Source code of a Spring Boot web application that uses HTML5/JavaScript scheduler to display events for multiple resources.
React Scheduler Tutorial
React Scheduler Tutorial
Add a scheduler UI component to your React application in a few easy steps. Fast data loading, drag and drop, appearance customization options.
PHP Annual Leave Scheduling (JavaScript/HTML5 Frontend, MySQL Database)
PHP Annual Leave Scheduling (JavaScript/HTML5 Frontend, MySQL Database)
PHP web application that allows to plan annual leave days using a visual HTML5 scheduler component.
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.
JavaScript Scheduler: Swapping Events (Drag and Drop)
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.
JavaScript Scheduler: Keyboard Navigation
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.
HTML5 Scheduler
HTML5 Scheduler
HTML5 scheduler with drag and drop support. Displays a timeline for multiple resources grouped by category. Sample PHP project with AJAX backend implementation. Uses MySQL to store the scheduler data.
PHP Shift Planning System (JavaScript/HTML5 Frontend, MySQL Database)
PHP Shift Planning System (JavaScript/HTML5 Frontend, MySQL Database)
A tutorial that shows how to create a PHP shift planning system - a web application that lets you manage shifts for multiple locations using a visual JavaScript scheduler component.
HTML5 Hotel Room Booking (JavaScript, PHP, MySQL)
HTML5 Hotel Room Booking (JavaScript, PHP, MySQL)
Tutorial with source code - PHP web application for hotel room reservation with HTML5 user interface supporting drag and drop. MySQL and SQLite databases.
JavaScript Scheduler: Limit Time Range Selection (Min/Max)
JavaScript Scheduler: Limit Time Range Selection (Min/Max)
How to limit drag and drop time range selection to the specified number of cells.
JavaScript Scheduler: Displaying Group Availability
JavaScript Scheduler: Displaying Group Availability
How to show availability of child resources using color bars in the JavaScript Scheduler component.
JavaScript Scheduler: Column Summary and Availability Chart
JavaScript Scheduler: Column Summary and Availability Chart
How to display a column summary with resource utilization and availability details in the JavaScript Scheduler component. The utilization is also displayed using a bar chart at the bottom.
Angular Scheduler: Rendering Angular Components Inside Events
Angular Scheduler: Rendering Angular Components Inside Events
How to add custom components to events displayed in the Angular Scheduler.
Articles 1-20 of 142 Next