Agent-readable demo data

Title

Queue of Unscheduled Tasks (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

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

• Canonical HTML: /demo/scheduler/queue.html
• Markdown companion: /demo/scheduler/queue.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"},
            ],
            onEventMoving: args => {
                args.right.enabled = true;
                args.right.html = "external: " + args.external;
            },
            onEventMove: args => {
                console.log("onEventMove", args);
                if (args.external) {
                    console.log("removing");
                    queue.events.remove(args.e.data.id);
                }
            },
            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,
        });
        dp.init();

        const queue = new DayPilot.Queue("queue", {
            height: "200px",
            onEventMove: args => {
                if (args.external) {
                    console.log("removing", args);
                    dp.events.remove(args.e.data.id);
                }
            },
            contextMenu: new DayPilot.Menu({
                items: [
                    {text: "Open", onClick: args => DayPilot.Modal.alert(args.source.text())}
                ]
            }),
            onEventClick: args => {
                DayPilot.Modal.alert(args.e.text());
            },
        });
        queue.init();


        const app = {
            init() {
                this.loadEventData();
            },
            loadEventData() {
                // generate and load events
                const events =  [
                    { id: 1, start: "2026-01-01T00:00:00", end: "2026-01-01T04:00:00", text: "Event 1", tags: {myfield: "value"}, bubbleHtml: "Event details"},
                    { id: 2, duration: DayPilot.Duration.ofHours(3), text: "Event 2"},
                    { id: 3, duration: DayPilot.Duration.ofHours(3), text: "Event 3"},
                    { id: 4, duration: DayPilot.Duration.ofHours(3), text: "Event 4"},
                    { id: 5, duration: DayPilot.Duration.ofHours(3), text: "Event 5"},
                    { id: 6, duration: DayPilot.Duration.ofHours(3), text: "Event 6"},
                    { id: 7, duration: DayPilot.Duration.ofHours(3), text: "Event 7"},
                    { id: 8, duration: DayPilot.Duration.ofHours(3), text: "Event 8"},
                    { id: 9, duration: DayPilot.Duration.ofHours(3), text: "Event 9"},
                    { id: 10, duration: DayPilot.Duration.ofHours(3), text: "Event 10"},
                    { id: 11, duration: DayPilot.Duration.ofHours(3), text: "Event 11"},
                    { id: 12, duration: DayPilot.Duration.ofHours(3), text: "Event 12"},
                ];

                queue.update({events});
            }
        };
        app.init();