Agent-readable demo data

Title

Cell Customization (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

You can write custom HTML to grid cells. You can also modify cell properties, such as background color, CSS class and IsBusiness status. Read more about cell customization [doc.daypilot.org].

• Canonical HTML: /demo/scheduler/cellcustomization.html
• Markdown companion: /demo/scheduler/cellcustomization.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",
            cellWidth: 80,
            eventHeight: 40,
            timeHeaders: [
                {groupBy: "Month", format: "MMMM yyyy"},
                {groupBy: "Cell", format: "d"}
            ],
            onBeforeCellRender: args => {
                if (args.cell.resource === "A" && args.cell.start.getDay() === 1) {
                    args.cell.areas = [
                        {backColor: "#f1c232", top: 0, left: 0, right: 0, height: 4},
                        {
                            backColor: "#ffe599",
                            top: 4,
                            left: 0,
                            right: 0,
                            height: 15,
                            text: "Maintenance",
                            style: "text-align: center; color: #333; font-size: 8pt;"
                        },
                    ];
                    args.cell.properties.status = "Under Maintenance";
                }
                if (args.cell.resource === "D") {
                    args.cell.areas = [
                        {backColor: "#e06666", top: 0, left: 0, right: 0, height: 4},
                        {
                            backColor: "#f4cccc",
                            top: 4,
                            left: 0,
                            right: 0,
                            bottom: 0,
                            text: "Unavailable",
                            style: "text-align: center; color: #333; font-size: 8pt;"
                        },
                    ];
                    args.cell.properties.status = "Unavailable";
                }
            },
            onCellMouseOver: args => {
                if (args.cell.properties.status) {
                    new DayPilot.Bubble().showHtml(args.cell.properties.status, args.cell.div);
                }
            },
            onCellMouseOut: args => {
                DayPilot.Bubble.hideActive();
            },
            treeEnabled: true,
            resources: [
                {name: "Room A", id: "A"},
                {name: "Room B", id: "B"},
                {name: "Room C", id: "C"},
                {name: "Room D", id: "D"},
                {name: "Room E", id: "E"},
                {name: "Room F", id: "F"},
                {name: "Room G", id: "G"},
                {name: "Room H", id: "H"},
                {name: "Room I", id: "I"},
                {name: "Room J", id: "J"},
                {name: "Room K", id: "K"},
            ],
            onTimeRangeSelected: async args => {
                const modal = await DayPilot.Modal.prompt("New event name:", "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");
            },
            height: 350
        });
        dp.init();