Skip to content
DayPilot

All Tutorials

Vue Calendar: Using Templates to Add Icons, Buttons, or Progress Bars to Events (Open-Source)

Vue Calendar: Using Templates to Add Icons, Buttons, or Progress Bars to Events (Open-Source)

Vue templates allow adding dynamic content to Vue Calendar events, including interactive elements and custom Vue components.
React Scheduler: Timeline Zoom

React Scheduler: Timeline Zoom

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 Scheduler: Add Angular Components to Row Headers

Angular Scheduler: Add Angular Components to Row Headers

Learn how to insert custom components in Angular Scheduler row headers.
Angular Scheduler: Next/Previous Buttons

Angular Scheduler: Next/Previous Buttons

Angular project that shows how to implement next/previous/today buttons that change the month displayed by the Angular Scheduler component.
JavaScript Scheduler: Events as Drag and Drop Target

JavaScript Scheduler: Events as Drag and Drop Target

How to configure Scheduler event boxes to accept items from an external list (drag and drop). Implemented using standard HTML5 drag and drop API.
Angular Scheduler: Rendering Angular Components Inside Events

Angular Scheduler: Rendering Angular Components Inside Events

How to add custom components to events displayed in the Angular Scheduler.
React Scheduler: How to Enable Undo/Redo

React Scheduler: How to Enable Undo/Redo

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.
JavaScript Scheduler: Swapping Events (Drag and Drop)

JavaScript Scheduler: Swapping Events (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.
React Scheduler with Horizontal Timeline (Open-Source)

React Scheduler with Horizontal Timeline (Open-Source)

Open-source React Scheduler with a readable year-view timeline, theme switching, editable events, and custom event rendering.
JavaScript Scheduler: Use Shift+Drag to Start Selection over Events

JavaScript Scheduler: Use Shift+Drag to Start Selection over Events

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