JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.css">
<div style="border:solid 2px red;">
    <div id='calendar'></div>
    <div id="events-popover-head" class="hide">Events</div>
    <div id="events-popover-content" class="hide">Test</div>
</div>

JavaScript

$('html').on('click', function(e) {
  $('.popover').each( function() {
    if( $(e.target).parents(".fc-time-grid-event").get(0) !== $(this).prev().get(0) ) {
      $(this).popover('hide');
    }
  });
});

$(document).ready(function () {
   
    // page is now ready, initialize the calendar...
    var eventsArray = [ {
        title: 'Test2',
        start: new Date("2015-04-21T07:30:00"),
        end: new Date("2015-04-21T11:30:00")
    },{
        title: 'Test3',
        start: new Date("2015-04-21T12:30:00"),
        end: new Date("2015-04-21T13:30:00")
    }];

    $('#calendar').fullCalendar({
        // put your options and callbacks here
        header: {
            left: '', //today',
            center: 'title',
            right: ''
        },
        defaultView: 'agendaDay',
        defaultDate: '2015-04-21T12:00:00',
        editable: true,
        allDaySlot: false,
        selectable: true,
        events: eventsArray,
        eventClick: function(calEvent, jsEvent, view) {
           $(this).popover({
            placement : 'bottom',
            title : 'Appointment Actions',
            html : true,
            content :"test",
            trigger : 'focus'
           }).popover('show');
            $(this).attr('tabindex', -1);
        }
        
    });

});