@@include('header.htm', { "title": "Calendar - Sleek Admin Dashboard Template", "vector_map": "", "date_range_picker": "", "select2": "", "ladda": "", "toastr": "", "flag_icon": "", "full_calendar_core": "", "full_calendar_daygrid": "", "data_table": "", "responsive_data_table": "", "expendable_data_table": "" }) @@include('sidebar.htm', { "parent": "app", "sub_parent": "app", "active": "calendar" }) @@include('top-bar.htm')
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/js/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">
@@include('footer.htm', { "chart_js": "", "chartjs": "", "google_map": "", "mapjs": "", "vector_map": "", "vector_map_world_mill": "", "vector_map_js": "", "date_range_picker_moment": "", "date_range_picker": "", "date_range_js": "", "select2": "", "ladda_spin": "", "ladda": "", "jquery_mask": "", "toastr": "", "circle_progress": "", "full_calendar_core": "", "full_calendar_daygrid": "", "full_calendar_js": "", "data_table": "", "data_table_bootstrap4": "", "responsive_data_table": "" })