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: Dynamic Event Loading (ASP.NET Core)
JavaScript Scheduler: Dynamic Event Loading (ASP.NET Core)
ASP.NET MVC Core project that uses JavaScript Scheduler component with dynamic event loading feature enabled. See what performance you can expect when displaying large data sets.
Angular Scheduler: Loading 400,000 Events
Angular Scheduler: Loading 400,000 Events
Test the performance of the Angular Scheduler component with 400,000 events loaded at once.
JavaScript Scheduler: Customized Snap-to-Grid
JavaScript Scheduler: Customized Snap-to-Grid
How to implement custom snap-to-grid rules in the JavaScript Scheduler component.
JavaScript Scheduler: Disabling Custom Date/Time Ranges
JavaScript Scheduler: Disabling Custom Date/Time Ranges
How to disable custom date/time range in each row of the JavaScript Scheduler component.
JavaScript Scheduler: Read-Only Mode
JavaScript Scheduler: Read-Only Mode
How to switch the JavaScript Scheduler to read-only mode (all drag and drop operations are turned off). Disabling drag and drop for specific events.
JavaScript Scheduler: Pushing Existing Events Forward (Drag and Drop)
JavaScript Scheduler: Pushing Existing Events Forward (Drag and Drop)
How to configure the JavaScript Scheduler component to automatically move events at the target location during drag and drop.
Angular 7 Scheduler Quick Start Project
Angular 7 Scheduler Quick Start Project
Angular 7 project with pre-configured Scheduler component.
Vue.js Scheduler Quick Start Tutorial
Vue.js Scheduler Quick Start Tutorial
Vue.js project that includes Scheduler component with basic configuration and all required boilerplate code.
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.
Angular Scheduler: Timeline Customization
Angular Scheduler: Timeline Customization
How to create a custom timeline for the Angular Scheduler component. The manual mode lets you create the timeline by defining individual time cells.
Angular 6 Hotel Room Booking Tutorial (PHP/MySQL)
Angular 6 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.
JavaScript Scheduler: Alternate Column Colors
JavaScript Scheduler: Alternate Column Colors
How to set alternating colors for JavaScript Scheduler columns (time headers and grid).
Shift Scheduling Tutorial (ASP.NET, SQL Server, C#, VB.NET)
Shift Scheduling Tutorial (ASP.NET, SQL Server, C#, VB.NET)
ASP.NET project that demonstrates how to use Calendar and Scheduler controls to manage a simple shift schedule. Supports recurring events and conflict detection.
Angular 6 Work Order Scheduling (PHP/MySQL)
Angular 6 Work Order Scheduling (PHP/MySQL)
Angular 6 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 6 Restaurant Table Reservation (PHP/MySQL)
Angular 6 Restaurant Table Reservation (PHP/MySQL)
Angular 6 application that lets you manage restaurant table reservations. Includes a PHP/MySQL backend.
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 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.
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 scheduler component.
Angular Scheduler: Full Screen Layout
Angular Scheduler: Full Screen Layout
Angular 6 application that displays the Scheduler in a full screen layout. The project includes a collapsible sidebar with a date picker.
Angular Scheduler: Modal Dialog for Event Editing
Angular Scheduler: Modal Dialog for Event Editing
Angular 6 project with Scheduler component that allows creating and editing events using a modal dialog.
Articles 1-20 of 93 Next