Agent-readable demo data

Title
Localization (Open-Source JavaScript Monthly Event Calendar) | DayPilot Lite for JavaScript Demo
Tree
DayPilot JavaScript Demo
Catalog root
Lite
Description
Note: Read more about the monthly event calendar localization [doc.daypilot.org].

Inline demo script 1

const dp = new DayPilot.Month("dp", {
        locale: "de-de",
        startDate: "2027-08-01",
        onTimeRangeSelected: (args) => app.createEvent(args),
        onEventClicked: function (args) {
            DayPilot.Modal.alert(DayPilot.Util.escapeHtml("clicked: " + args.e.id()));
        }
    });

    // view
    // event creating
    dp.init();

    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);
        },
        elements: {
            locale: document.querySelector("#locale")
        },
        init() {
            this.addEventHandlers();
            this.loadEventData();
        },
        addEventHandlers() {
            app.elements.locale.addEventListener("change", function () {
                const locale = app.elements.locale.value;
                dp.update({ locale });
            });
        },
        loadEventData() {
            const 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 2
                events.push({
                    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.update({ events });
        }
    };

    app.init();