Agent-readable demo data

Title

Sticky Parents (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

The Scheduler can make parent resource rows sticky and keep them visible at the top while scrolling. Read more about sticky parents.

• Canonical HTML: /demo/scheduler/stickyparents.html
• Markdown companion: /demo/scheduler/stickyparents.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: "Day", format: "d"}
            ],
            rowHeaderColumns: [
                {title: "Name", display: "name"},
                {title: "Id", display: "id"},
            ],
            treeEnabled: true,
            rowMarginTop: 2,
            rowMarginBottom: 2,
            resources: [
                {
                    name: "Locations", id: "G1", expanded: true, children: [
                        {name: "Room 1", id: "A", expanded: true, children: [
                                {name: "Room 1.1", id: "A.1"},
                                {name: "Room 1.2", id: "A.2"},
                            ]},
                        {name: "Room 2", id: "B"},
                        {name: "Room 3", id: "C"},
                        {name: "Room 4", id: "D"}
                    ]
                },
                {
                    name: "People", id: "G2", expanded: true, children: [
                        {name: "Group 1", id: "G2.1", expanded: true, children: [
                                {name: "Person 1", id: "E"},
                                {name: "Person 2", id: "F"},
                                {name: "Person 3", id: "G"},
                                {name: "Person 4", id: "H"}
                            ]
                        },
                        {name: "Group 2", id: "G2.2", expanded: true, children: [
                                {name: "Person 5", id: "I"},
                                {name: "Person 6", id: "J"},
                                {name: "Person 7", id: "K"},
                                {name: "Person 8", id: "L"}
                            ]
                        },
                    ]
                },
                {
                    name: "Tools", id: "G3", expanded: true, children: [
                        {name: "Tool 1", id: "M"},
                        {name: "Tool 2", id: "N"},
                        {name: "Tool 3", id: "O"},
                        {name: "Tool 4", id: "P"}
                    ]
                },
                {
                    name: "Other Resources", id: "G4", expanded: true, children: [
                        {name: "Resource 1", id: "Q"},
                        {name: "Resource 2", id: "R"},
                        {name: "Resource 3", id: "S"},
                        {name: "Resource 4", id: "T"}
                    ]
                },
            ],
            heightSpec: "Max",
            eventMovingStartEndEnabled: true,
            eventResizingStartEndEnabled: true,
            timeRangeSelectingStartEndEnabled: true,
            onTimeRangeSelected: async args => {
                const modal = await DayPilot.Modal.prompt("New event name:", "New Event");
                dp.clearSelection();
                const name = modal.result;
                if (!name) return;
                const e = new DayPilot.Event({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    resource: args.resource,
                    text: name
                });

                // dp.rows.find("frozen1").cells.all().invalidate();
                dp.events.add(e);
            },
            height: 350,
            rowHeaderColumnsMergeParents: true,
            stickyParents: true
        });
        dp.init();
        dp.scrollTo("2026-06-01");


        const app = {
            elements: {
                sticky: document.getElementById("sticky"),
            },
            init() {
                this.addEventHandlers();
                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 + 1); // 1 to 6
                    const start = Math.floor(Math.random() * 6) + 2; // 2 to 7

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

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

                    events.push(event);
                }

                dp.update({events});
            },
            barColor(i) {
                const colors = ["#3c78d8", "#6aa84f", "#f1c232", "#cc0000"];
                return colors[i % 4];
            },
            barBackColor(i) {
                const colors = ["#a4c2f4", "#b6d7a8", "#ffe599", "#ea9999"];
                return colors[i % 4];
            },
            addEventHandlers() {
                app.elements.sticky.addEventListener("change", function() {
                    const sticky = app.elements.sticky.checked;
                    dp.update({stickyParents: sticky});
                });
            },
        };
        app.init();