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

A transparent CSS theme. You can customize the Transparent Theme in DayPilot Theme Designer.

• 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

const dp = new DayPilot.Month("dp", {
        theme: "month_transparent",
        startDate: "2027-08-01",
        onTimeRangeSelected: (args) => app.createEvent(args),
        onEventClicked: function (args) {
            DayPilot.Modal.alert(DayPilot.Util.escapeHtml("clicked: " + args.e.id()));
        },
        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);
                    }
                }
            ];
        }
    });

    const app = {
        async createEvent(args) {
            const modal = await DayPilot.Modal.prompt("New event name:", "Event");
            const name = modal.canceled ? null : modal.result;
            dp.clearSelection();
            if (!name) {
                return;
            }
            const e = new DayPilot.Event({
                start: args.start,
                end: args.end,
                id: DayPilot.guid(),
                text: name
            });
            dp.events.add(e);
        },
        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
                const e = new DayPilot.Event({
                    start: new DayPilot.Date("2027-08-04T00:00:00").addDays(start),
                    end: new DayPilot.Date("2027-08-04T12:00:00").addDays(start).addDays(duration),
                    id: DayPilot.guid(),
                    text: "Event " + i
                });
                dp.events.add(e);
            }
        },
        init() {
            this.loadData();
            dp.init();
        }
    };

    app.init();