Agent-readable demo data

Title

Progressive Row Rendering (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

This scheduler displays 300 resources, each with 3 children. The row headers are rendered progressively during scrolling (progressiveRowRendering: true). Read more about progressive row rendering.

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

Inline demo script 1

const dp = new DayPilot.Scheduler("dp", {
            startDate: "2026-01-01",
            days: 365,
            scale: "Day",
            timeHeaders: [
                {groupBy: "Month", format: "MMMM yyyy"},
                {groupBy: "Cell", format: "d"}
            ],
            treeEnabled: true,
            progressiveRowRendering: true,
            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");
            },
            height: 350
        });
        dp.init();
        dp.scrollTo("2026-03-25");


        const app = {
            init() {
                this.loadData();
            },
            loadData() {
                // generate and load events
                const resources = [];
                for (let i = 0; i < 300; i++) {
                    const r = {
                        name: "Resource " + i,
                        id: "R" + i,
                        children: []
                    };

                    for (let x = 0; x < 3; x++) {
                        const c = {
                            name: "Resource " + i + "." + x,
                            id: "R" + i + "." + x
                        };
                        r.children.push(c);
                    }
                    resources.push(r);
                }

                const events = []
                for (let i = 0; i < 300; i++) {
                    events.push({
                        start: "2026-03-25",
                        end: "2026-03-25T12:00:00",
                        id: DayPilot.guid(),
                        resource: "R" + i,
                        text: "Event"
                    });
                }

                dp.update({resources, events});
            }
        };
        app.init();