JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.js"></script>
<div id="calendar"></div>
CSS
.event-full {
color: #fff;
vertical-align: middle !important;
text-align: center;
opacity: 1;
}
JavaScript
var m = moment('2016-09-19');
$('#calendar').fullCalendar({
// put your options and callbacks here
header: {
left: 'title',
center: '',
right: 'prev,next'
},
weekends: false,
weekNumbers: true,
defaultView: 'month',
defaultDate: m,
events: [{
start: '2016-09-19',
allDay: true,
rendering: 'background',
backgroundColor: '#F00',
title: 'full',
textColor: '#000',
className: 'event-full'
}, {
start: '2016-09-20',
allDay: true,
rendering: 'background',
backgroundColor: '#F00',
title: 'full',
textColor: '#000',
className: 'event-full'
}],
eventAfterRender: function(event, element, view) {
element.append('FULL');
},
viewRender: function(view, element) {
var start = new Date("2016-09-01");
var end = new Date("2016-11-30");
if (end < view.end) {
$("#calendar .fc-next-button").hide();
return false;
} else {
$("#calendar .fc-next-button").show();
}
if (view.start < start) {
$("#calendar .fc-prev-button").hide();
return false;
} else {
$("#calendar .fc-prev-button").show();
}
}
});