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

HTML5 Scheduler: Infinite Scrolling
HTML5 Scheduler: Infinite Scrolling
Simple HTML5/PHP web application that shows how to enable infinite scrolling for the Scheduler UI component.
Vue Scheduler: How to Display Holidays
Vue Scheduler: How to Display Holidays
How to display global and row-specific holidays in the Vue Scheduler. Optionally, disable the drag and drop operations for the holiday cells.
React Scheduler: How to Enable Undo/Redo
React Scheduler: How to Enable Undo/Redo
The React Scheduler component can record all drag and drop actions and allow unlimited undo/redo. See how to add undo/redo buttons and display the full history.
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.
ASP.NET Core Scheduler: Dynamic Event Loading
ASP.NET Core Scheduler: Dynamic Event Loading
ASP.NET Core project that uses JavaScript Scheduler component with dynamic event loading feature enabled. See what performance you can expect when displaying large data sets.
React Scheduler: Timeline Zoom
React Scheduler: Timeline Zoom
How to add a zoom feature to the React Scheduler timeline. You can change the zoom level (and timeline resolution) using a "range" control and "zoom in" and "zoom out" buttons.
JavaScript Scheduler: Daily Task Queue
JavaScript Scheduler: Daily Task Queue
How to create a queue of tasks scheduled for a specific day. The exact time of day and resource can be assigned using drag and drop in the next step.
JavaScript Scheduler: Find Next Free Slot
JavaScript Scheduler: Find Next Free Slot
Add an icon to the JavaScript Scheduler row headers that will let users scroll to the next free slot in the row.
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.
Angular Scheduler: Event Filtering
Angular Scheduler: Event Filtering
Angular application with Scheduler component that can filter events in real time (by text, category, duration).
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.
React Scheduler: How to Manage Resources
React Scheduler: How to Manage Resources
Explore the built-in UI elements that let your users manage (create, edit, move, delete) resources displayed using the React Scheduler component.
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.
Vue Scheduler: Availability/Utilization Histogram
Vue Scheduler: Availability/Utilization Histogram
How to calculate resource utilization percentage and display a histogram at the top of the Vue Scheduler component.
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
HTML5 Scheduler
HTML5 Scheduler
HTML5 scheduler with drag and drop support. It displays a timeline for multiple resources grouped by category. PHP project with REST API backend and MySQL/SQLite storage is available for download.
ASP.NET Core Shift Planning (Entity Framework, .NET 8)
ASP.NET Core Shift Planning (Entity Framework, .NET 8)
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.
Angular Scheduler: Drag and Drop Task Queue
Angular Scheduler: Drag and Drop Task Queue
How to implement an ordered queue of unscheduled tasks that can be dragged to the Angular Scheduler component.
Angular Scheduler: Dynamic Context Menu
Angular Scheduler: Dynamic Context Menu
Angular 18 project that shows how to dynamically configure the Scheduler context menu (for events and rows).
JavaScript Scheduler: Expandable Event Groups
JavaScript Scheduler: Expandable Event Groups
How to group related events into a single event in the JavaScript Scheduler component and add expand [+] and collapse [-] icons that allow changing the event visibility.
Articles 1-20 of 199 Next