JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/moment.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/arshaw/fullcalendar/v2.1.0-beta1/dist/fullcalendar.css">
<script src="https://cdn.rawgit.com/arshaw/fullcalendar/v2.1.0-beta1/dist/fullcalendar.js"></script>
<div id='calendar'></div>

CSS

body {
    margin: 40px 10px;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
}

#calendar {
    max-width: 900px;
    margin: 0 auto;
}

JavaScript

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: '',
    },
    defaultView: 'agendaWeek',
    slotDuration: '01:00:00',
    editable: true,
    timeFormat: 'H:mm',
    axisFormat: 'H:mm',
    contentHeight: 'auto',
    height: 'auto',
    selectable: true,
    selectHelper: true,
    select: function(start, end) {
        alert(start.format()+'-'+end.format());
    },
    events: [
        {
            title: 'All Day Event',
            start: '2014-06-01'
        },
        {
            title: 'Long Event',
            start: '2015-03-07',
            end: '2015-03-07'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: '2015-03-03T16:00:00'
            end: '2015-03-03T16:00:00'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: '2014-06-16T16:00:00'
        },
        {
            title: 'Meeting',
            start: '2015-03-02T10:30:00',
            end: '2015-03-02T12:30:00'
        },
        {
            title: 'Lunch',
            start: '2014-06-12T12:00:00'
        },
        {
            title: 'Birthday Party',
            start: '2014-06-13T07:00:00'
        },
        {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: '2015-03-25'
        }
    ]
});