Scheduler Web Component Tutorials

Angular web application that lets you assign and schedule work orders using drag and drop. Built using DayPilot Scheduler Angular component. Includes a REST backend implemented in PHP/MySQL

How to implement an ordered queue of unscheduled tasks that can be dragged to the Angular Scheduler component.

Angular 18 project that shows how to dynamically configure the Scheduler context menu (for events and rows).

Use the online configurator application to generate a new Angular project with a customized Scheduler component.

Learn how to create a context menu-driven event swapping feature, enabling users to exchange two selected events.

Learn how to enhance Vue Scheduler events with custom Vue components. Add dynamic content, interactive elements and apply custom styling.

Learn how to add notes to the cells of a JavaScript Scheduler component. Notes are indicated by a red triangle in the upper-right corner and become visible upon hovering over a cell.

Angular scheduling application that allows moving events using "cut and paste" and creating events from existing ones using "copy and paste" actions.

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.

How to filter rooms displayed in the JavaScript Scheduler component using a complex filter - by size and date availability.

How to hide Scheduler rows that have no events using row filtering feature.

How to add a zoom feature to the Angular Scheduler component.

Angular 14 application that uses DayPilot Navigator component as a date picker for the Scheduler.

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.

How to use the JavaScript Scheduler keyboard API to define custom hotkeys and override the default behavior.

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.

ASP.NET application that allows creating courtroom reservations from a list of unscheduled cases using drag & drop.

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

How to use the JavaScript Scheduler component in a new NPM/WebPack project.