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.9.0/fullcalendar.min.js"></script>
<div id="calendar">
</div>

<div id="events"></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 NEXTDAY = todayDate.clone().add(2, 'day').format('YYYY-MM-DD');
// Create a "db"
    const events = [{
        title: 'All Day Event',
        start: TODAY
      },
      {
        title: 'Long Event',
        start: TODAY,
        end: NEXTDAY
      }
    ]

    $("#calendar").fullCalendar({
      header: {
        left: '',
        center: 'title',
        right: ''
      },
      events: function (start, end, timezone, callback) {
    		callback(events);
  		}
    })

    $("#events").fullCalendar({
      header: {
        left: '',
        center: 'title',
        right: ''
      },
      defaultView: 'listMonth',
      events: function (start, end, timezone, callback) {
    		callback(events);
  		}
    })

    // Now add a new one
    events[0].title = 'qwdas';
    console.log(events);

    $('#calendar').fullCalendar('updateEvents', events)
    $('#events').fullCalendar('refetchEvents');

// Anticipate using the events data for other display as well