DayPilot Code - Scheduling Tutorials and Source Code

Vue Scheduler: Undo/Redo for Drag and Drop Actions

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

vuejs scheduler undo javascript open-source

October 6, 2025 (updated)

Open-Source HTML5/JavaScript Calendar with Day/Week/Month Views (PHP, MySQL)

HTML5/JavaScript event calendar with day, week, and month views and integrated date navigator. Includes a sample PHP backend with MySQL database.

html5 javascript event-calendar php mysql day week month sqlite open-source date-picker

October 6, 2025 (updated)

JavaScript Scheduler: Read-Only Mode

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.

javascript scheduler read-only open-source

October 5, 2025 (updated)

JavaScript Scheduler: Event Types

How to define your own Scheduler event types and customize the appearance. You can change the event type using a context menu or a modal dialog.

javascript scheduler customization open-source

October 5, 2025 (updated)

JavaScript Scheduler: Alternating Column Colors

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

javascript html5 scheduler open-source

October 4, 2025 (updated)

How to Add Interactive Elements to Vue Scheduler Events Using Templates

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.

javascript vuejs vue3 scheduler template open-source

October 2, 2025 (updated)

Vue Scheduler: Using Cell Templates to Show Slot Prices

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.

vuejs vue3 scheduler template javascript open-source

October 2, 2025 (updated)

React JSX Components in Scheduler Grid Cells

How to render custom React JSX component in the Scheduler grid cells.

react react19 jsx scheduler customization javascript open-source

October 2, 2025 (updated)

React Scheduler: Rendering JSX in Events

How to render custom JSX in events displayed by the React Scheduler component.

react react19 scheduler javascript jsx open-source

October 2, 2025 (updated)

JavaScript Scheduler: Splitting an Event

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

javascript html5 scheduler open-source

September 24, 2025 (updated)

React Scheduler with Horizontal Timeline (Open-Source)

Products

Resources

Tools

About Us

DayPilot Pro