Agent-readable demo data

Title

Transparent CSS Theme (Open-Source JavaScript 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/calendar/themetransparent.html
• Markdown companion: /demo/lite/calendar/themetransparent.md
• Folder: /demo/lite/calendar/
• Root: /demo/lite/
• Catalog: /demo/lite/llms.txt

Inline demo script 1

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

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

        // view
        dp.startDate = DayPilot.Date.today();
        dp.viewType = "Week";

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

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

        dp.onBeforeEventRender = args => {
            args.data.areas = [
                {
                    right: 4,
                    top: 6,
                    width: 24,
                    height: 24,
                    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();

        const startDate = DayPilot.Date.today().firstDayOfWeek();
        const events = [
            {
                start: startDate.addDays(1).addHours(12),
                end: startDate.addDays(1).addHours(15),
                id: 1,
                text: "Event 1"
            },
            {
                start: startDate.addDays(2).addHours(11),
                end: startDate.addDays(2).addHours(16),
                id: 2,
                text: "Event 2"
            },
            {
                start: startDate.addDays(3).addHours(9).addMinutes(30),
                end: startDate.addDays(3).addHours(12),
                id: 3,
                text: "Event 3"
            },
            {
                start: startDate.addDays(3).addHours(13),
                end: startDate.addDays(3).addHours(15).addMinutes(30),
                id: 4,
                text: "Event 4"
            },
            {
                start: startDate.addDays(3).addHours(14),
                end: startDate.addDays(3).addHours(16).addMinutes(30),
                id: 5,
                text: "Event 5"
            },
        ];
        dp.update({events});