JQuery Context-menu assimilation with FullCalendar

Question

I'm dealing with Martin Wendt's jQuery Context-menu plugin and I'm trying to integrate it in my FullCalendar plugin. The issue is that nothing happens on right-clicking on the event. So, no context-menu pops-out.

I got the following jquery code in my default.html file that displays the calendar:

        $('#calendar').fullCalendar({
            eventRender: function(event, element) {
                var originalClass = element[0].className;
                element[0].className = originalClass + ' hasmenu';
            },
            //
        });

        $('#calendar').contextmenu({
            delegate: '.hasmenu',
            menu: [
                {title: 'Copy', cmd: 'copy', uiIcon: 'ui-icon-copy'},
                {title: '----'},
                {title: 'More', children: [
                    {title: 'Sub 1', cmd: 'sub1'},
                    {title: 'Sub 2', cmd: 'sub1'}
                    ]}
                ],
            select: function(event, ui) {
                alert('select ' + ui.cmd + ' on ' + ui.target.text());
            }
        });

As you can see, it seems like there's nothing wrong with the code since I completely followed the procedures to enable the jquery context-menu to pop-out when right-clicking on an event. Here are also the dependencies required for the context-menu plugin:

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" 
    rel="stylesheet" />
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="assets/jquery.ui-contextmenu.min.js"></script>

In order to fulfill it, in the beginning of my section, I included the dependencies for FullCalendar and the Contextmenu :

<link href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css' rel='stylesheet' />
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script src='//code.jquery.com/jquery-1.11.3.min.js'></script>
<script src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
<script src='../jquery.ui-contextmenu.min.js'></script>

The jquery.ui-contextmenu.min.js file got bumped up to the main folder where my fullcalendar.min.js is present as you can notice.

Answer 1

I made a fiddle based on the above code where the context menu does appear but gets displayed behind bits of the calendar and is inaccessible.

https://jsfiddle.net/xc7styt5/

If you change the z-index of class ui-contextmenu it should function.

https://jsfiddle.net/p52gohwn/

.ui-contextmenu {
  z-index: 1;
}

(there may be a better way)