Agent-readable demo data

Title

Time Header Customization (JavaScript Scheduler) | DayPilot Lite for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Lite

Description

You can customize the time header cells (HTML, colors, CSS, areas) using the onBeforeTimeHeaderRender event. Read more about the time header customization [doc.daypilot.org].

• Canonical HTML: /demo/lite/scheduler/timeheadercustomization.html
• Markdown companion: /demo/lite/scheduler/timeheadercustomization.md
• Folder: /demo/lite/scheduler/
• Root: /demo/lite/
• Catalog: /demo/lite/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"}
            ],
            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
                });
            },
            onBeforeTimeHeaderRender: args => {
                if (args.header.level === 1) {
                    args.header.html = "Week " + args.header.text;
                }
                if (args.header.level === 2) {
                    const date = args.header.start;
                    if (date.getDayOfWeek() === 0 || date.getDayOfWeek() === 6) {
                        args.header.areas = [{
                            left: 0,
                            top: 0,
                            right: 0,
                            height: 4,
                            backColor: "#68c334",
                        }];
                    }
                }

            }
        });
        dp.init();