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.

April 2025
Month
SunMonTueWedThuFriSat
30
31
1
2
3
4
5
Angular Meetup
6
Angular Meetup
7
 
8
 
JS Conference
9
 
Vue Meetup
Meeting
10
 
 
Call
11
 
 
12
 
 
13
 
Vue Meetup
React Meetup
14
 
 
 
15
 
 
 
16
 
 
 
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
<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.

April 2025
Month
MonTueWedThuFriSatSun
31
1
2
3
4
5
Angular Meetup
6
 
7
Angular Meetup
8
 
JS Conference
9
 
Vue Meetup
Meeting
10
 
 
Call
11
 
 
12
 
 
13
 
 
React Meetup
14
 
 
React Meetup
15
 
 
 
16
 
 
 
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
<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.

April 2025
Week
Sun
06
Mon
07
Tue
08
Wed
09
Thu
10
Fri
11
Sat
12
Angular Meetup
 
 
JS Conference
 
Vue Meetup
Meeting
 
 
Call
 
 
 
 
1:00
2:00
3:00
4:00
5:00
6:00
7:00
8:00
Meeting
9:00
Meeting
10:00
Meeting
11:00
Meeting
Call
12:00
Call
13:00
Call
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
<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.

April 2025
Week
Sun
06
Mon
07
Tue
08
Wed
09
Thu
10
Fri
11
Sat
12
1:00 am
2:00 am
3:00 am
4:00 am
5:00 am
6:00 am
7:00 am
8:00 am
9:00 am
10:00 am
11:00 am
12:00 pm
1:00 pm
2:00 pm
3:00 pm
4:00 pm
5:00 pm
6:00 pm
7:00 pm
8:00 pm
9:00 pm
10:00 pm
11:00 pm
April 2025
Week
Sun
06
Mon
07
Tue
08
Wed
09
Thu
10
Fri
11
Sat
12
Angular Meetup
 
 
JS Conference
 
Vue Meetup
Meeting
 
 
Call
 
 
 
 
1:00 am
2:00 am
3:00 am
4:00 am
5:00 am
6:00 am
7:00 am
8:00 am
Meeting
9:00 am
Meeting
10:00 am
Meeting
11:00 am
Meeting
Call
12:00 pm
Call
1:00 pm
Call
2:00 pm
3:00 pm
4:00 pm
5:00 pm
6:00 pm
7:00 pm
8:00 pm
9:00 pm
10:00 pm
11:00 pm
<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.

Kwiecień 2025
Miesiąc
NdPonWtŚrCzwPtSb
30
31
1
2
3
4
5
Angular Meetup
6
Angular Meetup
7
 
8
 
JS Conference
9
 
Vue Meetup
Meeting
10
 
 
Call
11
 
 
12
 
 
13
 
Vue Meetup
React Meetup
14
 
 
 
15
 
 
 
16
 
 
 
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
<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.

December 2019
Month
SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
<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.

April 2025
Month
SunMonTueWedThuFriSat
30
31
1
2
3
4
5
Angular Meetup
6
Angular Meetup
7
 
8
 
JS Conference
9
 
Vue Meetup
Meeting
10
 
 
Call
11
 
 
12
 
 
13
 
Vue Meetup
React Meetup
14
 
 
 
15
 
 
 
16
 
 
 
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
<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.

April 2025
Month
SunMonTueWedThuFriSat
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
April 2025
Month
SunMonTueWedThuFriSat
30
31
1
2
3
4
5
Readonly event
6
Readonly event
7
 
8
 
Readonly event
9
 
Vue Meetup
Meeting
10
 
 
Readonly event
11
 
 
12
 
 
13
 
Vue Meetup
React Meetup
14
 
 
 
15
 
 
 
16
 
 
 
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
<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:

April 2025
SunMonTueWedThuFriSat
30
31
1
2
3
4
5
Angular Meetup
6
Angular Meetup
7
 
8
 
JS Conference
9
 
Vue Meetup
Meeting
10
 
 
Call
11
 
 
12
 
 
13
 
Vue Meetup
React Meetup
14
 
 
 
15
 
 
 
16
 
 
 
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
<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.

April 2025
Month
SunMonTueWedThuFriSat
30
31
1
2
3
4
5
Angular Meetup
6
Angular Meetup
7
 
8
 
JS Conference
9
 
Vue Meetup
Meeting
10
 
 
Call
11
 
 
12
 
 
13
 
Vue Meetup
React Meetup
14
 
 
 
15
 
 
 
16
 
 
 
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
<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.

April 2025
Month
SunMonTueWedThuFriSat
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
April 2025
Month
SunMonTueWedThuFriSat
30
31
1
2
3
4
5
Angular Meetup
6
Angular Meetup
7
 
8
 
JS Conference
9
 
Vue Meetup
Meeting
10
 
 
Call
11
 
 
12
 
 
13
 
Vue Meetup
React Meetup
14
 
 
 
15
 
 
 
16
 
 
 
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
<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>