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";
            }
        }
    });

    const app = {
        loadData() {
            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 2
                dp.events.add({
                    start: dp.startDate.firstDayOfMonth().addDays(3).addDays(start),
                    end: dp.startDate.firstDayOfMonth().addDays(3).addHours(12).addDays(start).addDays(duration),
                    id: DayPilot.guid(),
                    text: "Event " + i
                });
            }
        },
        init() {
            this.loadData();
            dp.init();
        }
    };

    app.init();