I'm using Adam Shaw's FullCalendar
control along with jQuery. I would like to add a context menu to events and days. I was able to achieve so by using Martin Wendt's Context Menu control. My code for registering the menu on events looks like this:
$('#calendar').fullCalendar({
// Other arguments
eventRender: function (event, element) {
var originalClass = element[0].className;
element[0].className = originalClass + ' hasmenu';
},
dayRender: function (day, cell) {
var originalClass = cell[0].className;
cell[0].className = originalClass + ' hasmenu';
});
});
I'm essentially adding a class called hasmenu
to each event and day in the calendar.
$(document).contextmenu({
delegate: ".hasmenu",
preventContextMenuForPopup: true,
preventSelect: true,
menu: [
{title: "Cut", cmd: "cut", uiIcon: "ui-icon-scissors"},
{title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy"},
{title: "Paste", cmd: "paste", uiIcon: "ui-icon-clipboard", disabled: true },
],
select: function(event, ui) {
// Logic for handing the selected option
},
beforeOpen: function(event, ui) {
// Things to happen right before the menu pops up
}
});
The problem with this is that the menu appears behind the calendar control. I believe this is because calendar events have a few other classes assigned to them and adding a hasmenu
class is messing with those. When I set a breakpoint in VS, it says the event has these classes:
"fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end hasmenu"
And this is how it looks on the page:
I tried temporarily setting the event class to just hasmenu
while the popup was open but that obviously changed the view entirely. Is there a way to force the menu to be on top of all other elements? Is there a "bring to front" method? Any help is appreciated.
Adjusting the z-index
will probably be your best bet.