Agent-readable demo data

Title

Separators (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

Separators mark a date/time across the schedule or within a specific resource row. The gray line is global; colored lines belong to individual rooms or floors. Collapse a floor or add overlapping bookings to see the lines follow their rows.

• Canonical HTML: /demo/scheduler/separators.html
• Markdown companion: /demo/scheduler/separators.md
• Folder: /demo/scheduler/
• Root: /demo/
• Catalog: /demo/llms.txt

Inline demo script 1

const dp = new DayPilot.Scheduler("dp", {
            startDate: new DayPilot.Date("2027-08-01"),
            cellGroupBy: "Month",
            days: new DayPilot.Date("2027-08-01").daysInMonth(),
            scale: "Day",
            treeEnabled: true,
            resources: [
                {name: "Floor 1", id: "floor1", expanded: true, children: [
                    {name: "Room A", id: "A"},
                    {name: "Room B", id: "B"},
                    {name: "Room C", id: "C"}
                ]},
                {name: "Floor 2", id: "floor2", expanded: true, children: [
                    {name: "Room D", id: "D"},
                    {name: "Room E", id: "E"},
                    {name: "Room F", id: "F"}
                ]}
            ],
            separators: [
                {color: "#888888", location: "2027-08-15T12:00:00", toolTip: "Schedule review"},
                {color: "#7c3aed", location: "2027-08-10T12:00:00", resource: "floor1", toolTip: "Floor 1 inspection"},
                {color: "#dc2626", location: "2027-08-05T12:00:00", resource: "A", layer: "AboveEvents", toolTip: "Room A checkpoint"},
                {color: "#2563eb", location: "2027-08-08T12:00:00", resource: "B", toolTip: "Room B checkpoint"},
                {color: "#059669", location: "2027-08-12T12:00:00", resource: "D", layer: "AboveEvents", toolTip: "Room D checkpoint"}
            ],
            events: [
                {id: 1, resource: "A", text: "Planning workshop", start: "2027-08-04", end: "2027-08-07"},
                {id: 2, resource: "A", text: "Equipment setup", start: "2027-08-05", end: "2027-08-08"},
                {id: 3, resource: "D", text: "Training", start: "2027-08-11", end: "2027-08-14"}
            ],
            onTimeRangeSelected: async args => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                const name = modal.result;
                dp.clearSelection();
                if (!name) return;
                const e = new DayPilot.Event({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    resource: args.resource,
                    text: name
                });
                dp.events.add(e);
                dp.message("Created");
            }
        });

        dp.init();