Scheduler Web Component Tutorials

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

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

How to enable keyboard navigation in the JavaScript Scheduler component. Use the keyboard to focus cells in the grid, select a time range and edit existing events.

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 override the drag behavior to allow time range selection to be started anywhere in the Scheduler grid (over cells or events).

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.

How to configure the image export of the JavaScript Scheduler to include rich HTML content.

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

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.

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

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

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.