Calendar
Vue 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 and Vue 3. 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
Basic example
A few predefined events allowing you to see how the plugin looks like.
<template>
<MDBCalendar ref="basicCalendar" :events="basicEvents" />
</template>
<script>
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { ref } from "vue";
export default {
components: {
MDBCalendar
},
setup() {
const basicCalendar = ref(null);
const basicEvents = ref([
{
summary: "JS Conference",
start: {
date: dayjs().format("DD/MM/YYYY"),
},
end: {
date: dayjs().format("DD/MM/YYYY"),
},
color: {
background: "#1266F1",
foreground: "white",
},
},
{
summary: "Vue Meetup",
start: {
date: dayjs().add(1, "day").format("DD/MM/YYYY"),
},
end: {
date: dayjs().add(5, "day").format("DD/MM/YYYY"),
},
color: {
background: "#00B74A",
foreground: "white",
},
},
{
summary: "Angular Meetup",
description:
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
start: {
date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
},
end: {
date: dayjs().add(3, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
},
color: {
background: "#F93154",
foreground: "white",
},
},
{
summary: "React Meetup",
start: {
date: dayjs().add(5, "day").format("DD/MM/YYYY"),
},
end: {
date: dayjs().add(8, "day").format("DD/MM/YYYY"),
},
color: {
background: "#39C0ED",
foreground: "white",
},
},
{
summary: "Meeting",
start: {
date: dayjs().add(1, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
},
end: {
date: dayjs().add(1, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
},
color: {
background: "#1266F1",
foreground: "white",
},
},
{
summary: "Call",
start: {
date: dayjs().add(2, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
},
end: {
date: dayjs().add(2, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
},
color: {
background: "#FFA900",
},
},
]);
return {
basicCalendar,
basicEvents
};
}
};
</script>
Event formats
Calendar events can be added with time in two different formats - 12h or 24h. Optionally, you can also use external time libraries like moment or dayjs.
{
summary: 'Call',
start: {
date: '08/09/2020',
dateTime: '08/09/2020 10:00',
},
end: {
date: '08/09/2020',
dateTime: '08/09/2020 14:00',
},
color: {
background: '#FFA900',
},
}
{
summary: 'Call',
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: '#FFA900',
},
}
{
summary: 'Call',
start: {
date: dayjs().add(2, 'day').format('DD/MM/YYYY'),
dateTime: dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
},
end: {
date: dayjs().add(2, 'day').format('DD/MM/YYYY'),
dateTime: dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
},
color: {
background: '#FFA900',
},
}
Monday first
Set the mondayFirst property to true so that Monday is
the first day of the week.
<template>
<MDBCalendar
ref="mondayFirstCalendar"
:events="mondayFirstEvents"
mondayFirst
/>
</template>
<script>
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { ref } from "vue";
export default {
components: {
MDBCalendar
},
setup() {
const mondayFirstCalendar = ref(null);
const mondayFirstEvents = ref([
{
summary: "JS Conference",
start: {
date: dayjs().format("DD/MM/YYYY"),
},
end: {
date: dayjs().format("DD/MM/YYYY"),
},
color: {
background: "#1266F1",
foreground: "white",
},
},
{
summary: "Vue Meetup",
start: {
date: dayjs().add(1, "day").format("DD/MM/YYYY"),
},
end: {
date: dayjs().add(5, "day").format("DD/MM/YYYY"),
},
color: {
background: "#00B74A",
foreground: "white",
},
},
{
summary: "Angular Meetup",
description:
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
start: {
date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
},
end: {
date: dayjs().add(3, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
},
color: {
background: "#F93154",
foreground: "white",
},
},
{
summary: "React Meetup",
start: {
date: dayjs().add(5, "day").format("DD/MM/YYYY"),
},
end: {
date: dayjs().add(8, "day").format("DD/MM/YYYY"),
},
color: {
background: "#39C0ED",
foreground: "white",
},
},
{
summary: "Meeting",
start: {
date: dayjs().add(1, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
},
end: {
date: dayjs().add(1, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
},
color: {
background: "#1266F1",
foreground: "white",
},
},
{
summary: "Call",
start: {
date: dayjs().add(2, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
},
end: {
date: dayjs().add(2, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
},
color: {
background: "#FFA900",
},
},
]);
return {
mondayFirstCalendar,
mondayFirstEvents
};
}
};
</script>
Default view
Set the defaultView property to week or
list to change the start view. By default, it is a
month.
<template>
<MDBCalendar
ref="defaultViewCalendar"
:events="defaultViewEvents"
defaultView="week"
/>
</template>
<script>
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { ref } from "vue";
export default {
components: {
MDBCalendar
},
setup() {
const defaultViewCalendar = ref(null);
const defaultViewEvents = ref([
{
summary: "JS Conference",
start: {
date: dayjs().format("DD/MM/YYYY"),
},
end: {
date: dayjs().format("DD/MM/YYYY"),
},
color: {
background: "#1266F1",
foreground: "white",
},
},
{
summary: "Vue Meetup",
start: {
date: dayjs().add(1, "day").format("DD/MM/YYYY"),
},
end: {
date: dayjs().add(5, "day").format("DD/MM/YYYY"),
},
color: {
background: "#00B74A",
foreground: "white",
},
},
{
summary: "Angular Meetup",
description:
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
start: {
date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
},
end: {
date: dayjs().add(3, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
},
color: {
background: "#F93154",
foreground: "white",
},
},
{
summary: "React Meetup",
start: {
date: dayjs().add(5, "day").format("DD/MM/YYYY"),
},
end: {
date: dayjs().add(8, "day").format("DD/MM/YYYY"),
},
color: {
background: "#39C0ED",
foreground: "white",
},
},
{
summary: "Meeting",
start: {
date: dayjs().add(1, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
},
end: {
date: dayjs().add(1, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
},
color: {
background: "#1266F1",
foreground: "white",
},
},
{
summary: "Call",
start: {
date: dayjs().add(2, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
},
end: {
date: dayjs().add(2, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
},
color: {
background: "#FFA900",
},
},
]);
return {
defaultViewCalendar,
defaultViewEvents
};
}
};
</script>
Twelve hour
By adding the twelveHour property, you get a 12-hour
schedule.
<template>
<MDBCalendar
ref="twelveHourCalendar"
:events="twelveHourEvents"
defaultView="week"
twelveHour
/>
</template>
<script>
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { ref } from "vue";
export default {
components: {
MDBCalendar
},
setup() {
const twelveHourCalendar = ref(null);
const twelveHourEvents = ref([
{
summary: "JS Conference",
start: {
date: dayjs().format("DD/MM/YYYY"),
},
end: {
date: dayjs().format("DD/MM/YYYY"),
},
color: {
background: "#1266F1",
foreground: "white",
},
},
{
summary: "Vue Meetup",
start: {
date: dayjs().add(1, "day").format("DD/MM/YYYY"),
},
end: {
date: dayjs().add(5, "day").format("DD/MM/YYYY"),
},
color: {
background: "#00B74A",
foreground: "white",
},
},
{
summary: "Angular Meetup",
description:
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
start: {
date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
dateTime:
dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00 AM",
},
end: {
date: dayjs().add(3, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 02:00 PM",
},
color: {
background: "#F93154",
foreground: "white",
},
},
{
summary: "React Meetup",
start: {
date: dayjs().add(5, "day").format("DD/MM/YYYY"),
},
end: {
date: dayjs().add(8, "day").format("DD/MM/YYYY"),
},
color: {
background: "#39C0ED",
foreground: "white",
},
},
{
summary: "Meeting",
start: {
date: dayjs().add(1, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00 AM",
},
end: {
date: dayjs().add(1, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00 PM",
},
color: {
background: "#1266F1",
foreground: "white",
},
},
{
summary: "Call",
start: {
date: dayjs().add(2, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00 AM",
},
end: {
date: dayjs().add(2, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 02:00 PM",
},
color: {
background: "#FFA900",
},
},
]);
return {
twelveHourCalendar,
twelveHourEvents
};
}
};
</script>
Customize captions
You can customize all captions very easily using data attributes. Detailed options are described in the API tab.
<template>
<MDBCalendar
ref="customCaptionCalendar"
:events="customCaptionEvents"
:weekdays="['Nd', 'Pon', 'Wt', 'Śr', 'Czw', 'Pt', 'Sb']"
:months="['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec','Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień']"
:monthsShort="['Sty','Lut','Mar','Kwi','Maj','Cze','Lip','Sie','Wrz','Paź','Lis','Gru']"
todayCaption="Dzisiaj"
monthCaption="Miesiąc"
weekCaption="Tydzień"
listCaption="Lista"
allDayCaption="Cały dzień"
noEventsCaption="Brak wydarzeń"
summaryCaption="Nazwa wydarzenia"
descriptionCaption="Szczegółowy opis wydarzenia"
startCaption="Początek"
endCaption="Koniec"
addEventModalCaption="Dodaj wydarzenie"
editEventModalCaption="Edytuj wydarzenie"
addCaption="Dodaj"
editCaption="Edytuj"
deleteCaption="Usuń"
closeCaption="Zamknij"
/>
</template>
<script>
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { ref } from "vue";
export default {
components: {
MDBCalendar
},
setup() {
const customCaptionCalendar = ref(null);
const customCaptionEvents = ref([
{
summary: "JS Conference",
start: {
date: dayjs().format("DD/MM/YYYY"),
},
end: {
date: dayjs().format("DD/MM/YYYY"),
},
color: {
background: "#1266F1",
foreground: "white",
},
},
{
summary: "Vue Meetup",
start: {
date: dayjs().add(1, "day").format("DD/MM/YYYY"),
},
end: {
date: dayjs().add(5, "day").format("DD/MM/YYYY"),
},
color: {
background: "#00B74A",
foreground: "white",
},
},
{
summary: "Angular Meetup",
description:
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
start: {
date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
},
end: {
date: dayjs().add(3, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
},
color: {
background: "#F93154",
foreground: "white",
},
},
{
summary: "React Meetup",
start: {
date: dayjs().add(5, "day").format("DD/MM/YYYY"),
},
end: {
date: dayjs().add(8, "day").format("DD/MM/YYYY"),
},
color: {
background: "#39C0ED",
foreground: "white",
},
},
{
summary: "Meeting",
start: {
date: dayjs().add(1, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
},
end: {
date: dayjs().add(1, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
},
color: {
background: "#1266F1",
foreground: "white",
},
},
{
summary: "Call",
start: {
date: dayjs().add(2, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
},
end: {
date: dayjs().add(2, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
},
color: {
background: "#FFA900",
},
},
]);
return {
customCaptionCalendar,
customCaptionEvents
};
}
};
</script>
Default date
A starting day can be easily set using the
defaultDate property.
<template>
<MDBCalendar
ref="defaultDateCalendar"
:events="defaultDateEvents"
defaultDate="01-12-2019"
/>
</template>
<script>
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { ref } from "vue";
export default {
components: {
MDBCalendar
},
setup() {
const defaultDateCalendar = ref(null);
const defaultDateEvents = ref([
{
summary: "JS Conference",
start: {
date: dayjs().format("DD/MM/YYYY"),
},
end: {
date: dayjs().format("DD/MM/YYYY"),
},
color: {
background: "#1266F1",
foreground: "white",
},
},
{
summary: "Vue Meetup",
start: {
date: dayjs().add(1, "day").format("DD/MM/YYYY"),
},
end: {
date: dayjs().add(5, "day").format("DD/MM/YYYY"),
},
color: {
background: "#00B74A",
foreground: "white",
},
},
{
summary: "Angular Meetup",
description:
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
start: {
date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
},
end: {
date: dayjs().add(3, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
},
color: {
background: "#F93154",
foreground: "white",
},
},
{
summary: "React Meetup",
start: {
date: dayjs().add(5, "day").format("DD/MM/YYYY"),
},
end: {
date: dayjs().add(8, "day").format("DD/MM/YYYY"),
},
color: {
background: "#39C0ED",
foreground: "white",
},
},
{
summary: "Meeting",
start: {
date: dayjs().add(1, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
},
end: {
date: dayjs().add(1, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
},
color: {
background: "#1266F1",
foreground: "white",
},
},
{
summary: "Call",
start: {
date: dayjs().add(2, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
},
end: {
date: dayjs().add(2, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
},
color: {
background: "#FFA900",
},
},
]);
return {
defaultDateCalendar,
defaultDateEvents
};
}
};
</script>
Readonly
The editable mode can be easily disabled using the
readonly property.
<template>
<MDBCalendar ref="readonlyCalendar" :events="readonlyEvents" readonly />
</template>
<script>
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { ref } from "vue";
export default {
components: {
MDBCalendar
},
setup() {
const readonlyCalendar = ref(null);
const readonlyEvents = ref([
{
summary: "JS Conference",
start: {
date: dayjs().format("DD/MM/YYYY"),
},
end: {
date: dayjs().format("DD/MM/YYYY"),
},
color: {
background: "#1266F1",
foreground: "white",
},
},
{
summary: "Vue Meetup",
start: {
date: dayjs().add(1, "day").format("DD/MM/YYYY"),
},
end: {
date: dayjs().add(5, "day").format("DD/MM/YYYY"),
},
color: {
background: "#00B74A",
foreground: "white",
},
},
{
summary: "Angular Meetup",
description:
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
start: {
date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
},
end: {
date: dayjs().add(3, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
},
color: {
background: "#F93154",
foreground: "white",
},
},
{
summary: "React Meetup",
start: {
date: dayjs().add(5, "day").format("DD/MM/YYYY"),
},
end: {
date: dayjs().add(8, "day").format("DD/MM/YYYY"),
},
color: {
background: "#39C0ED",
foreground: "white",
},
},
{
summary: "Meeting",
start: {
date: dayjs().add(1, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
},
end: {
date: dayjs().add(1, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
},
color: {
background: "#1266F1",
foreground: "white",
},
},
{
summary: "Call",
start: {
date: dayjs().add(2, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
},
end: {
date: dayjs().add(2, "day").format("DD/MM/YYYY"),
dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
},
color: {
background: "#FFA900",
},
},
]);
return {
readonlyCalendar,
readonlyEvents
};
}
};
</script>
Calendar - API
Import
<script>
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
</script>
Properties
| Property | Type | Default | Description |
|---|---|---|---|
weekdays
|
Array | ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] |
Defines weekdays displayed names. |
months
|
Array |
['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
|
Defines months displayed names. |
monthsShort
|
Array | ['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 button. |
weekCaption
|
String | 'week' |
Defines caption for week button. |
listCaption
|
String | 'list' |
Defines caption for list button. |
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. |
editCaption
|
String | Edit |
Defines caption for edit event button. |
closeCaption
|
String | Close |
Defines caption for close button. |
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. |
tag
|
String | "div" |
Defines component tag |
Methods
| Name | Description |
|---|---|
prev |
Changes the period of time to previous. |
next |
Changes the period of time to next. |
today |
Changes the period of time to today. |
changeView
|
Changes the view. |
addEvents
|
Adds new events to the calendar. |
removeEvents
|
Removes all events from the calendar. |
Events
| Name | Description |
|---|---|
prev
|
Emitted when the prev method triggers. |
next
|
Emitted when the next method triggers. |
today
|
Emitted when the today method triggers. |
viewChange
|
Emitted when the changeView method triggers. |
addEvent
|
Emitted when a new event is added. Returns a new event object. |
editEvent
|
Emitted when any event is editted. Returns an editted event object. |
deleteEvent
|
Emitted when any event is deleted. Returns a deleted event object. |