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: Rendering JSX Components in Row Header
React Scheduler: Rendering JSX Components in Row Header
How to insert React components or direct JSX to Scheduler row headers.
JavaScript Scheduler: Dragging Items from Events
JavaScript Scheduler: Dragging Items from Events
How to drag items from events out of the Scheduler and drop it on a custom drop target. The source event data object is attached to the dragged item and can be read on drop.
Angular Scheduler: Row Header Actions
Angular Scheduler: Row Header Actions
How to add action controls to the Angular Scheduler row headers: clickable icons, hyperlinks, context menu buttons.
JavaScript Scheduler: Swapping Events (Drag and Drop)
JavaScript Scheduler: Swapping Events (Drag and Drop)
How to implement event swapping using drag an drop in the JavaScript Scheduler component. Detect events at the target position and move the target event to the source position after drop. The Scheduler provides real-time feedback during dragging.
Scheduler PDF Export (ASP.NET, C#, VB, SQL Server)
Scheduler PDF Export (ASP.NET, C#, VB, SQL Server)
This tutorial shows to how export the Scheduler including events/tasks to a PDF document in an ASP.NET application.
JavaScript Scheduler: Dragging Files and Other Items from Desktop
JavaScript Scheduler: Dragging Files and Other Items from Desktop
How to configure the JavaScript Scheduler component to accept files dragged from the desktop. The file will be converted to a Scheduler event on drop.
Angular 8 Hotel Room Booking Tutorial (PHP/MySQL)
Angular 8 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: Displaying Holidays
JavaScript Scheduler: Displaying Holidays
How to configure the JavaScript Scheduler component to display custom holiday information and block drag and drop operations for the holiday cells.
Angular 8 Restaurant Table Reservation (PHP/MySQL)
Angular 8 Restaurant Table Reservation (PHP/MySQL)
Angular 8 application that lets you manage restaurant table reservations. Includes a PHP/MySQL backend.
Angular Scheduler: Online Configurator
Angular Scheduler: Online Configurator
Use the online configurator application to generate a new Angular project with a customized Scheduler component.
HTML5 Machine/Production Job Scheduling Tutorial (PHP/MySQL)
HTML5 Machine/Production Job Scheduling Tutorial (PHP/MySQL)
PHP web application for machine/production job scheduling. Displays job assignments using a scheduler HTML5 component (including duration and dependencies). Works with MySQL database.
Angular Scheduler: Zoom
Angular Scheduler: Zoom
How to add zoom feature to the Angular Scheduler component.
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.
JavaScript Scheduler: Warm-Up and Cool-Down Time
JavaScript Scheduler: Warm-Up and Cool-Down Time
How to add warm-up and cool-down time to Scheduler events. The additional time segments are stored and displayed automatically but drag and drop is only enabled for the core event.
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: Skip Non-Business Cells during Drag and Drop
JavaScript Scheduler: Skip Non-Business Cells during Drag and Drop
How to add custom logic to the Scheduler component that skips non-business cells during drag and drop operations (event creating, event resizing, event moving).
JavaScript Scheduler: Zoom
JavaScript Scheduler: Zoom
How to change the zoom level of the JavaScript Scheduler component in real time using a slider and (+)/(-) buttons.
JavaScript Scheduler: Events as Drag and Drop Target
JavaScript Scheduler: Events as Drag and Drop Target
How to configure Scheduler event boxes to accept items from an external list (drag and drop). Implemented using standard HTML5 drag and drop API.
JavaScript Scheduler: Resource Context Menu
JavaScript Scheduler: Resource Context Menu
How to add context menu to resources/rows of the JavaScript Scheduler (edit, delete, add child resource).
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.
Articles 1-20 of 106 Next