Agent-readable demo data

Title

External Drag and Drop (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox

Tree

DayPilot JavaScript Sandbox

Catalog root

Default

Description

Read more about external drag and drop [doc.daypilot.org].

• Canonical HTML: /sandbox/scheduler/external.html
• Markdown companion: /sandbox/scheduler/external.md
• Folder: /sandbox/scheduler/
• Root: /sandbox/
• Catalog: /sandbox/llms.txt

Inline demo script 1

const scheduler = new DayPilot.Scheduler("scheduler", {
            startDate: new DayPilot.Date("2026-03-01"),
            days: new DayPilot.Date("2026-03-01").daysInMonth(),
            scale: "Hour",
            timeHeaders: [
                {groupBy: "Day"},
                {groupBy: "Hour"}
            ],
            treeEnabled: true,
            resources: [
                {name: "Room A", id: "A"},
                {name: "Room B", id: "B"},
                {name: "Room C", id: "C"},
                {name: "Room D", id: "D"},
                {name: "Room E", id: "E"},
                {name: "Room F", id: "F"},
            ],
            onEventMoving: args => {
                args.right.enabled = true;
                args.right.html = "external: " + args.external;
            },
            onTimeRangeSelected: async args => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                scheduler.clearSelection();
                if (modal.canceled) {
                    return;
                }
                scheduler.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    resource: args.resource,
                    text: modal.result
                });
                scheduler.message("Created");
            },
            dragOutAllowed: true,
        });
        scheduler.init();

        const app = {
            init() {
                this.makeDraggable();
                this.registerDropTarget();
            },
            makeDraggable() {
                // activate items as source
                const parent = document.getElementById("external");
                const items = parent.getElementsByTagName("li");
                for (let i = 0; i < items.length; i++) {
                    const e = items[i];
                    const item = {
                        element: e,
                        remove: e,
                        id: e.getAttribute("data-id"),
                        text: e.innerText,
                        duration: DayPilot.Duration.hours(e.getAttribute("data-duration")),  // hours
                        barColor: "red",
                        barBackColor: "white",
                        externalCssClass: "external-shadow",
                        externalHtml: e.innerText,
                        onDragStart: (args) => {
                            const e = args.options.element;
                            e.style.opacity = "0.5";
                        },
                        onDrop: (args) => {
                            const e = args.options.element;
                            e.style.opacity = "";
                        },
                    };
                    DayPilot.Scheduler.makeDraggable(item);
                }
            },
            registerDropTarget() {
                // activate as target
                DayPilot.Scheduler.registerDropTarget({
                    element: document.getElementById("queue"),
                    onDrop: args => {
                        const parent = document.getElementById("external");
                        const li = document.createElement("li");
                        li.setAttribute("data-duration", args.e.duration().totalHours());
                        li.setAttribute("data-id", args.e.id());
                        li.style.cursor = "move";
                        li.innerText = args.e.text();
                        parent.appendChild(li);

                        app.makeDraggable();

                        scheduler.events.remove(args.e);
                    },
                });
            }
        };
        app.init();