Menu: menu is not defined

Can you please post the stack trace?

1 - On cell/ date selection wanted to open context menu - is it possible? if yes snippet please
2 - On click on booking want to open context menu - is it possible? if yes snippet please

For Reference Code is Here
/*************************************
<script type="text/javascript">
var nav = new DayPilot.Navigator("nav");
nav.selectMode = "month";
nav.showMonths = 3;
nav.skipMonths = 3;
nav.onTimeRangeSelected = function (args) {
loadTimeline(args.start);
loadEvents();
};
nav.init();

$("#timerange").change(function () {
switch (this.value) {
case "week":
dp.days = 7;
nav.selectMode = "Week";
nav.select(nav.selectionDay);
break;
case "month":
dp.days = dp.startDate.daysInMonth();
nav.selectMode = "Month";
nav.select(nav.selectionDay);
break;
}
});

function autocellWidth() {
dp.cellWidth = 40; // reset for "Fixed" mode
dp.cellWidthSpec = "Auto"; //$(this).is(":checked") ? "Auto" : "Fixed";
dp.update();
}

$("#add-room").click(function (ev) {
ev.preventDefault();
var modal = new DayPilot.Modal();
modal.onClosed = function (args) {
loadResources();
};
modal.showUrl("room_new.php?PHPSESSID=<?= $sid ?>");
});

var dp = new DayPilot.Scheduler("dp");
//dp.heightSpec = "Parent100Pct";
dp.heightSpec = "Max";
dp.height = 550;

dp.allowEventOverlap = false;

//dp.scale = "Day";
//dp.startDate = new DayPilot.Date().firstDayOfMonth();
dp.days = dp.startDate.daysInMonth();
loadTimeline(DayPilot.Date.today().firstDayOfMonth());

dp.eventDeleteHandling = "Disabled";

dp.timeHeaders = [
{groupBy: "Month", format: "MMMM yyyy"},
{groupBy: "Day", format: "d"}
];

dp.eventHeight = 50;
dp.bubble = new DayPilot.Bubble({});

dp.rowHeaderColumns = [
{title: "Room", width: 80}/*,
{title: "Capacity", width: 80},
{title: "Status", width: 80}*/
];
dp.contextMenu = new DayPilot.Menu({items: [
{text: "Edit", onclick: function () {
dp.events.edit(this.source);
}},
{text: "Delete", onclick: function () {
dp.events.remove(this.source);
}},
{text: "-"},
{text: "Change background color", onclick: function () {
var e = this.source;
e.data.backColor = "red";
dp.events.update(e);
}},
{text: "-"},
{text: "Select", onclick: function () {
dp.multiselect.add(this.source);
}},
]});

My simple question is how to open this context menu

What i understood:

this is for initialization
dp.contextMenu = new DayPilot.Menu({items: [
{text:"Edit", onclick: function() { dp.events.edit(this.source); } },
{text:"Delete", onclick: function() { dp.events.remove(this.source); } },
{text:"-"},
{text:"Change background color", onclick: function() { var e = this.source; e.data.backColor = "red"; dp.events.update(e); } },
{text:"-"},
{text:"Select", onclick: function() { dp.multiselect.add(this.source); } },
]});

how to call this menu / how to open this ?

1. The "contextMenu" property specifies a context menu for events. It's activated when you right-click an event (the default eventRightClickHandling value is set to "ContextMenu").

You can also map it to left click by setting eventClickHandling to "ContextMenu".

2. You can set the time range selection context menu using "contextMenuSelection" property:

dp.contextMenuSelection = new DayPilot.Menu( /* ... */ );

It can be activated by right-clicking a selection (timeRangeSelectionRightClickHandling is set to "ContextMenu" by default).

3. You can also display the context menu manually using .show() method:

var menu = new DayPilot.Menu( /* ... */ );
var target = {};
menu.show(target);

The "target" object will be available as this.source in onclick menu item handlers.

Thanks and do appreciate for help, its working.. now wanted close context menu automatically when cursor goes out of the menu, is it possible?

hideOnMouseOut: true option is working for me, thanks