ContextMenu integration with jQuery FullCalendar

Question

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:

enter image description here

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.

Hmm I can't import some of the scripts since they're on my computer. jsfiddler keeps complaining. — user2872534, Jul 30 '14 at 17:05
@feitla Ah. On the CSS. It worked. Please post it as an answer ;) — user2872534, Jul 30 '14 at 17:17

score 5 · Accepted Answer · answered Jul 30 '14 at 17:34

5

Adjusting the z-index will probably be your best bet.

answered Jul 30 '14 at 17:34

feitla

1,334
1
7
12

score 5 · Answer 2 · edited Dec 15 '14 at 08:55

5

Adjust the z-index in the beforeOpen event

beforeOpen: function (event, ui) {      
    ui.menu.zIndex($(event.target).zIndex() + 1);
}

please see: https://github.com/mar10/jquery-ui-contextmenu/issues/55

edited Dec 15 '14 at 08:55

t3chb0t

16,340
13
78
118

answered Dec 15 '14 at 08:28

Sandra Patta

153
3
7

score 1 · Answer 3 · answered Dec 15 '17 at 02:44

This helps to get resolve your issue:

beforeOpen: function (event, ui) {
            var $menu = ui.menu,
                $target = ui.target;
            ui.menu.css('z-index', '10000000');
            // Things to happen right before the menu pops up
        }

ContextMenu integration with jQuery FullCalendar

3 Answers3

Linked