JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ui-contextmenu/1.17.0/jquery.ui-contextmenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css">
<div id='calendar'></div>

CSS

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

JavaScript

$(document).on('ready', function() {
  $('#calendar').fullCalendar({
    events: [{
      start: moment(),
      title: 'This is an event!'
    }],
    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());
    }
  });
});