JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://arshaw.com/js/fullcalendar-1.5.2/fullcalendar/fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://arshaw.com/js/fullcalendar-1.5.2/fullcalendar/fullcalendar.css">
<html>
    <head>
        <base href="http://arshaw.com/fullcalendar/" />
    </head>
    <body>
        <div id="calendar"></div>
    </body>
</html>

CSS

/* Component containers
----------------------------------*/
.ui-widget { font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }
.ui-widget-content a { color: #333333; }
.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }

JavaScript

var options = {
        length      : 10,
        gaptime     : 10,
        alerttime   : 120,
        slottime    : 10,
        alert_ap    : 10,
        find_gap_len: 15
    };

    // Create calendar
    $("#calendar").fullCalendar({
        header: {
            left: '',
            center: 'today,title prev,next',
            right: 'month,agendaWeek,agendaDay'
        },
        theme: true,
        firstDay: 1,
        height: 500,
        unselectCancel: '.ui-button',
        axisFormat: 'H:mm',
        timeFormat: 'H:mm',
        slotMinutes: options.slottime,
        defaultEventMinutes: 5,
        firstHour: 9,
        lazyFetching: false, // No use cached event fetching
        selectable: true,
        editable: true,
        select: function(start, end, allDay) {
            currentSelStart = start;
            currentSelEnd = end;
            currentSelAllDay = allDay;
        },
        unselect: function() {
            currentSelStart = '';
            currentSelEnd = '';
            currentSelAllDay = false;
        }
    }).fullCalendar('option', 'height', outerLayout.state.center.innerHeight - 40);