Agent-readable demo data

Title

Transparent CSS Theme (Open-Source JavaScript Monthly Event Calendar) | DayPilot Lite for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Lite

Description

Note: You can create a theme using the online DayPilot Theme Designer: https://themes.daypilot.org/

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

Inline demo script 1

var dp = new DayPilot.Month("dp");

    // behavior and appearance
    dp.theme = "month_transparent";

    // view
    dp.startDate = "2026-03-01";

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

        var e = new DayPilot.Event({
            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.events.add(e);
    }

    // event creating
    dp.onTimeRangeSelected = function (args) {
        var name = prompt("New event name:", "Event");
        dp.clearSelection();
        if (!name) return;
        var e = new DayPilot.Event({
            start: args.start,
            end: args.end,
            id: DayPilot.guid(),
            text: name
        });
        dp.events.add(e);
    };

    dp.onEventClicked = function(args) {
        alert("clicked: " + args.e.id());
    };

    dp.onBeforeEventRender = args => {
        args.data.areas = [
            {
                right: 2,
                top: 2,
                width: 20,
                height: 20,
                padding: 3,
                fontColor: "#666666",
                backColor: "#ffffff88",
                borderRadius: "50%",
                toolTip: "Edit",
                symbol: "../icons/daypilot.svg#edit",
                action: "None",
                onClick: async args => {
                    const form = [
                        {id: "text", name: "Event Name", type: "text"}
                    ];
                    const e = args.source;
                    const modal = await DayPilot.Modal.form(form, e.data);
                    if (modal.canceled) {
                        return;
                    }
                    dp.events.update(modal.result);
                }
            }
        ]
    };

    dp.init();