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.

March 2025
Month
SunMonTueWedThuFriSat
23
24
25
26
27
28
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
Angular Meetup
27
 
28
 
29
 
JS Conference
30
Angular Meetup
Vue Meetup
Meeting
31
 
 
Call
1
 
 
2
 
 
3
 
 
React Meetup
4
 
 
 
5
 
 
 
<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.

March 2025
Month
MonTueWedThuFriSatSun
24
25
26
27
28
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
Angular Meetup
27
 
28
 
29
 
JS Conference
30
 
Vue Meetup
Meeting
31
Angular Meetup
Vue Meetup
Call
1
 
 
2
 
 
3
 
 
React Meetup
4
 
 
 
5
 
 
 
6
 
 
 
<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.

March 2025
Week
Sun
23
Mon
24
Tue
25
Wed
26
Thu
27
Fri
28
Sat
29
Angular Meetup
 
 
 
JS Conference
1:00
2:00
3:00
4:00
5:00
6:00
7:00
8:00
9:00
10:00
11:00
12:00
13:00
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.

March 2025
Week
Sun
23
Mon
24
Tue
25
Wed
26
Thu
27
Fri
28
Sat
29
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
March 2025
Week
Sun
23
Mon
24
Tue
25
Wed
26
Thu
27
Fri
28
Sat
29
Angular Meetup
 
 
 
JS Conference
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
<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.

Marzec 2025
Miesiąc
NdPonWtŚrCzwPtSb
23
24
25
26
27
28
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
Angular Meetup
27
 
28
 
29
 
JS Conference
30
Angular Meetup
Vue Meetup
Meeting
31
 
 
Call
1
 
 
2
 
 
3
 
 
React Meetup
4
 
 
 
5
 
 
 
<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.

March 2025
Month
SunMonTueWedThuFriSat
23
24
25
26
27
28
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
Angular Meetup
27
 
28
 
29
 
JS Conference
30
Angular Meetup
Vue Meetup
Meeting
31
 
 
Call
1
 
 
2
 
 
3
 
 
React Meetup
4
 
 
 
5
 
 
 
<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.

March 2025
Month
SunMonTueWedThuFriSat
23
24
25
26
27
28
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
March 2025
Month
SunMonTueWedThuFriSat
23
24
25
26
27
28
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
Readonly event
27
 
28
 
29
 
Readonly event
30
Readonly event
Vue Meetup
Meeting
31
 
 
Readonly event
1
 
 
2
 
 
3
 
 
React Meetup
4
 
 
 
5
 
 
 
<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:

March 2025
SunMonTueWedThuFriSat
23
24
25
26
27
28
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
Angular Meetup
27
 
28
 
29
 
JS Conference
30
Angular Meetup
Vue Meetup
Meeting
31
 
 
Call
1
 
 
2
 
 
3
 
 
React Meetup
4
 
 
 
5
 
 
 
<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.

March 2025
Month
SunMonTueWedThuFriSat
23
24
25
26
27
28
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
Angular Meetup
27
 
28
 
29
 
JS Conference
30
Angular Meetup
Vue Meetup
Meeting
31
 
 
Call
1
 
 
2
 
 
3
 
 
React Meetup
4
 
 
 
5
 
 
 
<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.

March 2025
Month
SunMonTueWedThuFriSat
23
24
25
26
27
28
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
March 2025
Month
SunMonTueWedThuFriSat
23
24
25
26
27
28
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
Angular Meetup
27
 
28
 
29
 
JS Conference
30
Angular Meetup
Vue Meetup
Meeting
31
 
 
Call
1
 
 
2
 
 
3
 
 
React Meetup
4
 
 
 
5
 
 
 
<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>