Agent-readable demo data

Title

Progressive Event Rendering (JavaScript Scheduler) | DayPilot Lite for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Lite

Description

Read more about progressive event rendering.

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

Inline demo script 1

const dp = new DayPilot.Scheduler("dp", {
            startDate: "2026-04-01",
            days: 365,
            scale: "Day",
            timeHeaders: [
                {groupBy: "Month", format: "MMMM yyyy"},
                {groupBy: "Day", format: "d"}
            ],
            rowHeaderWidth: 120,
            rowMarginTop: 2,
            rowMarginBottom: 2,
            heightSpec: "Max",
            height: 400,
            onTimeRangeSelected: async (args) => {
                const modal = await DayPilot.Modal.prompt("New event name:", "New 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
                });
            },
            onEventClick: async (args) => {
                const modal = await DayPilot.Modal.prompt("Event name:", args.e.text());
                if (modal.canceled) {
                    return;
                }
                args.e.text(modal.result);
                dp.events.update(args.e);
            },
            scrollDelayEvents: "Auto",
            dynamicEventRenderingCacheSweeping: true,
            dynamicEventRenderingCacheSize: 300,
            dynamicEventRenderingMarginX: 200,
            dynamicEventRenderingMarginY: 200
        });

        dp.init();
        dp.scrollTo("2026-04-01");

        const app = {
            barColor(i) {
                const colors = ["#3c78d8", "#6aa84f", "#f1c232", "#cc0000"];
                return colors[i % 4];
            },
            barBackColor(i) {
                const colors = ["#a4c2f4", "#b6d7a8", "#ffe599", "#ea9999"];
                return colors[i % 4];
            },
            loadData() {
                const resources = [];

                for (let y = 0; y < 200; y++) {
                    resources.push({name: "Resource " + y, id: y});
                }

                const events = [];
                for (let y = 0; y < 200; y++) {
                    for (let x = 0; x < 20; x++) {
                        const i = y*20 + x + 1;
                        const e = {
                            start: new DayPilot.Date("2026-04-05T12:00:00").addDays(x),
                            end: new DayPilot.Date("2026-04-05T12:00:00").addDays(x + 1),
                            id: i,
                            resource: y,
                            text: "Event " + (i),
                            barColor: app.barColor(i),
                            barBackColor: app.barBackColor(i)
                        };

                        events.push(e);

                    }

                }

                dp.update({resources, events});
            },
            addEventHandlers() {
                document.querySelector("#scrollDelayEvents").addEventListener("change", (ev) => {
                    const value = ev.target.value.trim();
                    dp.scrollDelayEvents = value.toLowerCase() === "auto" ? "Auto" : Number(value);
                });

                document.querySelector("#dynamicEventRenderingCacheSweeping").addEventListener("change", (ev) => {
                    dp.dynamicEventRenderingCacheSweeping = ev.target.checked;
                });

                document.querySelector("#dynamicEventRenderingCacheSize").addEventListener("change", (ev) => {
                    dp.dynamicEventRenderingCacheSize = Number(ev.target.value);
                });

                document.querySelector("#dynamicEventRenderingMargin").addEventListener("change", (ev) => {
                    const value = Number(ev.target.value);
                    dp.dynamicEventRenderingMarginX = value;
                    dp.dynamicEventRenderingMarginY = value;
                });

            },
            init() {
                app.addEventHandlers();
                app.loadData();
            }
        };

        app.init();