Agent-readable demo data

Title

Dynamic Tree Loading (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

The tree node children are loaded dynamically using the onLoadNode event handler. Read more about dynamic resource tree loading [doc.daypilot.org].

• Canonical HTML: /demo/scheduler/treedynamic.html
• Markdown companion: /demo/scheduler/treedynamic.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-25").firstDayOfMonth(),
            cellGroupBy: "Month",
            days: new DayPilot.Date("2026-03-25").firstDayOfMonth().daysInMonth(),
            cellDuration: 1440, // one day
            treeEnabled: true,
            resources: [
                {name: "Building A", id: "A", dynamicChildren: true},
                {name: "Building B", id: "B", dynamicChildren: true},
                {name: "Building C", id: "C", dynamicChildren: true}
            ],
            onLoadNode: args => {
                args.async = true;

                // simulating a slow server-side call
                setTimeout(() => {
                    args.resource.children = [
                        {name: "Room 111", id: args.resource.id + "111"},
                        {name: "Room 112", id: args.resource.id + "112", expanded: true, children: [
                                {name: "Room 112.a", id: args.resource.id + "112a"},
                                {name: "Room 112.b", id: args.resource.id + "112b"},
                            ]
                        },
                        {name: "Room 113", id: args.resource.id + "113"},
                    ];
                    args.loaded();
                }, 100);
            },
            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");
            }
        });

        dp.init();