Agent-readable demo data

Title
External Drag and Drop (Monthly Event Calendar) | DayPilot Pro for JavaScript Demo
Tree
DayPilot JavaScript Demo
Catalog root
Default
Description
Drag an item into the calendar using a mouse, or touch and hold it before dragging on a touch device. Read more about external drag and drop.

Inline demo script 1

const dp = new DayPilot.Month("dp", {
            cellMarginBottom: 20,
            startDate: "2026-11-01",
            bubble: new DayPilot.Bubble({
                onLoad: (args) => {
                    args.html = "Event: " + DayPilot.Util.escapeHtml(args.source.text());
                }
            }),
            onEventMoved: (args) => {
                dp.message("Moved: " + args.e.text());
            },
            onEventResized: (args) => {
                dp.message("Resized: " + args.e.text());
            },
            onTimeRangeSelected: async (args) => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                dp.clearSelection();
                if (modal.canceled || !modal.result) {
                    return;
                }
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    text: modal.result
                });
                dp.message("Created");
            }
        });
        dp.init();

        const app = {
            init() {
                this.loadData();
                this.makeDraggable();
            },
            loadData() {
                const events = [];
                const origin = new DayPilot.Date(dp.startDate).addDays(3);
                for (let i = 0; i < 10; i++) {
                    const duration = Math.floor(Math.random() * 1.2);
                    const offset = Math.floor(Math.random() * 6) - 3;
                    events.push({
                        start: origin.addDays(offset),
                        end: origin.addHours(12).addDays(offset + duration),
                        id: DayPilot.guid(),
                        text: "Event " + i
                    });
                }
                dp.update({events});
            },
            makeDraggable() {
                const items = document.querySelectorAll("#external li");
                for (const element of items) {
                    DayPilot.Month.makeDraggable({
                        element,
                        data: {
                            id: element.getAttribute("data-id"),
                            text: element.innerText,
                            duration: DayPilot.Duration.days(Number(element.getAttribute("data-duration")))
                        }
                    });
                }
            }
        };

        app.init();