# Event Context Menu (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox

> Activate the context menu by right-clicking an event. Read more about the [event context menu](https://doc.daypilot.org/scheduler/event-context-menu/) [doc.daypilot.org].

## Links

- Canonical HTML: /sandbox/scheduler/eventmenu.html
- Source HTML folder: /sandbox/scheduler/
- Catalog root: /sandbox/
- Catalog: /sandbox/llms.txt

## Source

### Inline demo script 1

```javascript
const dp = new DayPilot.Scheduler("dp", {
            startDate: new DayPilot.Date("2026-08-01"),
            cellGroupBy: "Month",
            days: new DayPilot.Date("2026-08-01").daysInMonth(),
            scale: "Day",
            timeHeaders: [
                {groupBy: "Month"},
                {groupBy: "Day", format: "d"}
            ],
            resources: [
                {name: "Room A", id: "A"},
                {name: "Room B", id: "B"},
                {name: "Room C", id: "C"},
                {name: "Room D", id: "D"},
                {name: "Room E", id: "E"},
                {name: "Room F", id: "F"},
                {name: "Room G", id: "G"},
            ],
            contextMenu: new DayPilot.Menu({
                onShow: args => {
                    const items = [];
                    for (let i = 0; i <=40; i++) {
                        items.push({
                            text: "Item" + i
                        });
                    }
                    dp.contextMenu.items[6].items = items;
                },
                items: [
                    {
                        text: "Edit",
                        onClick: args => dp.events.edit(args.source)
                    },
                    {
                        text: "Delete",
                        symbol: "../icons/daypilot.svg#trash",
                        onClick: args => dp.events.remove(args.source)
                    },
                    {text: "-"},
                    {
                        text: "Change color",
                        onClick: args => {
                            args.source.data.barColor = "#cc0000";
                            args.source.data.barBackColor = "#e06666";
                            dp.events.update(args.source);
                        }
                    },
                    {text: "-"},
                    {
                        text: "Select",
                        onClick: args => dp.multiselect.add(args.source)
                    },
                    {
                        text: "Submenu", items: [
                            {
                                text: "Edit",
                                onClick: args => dp.events.edit(args.source)
                            },
                            {
                                text: "Delete", onClick:
                                    args => dp.events.remove(args.source)
                            },
                        ]
                    },
                    {
                        text: "Disabled menu item",
                        onClick: () => alert("disabled"),
                        disabled: true
                    }
                ]
            }),
            onTimeRangeSelected: async args => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                dp.clearSelection();
                if (modal.canceled) return;
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    resource: args.resource,
                    text: modal.result
                });
                dp.message("Created");
            }
        });
        dp.init();

        const app = {
            init() {
                this.loadEventData();
            },
            loadEventData() {
                const events = [
                    {
                        start: new DayPilot.Date("2026-08-05T00:00:00"),
                        end: new DayPilot.Date("2026-08-10T12:00:00"),
                        id: DayPilot.guid(),
                        resource: "B",
                        text: "Event",
                        bubbleHtml: "Testing bubble"
                    }
                ];
                dp.update({events});
            }
        };
        app.init();
```