Scheduler Web Component Tutorials

Test the performance of the Angular Scheduler component with 400,000 events loaded at once.

Angular 12 project with a customized Angular Scheduler component. Use this project as a starting point for your own Angular scheduling application.

How to make parallel HTTP requests, wait for all of them to complete and update the JavaScript Scheduler once.

ASP.NET web application project for managing restaurant table reservations. Finds a free table using a fast filter. Highlights conflicting reservations.

How to load HTML5 scheduler events from the server dynamically during scrolling. Includes a sample PHP server backend.

ASP.NET web application for managing doctor appointments. Includes public and management interface. SQL Server database. C# and VB.NET project versions.

HTML5 sample that shows how to export the JavaScript Scheduler to multi-page PDF file (5 rows per page).

Add an Angular Scheduler component to your application and use it to manage a schedule online. Add, move, edit, and delete reservations using drag and drop.

How to add a special row to the JavaScript Scheduler time header that will let users select multiple columns using drag and drop.

How to display time separators in the time header of the JavaScript Scheduler (in addition to the Scheduler grid).

How to add DayPilot context menu to any DOM element.

How to add a visual Scheduler component to your Angular 10 application. The Scheduler will let you plan and manage reservations, meetings, work orders and other events.

How to customize the JavaScript Scheduler row sorting feature. You can define custom sort icons (Font Awesome or other icon sets or custom images), disable sorting for selected events, and adjust the sorting logic.

How to create a modal dialog with custom fields and let users edit JavaScript Scheduler events on click. The modal dialog fields are defined programmatically using an array.

Angular 9 project that includes Angular Scheduler component with all required boilerplate code. The project supports Ivy compiler in combination with AOT (ahead-of-time) compilation mode enabled.

Angular 8 project with pre-configured Angular Scheduler component. You can use this project as a quick start for your own Scheduler implementation.

This tutorial shows to how export the Scheduler including events/tasks to a PDF document in an ASP.NET application.

Angular 7 project with pre-configured Scheduler component.

Angular 6 project with Scheduler component that allows creating and editing events using a modal dialog.

Angular 6 project that uses a pre-configured Scheduler component to display a timeline for multiple resources.