Calendar Table
How to use
Open with codepenFullCalendar
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-bs-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: year+'-'+month+'-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-bs-toggle="modal" data-bs-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">