title: ContextMenu integration with jQuery FullCalendar
body: <p>I'm using Adam Shaw's <code>FullCalendar</code> control along with jQuery. I would like to add a context menu to events and days. I was able to achieve so by using <a href="http://wwwendt.de/tech/demo/jquery-contextmenu/jquery.ui-contextmenu.js" rel="nofollow noreferrer">Martin Wendt's Context Menu control</a>. My code for registering the menu on events looks like this:</p>
  
  <pre><code>$('#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';
      });
  });
  </code></pre>
  
  <p>I'm essentially adding a class called <code>hasmenu</code> to each event and day in the calendar.</p>
  
  <pre><code>$(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
      }
  });
  </code></pre>
  
  <p>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 <code>hasmenu</code> class is messing with those. When I set a breakpoint in VS, it says the event has these classes:</p>
  
  <pre><code>"fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end hasmenu"
  </code></pre>
  
  <p>And this is how it looks on the page:</p>
  
  <p><img src="https://i.stack.imgur.com/5R2pu.png" alt="enter image description here"></p>
  
  <p>I tried temporarily setting the event class to just <code>hasmenu</code> 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.</p>