Agent-readable demo data

Title

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

Tree

DayPilot JavaScript Demo

Catalog root

Default

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 displays a context menu on click. Read more about the row header active areas.

• Canonical HTML: /demo/scheduler/rowheaderactiveareas.html
• Markdown companion: /demo/scheduler/rowheaderactiveareas.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: "MMM yyyy"},
                {groupBy: "Cell", format: "d"}
            ],
            resourceBubble: new DayPilot.Bubble({position: "Right"}),
            treeEnabled: true,
            resources: [
                {
                    name: "Locations", id: "G1", expanded: true, children: [
                        {name: "Room 1", id: "A"},
                        {name: "Room 2", id: "B"},
                        {name: "Room 3", id: "C"},
                        {name: "Room 4", id: "D"}
                    ]
                },
                {
                    name: "People", id: "G2", expanded: true, children: [
                        {name: "Person 1", id: "E"},
                        {name: "Person 2", id: "F"},
                        {name: "Person 3", id: "G"},
                        {name: "Person 4", id: "H"}
                    ]
                },
                {
                    name: "Tools", id: "G3", expanded: false, children: [
                        {name: "Tool 1", id: "I"},
                        {name: "Tool 2", id: "J"},
                        {name: "Tool 3", id: "K"},
                        {name: "Tool 4", id: "L"}
                    ]
                }
            ],
            heightSpec: "Max",
            height: 350,
            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
                });
                dp.message("Created");
            },
            treePreventParentUsage: true,
            onBeforeRowHeaderRender: args => {
                args.row.areas = [
                    {
                        right: 5,
                        top: "calc(50% - 8px)",
                        width: 17,
                        height: 17,
                        visibility: "Hover",
                        symbol: "../icons/daypilot.svg#minichevron-down-2",
                        backColor: "#fff",
                        action: "ContextMenu",
                        style: "cursor: pointer; border: 1px solid #ccc; border-radius: 50%;"
                    },
                ];
            },
            contextMenuResource: new DayPilot.Menu({
                items: [
                    {
                        text: "Edit...", action: "JavaScript", onClick: args => {
                            dp.rows.edit(args.source);
                        }
                    },
                    {text: "-"},
                    {
                        text: "Delete...", onClick: args => {
                            dp.rows.remove(args.source);
                        }
                    }
                ]
            }),
        });

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