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

Angular Scheduler: Dynamic Tooltip
Angular Scheduler: Dynamic Tooltip
The Angular Scheduler component supports displaying event details using a built-in tooltip. See how to include a dynamic Angular component in the tooltip.
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.
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.
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.
Using JavaScript/HTML5 Scheduler in ASP.NET Core
Using JavaScript/HTML5 Scheduler in ASP.NET Core
How to use JavaScript/HTML5 Scheduler control from DayPilot Pro package in ASP.NET Core MVC web application.
JavaScript Scheduler: Custom Time Header Segments
JavaScript Scheduler: Custom Time Header Segments
How to define custom time segments in the Scheduler time headers. In this example, we will display a special header that will highlight work weeks and weekends.
Angular Scheduler: Event Filtering
Angular Scheduler: Event Filtering
Angular application with Scheduler component that can filter events in real time (by text, category, length).
Angular Scheduler: Dynamic Loading of Large Data Sets
Angular Scheduler: Dynamic Loading of Large Data Sets
Angular project that displays a Scheduler component with dynamic event data loading enabled. Event data is loaded on demand during scrolling to improve scalability.
Angular Scheduler: Dynamic Context Menu
Angular Scheduler: Dynamic Context Menu
Angular 10 project that shows how to dynamically configure the Scheduler context menu (for events and rows).
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.
HTML5 Scheduler with Dynamic Event Loading
HTML5 Scheduler with Dynamic Event Loading
How to load HTML5 scheduler events from the server dynamically during scrolling. Includes a sample PHP server backend.
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 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.
Angular Scheduler: Infinite Scrolling
Angular Scheduler: Infinite Scrolling
How to enable infinite scrolling for the Angular Scheduler component. Includes configuration hints and tweaks that improve Scheduler responsiveness and user experience.
Angular Scheduler: Undo/Redo
Angular Scheduler: Undo/Redo
Angular tutorial that shows how to implement undo/redo for Angular Scheduler UI component.
PHP Machine/Production Job Scheduling Application (MySQL)
PHP Machine/Production Job Scheduling Application (MySQL)
This tutorial shows how to create a PHP web application for machine/production job scheduling. The visual HTML5 scheduling grid displays task assignments, duration and dependencies. Users can use drag and drop to change the schedule.
JavaScript Scheduler: Context Menu for External Items
JavaScript Scheduler: Context Menu for External Items
How to add DayPilot context menu to any DOM element.
Angular 10 Scheduler Quick Start Project
Angular 10 Scheduler Quick Start Project
How to add a visual Scheduler component to your Angular 10 application. The Scheduler will let you plan and manage reservations, meetings, work orders and other events.
Angular Work Order Scheduling (PHP/MySQL)
Angular Work Order Scheduling (PHP/MySQL)
Angular web application that lets you assign and schedule work orders using drag and drop. Built using DayPilot Scheduler Angular component. Includes a REST backend implemented in PHP/MySQL
Angular Scheduler Tutorial (TypeScript + PHP/MySQL)
Angular Scheduler Tutorial (TypeScript + PHP/MySQL)
Simple Angular application that shows how to use DayPilot Scheduler with PHP/MySQL backend.
Articles 1-20 of 135 Next