Scheduler Web Component Tutorials

How to add a custom Angular component to the upper-left corner of the Scheduler.

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.

How to add a zoom feature to the React Scheduler timeline. You can change the zoom level (and timeline resolution) using a "range" control and "zoom in" and "zoom out" buttons.

Angular project that shows how to implement next/previous/today buttons that change the month displayed by the Angular Scheduler component.

How to configure Scheduler event boxes to accept items from an external list (drag and drop). Implemented using standard HTML5 drag and drop API.

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.

How to implement event swapping using drag an drop in the JavaScript Scheduler component. Detect events at the target position and move the target event to the source position after drop. The Scheduler provides real-time feedback during dragging.

Open-source React Scheduler with a readable year-view timeline, theme switching, editable events, and custom event rendering.

How to override the drag behavior to allow time range selection to be started anywhere in the Scheduler grid (over cells or events).

What things to look at when you are not happy with the React Scheduler component performance.

How to drag items from events out of the Scheduler and drop it on a custom drop target. The source event data object is attached to the dragged item and can be read on drop.

How to add custom logic to the Scheduler component that skips non-business cells during drag and drop operations (event creating, event resizing, event moving).

ASP.NET Core application for doctor appointment scheduling. The application works with three roles: manager (define available appointment slots), patient (request an appointment using one of the available slots), and doctor (manage existing appointments).

Angular project that shows how to create Scheduler UI using DayPilot Pro for Angular. Includes a backend REST/JSON application implemented using Spring Boot (Java).

Schedule manufacturing jobs by assigning tasks to individual machines using drag and drop. Includes an ASP.NET Core application for download, data is stored in an SQL Server database.

An overview of Scheduler settings that let you control the vertical event position within rows. Includes custom sorting, forcing a specific line within a row, dedicated lines, keeping related events together using virtual containers.

How to enable infinite scrolling for the Angular Scheduler component. Includes configuration hints and tweaks that improve Scheduler responsiveness and user experience.

Vue.js project that includes Scheduler component with basic configuration and all required boilerplate code.

Vue templates supported by the Scheduler component allow you to add dynamic content to events, such as checkboxes, drop-down lists, or attachment upload buttons.

How to use Vue templates to display dynamic reservation prices in each Scheduler time slot. Slot prices are defined using pricing plans independently for each day of the week.