Agent-readable demo data

Title

Time Headers (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox

Tree

DayPilot JavaScript Sandbox

Catalog root

Default

Description

The Scheduler can display multiple time header rows, each with a defined resolution and date format. Read more about the time header rows [doc.daypilot.org].

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

Inline demo script 1

const dp = new DayPilot.Scheduler("dp", {
            startDate: new DayPilot.Date("2026-03-01"),
            days: 90,
            scale: "Day",
            timeHeaders: [
                {groupBy: 'Month', height: 25},
                {groupBy: 'Week'},
                {groupBy: 'Day', format: "d"}
            ],
            treeEnabled: true,
            resources: [
                {name: "Room A", id: "A"},
                {name: "Room B", id: "B"},
                {name: "Room C", id: "C"}
            ],
            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");
            },
            onBeforeTimeHeaderRender: args => {
                if (args.header.level === 1) {
                    args.header.html = "Week " + args.header.text;
                }
            },
        });
        dp.init();