Agent-readable demo data

Title

Cell Customization (Open-Source JavaScript Monthly Calendar) | DayPilot Lite for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Lite

Description

Note: You can customize the day cells (background color, header text, CSS, HTML, business status) in the monthly calendar.

• Canonical HTML: /demo/lite/month/cellcustomization.html
• Markdown companion: /demo/lite/month/cellcustomization.md
• Folder: /demo/lite/month/
• Root: /demo/lite/
• Catalog: /demo/lite/llms.txt

Inline demo script 1

const dp = new DayPilot.Month("dp", {
        startDate: DayPilot.Date.today(),
        onTimeRangeSelected: async function (args) {

            const colors = [
                {name: "Blue", id: "#3c78d8"},
                {name: "Green", id: "#6aa84f"},
                {name: "Yellow", id: "#f1c232"},
                {name: "Red", id: "#cc0000"},
            ];

            const form = [
                {name: "Text", id: "text"},
                {name: "Color", id: "barColor", options: colors}
            ];

            const data = {
                text: "Event",
                barColor: "#6aa84f"
            };

            const modal = await DayPilot.Modal.form(form, data);

            dp.clearSelection();

            if (modal.canceled) {
                return;
            }

            dp.events.add({
                start: args.start,
                end: args.end,
                id: DayPilot.guid(),
                text: modal.result.text,
                barColor: modal.result.barColor
            });
        },
        onBeforeCellRender: args => {
            if (args.cell.start === DayPilot.Date.today()) {
                args.cell.properties.backColor = "#fff8e1";
                args.cell.properties.html = "Today";
            }
        }
    });

    // generate and load events
    for (let i = 0; i < 10; i++) {
        const duration = Math.floor(Math.random() * 1.2);
        const start = Math.floor(Math.random() * 6) - 3; // -3 to 3

        dp.events.add({
            start: new DayPilot.Date("2026-03-04T00:00:00").addDays(start),
            end: new DayPilot.Date("2026-03-04T12:00:00").addDays(start).addDays(duration),
            id: DayPilot.guid(),
            text: "Event " + i
        });
    }

    dp.init();