Agent-readable demo data

Title

Row Header Active Areas (JavaScript Scheduler) | DayPilot Lite for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Lite

Description

You can add custom icons and action buttons to the Scheduler row headers using active areas. This demo shows an icon on hover that opens an edit dialog on click. Read more about the row header active areas.

• Canonical HTML: /demo/lite/scheduler/rowheaderactiveareas.html
• Markdown companion: /demo/lite/scheduler/rowheaderactiveareas.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-01-01",
            days: 365,
            scale: "Day",
            timeHeaders: [
                {groupBy: "Month", format: "MMM yyyy"},
                {groupBy: "Cell", format: "d"}
            ],
            treeEnabled: true,
            resources: [
                {name: "Room 1", id: "A"},
                {name: "Room 2", id: "B"},
                {name: "Room 3", id: "C"},
                {name: "Room 4", id: "D"},
                {name: "Person 1", id: "E"},
                {name: "Person 2", id: "F"},
                {name: "Person 3", id: "G"},
                {name: "Person 4", id: "H"},
                {name: "Tool 1", id: "I"},
                {name: "Tool 2", id: "J"},
                {name: "Tool 3", id: "K"},
                {name: "Tool 4", id: "L"}
            ],
            onTimeRangeSelected: args => {
                const name = prompt("New event name:", `Event${args.start}`);
                dp.clearSelection();
                if (!name) return;
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    resource: args.resource,
                    text: name
                });
            },
            onBeforeRowHeaderRender: args => {
                args.row.areas = [
                    {
                        right: 5,
                        top: "calc(50% - 8px)",
                        width: 20,
                        height: 20,
                        visibility: "Hover",
                        symbol: "../icons/daypilot.svg#edit",
                        backColor: "#fff",
                        padding: 2,
                        borderRadius: "50%",
                        borderColor: "#999999",
                        style: "cursor:pointer",
                        onClick: async args => {
                            const row = args.source;
                            const modal = await DayPilot.Modal.prompt("New name:", row.name);
                            if (!modal.canceled) {
                                row.data.name = modal.result;
                                dp.rows.update(row);
                            }
                        }
                    },
                ];
            },
        });

        dp.init();
        dp.scrollTo("2026-03-25");