Agent-readable demo data

Title

Event Deleting (Monthly Event Calendar) | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

Read more about event deleting [doc.daypilot.org].

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

Inline demo script 1

const dp = new DayPilot.Month("dp", {
            cellMarginBottom: 20,
            bubble: new DayPilot.Bubble({
                theme: "bubble_default",
                onLoad: function (args) {
                    const ev = args.source;
                    args.html = "Event: " + DayPilot.Util.escapeHtml(ev.text());
                }
            }),
            startDate: DayPilot.Date.today().firstDayOfMonth(),
            onEventMoved: function (args) {
                dp.message("Moved: " + args.e.text());
            },
            onEventResized: function (args) {
                dp.message("Resized: " + args.e.text());
            },
            onTimeRangeSelected: (args) => app.createEvent(args),
            eventDeleteHandling: "Update",
            onEventDeleted: function (args) {
                dp.message("Event deleted: " + args.e.text());
            },
            onHeaderClicked: function (args) {
                DayPilot.Modal.alert(DayPilot.Util.escapeHtml("day: " + args.header.dayOfWeek));
            },
            onBeforeEventRender: function (args) {
                // disable deleting for events with "1" in the text
                if (args.data.text.indexOf("1") !== -1) {
                    args.data.deleteDisabled = true;
                }
            }
        });

        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);
                dp.message("Created");
            },
            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 3

                    const e = new DayPilot.Event({
                        start: dp.startDate.addDays(3).addDays(start),
                        end: dp.startDate.addDays(3).addHours(12).addDays(start).addDays(duration),
                        id: DayPilot.guid(),
                        text: "Event " + i
                    });
                    dp.events.add(e);
                }
            },
            init() {
                this.loadData();
                dp.init();
            }
        };
        app.init();