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: Max Events per Row
JavaScript Scheduler: Max Events per Row
How to limit the maximum number of concurrent events the will be displayed in the JavaScript Scheduler component. Add an icon indicating that more events are available.
JavaScript/HTML5 Scheduler: Filtering Rooms by Availability
JavaScript/HTML5 Scheduler: Filtering Rooms by Availability
How to filter rooms displayed in the JavaScript Scheduler component using a complex filter - by size and date availability.
HTML5 Scheduler: Hiding Rows without Events
HTML5 Scheduler: Hiding Rows without Events
How to hide Scheduler rows that have no events using row filtering feature.
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 Scheduler: Add Angular Components to Row Headers
Angular Scheduler: Add Angular Components to Row Headers
Learn how to insert custom components in Angular Scheduler row headers.
Angular Scheduler: Online Configurator
Angular Scheduler: Online Configurator
Use the online configurator application to generate a new Angular project with a customized Scheduler component.
Angular Scheduler: Zoom
Angular Scheduler: Zoom
How to add a zoom feature to the Angular Scheduler component.
ASP.NET Core Scheduler (.NET 7)
ASP.NET Core Scheduler (.NET 7)
How to use JavaScript/HTML5 Scheduler control from DayPilot Pro package in an ASP.NET Core web application.
Angular 15 Scheduler Quick Start Project
Angular 15 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 15 calendar/scheduler application.
ASP.NET Core Work Order Scheduling (JavaScript, C#, Entity Framework, .NET 6)
ASP.NET Core Work Order Scheduling (JavaScript, C#, Entity Framework, .NET 6)
ASP.NET Core application with drag and drop UI that lets you assign and schedule work orders. Includes a queue of unscheduled tasks, graphical team availability/utilization, context menu with additional actions, dialog for editing work order details.
Angular Scheduler: Displaying Event Phases
Angular Scheduler: Displaying Event Phases
Angular 14 project that shows how to display events split into phases in the Scheduler component.
React Scheduler: External Drag and Drop
React Scheduler: External Drag and Drop
How to activate external items so they can be dragged to the React Scheduler component.
Angular Scheduler: Integration with a Date Picker
Angular Scheduler: Integration with a Date Picker
Angular 14 application that uses DayPilot Navigator component as a date picker for the Scheduler.
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.
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.
Articles 1-20 of 192 Next