Agent-readable demo data

Title

JavaScript Event Calendar | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

Customize the component using Calendar UI Builder and download a ready-to-run project. Read more about the JavaScript event calendar.

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

Inline demo script 1

const dp = new DayPilot.Calendar("dp", {
            // view
            startDate: DayPilot.Date.today(),
            viewType: "Days",
            days: 210,
            columnWidthSpec: "Fixed",
            dynamicEventRendering: "Progressive",
            dynamicEventRenderingMarginY: 1000,
            scrollDelayEvents: 100,
        });
        dp.init();

        const app = {
            init() {
                const events = [];
                for (let x = 0; x < dp.days; x++) {
                    for (let y = 0; y < 24; y++) {
                        const e = {
                            start: dp.startDate.addDays(x).addHours(0).addHours(y),
                            end:  dp.startDate.addDays(x).addHours(0).addHours(y).addHours(1),
                            text: `Event ${x}/${y}`,
                            id: DayPilot.guid(),
                        };
                        events.push(e);
                    }
                }
                dp.update({events});
            }
        };
        app.init();