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

Improve Angular Scheduler Performance using Lazy Loading (Code Splitting)
Improve Angular Scheduler Performance using Lazy Loading (Code Splitting)
Use Angular lazy loading feature to improve the initial load time of your Scheduler application.
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.
JavaScript Scheduler NPM + WebPack Project
JavaScript Scheduler NPM + WebPack Project
How to use the JavaScript Scheduler component in a new NPM/WebPack project.
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.
React Scheduler: How to Enable Undo/Redo
React Scheduler: How to Enable Undo/Redo
The React Scheduler component can record all drag and drop actions and allow unlimited undo/redo. See how to add undo/redo buttons and display the full history.
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.
ASP.NET Annual Leave Booking (C#, VB, SQL Server)
ASP.NET Annual Leave Booking (C#, VB, SQL Server)
This tutorial shows how to create an annual leave booking application for ASP.NET. Includes C# and VB.NET source code and sample SQL Server database.
Vue Scheduler: On-Demand Event Loading
Vue Scheduler: On-Demand Event Loading
How to enable on-demand event loading in the Vue Scheduler component. The Scheduler will load events for the current viewport. Additional data will be loaded during scrolling.
Angular Scheduler Tutorial (TypeScript + PHP/MySQL)
Angular Scheduler Tutorial (TypeScript + PHP/MySQL)
An Angular application that shows how to use DayPilot Scheduler with 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.
ASP.NET Timesheet (C#, VB.NET, SQL Server)
ASP.NET Timesheet (C#, VB.NET, SQL Server)
This tutorial shows how to create a monthly timesheet for ASP.NET. Includes C# and VB.NET source code and sample SQL Server database.
JavaScript Scheduler: How to Show Summary Columns on the Right
JavaScript Scheduler: How to Show Summary Columns on the Right
How to display a special column with summary data on the right side of the JavaScript Scheduler grid.
Vue Scheduler: How to Display Holidays
Vue Scheduler: How to Display Holidays
How to display global and row-specific holidays in the Vue Scheduler. Optionally, disable the drag and drop operations for the holiday cells.
Angular: How To Build Annual Leave Scheduling Application (ASP.NET Core Backend)
Angular: How To Build Annual Leave Scheduling Application (ASP.NET Core Backend)
Build an Angular annual leave scheduling application with REST backend created using ASP.NET Core and Entity Framework.
Angular Scheduler: Dynamic Loading of Large Data Sets
Angular Scheduler: Dynamic Loading of Large Data Sets
Angular project that displays a Scheduler component with dynamic event data loading enabled. Event data are loaded on demand during scrolling to improve scalability.
Angular Scheduler: Dynamic Context Menu
Angular Scheduler: Dynamic Context Menu
Angular 12 project that shows how to dynamically configure the Scheduler context menu (for events and rows).
React Scheduler: Rendering JSX in Time Header and Upper-Left Corner
React Scheduler: Rendering JSX in Time Header and Upper-Left Corner
How to display React JSX components in the Scheduler horizontal time header.
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.
Angular Scheduler: Infinite Scrolling
Angular Scheduler: Infinite Scrolling
How to enable infinite scrolling for the Angular Scheduler component. Includes configuration hints and tweaks that improve Scheduler responsiveness and user experience.
Angular Scheduler: Event Links
Angular Scheduler: Event Links
Angular tutorial that shows how to link related events in Angular Scheduler UI component.
Articles 1-20 of 175 Next