Full Calendar
Bootstrap full calendar plugin
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a huge discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount
Bootstrap full calendar plugin is an extension that allows you to create calendar functionality.
Thanks to this plugin you will be able to easily create new events, manage current events, move existing events between other days, and integrate with your Google Calendar.
To start working with full calendar plugin see "Getting Started" tab on this page.
Basic Example
A few predefined events allowing you to see how the plugin looks like.
<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'
},
]
});
Dynamically added events
Find out how easy it is to add new events with the Full Calendar plugin! One button, and the event is already in your calendar.
<div id="calendar"></div>
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'addEventButton',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: '2018-11-16',
navLinks: true,
editable: true,
eventLimit: true,
events: [{
title: 'Simple static event',
start: '2018-11-16',
description: 'Super cool event'
},
],
customButtons: {
addEventButton: {
text: 'Add new event',
click: function () {
var dateStr = prompt('Enter date in YYYY-MM-DD format');
var date = moment(dateStr);
if (date.isValid()) {
$('#calendar').fullCalendar('renderEvent', {
title: 'Dynamic event',
start: date,
allDay: true
});
} else {
alert('Invalid Date');
}
}
}
},
dayClick: function (date, jsEvent, view) {
var date = moment(date);
if (date.isValid()) {
$('#calendar').fullCalendar('renderEvent', {
title: 'Dynamic event from date click',
start: date,
allDay: true
});
} else {
alert('Invalid');
}
},
});
Events with tooltips
You can easily add tooltip to an event in the calendar. This way you can easily remember what this event is all about.
<div id="calendar"></div>
$('#calendar').fullCalendar({
defaultView: 'month',
defaultDate: '2018-11-12',
eventRender: function (eventObj, $el) {
$el.popover({
title: eventObj.title,
content: eventObj.description,
trigger: 'hover',
placement: 'top',
container: 'body'
});
},
events: [{
title: 'All Day Event',
description: 'description for All Day Event',
start: '2018-11-01'
},
{
title: 'Long Event',
description: 'description for Long Event',
start: '2018-10-07',
end: '2018-11-10'
},
{
id: 999,
title: 'Repeating Event',
description: 'description for Repeating Event',
start: '2018-11-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
description: 'description for Repeating Event',
start: '2018-11-16T16:00:00'
},
{
title: 'Conference',
description: 'description for Conference',
start: '2018-11-11',
end: '2018-11-13'
},
{
title: 'Meeting',
description: 'description for Meeting',
start: '2018-11-12T10:30:00',
end: '2018-11-12T12:30:00'
},
{
title: 'Lunch',
description: 'description for Lunch',
start: '2018-11-12T12:00:00'
},
{
title: 'Meeting',
description: 'description for Meeting',
start: '2018-11-12T14:30:00'
},
{
title: 'Birthday Party',
description: 'description for Birthday Party',
start: '2018-11-13T07:00:00'
},
{
title: 'Click for Google',
description: 'description for Click for Google',
url: 'http://google.com/',
start: '2018-11-28'
}
]
});
Movable events
Didn't you do something today? Set it aside for tomorrow! Full Calendar allows you to move events between other days.
<div id="calendar"></div>
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: '2018-11-16',
navLinks: true,
editable: true,
eventLimit: true,
events: [{
title: 'All Day Event',
start: '2018-11-01'
},
{
title: 'Long Event',
start: '2018-11-07',
end: '2018-11-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2018-11-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2018-11-16T16:00:00'
},
{
title: 'Conference',
start: '2018-11-11',
end: '2018-11-13'
},
{
title: 'Meeting',
start: '2018-11-12T10:30:00',
end: '2018-11-12T12:30:00'
},
{
title: 'Lunch',
start: '2018-11-12T12:00:00'
},
{
title: 'Meeting',
start: '2018-11-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2018-11-12T17:30:00'
},
{
title: 'Dinner',
start: '2018-11-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2018-11-13T07:00:00'
},
{
title: 'Click for Google',
url: 'https://google.com/',
start: '2018-11-28'
}
]
});
Long dynamic events
Select few days and create an event with one click! Just like in Google Calendar.
<div id="calendar"></div>
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'addEventButton',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: '2018-11-16',
navLinks: true,
editable: true,
eventLimit: true,
events: [{
title: 'Simple static event',
start: '2018-11-16',
description: 'Super cool event'
},
],
customButtons: {
addEventButton: {
text: 'Add new event',
click: function () {
var dateStr = prompt('Enter date in YYYY-MM-DD format');
var date = moment(dateStr);
if (date.isValid()) {
$('#calendar').fullCalendar('renderEvent', {
title: 'Dynamic event',
start: date,
allDay: true
});
} else {
alert('Invalid Date');
}
}
}
},
dayClick: function (date, jsEvent, view) {
var date = moment(date);
if (date.isValid()) {
$('#calendar').fullCalendar('renderEvent', {
title: 'Dynamic event from date click',
start: date,
allDay: true
});
} else {
alert('Invalid');
}
},
});
Full Calendar options list
Below options are available to use in Full Calendar.
| Name | Type | Default | Description | Available values | Example |
|---|---|---|---|---|---|
header |
object | left: 'title', center: ' ', right: 'today prev, next' | Defines the buttons and title at the top of the calendar. | title, prev, next, prevYear, nextYear, today |
header: {left: 'title', center: ' ', right: 'today prev, next' } |
footer |
object | false | Defines the controls at the bottom of the calendar. | title, prev, next, prevYear, nextYear, today |
footer: {left: 'title', center: ' ', right: 'today prev, next' } |
titleFormat |
object | - | Determines the text that will be displayed in the header’s title. | - |
titleFormat: 'MM/YYYY' |
buttonText |
object | buttonText: {today: 'today', month: 'month, week: 'week', day: 'day', list: 'list'} | Defines the buttons and title at the top of the calendar. | - |
buttonText: {today: 'today', month: 'month, week: 'week', day: 'day', list: 'list'} |
buttonIcons |
object | prev: 'left-single-arrow', next: 'right-single-arrow', prevYear: 'left-double-arrow', nextYear: 'right-double-arrow' | Icons that will be displayed in buttons of the header/footer. | 'left-single-arrow', 'right-single-arrow', 'left-double-arrow', 'right-double-arrow' |
buttonIcons: {next: 'right-single-arrow', prevYear: 'left-double-arrow', nextYear: 'right-double-arrow'} |
customButtons |
object | - | Defines custom buttons that can be used in the header/footer. Specify a hash of custom buttons. Then reference them from the header setting. | text, click, icon, themeIcon, bootstrapGlyphicon |
customButtons: { myCustomButton: { text: 'Custom', click: function() { alert('Clicked the custom button'); } } }, header: {left: 'myCustomButton', center: ' ', right: ' ' } |
Below events are available to use in Full Calendar.
| Name | Type | Description | Example |
|---|---|---|---|
eventClick |
any | The event is fired when user has clicked the event. | eventClick: function(calEvent, jsEvent, view) { console.log('click', calEvent.title); } |
eventMouseover |
any | The event is fired when user has mouseover the event. | eventMouseover: function(calEvent, jsEvent, view) { console.log('mouseover', calEvent); } |
eventMouseout |
any | The event is fired when user has mouseout the event. | eventMouseout: function(calEvent, jsEvent, view) { console.log('mouseout', calEvent); } |
Full Calendar - getting started : download & setup
Download
This plugin requires a purchase.
Buy full calendar plugin
Installation tutorial
Note: The video below shows a different plugin, but it does not matter. The installation process is the same for all plugins.