search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Menu: menu is not defined

Asked by Sapan Kumar
4 months ago.

Added this code
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); } },
]});

encountering with an error: 'menu is not defined'

i am using daypilot pro trial one, whats the issue? any clue?

Comment posted by Dan Letecky [DayPilot]
4 months ago.

Can you please post the stack trace?

Comment posted by Sapan Kumar
4 months ago.

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);
}},
]});

Comment posted by Sapan Kumar
3 months ago.

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 ?

Answer posted by Dan Letecky [DayPilot]
3 months ago.

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.

Comment posted by Sapan Kumar
3 months ago.

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

Comment posted by Sapan Kumar
3 months ago.

hideOnMouseOut: true option is working for me, thanks

New Reply
This reply is
Your name (optional):