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 {
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer; // for showing title 
    max-height:20px; // can be adjusted according to your requirement
}

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'
				}
			]
		});
		
	});
  //give title attribute so that entire text will be shown during mouse over
  $(".fc-content").each(function(){
  $(this).attr("title",$(this).text());
  })