Agent-readable demo data

Title

External Drag and Drop of Rows (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

You can drag resources from an external list to the Scheduler and back.

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

Inline demo script 1

const dp = new DayPilot.Scheduler("dp", {
            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"},
            ],
            onRowMoving: args => {
                console.log("onRowMoving", args);
            },
            onRowMove: args => {
                console.log("onRowMove", args);
            },
            onTimeRangeSelected: async args => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                dp.clearSelection();
                if (modal.canceled) {
                    return;
                }
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    resource: args.resource,
                    text: modal.result
                });
                dp.message("Created");
            },
            dragOutAllowed: true,
            rowMoveHandling: "Update",
        });
        dp.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,
                        data: {
                            id: e.getAttribute("data-id"),
                            name: e.innerText,
                        },
                    };
                    DayPilot.Scheduler.makeDraggableAsRow(item);
                }
            },
            registerDropTarget() {
                // activate as target
                DayPilot.Scheduler.registerRowDropTarget({
                    element: document.getElementById("queue"),
                    onDrop: args => {
                        const parent = document.getElementById("external");
                        const li = document.createElement("li");
                        li.setAttribute("data-id", args.row.id);
                        li.style.cursor = "move";
                        li.innerText = args.row.name;
                        parent.appendChild(li);

                        app.makeDraggable();

                        dp.rows.remove(args.row);
                        document.getElementById("queue").style.backgroundColor = "";
                    },
                    onDragOver: args => {
                        document.getElementById("queue").style.backgroundColor = "#f8f8f8";
                    },
                    onDragLeave: args => {
                        document.getElementById("queue").style.backgroundColor = "";
                    }
                });
            }
        };
        app.init();