Calendar
Bootstrap 5 Calendar plugin
MDB calendar is a plugin that allows you to efficiently manage tasks. Thanks to this extension you will be able to easily create new events, manage current events, move existing events between other days, and store all data in an easily readable array.
Responsive Calendar plugin built with the latest Bootstrap 5. Various customization options like default view, event formats, customizable captions, and much more.Note: Read the API tab to find all available options and advanced customization
Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.
Basic example
Several predefined events provide a visual representation of how the plugin appears."
<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);
Event formats
Calendar events can be added with time in two different formats - 12h or 24h. Optionally, you can also use the dayjs static getter which returns the current date object. We recommend reading the dayjs library documentation before using this method.
{
summary: 'Call',
description: 'Agree the terms of contracts',
start: {
date: '08/09/2020',
dateTime: '08/09/2020 10:00',
},
end: {
date: '08/09/2020',
dateTime: '08/09/2020 14:00',
},
color: {
background: '#292929',
foreground: '#f5f5f5',
},
}
{
summary: 'Call',
description: 'Agree the terms of contracts',
start: {
date: '08/09/2020',
dateTime: '08/09/2020 10:00 AM',
},
end: {
date: '08/09/2020',
dateTime: '08/09/2020 02:00 PM',
},
color: {
background: '#292929',
foreground: '#f5f5f5',
},
}
{
summary: 'Call',
description: 'Agree the terms of contracts',
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',
},
}
Monday first
Set the data-mdb-monday-first
attribute to true
to designate Monday as the first day of the week
<div class="calendar" id="calendar-2" data-mdb-calendar-init data-mdb-monday-first="true"></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-2');
const calendarInstance = Calendar.getInstance(calendarElement);
calendarInstance.addEvents(events);
Default view
Set the data-mdb-default-view
attribute to week
or
list
to change the start view. By default, it is a month
.
<div class="calendar" id="calendar-3" data-mdb-calendar-init data-mdb-default-view="week"></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-3');
const calendarInstance = Calendar.getInstance(calendarElement);
calendarInstance.addEvents(events);
Twelve hour
By setting the data-mdb-twelve-hour
attribute to true
, you get a 12-hour
schedule.
<div class="calendar" id="calendar-4" data-mdb-calendar-init data-mdb-default-view="week" data-mdb-twelve-hour="true"></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 AM',
},
end: {
date: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY'),
dateTime: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY') + ' 02:00 PM',
},
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 AM',
},
end: {
date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 12:00 PM',
},
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 AM',
},
end: {
date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 02:00 PM',
},
color: {
background: '#292929',
foreground: '#f5f5f5',
},
}
];
const calendarElement = document.getElementById('calendar-4');
const calendarInstance = Calendar.getInstance(calendarElement);
calendarInstance.addEvents(events);
Customize captions
You can effortlessly customize all captions using data attributes. Available options are listed in the API tab.
<div
class="calendar"
data-mdb-calendar-init
id="calendar-5"
data-mdb-weekdays="Nd, Pon, Wt, Śr, Czw, Pt, Sb"
data-mdb-months="Styczeń, Luty, Marzec, Kwiecień, Maj, Czerwiec, Lipiec, Sierpień, Wrzesień, Październik, Listopad, Grudzień"
data-mdb-months-short="Sty, Lut, Mar, Kwi, Maj, Cze, Lip, Sie, Wrz, Paź, Lis, Gru"
data-mdb-today-caption="Dzisiaj"
data-mdb-month-caption="Miesiąc"
data-mdb-week-caption="Tydzień"
data-mdb-list-caption="Lista"
data-mdb-all-day-caption="Cały dzień"
data-mdb-no-events-caption="Brak wydarzeń"
data-mdb-summary-caption="Nazwa wydarzenia"
data-mdb-description-caption="Szczegółowy opis wydarzenia"
data-mdb-start-caption="Początek"
data-mdb-end-caption="Koniec"
data-mdb-add-event-modal-caption="Dodaj wydarzenie"
data-mdb-edit-event-modal-caption="Edytuj wydarzenie"
data-mdb-add-caption="Dodaj"
data-mdb-save-caption="Zapisz"
data-mdb-delete-caption="Usuń"
data-mdb-close-caption="Zamknij"
data-mdb-add-event-caption="Dodaj wydarzenie"
></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-5');
const calendarInstance = Calendar.getInstance(calendarElement);
calendarInstance.addEvents(events);
Customize pickers
You can customize datepicker
and timepicker
displayed in the calendar changing options
availible in the API tab of respected pickers.
<div id="calendar-with-custom-pickers"></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 nullpariatur',
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-with-custom-pickers');
calendarElement.classList.add('calendar');
const calendarInstance = new Calendar(calendarElement, {
events: events,
timepickerOptions: {
clearLabel: "Example Clear",
},
datepickerOptions: {
okBtnText: "Example Ok",
}
});
Default date
A starting day can be easily set using the
data-mdb-default-date
attribute.
<div class="calendar" id="calendar-6" data-mdb-calendar-init data-mdb-default-date="01-12-2024"></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-6');
const calendarInstance = Calendar.getInstance(calendarElement);
calendarInstance.addEvents(events);
Readonly
The editable mode can be easily disabled using the
data-mdb-readonly
attribute.
<div class="calendar" id="calendar-7" data-mdb-calendar-init data-mdb-readonly="true"></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-7');
const calendarInstance = Calendar.getInstance(calendarElement);
calendarInstance.addEvents(events);
Readonly events
The editable mode for any event can be easily disabled by adding
readonly
attribute in the event's dataset.
<div class="calendar" data-mdb-calendar-init id="calendar-8"></div>
const events = [
{
summary: 'Readonly event',
start: {
date: Calendar.dayjs().format('DD/MM/YYYY'),
},
end: {
date: Calendar.dayjs().format('DD/MM/YYYY'),
},
color: {
background: '#cfe0fc',
foreground: '#0a47a9',
},
readonly: true
},
{
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: 'Readonly event',
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',
},
readonly: true
},
{
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: 'Readonly event',
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',
},
readonly: true
}
];
const calendarElement = document.getElementById('calendar-8');
const calendarInstance = Calendar.getInstance(calendarElement);
calendarInstance.addEvents(events);
Disabled modules
Some of the modules can be disabled via data attributes or JavaScript. Here's an example without tooltips and some toolbar action elements.
<div class="calendar" id="calendar-9" data-mdb-calendar-init data-mdb-tooltips="false" data-mdb-navigation="false" data-mdb-view-select="false" data-mdb-add-event-button="false"></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-9');
const calendarInstance = Calendar.getInstance(calendarElement);
calendarInstance.addEvents(events);
Blur
Past events can be blurred with the data-mdb-blur
attribute.
<div class="calendar" data-mdb-calendar-init id="calendar-10" data-mdb-blur="true"></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-10');
const calendarInstance = Calendar.getInstance(calendarElement);
calendarInstance.addEvents(events);
Custom attributes
You can add your own attributes to existing and new events. Below is an example
with the id
attribute.
<div id="calendar-11"></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',
},
id: 1
},
{
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',
},
id: 2
},
{
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',
},
id: 3
},
{
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',
},
id: 4
},
{
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',
},
id: 5
},
{
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',
},
id: 6
}
];
const calendarElement = document.getElementById('calendar-11');
calendarElement.classList.add('calendar');
let newEventId = events.length;
const calendarInstance = new Calendar(calendarElement, {
newEventAttributes: (event) => {
newEventId++;
return {
...event,
id: newEventId
}
}
});
calendarInstance.addEvents(events);
calendarElement.addEventListener('addEvent.mdb.calendar', (e) => {
console.log(e.event);
console.log(calendarInstance.events);
});
Custom modal
This example demonstrates a calendar with a custom modal that allows users to add, edit, and remove events, including fields not available in the default modal. For simplicity, the example uses only dates without specifying hours.
<div id="calendar-with-custom-modal" data-mdb-calendar-init></div>
<div class="modal fade" id="addEventModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<form>
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button
type="button"
class="btn-close"
data-mdb-ripple-init
data-mdb-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<div class="form-outline mb-2" data-mdb-input-init>
<input type="text" id="summary" name="summary" class="form-control" />
<label class="form-label" for="summary">Summary</label>
</div>
<div class="form-outline mb-2" data-mdb-input-init>
<textarea
type="text"
id="description"
name="description"
class="form-control"
></textarea>
<label class="form-label" for="description">Description</label>
</div>
<div class="mb-2">
<select data-mdb-select-init id="location" name="location">
<option value="1">Location 1</option>
<option value="2">Location 2</option>
<option value="3">Location 3</option>
<option value="4">Online</option>
</select>
</div>
<div
class="form-outline mb-2"
data-mdb-datepicker-init
data-mdb-input-init
>
<input
type="text"
class="form-control"
id="startDate"
name="startDate"
/>
<label for="startDate" class="form-label">Select a date</label>
</div>
<div
class="form-outline mb-2"
data-mdb-datepicker-init
data-mdb-input-init
>
<input type="text" class="form-control" id="endDate" name="endDate" />
<label for="endDate" class="form-label">Select a date</label>
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-danger"
data-mdb-ripple-init
data-mdb-dismiss="modal"
id="remove-btn"
>
Remove
</button>
<button
type="button"
class="btn btn-secondary"
data-mdb-ripple-init
data-mdb-dismiss="modal"
id="close-btn"
>
Close
</button>
<button
type="button"
class="btn btn-primary"
type="submit"
data-mdb-ripple-init
id="save-btn"
>
Save changes
</button>
</div>
</div>
</form>
</div>
</div>
const eventsWitLocation = [
{
summary: 'JS Conference',
location: '4',
start: {
date: Calendar.dayjs().format('DD/MM/YYYY'),
},
end: {
date: Calendar.dayjs().format('DD/MM/YYYY'),
},
color: {
background: '#cfe0fc',
foreground: '#0a47a9',
},
},
{
summary: 'SUNDAY EVENT',
start: {
date: Calendar.dayjs().day(0).format('DD/MM/YYYY'),
},
end: {
date: Calendar.dayjs().day(0).format('DD/MM/YYYY'),
},
color: {
background: '#cfe0fc',
foreground: '#0a47a9',
},
},
{
summary: 'Vue Meetup',
location: '1',
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',
location: '2',
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',
location: '3',
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',
location: '2',
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',
location: '4',
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',
},
},
];
let currentEvent = null;
const calendarWithCustomModal = document.getElementById('calendar-with-custom-modal');
calendarWithCustomModal.classList.add('calendar');
const calendarWithCustomModalInstance = Calendar.getInstance(calendarWithCustomModal);
calendarWithCustomModalInstance.addEvents(eventsWitLocation);
const addEventModal = document.getElementById('addEventModal');
const modalInstance = new mdb.Modal(addEventModal);
const form = addEventModal.querySelector('form');
const summary = document.getElementById('summary');
const description = document.getElementById('description');
const locationInstance = mdb.Select.getInstance(document.getElementById('location'));
const start = document.getElementById('startDate');
const end = document.getElementById('endDate');
const saveButton = document.getElementById('save-btn');
const deleteButton = document.getElementById('remove-btn');
const closeButton = document.getElementById('close-btn');
const toggleBtnVisibility = (showClose = true, showDelete = false) => {
closeButton.classList.toggle('d-none', !showClose);
deleteButton.classList.toggle('d-none', !showDelete);
};
const updateModalInputFields = () => {
const inputFields = addEventModal.querySelectorAll('.form-outline');
inputFields.forEach((formOutline) => {
mdb.Input.getInstance(formOutline).forceInactive();
});
};
const setEmptyEvent = () => {
form.reset();
locationInstance.setValue('4');
};
const formattedDate = (date) => date.format('DD/MM/YYYY');
const setExistingEvent = (event) => {
summary.value = event.summary;
description.value = event.description ? event.description : '';
locationInstance.setValue(event.location);
start.value = formattedDate(event.start.date);
end.value = formattedDate(event.end.date);
};
calendarWithCustomModal.addEventListener('addEvent.mdb.calendar', (e) => {
e.preventDefault();
toggleBtnVisibility(true, false);
setEmptyEvent();
modalInstance.show();
updateModalInputFields();
currentEvent = null;
});
calendarWithCustomModal.addEventListener('editEvent.mdb.calendar', (e) => {
e.preventDefault();
currentEvent = e.event;
setExistingEvent(e.event);
toggleBtnVisibility(false, true);
modalInstance.show();
});
saveButton.addEventListener('click', () => {
const event = {
summary: summary.value,
description: description.value,
location: locationInstance.value,
start: {
date: start.value,
dateTime: start.value + ` 00:00`,
},
end: {
date: end.value,
dateTime: end.value + ` 00:00`,
},
};
if (event.summary && event.start.date && event.end.date) {
if (currentEvent) {
calendarWithCustomModalInstance.editEvent({ ...currentEvent, ...event });
} else {
calendarWithCustomModalInstance.addEvents([event]);
}
modalInstance.hide();
}
});
deleteButton.addEventListener('click', () => {
if (currentEvent) {
calendarWithCustomModalInstance.removeEvent(currentEvent);
}
modalInstance.hide();
});
Calendar - API
Import
import Calendar from 'mdb-calendar';
@import '~mdb-calendar/css/calendar.min.css';
Usage
Via data attributes
Using the Calendar plugin doesn't require any additional JavaScript code - simply add
data-mdb-calendar-init
attribute to
.calendar
and use other data attributes to set all options.
<div class="calendar" data-mdb-calendar-init></div>
Via JavaScript
const element = document.querySelector('.calendar');
const instance = new Calendar(calendarElement);
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
$(document).ready(() => {
$('#calendar').calendar('next');
});
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
data-mdb-
, as in data-mdb-readonly=""
.
Name | Type | Default | Description |
---|---|---|---|
weekdays
|
Array | String | ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] |
Defines weekdays displayed names. |
months
|
Array | String |
['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
'September', 'October', 'November', 'December']
|
Defines months displayed names. |
monthsShort
|
Array | String | ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] |
Defines shortened months displayed names. |
mondayFirst
|
Boolean | false |
Changes first day of week to monday. |
defaultView
|
String | 'month' |
Defines default view. |
twelveHour
|
Boolean | false |
Changes time mode from 24h to 12h. |
defaultDate
|
Object | String | dayjs() |
Defines the default starting date. |
readonly
|
Boolean | false |
Disables event's edition. |
todayCaption
|
String | 'Today' |
Defines caption for today. |
monthCaption
|
String | 'Month' |
Defines caption for month option. |
weekCaption
|
String | 'Week' |
Defines caption for week option. |
listCaption
|
String | 'List' |
Defines caption for list option. |
allDayCaption
|
String | 'All day event' |
Defines caption for all day event checkbox. |
noEventsCaption
|
String | 'No events' |
Defines caption for empty list view. |
summaryCaption
|
String | 'Summary' |
Defines caption for summary input label. |
descriptionCaption
|
String | 'Description' |
Defines caption for description input label. |
startCaption
|
String | 'Start' |
Defines caption for start input label. |
endCaption
|
String | 'End' |
Defines caption for end input label. |
addCaption
|
String | 'Add' |
Defines caption for add event button. |
deleteCaption
|
String | 'Remove' |
Defines caption for remove event button. |
saveCaption
|
String | 'Save' |
Defines caption for save event button. |
closeCaption
|
String | 'Close' |
Defines caption for close button. |
addEventCaption
|
String | 'Add event' |
Defines caption for button that trigger the add event modal. |
addEventModalCaption
|
String | 'Add an event' |
Defines caption for add event modal title. |
editEventModalCaption
|
String | 'Edit an event' |
Defines caption for edit event modal title. |
events
|
Array of Objects | [] |
Defines calendar events. |
tooltips
|
Boolean | true |
Enables tooltips. |
navigation
|
Boolean | true |
Enables navigation. |
viewSelect
|
Boolean | true |
Enables viewSelect. |
addEventButton
|
Boolean | true |
Enables addEventButton. |
blur
|
Boolean | false |
Enables past events blur style. |
newEventAttributes
|
Function | (event) => event |
Modifies new events attributes. |
datepickerOptions
|
Object | {} |
Allow setting custom options for datepicker displayed in the calendar. |
timepickerOptions
|
Object | {} |
Allow setting custom options for timepicker displayed in the calendar. |
dateFormat
|
String | 'DD/MM/YYY' |
Allow setting custom date format in the calendar. |
Methods
Name | Parameters | Description | Example |
---|---|---|---|
init |
Initializes the calendar. | instance.init() |
|
prev |
Changes the period of time to previous. | instance.prev() |
|
next |
Changes the period of time to next. | instance.next() |
|
today |
Changes the period of time to today. | instance.today() |
|
changeView
|
view | Changes the view. |
instance.changeView('week')
|
refresh
|
Refreshes the calendar. |
instance.refresh()
|
|
addEvents
|
events | Adds new events to the calendar. |
instance.addEvents([...])
|
editEvents
|
event | Updates the details of a specified event. |
instance.editEvents({...})
|
removeEvent
|
event | Removes the specified event from the calendar. |
instance.removeEvent({...})
|
removeEvents
|
Removes all events from the calendar. |
instance.removeEvents()
|
|
dispose
|
Disposes a calendar instance. |
instance.dispose()
|
|
dayjs |
Static method which returns a dayjs function. | Calendar.dayjs() |
|
getInstance
|
Static method which allows you to get the calendar instance associated with a DOM element. |
Calendar.getInstance(calendarElement)
|
const calendarElement = document.getElementById('calendar');
const instance = Calendar.getInstance(calendarElement);
instance.next();
Events
Name | Description |
---|---|
prev.mdb.calendar
|
Emitted when the prev method triggers. |
next.mdb.calendar
|
Emitted when the next method triggers. |
today.mdb.calendar
|
Emitted when the today method triggers. |
viewChange.mdb.calendar
|
Emitted when the changeView method triggers. |
update.mdb.calendar
|
Emitted when the refresh method triggers. |
addEvent.mdb.calendar
|
Emitted before the "Add Event" event modal appears. Returns the selected date. Use e.preventDefault()
to prevent the default modal from displaying. |
addedEvent.mdb.calendar
|
Emitted after new events are added. Returns array of newly event objects. |
editEvent.mdb.calendar
|
Emitted before the "Edit Event" modal appears. Returns the event object. Use e.preventDefault()
to prevent the default modal from displaying. |
editedEvent.mdb.calendar
|
Emitted after an event is edited. Returns the updated event object. |
deleteEvent.mdb.calendar
|
Emitted before an event is deleted. Returns the event object that is about to be removed. Use e.preventDefault()
to prevent deletion. |
deletedEvent.mdb.calendar
|
Emitted after an event is deleted. |
window.addEventListener('next.mdb.calendar', () => {
alert('Time period changed'));
}