JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://fullcalendar.io/js/fullcalendar-3.2.0/fullcalendar.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://fullcalendar.io/js/fullcalendar-3.2.0/fullcalendar.min.js"></script>
<div id="calendar">
</div>
JavaScript
var todayDate = moment().startOf('day');
var YM = todayDate.format('YYYY-MM');
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
var TODAY = todayDate.format('YYYY-MM-DD');
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
$("#calendar").fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
editable: true,
eventLimit: true, // allow "more" link when too many events
navLinks: true,
events: [
{
title: 'All Day Event',
start: '2018-09-07'
},
{
title: 'Long Event',
start: '2018-09-07T12:00',
end: '2018-09-07T13:00'
}
]
})
var items = [
{
title: 'Event added (it works)',
start: '2018-09-07'
}, {
title: 'Event added again (it\'s done)',
start: '2018-09-07',
end: '2018-09-08'
}
];
for ( var i = 0; i < items.length; i++ ) {
$('#calendar').fullCalendar( 'renderEvent', items[i]);
}