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

ASP.NET Core Shift Planning (Entity Framework, .NET 6)
ASP.NET Core Shift Planning (Entity Framework, .NET 6)
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: Resource Management
Angular Scheduler: Resource Management
This tutorial shows how to use the Angular Scheduler component to manage resources (create, edit, delete, move) using the Scheduler UI.
React Scheduler: Rendering JSX Component in Callout (Bubble)
React Scheduler: Rendering JSX Component in Callout (Bubble)
The React Scheduler allows defining the callout (bubble) content as a React JSX component. The component will be created automatically when the callout is activated and removed and unmounted when the callout is hidden.
PHP Hotel Room Booking System (JavaScript/HTML5, MySQL)
PHP Hotel Room Booking System (JavaScript/HTML5, MySQL)
A tutorial that shows how to create a PHP reservation system for hotel rooms with JavaScript/HTML5 frontend. The user interface includes a visual scheduling calendar with drag and drop support. MySQL and SQLite databases.
Angular 14 Scheduler Quick Start Project
Angular 14 Scheduler Quick Start Project
A quick-start project with a pre-configured Angular Scheduler component. You can download this project and use it as a starting point for your own Angular 14 calendar/scheduler application.
React Scheduler: Next/Previous Buttons
React Scheduler: Next/Previous Buttons
Add "next" and "previous" buttons to your React application and let users switch the month displayed by the Scheduler component.
JavaScript Scheduler: How to Use the Keyboard API
JavaScript Scheduler: How to Use the Keyboard API
How to use the JavaScript Scheduler keyboard API to define custom hotkeys and override the default behavior.
JavaScript Scheduler: Custom Time Header Segments
JavaScript Scheduler: Custom Time Header Segments
How to define custom time segments in the Scheduler time headers. In this example, we will display a special header that will highlight work weeks and weekends.
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.
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.
Articles 1-20 of 189 Next