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

JavaScript Scheduler: How to Unschedule Events
JavaScript Scheduler: How to Unschedule Events
When removing events from the scheduler, it is possible to remove them completely or to move them to a queue of unscheduled tasks or a row with unassigned events (while keeping the scheduled time).
ASP.NET Core Timesheet
ASP.NET Core Timesheet
How to create a drag-and-drop timesheet application in ASP.NET Core (.NET 6) with SQL Server and Entity Framework.
ASP.NET Courtroom Schedule Tutorial (C#, VB.NET)
ASP.NET Courtroom Schedule Tutorial (C#, VB.NET)
ASP.NET application that allows creating courtroom reservations from a list of unscheduled cases using drag & drop.
React JSX Components in Scheduler Grid Cells
React JSX Components in Scheduler Grid Cells
How to render custom React JSX component in the Scheduler grid cells.
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.
How to Add Custom Progress Bar to React Scheduler Events
How to Add Custom Progress Bar to React Scheduler Events
The React Scheduler component allows customization of event content. This tutorial shows how to add a custom progress bar using event active areas.
Angular Scheduler: Read-Only and Edit Mode Switching
Angular Scheduler: Read-Only and Edit Mode Switching
Angular 13 application that shows how to switch the Angular Scheduler (which is in "edit" mode by default) to read-only mode.
React: Milestone Scheduler
React: Milestone Scheduler
How to display milestones in the React Scheduler component. You can use custom shapes, icons, colors and connect the milestones using links.
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.
Angular Scheduler: Event Filtering
Angular Scheduler: Event Filtering
Angular application with Scheduler component that can filter events in real time (by text, category, length).
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.
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.
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.
React Scheduler: Large Datasets and Performance
React Scheduler: Large Datasets and Performance
What things to look at when you are not happy with the React Scheduler component performance.
Angular Scheduler: How to Add Components to the Upper-Left Corner
Angular Scheduler: How to Add Components to the Upper-Left Corner
How to add a custom Angular component to the upper-left corner of the Scheduler.
Angular Scheduler: Undo/Redo
Angular Scheduler: Undo/Redo
Angular tutorial that shows how to implement undo/redo functionality for the Angular Scheduler UI component.
Angular Scheduler: Online Configurator
Angular Scheduler: Online Configurator
Use the online configurator application to generate a new Angular project with a customized Scheduler component.
ASP.NET Core Doctor Appointment Scheduling Tutorial (.NET 6)
ASP.NET Core Doctor Appointment Scheduling Tutorial (.NET 6)
ASP.NET Core application for doctor appointment scheduling. The application works with three roles: manager (define available appointment slots), patient (request an appointment using one of the available slot) and doctor (manage existing appointments).
React Scheduler: How to Search Events
React Scheduler: How to Search Events
Learn how to search React Scheduler events, highlight the search text and jump between results using Next and Previous 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.
Articles 1-20 of 186 Next