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

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.
Vue Scheduler: Queue of  Unscheduled Tasks
Vue Scheduler: Queue of Unscheduled Tasks
How to display a queue of unscheduled tasks that can be dragged to the Vue Scheduler component.
Angular Scheduler: Resource Utilization Chart
Angular Scheduler: Resource Utilization Chart
How to calculate resource utilization for time slots and show a bar chart in a fixed row displayed at the top of the Angular Scheduler component.
Angular Scheduler: How to Disable Time Slots
Angular Scheduler: How to Disable Time Slots
How to disable selected time slots of the Angular Scheduler using drag and drop.
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.
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.
 How to Use CSS Themes with the React Scheduler Component
How to Use CSS Themes with the React Scheduler Component
Learn how to change a React Scheduler CSS theme, create and apply your own theme and override individual styles.
React Scheduler: How to Display Slot Details using Background Events
React Scheduler: How to Display Slot Details using Background Events
How to move the React Scheduler events to the background so they can be used to display additional time slot information.
React Scheduler: Full Screen Layout
React Scheduler: Full Screen Layout
How to integrate the React Scheduler component into a full screen page layout. The full screen mode will allow rendering optimizations to be applied correctly and avoid a confusing duplicate vertical scrollbar.
JavaScript Scheduler: How to Integrate a Date Picker
JavaScript Scheduler: How to Integrate a Date Picker
How to link the JavaScript Scheduler component to a date picker that can change the visible date.
PHP Work Order Scheduler (JavaScript/HTML5 and MySQL)
PHP Work Order Scheduler (JavaScript/HTML5 and MySQL)
This tutorial shows how to create a PHP application that will let users manage and schedule work orders using a visual interface implemented using JavaScript/HTML5.
React Scheduler Component Tutorial
React Scheduler Component Tutorial
Add a scheduler UI component to your React application in a few easy steps. Fast data loading, drag and drop, appearance customization options.
How to Create the Angular Scheduler Component Dynamically
How to Create the Angular Scheduler Component Dynamically
How to dynamically create and display the Angular Scheduler component using ViewContainerRef.createComponent().
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.
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: Customized Snap-to-Grid
JavaScript Scheduler: Customized Snap-to-Grid
How to implement custom snap-to-grid rules in the JavaScript Scheduler component.
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.
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.
ASP.NET Shift Scheduling Tutorial (C#, VB.NET, SQL Server)
ASP.NET Shift Scheduling Tutorial (C#, VB.NET, SQL Server)
ASP.NET project that demonstrates how to use Calendar and Scheduler controls to manage a simple shift schedule. Supports conflict detection.
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 165 Next