Agent-readable demo data

Title

Event Context Menu (Monthly Event Calendar) | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

Read more about event context menu [doc.daypilot.org].

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

Inline demo script 1

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

        // behavior and appearance
        dp.cellMarginBottom = 20;

        dp.bubble = new DayPilot.Bubble({
            cssClassPrefix: "bubble_default",
            onLoad: function (args) {
                var ev = args.source;
                args.html = "testing bubble for: " + ev.text();
            }
        });

        dp.contextMenu = new DayPilot.Menu({
            items: [
                {
                    text: "Show event ID", onClick: function (args) {
                        var e = args.source;
                        DayPilot.Modal.alert("Event value: " + e.id());
                    }
                },
                {
                    text: "Show event text", onClick: function (args) {
                        var e = args.source;
                        DayPilot.Modal.alert("Event text: " + e.text());
                    }
                },
                {
                    text: "Show event start", onClick: function (args) {
                        var e = args.source;
                        DayPilot.Modal.alert("Event start: " + e.start());
                    }
                },
                {
                    text: "Delete", onClick: function (args) {
                        dp.events.remove(args.source);
                    }
                }
            ]
        });

        // view
        dp.startDate = "2026-03-25";

        // generate and load events
        for (var i = 1; i <= 10; i++) {
            var duration = Math.floor(Math.random() * 1.2);
            var start = Math.floor(Math.random() * 6) - 3; // -3 to 3

            var e = new DayPilot.Event({
                start: new DayPilot.Date("2026-03-04T00:00:00").addDays(start),
                end: new DayPilot.Date("2026-03-04T12:00:00").addDays(start).addDays(duration),
                id: DayPilot.guid(),
                text: "Event " + i
            });
            dp.events.add(e);
        }

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

        dp.onBeforeEventRender = function (args) {
            args.data.areas = [
                {
                    top: 4,
                    right: 4,
                    height: 14,
                    width: 14,
                    fontColor: "#999",
                    symbol: "../icons/daypilot.svg#minichevron-down-4",
                    visibility: "Hover",
                    action: "ContextMenu",
                    style: "border: 1px solid #999; cursor:pointer;"
                }
            ];
        };

        dp.init();