Scheduler Web Component Tutorials

Angular tutorial that shows how to highlight global and resource-specific holidays in the Angular Scheduler UI component.

Learn how to modify the reservation edges to split the start and end cell diagonally. This provides a visual hint that the check-in and check-out days are only partially occupied.

Learn how to change a React Scheduler CSS theme, create and apply your own theme and override individual styles.

This tutorial shows how to use the React Scheduler component to create a reservation application in React, using TypeScript language.

Learn how to incorporate the React Scheduler in a Next.js application, focusing on configuration, event handling, and using the direct API.

How to embed a calendar icon in the upper-left corner of DayPilot Scheduler, hook it up to an inline DatePicker, and update the visible timeline.

The React Scheduler component allows customization of event content. This tutorial shows how to add a custom progress bar using event active areas.

How to implement Previous and Next buttons that find the nearest event outside the current viewport of the JavaScript Scheduler component.

How to change the zoom level of the JavaScript Scheduler component in real time using a slider and (+)/(-) buttons.

How to link the JavaScript Scheduler component to a date picker that can change the visible date.

How to add "Undo" and "Redo" buttons to the Vue Scheduler. The UndoService maintains history of changes and allows unlimited undo/redo.

How to switch the JavaScript Scheduler to read-only mode (disables all drag-and-drop) and how to disable drag-and-drop for specific events.

How to set alternating colors for JavaScript Scheduler columns (time headers and grid).

How to split events in the JavaScript Scheduler at a specified location using the right-click context menu.

How to lock events displayed in the JavaScript Scheduler using a dynamic context menu. The Scheduler will not allow editing the locked events.

Source code of a Spring Boot web application that uses HTML5/JavaScript scheduler to display events for multiple resources.

Add "next" and "previous" buttons to your React application and let users switch the month displayed by the Scheduler component.

Add an icon to the JavaScript Scheduler row headers that will let users scroll to the next free slot in the row.

Learn how to build an interactive scheduling application in Laravel using the DayPilot JavaScript Scheduler with a dynamic timeline, draggable events, and resource grouping.

How to dynamically calculate the utilization percentage for each resource and display a chart with utilization details in the Scheduler row headers.