JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://fullcalendar.io/js/fullcalendar-2.2.6/fullcalendar.css">
<script src="http://fullcalendar.io/js/fullcalendar-2.2.6/lib/moment.min.js"></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.2.6/lib/jquery.min.js"></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.2.6/fullcalendar.min.js"></script>
<div id='calendar'></div>

CSS

/* added so titles arent cut off*/
.fc-day-grid-event > .fc-content {
    white-space: normal;
    text-overflow: ellipsis;
    max-height:20px;
}
.fc-day-grid-event > .fc-content:hover {
    max-height:none!important; 
}

JavaScript

$(document).ready(function() {
		
		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,basicWeek,basicDay'
			},
			defaultDate: '2015-11-12',
			editable: true,
			eventLimit: false, // allow "more" link when too many events
			events: [
				{
					title: 'Event with very Long Title',
					start: '2015-11-12T14:30:00'
				},
				{
					title: 'short title',
					start: '2015-11-12T20:00:00'
				},
				{
					title: 'short title',
					start: '2015-11-13T07:00:00'
				},
				{
					title: 'sort title',
					start: '2015-11-13T07:00:00'
				}
			]
		});
		
	});