Installation
FullCalendar is installed via NPM as a third-party dependency by referring to
package.json
.
During the
Theme Installation
process,
it is compiled by the
Build Tools
into the
/dist/assets/vendors/fullcalendar
directory.
Require Assets
To use FullCalendar in your pages, you need to include the following dependency assets in the order shown.
<!DOCTYPE html>
<html>
<head>
<!--Core styles (includes FullCalendar styling via fullcalendar.css component)-->
<link href="/dist/assets/css/styles.css" rel="stylesheet"/>
</head>
<body>
<div id="calendar">
</div>
<!--Core bundle script-->
<script src="/dist/assets/js/core.bundle.js">
</script>
<!--Vendor script -->
<script src="/dist/assets/vendors/fullcalendar/index.global.min.js">
</script>
<!--Custom script -->
<script src="/dist/assets/js/pages/plugins/fullcalendar/basic.js">
</script>
</body>
</html>
Basic
A basic FullCalendar month view example demonstrating the default calendar display with Metronic Tailwind CSS styling.
This example shows how to initialize a simple calendar that automatically adapts to the Metronic design system.
// Basic FullCalendar initialization
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar-basic');
if (calendarEl) {
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
}
});
calendar.render();
}
});
<div id="calendar-basic">
</div>
Views
Demonstrates different calendar views (month, week, day, agenda) with view switching functionality.
All views automatically use Metronic Tailwind CSS styling for consistent appearance.
// Multiple views example
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar-views');
if (calendarEl) {
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
views: {
dayGridMonth: {
titleFormat: { year: 'numeric', month: 'long' }
},
timeGridWeek: {
titleFormat: { year: 'numeric', month: 'short', day: 'numeric' }
},
timeGridDay: {
titleFormat: { year: 'numeric', month: 'short', day: 'numeric' }
}
},
events: [
{
title: 'Team Meeting',
start: new Date().toISOString().split('T')[0] + 'T10:00:00',
end: new Date().toISOString().split('T')[0] + 'T11:00:00'
},
{
title: 'Client Presentation',
start: new Date(Date.now() + 86400000).toISOString().split('T')[0] + 'T14:00:00',
end: new Date(Date.now() + 86400000).toISOString().split('T')[0] + 'T16:00:00'
},
{
title: 'Project Review',
start: new Date(Date.now() + 172800000).toISOString().split('T')[0] + 'T09:00:00',
end: new Date(Date.now() + 172800000).toISOString().split('T')[0] + 'T10:30:00'
},
{
title: 'Workshop',
start: new Date(Date.now() + 259200000).toISOString().split('T')[0] + 'T13:00:00',
end: new Date(Date.now() + 259200000).toISOString().split('T')[0] + 'T17:00:00'
},
{
title: 'All Day Conference',
start: new Date(Date.now() + 345600000).toISOString().split('T')[0]
}
]
});
calendar.render();
}
});
<div id="calendar-views">
</div>
Events
Displays a calendar with sample events. Events automatically use Metronic Tailwind CSS styling for consistent appearance.
// Events example
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar-events');
if (calendarEl) {
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: [
{
title: 'Meeting',
start: new Date().toISOString().split('T')[0],
className: 'bg-primary'
},
{
title: 'Conference',
start: new Date(Date.now() + 86400000).toISOString().split('T')[0],
className: 'bg-success'
},
{
title: 'Workshop',
start: new Date(Date.now() + 172800000).toISOString().split('T')[0],
end: new Date(Date.now() + 259200000).toISOString().split('T')[0],
className: 'bg-warning'
}
]
});
calendar.render();
}
});
<div id="calendar-events">
</div>
Drag & Drop
Demonstrates dragging events to different dates. The calendar automatically uses Metronic Tailwind CSS styling.
// Drag and drop example
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar-drag-drop');
if (calendarEl) {
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true,
droppable: true,
events: [
{
title: 'Draggable Event',
start: new Date().toISOString().split('T')[0],
className: 'bg-primary'
}
],
eventDrop: function(info) {
console.log('Event dropped: ', info.event.title, 'to', info.event.start);
}
});
calendar.render();
}
});
<div id="calendar-drag-drop">
</div>
Resize
Demonstrates resizing event duration. The calendar automatically uses Metronic Tailwind CSS styling.
// Resize example
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar-resize');
if (calendarEl) {
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true,
eventResize: true,
events: [
{
title: 'Resizable Event',
start: new Date().toISOString().replace('T00:00:00', 'T10:00:00'),
end: new Date().toISOString().replace('T00:00:00', 'T12:00:00'),
className: 'bg-primary'
}
],
eventResize: function(info) {
console.log('Event resized: ', info.event.title, 'from', info.event.start, 'to', info.event.end);
}
});
calendar.render();
}
});
<div id="calendar-resize">
</div>
Custom Rendering
Demonstrates custom event rendering while maintaining Metronic Tailwind CSS base styling.
// Custom rendering example
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar-custom-rendering');
if (calendarEl) {
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: [
{
title: 'Custom Event',
start: new Date().toISOString().split('T')[0],
className: 'bg-primary'
}
],
eventContent: function(arg) {
// Custom event rendering
return {
html: '
<div class="flex items-center gap-1">
<span class="text-xs font-semibold">
' + arg.event.title + '
</span>
</div>
'
};
}
});
calendar.render();
}
});
<div id="calendar-custom-rendering">
</div>
Modal Integration
Demonstrates opening Metronic modals for event creation/editing with integration of Metronic form components.
The calendar automatically uses Metronic Tailwind CSS styling.
// Modal integration example
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar-modal-integration');
var modalEl = document.getElementById('event-modal');
var eventForm = document.getElementById('event-form');
var saveBtn = document.getElementById('save-event');
if (calendarEl) {
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: [],
dateClick: function(info) {
// Open modal on date click
document.getElementById('event-start').value = info.dateStr;
document.getElementById('event-end').value = '';
document.getElementById('event-title').value = '';
if (modalEl) {
var modal = new bootstrap.Modal(modalEl);
modal.show();
}
},
eventClick: function(info) {
// Open modal on event click for editing
document.getElementById('event-title').value = info.event.title;
document.getElementById('event-start').value = info.event.startStr.split('T')[0];
if (info.event.end) {
document.getElementById('event-end').value = info.event.endStr.split('T')[0];
}
if (modalEl) {
var modal = new bootstrap.Modal(modalEl);
modal.show();
}
// Store event for update
saveBtn.dataset.eventId = info.event.id;
}
});
calendar.render();
// Save event handler
if (saveBtn) {
saveBtn.addEventListener('click', function() {
var title = document.getElementById('event-title').value;
var start = document.getElementById('event-start').value;
var end = document.getElementById('event-end').value;
if (title && start) {
var eventData = {
title: title,
start: start,
end: end || undefined
};
if (saveBtn.dataset.eventId) {
// Update existing event
var event = calendar.getEventById(saveBtn.dataset.eventId);
event.setProp('title', title);
event.setStart(start);
if (end) {
event.setEnd(end);
}
delete saveBtn.dataset.eventId;
} else {
// Add new event
calendar.addEvent(eventData);
}
// Close modal
if (modalEl) {
var modal = bootstrap.Modal.getInstance(modalEl);
if (modal) {
modal.hide();
}
}
}
});
}
}
});
<div id="calendar-modal-integration">
</div>
<!-- Modal for event creation/editing -->
<div class="kt-modal" id="event-modal">
<div class="kt-modal-dialog">
<div class="kt-modal-content">
<div class="kt-modal-header">
<h3 class="kt-modal-title">
Event Details
</h3>
<button class="kt-btn kt-btn-icon kt-btn-close" data-kt-modal-dismiss="" type="button">
<i class="ki-outline ki-cross">
</i>
</button>
</div>
<div class="kt-modal-body">
<form id="event-form">
<div class="mb-4">
<label class="kt-form-label">
Event Title
</label>
<input class="kt-input" id="event-title" required="" type="text"/>
</div>
<div class="mb-4">
<label class="kt-form-label">
Start Date
</label>
<input class="kt-input" id="event-start" required="" type="date"/>
</div>
<div class="mb-4">
<label class="kt-form-label">
End Date
</label>
<input class="kt-input" id="event-end" type="date"/>
</div>
</form>
</div>
<div class="kt-modal-footer">
<button class="kt-btn kt-btn-secondary" data-kt-modal-dismiss="" type="button">
Cancel
</button>
<button class="kt-btn kt-btn-primary" id="save-event" type="button">
Save
</button>
</div>
</div>
</div>
</div>
