Agent-readable demo data

Title

Event Containers (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

Event containers force events with the same container id to be rendered at the same vertical position within a row. Read more about event containers [doc.daypilot.org].

• Canonical HTML: /demo/scheduler/eventcontainers.html
• Markdown companion: /demo/scheduler/eventcontainers.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"}
            ],
            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"}
                    ]
                },
            ],
            onTimeRangeSelected: async args => {
                const modal = await DayPilot.Modal.prompt("New event name:", "New 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");
            },
            onBeforeEventRender: args => {
                if (args.data.container) {
                    args.data.html = `${args.data.text} (container: ${args.data.container})`;
                }
            },
            height: 350
        });
        dp.init();

        const app = {
            init() {
                this.loadEventData();
            },
            loadEventData() {
                // generate and load events
                const events = [
                    {
                        "start": "2026-01-07T00:00:00",
                        "end": "2026-01-12T00:00:00",
                        "id": "39441891-f564-8fc3-caf4-a2e892f804de",
                        "resource": "A",
                        "text": "New Event 1",
                    },
                    {
                        "start": "2026-01-11T00:00:00",
                        "end": "2026-01-15T00:00:00",
                        "id": "ce83a6d7-d8ff-ea0c-d149-4c37691b29da",
                        "resource": "A",
                        "text": "New Event 2",
                        container: 1
                    },
                    {
                        "start": "2026-01-17T00:00:00",
                        "end": "2026-01-22T00:00:00",
                        "id": "39fb5fba-d2cc-1c62-41a4-0b8df487f917",
                        "resource": "A",
                        "text": "New Event 3",
                        container: 1
                    }
                ];

                const links = [
                    {
                        from: "ce83a6d7-d8ff-ea0c-d149-4c37691b29da",
                        to: "39fb5fba-d2cc-1c62-41a4-0b8df487f917"
                    }
                ];

                dp.update({
                    events,
                    links
                });
            }
        };
        app.init();