JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.js"></script>
<div id='calendar'>
</div>
<ul class='custom-menu'>
  <li data-color="red">Red</li>
  <li data-color="green">Green</li>
  <li data-color="blue">Blue</li>
</ul>

CSS

/* CSS3 */


/* The whole thing */

.custom-menu {
  display: none;
  z-index: 1000;
  position: absolute;
  overflow: hidden;
  border: 1px solid #CCC;
  white-space: nowrap;
  font-family: sans-serif;
  background: #FFF;
  color: #333;
  border-radius: 5px;
  padding: 0;
}


/* Each of the items in the list */

.custom-menu li {
  padding: 8px 12px;
  cursor: pointer;
  list-style-type: none;
  transition: all .3s ease;
}

.custom-menu li:hover {
  background-color: #DEF;
}

JavaScript

/*
	Contains modified code from
	http://stackoverflow.com/questions/4495626/making-custom-right-click-context-menus-for-my-web-app?answertab=active#tab-top
*/

$('#calendar').fullCalendar({
  defaultDate: '2016-03-29',
  events: [{
    title: 'Right-click on me!',
    start: '2016-03-29'
  }],
});

// Trigger action when the contexmenu is about to be shown
$('a.fc-event').bind("contextmenu", function(event) {
  // Avoid the real one
  event.preventDefault();
  // Show contextmenu, save the a.fc-event $(this) for access later
  $(".custom-menu").data('event', $(this)).finish().toggle(100).
    // In the right position (the mouse)
  css({
    top: event.pageY + "px",
    left: event.pageX + "px"
  });
});

// If the document is clicked somewhere
$(document).bind("mousedown", function(e) {
  // If the clicked element is not the menu
  if (!$(e.target).parents(".custom-menu").length > 0) {
    // Hide it
    $(".custom-menu").hide(100);
  }
});

// If the menu element is clicked
$("ul.custom-menu li").click(function() {
  // ul.custom-menu data has 'event'
  var $event = $(this).parent().data('event');
  // This is the triggered action name

  var color = $(this).attr('data-color') || 'lightblue'; // Default to light blue
  // Set the color for the event
  // if the event has multiple sections (spans multiple weeks/days, depending on view)
  // It will only change color of currently right-clicked section...
  // See http://stackoverflow.com/questions/36128815/highlight-fullcalendar-events-that-expands-over-multiple-rows-columns/36185661
  // for ideas on how to approach changing the color of all related sections if needed
  $event.css('background-color', color);

  // Hide it AFTER the action was triggered
  $(".custom-menu").hide(100);
});