Bootstrap 4 Full Calendar
Bootstrap 4 Full Calendar plugin
Bootstrap full calendar plugin is an extension that allows you to create calendar functionality.
Basic Bootstrap 4 version
<div id="calendar"></div>
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: '2018-11-16',
navLinks: true,
eventLimit: true,
events: [{
title: 'Front-End Conference',
start: '2018-11-16',
end: '2018-11-18'
},
{
title: 'Hair stylist with Mike',
start: '2018-11-20',
allDay: true
},
{
title: 'Car mechanic',
start: '2018-11-14T09:00:00',
end: '2018-11-14T11:00:00'
},
{
title: 'Dinner with Mike',
start: '2018-11-21T19:00:00',
end: '2018-11-21T22:00:00'
},
{
title: 'Chillout',
start: '2018-11-15',
allDay: true
},
{
title: 'Vacation',
start: '2018-11-23',
end: '2018-11-29'
},
]
});
Above is an example template for a Full Calendar in the Bootstrap 4 version based on jQuery. V4 is an older version of Bootstrap and we discourage implementing it in new projects.
Below you will find the same component but in the latest, more modern Bootstrap 5. We encourage you to use the v5 version instead, the v5 is more lightweight, more reliable and based on pure JavaScript instead of jQuery.
This page only compares the two version, you can find full documentation - with multiple options & API details via one of the links below:
Bootstrap v5 - full documentation
Bootstrap v4 - full documentation
Basic Bootstrap 5 version
<div class="calendar" data-mdb-calendar-init id="calendar"></div>
const events = [
{
summary: 'JS Conference',
start: {
date: Calendar.dayjs().format('DD/MM/YYYY'),
},
end: {
date: Calendar.dayjs().format('DD/MM/YYYY'),
},
color: {
background: '#cfe0fc',
foreground: '#0a47a9',
},
},
{
summary: 'Vue Meetup',
start: {
date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
},
end: {
date: Calendar.dayjs().add(5, 'day').format('DD/MM/YYYY'),
},
color: {
background: '#ebcdfe',
foreground: '#6e02b1',
},
},
{
summary: 'Angular Meetup',
description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
start: {
date: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY'),
dateTime: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00',
},
end: {
date: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY'),
dateTime: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY') + ' 14:00',
},
color: {
background: '#c7f5d9',
foreground: '#0b4121',
},
},
{
summary: 'React Meetup',
start: {
date: Calendar.dayjs().add(5, 'day').format('DD/MM/YYYY'),
},
end: {
date: Calendar.dayjs().add(8, 'day').format('DD/MM/YYYY'),
},
color: {
background: '#fdd8de',
foreground: '#790619',
},
},
{
summary: 'Meeting',
start: {
date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 8:00',
},
end: {
date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 12:00',
},
color: {
background: '#cfe0fc',
foreground: '#0a47a9',
},
},
{
summary: 'Call',
start: {
date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
},
end: {
date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
},
color: {
background: '#292929',
foreground: '#f5f5f5',
},
}
];
const calendarElement = document.getElementById('calendar');
const calendarInstance = Calendar.getInstance(calendarElement);
calendarInstance.addEvents(events);