JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/fullcalendar/1.5.4/fullcalendar.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/fullcalendar/1.5.4/fullcalendar.print.css">
<script src="http://cdn.jsdelivr.net/fullcalendar/1.5.4/fullcalendar.js "></script>
<div id="eventcalendar">
    <div class="col-md-10">
        <div id='fullcalendar' style="width:100%"></div>
        <div id="day-popover-head" class="hide">Add Event</div>
        <div id="day-popover-content" class="hide">@*
            <form role="form">*@
                <div class="form-group">
                    <label for="title">Title:</label>
                    <input type="text" class="form-control" id="title">
                </div>
                <div class="form-group">
                    <label for="timeSelect">Select time:</label>
                    <select class="form-control" id="timeSelect"></select>
                    <br>
                    <label for="timeDuration">Select duration:</label>
                    <select class="form-control" id="timeDuration">
                        <option value="30">30 min</option>
                        <option value="45">45 min</option>
                        <option value="60">60 min</option>
                        <option value="75">75 min</option>
                        <option value="90">90 min</option>
                        <option value="105">105 min</option>
                        <option value="120">120 min</option>
                    </select>
                </div>
                <div class="form-inline">
                    <button type="submit" class="btn btn-default">Submit</button>
                    <button type="button" id="cancelEvent" class="btn btn-default">Cancel</button>
                </div>@*</form>*@</div>
    </div>
   ...

JavaScript

var $calPopOver;

$(document).ready(function (of) {
    $("#overview").hide();
    $("#details").hide();
    $("#listing").hide();
    $("#address").hide();
    $("#map").hide();
    $("#images").hide();
    $("#eventcalendar").show();


    $('#fullcalendar').fullCalendar({
        header: {
            left: 'prev,next', //today',
            center: 'title',
            //right: 'month,agendaWeek,agendaDay'
            right: ''
        },
        defaultView: 'month',
        editable: true,
        allDaySlot: false,
        selectable: true,
        slotMinutes: 15,
        //eventLimit: 1,
        //eventLimit: true, // for all non-agenda views
        //views: {
        //    agenda: {
        //        eventLimit: 2 // adjust to 6 only for agendaWeek/agendaDay
        //    }
        //},
        events: '/ManageSpaces/GetDiaryEvents/',

        //eventLimitClick: function (cellInfo, jsEvent) {

        //},
        eventClick: function (calEvent, jsEvent, view) { //function (data, event, view) {
            //var s = cellInfo.segs;
            $("#eventDetails.collapse").collapse('toggle');
            if ($calPopOver) $calPopOver.popover('destroy');
        },
        dayClick: function (data, event, view) {
            $(this).popover({
                html: true,
                placement: 'rigth',
                container: 'body',
                title: function () {
                    return $("#day-popover-head").html();
                },
                content: function () {
                    return $("#day-popover-content").html();
                }
            });

            //$(this).popover('toggle');
            if ($calPopOver) {
                $calPopOver.popover('destroy');
            }
            $calPopOver = $(this).popover('show');
        }
    });


    
});

    $(document).on('click', '#cancelEvent', function () {
        alert('Doing cancel...');
        $calPopOver.popover('destroy');
    });