Agent-readable demo data

Title
Monthly Event Calendar | DayPilot Pro for JavaScript Demo
Tree
DayPilot JavaScript Demo
Catalog root
Default
Description
Hold a cursor on an event to see the active areas. The event active areas [doc.daypilot.org] can be used to display custom action buttons, drag handlers, icons, and other objects.

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());
                }
            }),
            eventHoverHandling: "Disabled",
            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),
            onEventClicked: function (args) {
                DayPilot.Modal.alert(DayPilot.Util.escapeHtml("clicked: " + args.e.id()));
            },
            onHeaderClicked: function (args) {
                DayPilot.Modal.alert(DayPilot.Util.escapeHtml("day: " + args.header.dayOfWeek));
            }
        });

        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,
                        areas: [
                            {
                                onClick: (e) => {
                                    dp.events.remove(e);
                                },
                                top: 3,
                                bottom: 9,
                                right: 3,
                                width: 17,
                                v: "Hover",
                                css: "event_action_delete"
                            }
                        ]
                    });
                    dp.events.add(e);
                }
            },
            init() {
                this.loadData();
                dp.init();
            }
        };
        app.init();