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

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.
HTML5 Scheduler for Touch Devices - iPad, iPhone, Android (JavaScript)
HTML5 Scheduler for Touch Devices - iPad, iPhone, Android (JavaScript)
How to configure the JavaScript Scheduler control to provide additional functionality on mobile and touch devices (iOS, Android). Includes a sample HTML5/JavaScript project, a custom CSS theme and a set of font icons.
JavaScript Scheduler: Use Frozen Rows to Select Time Columns
JavaScript Scheduler: Use Frozen Rows to Select Time Columns
How to add a special row to the JavaScript Scheduler time header that will let users select multiple columns using drag and drop.
JavaScript Scheduler: Use Shift+Drag to Start Selection over Events
JavaScript Scheduler: Use Shift+Drag to Start Selection over Events
How to override the drag behavior to allow time range selection to be started anywhere in the Scheduler grid (over cells or events).
JavaScript Scheduler: Show Separators in the Time Header
JavaScript Scheduler: Show Separators in the Time Header
How to display time separators in the time header of the JavaScript Scheduler (in addition to the Scheduler grid).
Angular Scheduler: Read-Only and Edit Mode Switching
Angular Scheduler: Read-Only and Edit Mode Switching
Angular 10 application that shows how to switch the Scheduler (which is in "edit" mode by default) to read-only mode.
JavaScript Scheduler: Lock Events using Context Menu
JavaScript Scheduler: Lock Events using Context Menu
How to lock events displayed in the JavaScript Scheduler using a dynamic context menu. The Scheduler will not allow editing the locked events.
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.
Articles 1-20 of 141 Next