FullCalendar

We are using the FullCalendar plugin for this calendar app. This is a great plugin for displaying events with details in a tooltip. You can change an event's name or other associated data and add a new event. It is up to you to add this functionality through FullCalendar's event hooks. Check FullCalendar documentation for more details.

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'dayGrid' ],
    defaultView: 'dayGridMonth',
    eventRender: function(info) {
      var ntoday = moment().format('YYYYMMDD');
      var eventStart = moment( info.event.start ).format('YYYYMMDD');
      info.el.setAttribute("title", info.event.extendedProps.description);
      info.el.setAttribute("data-toggle", "tooltip");
      if (eventStart < ntoday){
        info.el.classList.add("fc-past-event");
      } else if (eventStart == ntoday){
        info.el.classList.add("fc-current-event");
      } else {
        info.el.classList.add("fc-future-event");
      }
    },

    events: [
      {
        title: 'All Day Event',
        description: 'description for All Day Event',
        start: '2020-01-01'
      }
      // more events here
    ]
  });
  calendar.render();
});
<script src="assets/plugins/fullcalendar/core-4.3.1/main.min.js"></script>
<script src="assets/plugins/fullcalendar/daygrid-4.3.0/main.min.js"></script>
<script src="assets/app/app.calendar.js"></script>
<div class="full-calendar">
 <div id="calendar">
  <a href="#" data-toggle="modal" data-target="#modal-add-event" class="btn btn-primary">
   <span class="fc-icon fc-icon-plus-squar></span> Add New Event
  </a>
 </div>
</div>
<link href="assets/plugins/fullcalendar/core-4.3.1/main.min.css" rel="stylesheet">
<link href="assets/plugins/fullcalendar/daygrid-4.3.0/main.min.css" rel="stylesheet">