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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#292929",
foreground: "#f5f5f5",
},
},
]);
return {
basicCalendar,
basicEvents
};
}
};
</script>
<script setup lang="ts">
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { ref } from "vue";
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#292929",
foreground: "#f5f5f5",
},
},
]);
</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: '#292929',
foreground: '#f5f5f5',
},
}
{
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: '#292929',
foreground: '#f5f5f5',
},
}
{
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: '#292929',
foreground: '#f5f5f5',
},
}
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#292929",
foreground: "#f5f5f5",
},
},
]);
return {
mondayFirstCalendar,
mondayFirstEvents
};
}
};
</script>
<script setup lang="ts">
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { ref } from "vue";
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#292929",
foreground: "#f5f5f5",
},
},
]);
</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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#292929",
foreground: "#f5f5f5",
},
},
]);
return {
defaultViewCalendar,
defaultViewEvents
};
}
};
</script>
<script setup lang="ts">
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { ref } from "vue";
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#292929",
foreground: "#f5f5f5",
},
},
]);
</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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#292929",
foreground: "#f5f5f5",
},
},
]);
return {
twelveHourCalendar,
twelveHourEvents
};
}
};
</script>
<script setup lang="ts">
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { ref } from "vue";
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#292929",
foreground: "#f5f5f5",
},
},
]);
</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"
saveCaption="Zapisz"
deleteCaption="Usuń"
closeCaption="Zamknij"
addEventCaption="Dodaj wydarzenie"
/>
</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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#292929",
foreground: "#f5f5f5",
},
},
]);
return {
customCaptionCalendar,
customCaptionEvents
};
}
};
</script>
<script setup lang="ts">
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { ref } from "vue";
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#292929",
foreground: "#f5f5f5",
},
},
]);
</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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#292929",
foreground: "#f5f5f5",
},
},
]);
return {
defaultDateCalendar,
defaultDateEvents
};
}
};
</script>
<script setup lang="ts">
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { ref } from "vue";
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#292929",
foreground: "#f5f5f5",
},
},
]);
</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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#292929",
foreground: "#f5f5f5",
},
},
]);
return {
readonlyCalendar,
readonlyEvents
};
}
};
</script>
<script setup lang="ts">
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { ref } from "vue";
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#292929",
foreground: "#f5f5f5",
},
},
]);
</script>
Readonly events
The editable mode for any event can be easily disabled by adding
readonly attribute in the event's dataset.
<template>
<MDBCalendar ref="readonlyCalendar" :events="readonlyEvents" />
</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: "Readonly event",
start: {
date: dayjs().format("DD/MM/YYYY"),
},
end: {
date: dayjs().format("DD/MM/YYYY"),
},
color: {
background: "#cfe0fc",
foreground: "#0a47a9",
},
readonly: true,
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
readonly: true,
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
summary: "Readonly event",
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: "#292929",
foreground: "#f5f5f5",
},
readonly: true,
},
]);
return {
readonlyCalendar,
readonlyEvents
};
}
};
</script>
<script setup lang="ts">
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { ref } from "vue";
const readonlyCalendar = ref(null);
const readonlyEvents = ref([
{
summary: "Readonly event",
start: {
date: dayjs().format("DD/MM/YYYY"),
},
end: {
date: dayjs().format("DD/MM/YYYY"),
},
color: {
background: "#cfe0fc",
foreground: "#0a47a9",
},
readonly: true,
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
readonly: true,
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
summary: "Readonly event",
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: "#292929",
foreground: "#f5f5f5",
},
readonly: true,
},
]);
</script>
Disabled modules
Some of the modules can be disabled via props. Here's an example without tooltips and some toolbar action elements:
<template>
<MDBCalendar
ref="modulesCalendar"
:events="modulesEvents"
:todayBtn="false"
:disableTooltip="true"
:addEventButton="false"
:navigation="false"
:viewSelect="false"
/>
</template>
<script>
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { ref } from "vue";
export default {
components: {
MDBCalendar
},
setup() {
const modulesCalendar = ref(null);
const modulesEvents = ref([
{
summary: "JS Conference",
start: {
date: dayjs().format("DD/MM/YYYY"),
},
end: {
date: dayjs().format("DD/MM/YYYY"),
},
color: {
background: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#292929",
foreground: "#f5f5f5",
},
},
]);
return {
modulesCalendar,
modulesEvents
};
}
};
</script>
<script setup lang="ts">
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { ref } from "vue";
const modulesCalendar = ref(null);
const modulesEvents = ref([
{
summary: "JS Conference",
start: {
date: dayjs().format("DD/MM/YYYY"),
},
end: {
date: dayjs().format("DD/MM/YYYY"),
},
color: {
background: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#292929",
foreground: "#f5f5f5",
},
},
]);
</script>
Blur
Past events can be blurred with the blur prop.
<template>
<MDBCalendar ref="blurCalendar" :events="blurEvents" blur />
</template>
<script>
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { ref } from "vue";
export default {
components: {
MDBCalendar
},
setup() {
const blurCalendar = ref(null);
const blurEvents = ref([
{
summary: "JS Conference",
start: {
date: dayjs().format("DD/MM/YYYY"),
},
end: {
date: dayjs().format("DD/MM/YYYY"),
},
color: {
background: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#292929",
foreground: "#f5f5f5",
},
},
]);
return {
blurCalendar,
blurEvents
};
}
};
</script>
<script>
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { ref } from "vue";
const blurCalendar = ref(null);
const blurEvents = ref([
{
summary: "JS Conference",
start: {
date: dayjs().format("DD/MM/YYYY"),
},
end: {
date: dayjs().format("DD/MM/YYYY"),
},
color: {
background: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#292929",
foreground: "#f5f5f5",
},
},
]);
</script>
Custom attributes
You can add your own attributes to existing and new events. Below is an example
with the id attribute.
<template>
<MDBCalendar ref="idCalendar" :events="idEvents" :newEventAtrributes="addAtrributes" />
</template>
<script>
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { ref } from "vue";
export default {
components: {
MDBCalendar
},
setup() {
const idCalendar = ref(null);
const idEvents = ref([
{
summary: "JS Conference",
start: {
date: dayjs().format("DD/MM/YYYY"),
},
end: {
date: dayjs().format("DD/MM/YYYY"),
},
color: {
background: "#cfe0fc",
foreground: "#0a47a9",
},
id: 1,
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
id: 3,
},
{
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: "#fdd8de",
foreground: "#790619",
},
id: 4,
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
id: 5,
},
{
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: "#292929",
foreground: "#f5f5f5",
},
id: 6,
},
]);
let newEventId = idEvents.value.length;
const addAtrributes = (event) => {
newEventId++;
return {
...event,
id: newEventId,
};
};
return {
idCalendar,
idEvents,
addAtrributes,
};
}
};
</script>
<script>
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { ref } from "vue";
const idCalendar = ref(null);
const idEvents = ref([
{
summary: "JS Conference",
start: {
date: dayjs().format("DD/MM/YYYY"),
},
end: {
date: dayjs().format("DD/MM/YYYY"),
},
color: {
background: "#cfe0fc",
foreground: "#0a47a9",
},
id: 1,
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
id: 3,
},
{
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: "#fdd8de",
foreground: "#790619",
},
id: 4,
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
id: 5,
},
{
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: "#292929",
foreground: "#f5f5f5",
},
id: 6,
},
]);
let newEventId = idEvents.value.length;
const addAtrributes = (event) => {
newEventId++;
return {
...event,
id: newEventId,
};
};
</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. |
saveCaption
|
String | Save |
Defines caption for save 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 |
addEventCaption
|
String | Add event |
Defines caption for add event button. |
todayBtn
|
Boolean | true |
Enables today button. |
listOption
|
Boolean | true |
Enables list option in select. |
weekOption
|
Boolean | true |
Enables week option in select. |
monthOption
|
Boolean | true |
Enables month option in select. |
disableTooltip
|
Boolean | false |
Disables tooltip. |
blur
|
Boolean | false |
Enables blur for past events. |
navigation
|
Boolean | true |
Enables navigation. |
viewSelect
|
Boolean | true |
Enables viewSelect. |
addEventButton
|
Boolean | true |
Enables add event button. |
newEventAtrributes
|
Function | (event) => event |
Modifies new events attributes. |
timepickerConfig
|
Object | {} |
Allows to provide options for timepicker component |
datepickerConfig
|
Object | {} |
Allows to provide options for datepicker component |
dateFormat
|
String | 'DD/MM/YYYY' |
Allows to change the date format used in the calendar component |
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. It receives 2 attributes - events and replace. The second one is by default set to false. If you decide to set it to true it will replace all the events instead of adding them. |
removeEvents
|
Removes all events from the calendar. |
<template>
<MDBBtn color="primary" @click="basicCalendar?.prev()">Go to prev month</MDBBtn>
<MDBCalendar ref="basicCalendar" :events="basicEvents" />
</template>
<script>
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { MDBBtn } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBCalendar,
MDBBtn,
},
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#292929",
foreground: "#f5f5f5",
},
},
]);
return {
basicCalendar,
basicEvents,
};
},
};
</script>
<script setup lang="ts">
import { MDBCalendar, dayjs } from "mdb-vue-calendar";
import { MDBBtn } from "mdb-vue-ui-kit";
import { ref } from "vue";
const basicCalendar = ref<InstanceType<typeof MDBCalendar> | null>(null);
const basicEvents = ref([
{
summary: "JS Conference",
start: {
date: dayjs().format("DD/MM/YYYY"),
},
end: {
date: dayjs().format("DD/MM/YYYY"),
},
color: {
background: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#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: 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: "#c7f5d9",
foreground: "#0b4121",
},
},
{
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: "#fdd8de",
foreground: "#790619",
},
},
{
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: "#cfe0fc",
foreground: "#0a47a9",
},
},
{
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: "#292929",
foreground: "#f5f5f5",
},
},
]);
</script>
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. |
<template>
<MDBCalendar ref="basicCalendar" :events="basicEvents" @addEvent="doSomething"/>
</template>