Agent-readable demo data

Title

Time Header Active Areas (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

The first time header row displays an "info" icon on the right side (click the icon to see the time header cell details). The second row is split into custom 10-day sections using active areas with different colors. Read more about time header active areas.

• Canonical HTML: /demo/scheduler/timeheaderactiveareas.html
• Markdown companion: /demo/scheduler/timeheaderactiveareas.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: "Month", height: 24}
            ],
            treeEnabled: true,
            resources: [
                {name: "Room A", id: "A"},
                {name: "Room B", id: "B"},
                {name: "Room C", id: "C"},
                {name: "Room D", id: "D"},
                {name: "Room E", id: "E"},
                {name: "Room F", id: "F"},
                {name: "Room G", id: "G"},
                {name: "Room H", id: "H"},
                {name: "Room I", id: "I"},
                {name: "Room J", id: "J"},
                {name: "Room K", id: "K"}
            ],
            heightSpec: "Fixed",
            height: 200,
            rowMarginTop: 5,
            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 === 0) {
                    const style = "text-align: center; font-weight: bold; cursor: pointer; border-radius: 10px; border: 1px solid #ccc; background-color: #fff;";
                    args.header.areas = [
                        {
                            right: 6,
                            top: 6,
                            height: 16,
                            width: 16,
                            html: "i",
                            style: style,
                            action: "None",
                            onClick: args => {
                                const header = args.source;
                                console.log(args);
                                DayPilot.Modal.alert('Time slot clicked: ' + header.start.toString('yyyy-MM-dd HH:mm:ss') + ' - ' + header.end.toString('yyyy-MM-dd HH:mm:ss'));
                            }
                        },
                    ];
                } else if (args.header.level === 1) {
                    const point1 = args.header.start.addDays(10);
                    const point2 = args.header.start.addDays(20);
                    const padding = 3;
                    args.header.areas = [
                        {start: args.header.start, end: point1, top: padding, bottom: padding, backColor: "#cc0000", style: "border-radius: 10px;"},
                        {start: point1, end: point2, top: padding, bottom: padding, backColor: "#f1c232", style: "border-radius: 10px;"},
                        {start: point2, end: args.header.end, top: padding, bottom: padding, backColor: "#6aa84f", style: "border-radius: 10px;"},
                    ];

                    args.header.html = "";
                }
            }
        });
        dp.init();
        dp.scrollTo("2026-03-25");

        const app = {
            init() {
                this.loadEventData();
            },
            loadEventData() {
                // generate and load events
                const events = [];

                for (let i = 0; i < 15; i++) {
                    const duration = Math.floor(Math.random() * 6) + 1; // 1 to 6
                    const durationDays = Math.floor(Math.random() * 6 + 2); // 2 to 7
                    const start = Math.floor(Math.random() * 6) + 2; // 2 to 7

                    const resId = String.fromCharCode(65 + i);

                    const event = {
                        start: new DayPilot.Date("2026-03-25T00:00:00").addDays(start),
                        end: new DayPilot.Date("2026-03-25T12:00:00").addDays(start).addDays(durationDays).addHours(duration),
                        id: DayPilot.guid(),
                        resource: resId,
                        text: `Event ${i + 1}`
                    };

                    events.push(event);
                }
                dp.update({events});
            }
        };
        app.init();