Calendar

Vue Bootstrap 5 Calendar plugin

MDB calendar is a plugin that allows you to efficiently manage tasks. Thanks to this extension you will be able to easily create new events, manage current events, move existing events between other days, and store all data in an easily readable array.

Responsive Calendar plugin built with the latest Bootstrap 5 and Vue 3. Various customization options like default view, event formats, customizable captions, and much more.

Note: Read the API tab to find all available options and advanced customization

Basic example

A few predefined events allowing you to see how the plugin looks like.

        
            
            <template>
              <MDBCalendar ref="basicCalendar" :events="basicEvents" />
            </template>
          
        
    
        
            
            <script>
              import { MDBCalendar, dayjs } from "mdb-vue-calendar";
              import { ref } from "vue";
              export default {
                components: {
                  MDBCalendar
                },
                setup() {
                  const basicCalendar = ref(null);
                  const basicEvents = ref([
                    {
                      summary: "JS Conference",
                      start: {
                        date: dayjs().format("DD/MM/YYYY"),
                      },
                      end: {
                        date: dayjs().format("DD/MM/YYYY"),
                      },
                      color: {
                        background: "#cfe0fc",
                        foreground: "#0a47a9",
                      },
                    },
                    {
                      summary: "Vue Meetup",
                      start: {
                        date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                      },
                      end: {
                        date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                      },
                      color: {
                        background: "#ebcdfe",
                        foreground: "#6e02b1",
                      },
                    },
                    {
                      summary: "Angular Meetup",
                      description:
                        "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                      start: {
                        date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
                      },
                      end: {
                        date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
                      },
                      color: {
                        background: "#c7f5d9",
                        foreground: "#0b4121",
                      },
                    },
                    {
                      summary: "React Meetup",
                      start: {
                        date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                      },
                      end: {
                        date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                      },
                      color: {
                        background: "#fdd8de",
                        foreground: "#790619",
                      },
                    },
                    {
                      summary: "Meeting",
                      start: {
                        date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
                      },
                      end: {
                        date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
                      },
                      color: {
                        background: "#cfe0fc",
                        foreground: "#0a47a9",
                      },
                    },
                    {
                      summary: "Call",
                      start: {
                        date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
                      },
                      end: {
                        date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
                      },
                      color: {
                        background: "#292929",
                        foreground: "#f5f5f5",
                      },
                    },
                  ]);

                  return {
                    basicCalendar,
                    basicEvents
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBCalendar, dayjs } from "mdb-vue-calendar";
              import { ref } from "vue";


              const basicCalendar = ref(null);
              const basicEvents = ref([
                {
                  summary: "JS Conference",
                  start: {
                    date: dayjs().format("DD/MM/YYYY"),
                  },
                  end: {
                    date: dayjs().format("DD/MM/YYYY"),
                  },
                  color: {
                    background: "#cfe0fc",
                    foreground: "#0a47a9",
                  },
                },
                {
                  summary: "Vue Meetup",
                  start: {
                    date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                  },
                  end: {
                    date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                  },
                  color: {
                    background: "#ebcdfe",
                    foreground: "#6e02b1",
                  },
                },
                {
                  summary: "Angular Meetup",
                  description:
                    "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                  start: {
                    date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
                  },
                  end: {
                    date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
                  },
                  color: {
                    background: "#c7f5d9",
                    foreground: "#0b4121",
                  },
                },
                {
                  summary: "React Meetup",
                  start: {
                    date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                  },
                  end: {
                    date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                  },
                  color: {
                    background: "#fdd8de",
                    foreground: "#790619",
                  },
                },
                {
                  summary: "Meeting",
                  start: {
                    date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
                  },
                  end: {
                    date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
                  },
                  color: {
                    background: "#cfe0fc",
                    foreground: "#0a47a9",
                  },
                },
                {
                  summary: "Call",
                  start: {
                    date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
                  },
                  end: {
                    date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
                  },
                  color: {
                    background: "#292929",
                    foreground: "#f5f5f5",
                  },
                },
              ]);

            </script>

Event formats

Calendar events can be added with time in two different formats - 12h or 24h. Optionally, you can also use external time libraries like moment or dayjs. 

        
            
              {
                summary: 'Call',
                start: {
                  date: '08/09/2020',
                  dateTime: '08/09/2020 10:00',
                },
                end: {
                  date: '08/09/2020',
                  dateTime: '08/09/2020 14:00',
                },
                color: {
                  background: '#292929',
                  foreground: '#f5f5f5',
                },
              }
            
        
    
        
            
              {
                summary: 'Call',
                start: {
                  date: '08/09/2020',
                  dateTime: '08/09/2020 10:00 AM',
                },
                end: {
                  date: '08/09/2020',
                  dateTime: '08/09/2020 02:00 PM',
                },
                color: {
                  background: '#292929',
                  foreground: '#f5f5f5',
                },
              }
            
        
    
        
            
              {
                summary: 'Call',
                start: {
                  date: dayjs().add(2, 'day').format('DD/MM/YYYY'),
                  dateTime: dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
                },
                end: {
                  date: dayjs().add(2, 'day').format('DD/MM/YYYY'),
                  dateTime: dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
                },
                color: {
                  background: '#292929',
                  foreground: '#f5f5f5',
                },
              }

Monday first

Set the mondayFirst property to true so that Monday is the first day of the week. 

        
            
            <template>
              <MDBCalendar
                ref="mondayFirstCalendar"
                :events="mondayFirstEvents"
                mondayFirst
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBCalendar, dayjs } from "mdb-vue-calendar";
              import { ref } from "vue";
              export default {
                components: {
                  MDBCalendar
                },
                setup() {
                  const mondayFirstCalendar = ref(null);
                  const mondayFirstEvents = ref([
                    {
                      summary: "JS Conference",
                      start: {
                        date: dayjs().format("DD/MM/YYYY"),
                      },
                      end: {
                        date: dayjs().format("DD/MM/YYYY"),
                      },
                      color: {
                        background: "#cfe0fc",
                        foreground: "#0a47a9",
                      },
                    },
                    {
                      summary: "Vue Meetup",
                      start: {
                        date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                      },
                      end: {
                        date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                      },
                      color: {
                        background: "#ebcdfe",
                        foreground: "#6e02b1",
                      },
                    },
                    {
                      summary: "Angular Meetup",
                      description:
                        "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                      start: {
                        date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
                      },
                      end: {
                        date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
                      },
                      color: {
                        background: "#c7f5d9",
                        foreground: "#0b4121",
                      },
                    },
                    {
                      summary: "React Meetup",
                      start: {
                        date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                      },
                      end: {
                        date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                      },
                      color: {
                        background: "#fdd8de",
                        foreground: "#790619",
                      },
                    },
                    {
                      summary: "Meeting",
                      start: {
                        date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
                      },
                      end: {
                        date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
                      },
                      color: {
                        background: "#cfe0fc",
                        foreground: "#0a47a9",
                      },
                    },
                    {
                      summary: "Call",
                      start: {
                        date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
                      },
                      end: {
                        date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
                      },
                      color: {
                        background: "#292929",
                        foreground: "#f5f5f5",
                      },
                    },
                  ]);
                  return {
                    mondayFirstCalendar,
                    mondayFirstEvents
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBCalendar, dayjs } from "mdb-vue-calendar";
              import { ref } from "vue";

              const mondayFirstCalendar = ref(null);
              const mondayFirstEvents = ref([
                {
                  summary: "JS Conference",
                  start: {
                    date: dayjs().format("DD/MM/YYYY"),
                  },
                  end: {
                    date: dayjs().format("DD/MM/YYYY"),
                  },
                  color: {
                    background: "#cfe0fc",
                    foreground: "#0a47a9",
                  },
                },
                {
                  summary: "Vue Meetup",
                  start: {
                    date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                  },
                  end: {
                    date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                  },
                  color: {
                    background: "#ebcdfe",
                    foreground: "#6e02b1",
                  },
                },
                {
                  summary: "Angular Meetup",
                  description:
                    "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                  start: {
                    date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
                  },
                  end: {
                    date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
                  },
                  color: {
                    background: "#c7f5d9",
                    foreground: "#0b4121",
                  },
                },
                {
                  summary: "React Meetup",
                  start: {
                    date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                  },
                  end: {
                    date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                  },
                  color: {
                    background: "#fdd8de",
                    foreground: "#790619",
                  },
                },
                {
                  summary: "Meeting",
                  start: {
                    date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
                  },
                  end: {
                    date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
                  },
                  color: {
                    background: "#cfe0fc",
                    foreground: "#0a47a9",
                  },
                },
                {
                  summary: "Call",
                  start: {
                    date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
                  },
                  end: {
                    date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
                  },
                  color: {
                    background: "#292929",
                    foreground: "#f5f5f5",
                  },
                },
              ]);
            </script>

Default view

Set the defaultView property to week or list to change the start view. By default, it is a month. 

        
            
            <template>
              <MDBCalendar
                ref="defaultViewCalendar"
                :events="defaultViewEvents"
                defaultView="week"
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBCalendar, dayjs } from "mdb-vue-calendar";
              import { ref } from "vue";
              export default {
                components: {
                  MDBCalendar
                },
                setup() {
                  const defaultViewCalendar = ref(null);
                  const defaultViewEvents = ref([
                    {
                      summary: "JS Conference",
                      start: {
                        date: dayjs().format("DD/MM/YYYY"),
                      },
                      end: {
                        date: dayjs().format("DD/MM/YYYY"),
                      },
                      color: {
                        background: "#cfe0fc",
                        foreground: "#0a47a9",
                      },
                    },
                    {
                      summary: "Vue Meetup",
                      start: {
                        date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                      },
                      end: {
                        date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                      },
                      color: {
                        background: "#ebcdfe",
                        foreground: "#6e02b1",
                      },
                    },
                    {
                      summary: "Angular Meetup",
                      description:
                        "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                      start: {
                        date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
                      },
                      end: {
                        date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
                      },
                      color: {
                        background: "#c7f5d9",
                        foreground: "#0b4121",
                      },
                    },
                    {
                      summary: "React Meetup",
                      start: {
                        date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                      },
                      end: {
                        date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                      },
                      color: {
                        background: "#fdd8de",
                        foreground: "#790619",
                      },
                    },
                    {
                      summary: "Meeting",
                      start: {
                        date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
                      },
                      end: {
                        date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
                      },
                      color: {
                        background: "#cfe0fc",
                        foreground: "#0a47a9",
                      },
                    },
                    {
                      summary: "Call",
                      start: {
                        date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
                      },
                      end: {
                        date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
                      },
                      color: {
                        background: "#292929",
                        foreground: "#f5f5f5",
                      },
                    },
                  ]);
                  return {
                    defaultViewCalendar,
                    defaultViewEvents
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBCalendar, dayjs } from "mdb-vue-calendar";
              import { ref } from "vue";

              const defaultViewCalendar = ref(null);
              const defaultViewEvents = ref([
                {
                  summary: "JS Conference",
                  start: {
                    date: dayjs().format("DD/MM/YYYY"),
                  },
                  end: {
                    date: dayjs().format("DD/MM/YYYY"),
                  },
                  color: {
                    background: "#cfe0fc",
                    foreground: "#0a47a9",
                  },
                },
                {
                  summary: "Vue Meetup",
                  start: {
                    date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                  },
                  end: {
                    date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                  },
                  color: {
                    background: "#ebcdfe",
                    foreground: "#6e02b1",
                  },
                },
                {
                  summary: "Angular Meetup",
                  description:
                    "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                  start: {
                    date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
                  },
                  end: {
                    date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
                  },
                  color: {
                    background: "#c7f5d9",
                    foreground: "#0b4121",
                  },
                },
                {
                  summary: "React Meetup",
                  start: {
                    date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                  },
                  end: {
                    date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                  },
                  color: {
                    background: "#fdd8de",
                    foreground: "#790619",
                  },
                },
                {
                  summary: "Meeting",
                  start: {
                    date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
                  },
                  end: {
                    date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
                  },
                  color: {
                    background: "#cfe0fc",
                    foreground: "#0a47a9",
                  },
                },
                {
                  summary: "Call",
                  start: {
                    date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
                  },
                  end: {
                    date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
                  },
                  color: {
                    background: "#292929",
                    foreground: "#f5f5f5",
                  },
                },
              ]);
            </script>

Twelve hour

By adding the twelveHour property, you get a 12-hour schedule. 

        
            
            <template>
              <MDBCalendar
                ref="twelveHourCalendar"
                :events="twelveHourEvents"
                defaultView="week"
                twelveHour
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBCalendar, dayjs } from "mdb-vue-calendar";
              import { ref } from "vue";
              export default {
                components: {
                  MDBCalendar
                },
                setup() {
                  const twelveHourCalendar = ref(null);
                  const twelveHourEvents = ref([
                    {
                      summary: "JS Conference",
                      start: {
                        date: dayjs().format("DD/MM/YYYY"),
                      },
                      end: {
                        date: dayjs().format("DD/MM/YYYY"),
                      },
                      color: {
                        background: "#cfe0fc",
                        foreground: "#0a47a9",
                      },
                    },
                    {
                      summary: "Vue Meetup",
                      start: {
                        date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                      },
                      end: {
                        date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                      },
                      color: {
                        background: "#ebcdfe",
                        foreground: "#6e02b1",
                      },
                    },
                    {
                      summary: "Angular Meetup",
                      description:
                        "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                      start: {
                        date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                        dateTime:
                          dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00 AM",
                      },
                      end: {
                        date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 02:00 PM",
                      },
                      color: {
                        background: "#c7f5d9",
                        foreground: "#0b4121",
                      },
                    },
                    {
                      summary: "React Meetup",
                      start: {
                        date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                      },
                      end: {
                        date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                      },
                      color: {
                        background: "#fdd8de",
                        foreground: "#790619",
                      },
                    },
                    {
                      summary: "Meeting",
                      start: {
                        date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00 AM",
                      },
                      end: {
                        date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00 PM",
                      },
                      color: {
                        background: "#cfe0fc",
                        foreground: "#0a47a9",
                      },
                    },
                    {
                      summary: "Call",
                      start: {
                        date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00 AM",
                      },
                      end: {
                        date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 02:00 PM",
                      },
                      color: {
                        background: "#292929",
                        foreground: "#f5f5f5",
                      },
                    },
                  ]);
                  return {
                    twelveHourCalendar,
                    twelveHourEvents
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBCalendar, dayjs } from "mdb-vue-calendar";
              import { ref } from "vue";

              const twelveHourCalendar = ref(null);
              const twelveHourEvents = ref([
                {
                  summary: "JS Conference",
                  start: {
                    date: dayjs().format("DD/MM/YYYY"),
                  },
                  end: {
                    date: dayjs().format("DD/MM/YYYY"),
                  },
                  color: {
                    background: "#cfe0fc",
                    foreground: "#0a47a9",
                  },
                },
                {
                  summary: "Vue Meetup",
                  start: {
                    date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                  },
                  end: {
                    date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                  },
                  color: {
                    background: "#ebcdfe",
                    foreground: "#6e02b1",
                  },
                },
                {
                  summary: "Angular Meetup",
                  description:
                    "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                  start: {
                    date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                    dateTime:
                      dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00 AM",
                  },
                  end: {
                    date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 02:00 PM",
                  },
                  color: {
                    background: "#c7f5d9",
                    foreground: "#0b4121",
                  },
                },
                {
                  summary: "React Meetup",
                  start: {
                    date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                  },
                  end: {
                    date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                  },
                  color: {
                    background: "#fdd8de",
                    foreground: "#790619",
                  },
                },
                {
                  summary: "Meeting",
                  start: {
                    date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00 AM",
                  },
                  end: {
                    date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00 PM",
                  },
                  color: {
                    background: "#cfe0fc",
                    foreground: "#0a47a9",
                  },
                },
                {
                  summary: "Call",
                  start: {
                    date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00 AM",
                  },
                  end: {
                    date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 02:00 PM",
                  },
                  color: {
                    background: "#292929",
                    foreground: "#f5f5f5",
                  },
                },
              ]);
            </script>

Customize captions

You can customize all captions very easily using data attributes. Detailed options are described in the API tab. 

        
            
            <template>
              <MDBCalendar
                ref="customCaptionCalendar"
                :events="customCaptionEvents"
                :weekdays="['Nd', 'Pon', 'Wt', 'Śr', 'Czw', 'Pt', 'Sb']"
                :months="['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec','Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień']"
                :monthsShort="['Sty','Lut','Mar','Kwi','Maj','Cze','Lip','Sie','Wrz','Paź','Lis','Gru']"
                todayCaption="Dzisiaj"
                monthCaption="Miesiąc"
                weekCaption="Tydzień"
                listCaption="Lista"
                allDayCaption="Cały dzień"
                noEventsCaption="Brak wydarzeń"
                summaryCaption="Nazwa wydarzenia"
                descriptionCaption="Szczegółowy opis wydarzenia"
                startCaption="Początek"
                endCaption="Koniec"
                addEventModalCaption="Dodaj wydarzenie"
                editEventModalCaption="Edytuj wydarzenie"
                addCaption="Dodaj"
                saveCaption="Zapisz"
                deleteCaption="Usuń"
                closeCaption="Zamknij"
                addEventCaption="Dodaj wydarzenie"
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBCalendar, dayjs } from "mdb-vue-calendar";
              import { ref } from "vue";
              export default {
                components: {
                  MDBCalendar
                },
                setup() {
                  const customCaptionCalendar = ref(null);
                  const customCaptionEvents = ref([
                    {
                      summary: "JS Conference",
                      start: {
                        date: dayjs().format("DD/MM/YYYY"),
                      },
                      end: {
                        date: dayjs().format("DD/MM/YYYY"),
                      },
                      color: {
                        background: "#cfe0fc",
                        foreground: "#0a47a9",
                      },
                    },
                    {
                      summary: "Vue Meetup",
                      start: {
                        date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                      },
                      end: {
                        date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                      },
                      color: {
                        background: "#ebcdfe",
                        foreground: "#6e02b1",
                      },
                    },
                    {
                      summary: "Angular Meetup",
                      description:
                        "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                      start: {
                        date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
                      },
                      end: {
                        date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
                      },
                      color: {
                        background: "#c7f5d9",
                        foreground: "#0b4121",
                      },
                    },
                    {
                      summary: "React Meetup",
                      start: {
                        date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                      },
                      end: {
                        date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                      },
                      color: {
                        background: "#fdd8de",
                        foreground: "#790619",
                      },
                    },
                    {
                      summary: "Meeting",
                      start: {
                        date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
                      },
                      end: {
                        date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
                      },
                      color: {
                        background: "#cfe0fc",
                        foreground: "#0a47a9",
                      },
                    },
                    {
                      summary: "Call",
                      start: {
                        date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
                      },
                      end: {
                        date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
                      },
                      color: {
                        background: "#292929",
                        foreground: "#f5f5f5",
                      },
                    },
                  ]);
                  return {
                    customCaptionCalendar,
                    customCaptionEvents
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBCalendar, dayjs } from "mdb-vue-calendar";
              import { ref } from "vue";

              const customCaptionCalendar = ref(null);
              const customCaptionEvents = ref([
                {
                  summary: "JS Conference",
                  start: {
                    date: dayjs().format("DD/MM/YYYY"),
                  },
                  end: {
                    date: dayjs().format("DD/MM/YYYY"),
                  },
                  color: {
                    background: "#cfe0fc",
                    foreground: "#0a47a9",
                  },
                },
                {
                  summary: "Vue Meetup",
                  start: {
                    date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                  },
                  end: {
                    date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                  },
                  color: {
                    background: "#ebcdfe",
                    foreground: "#6e02b1",
                  },
                },
                {
                  summary: "Angular Meetup",
                  description:
                    "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                  start: {
                    date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
                  },
                  end: {
                    date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
                  },
                  color: {
                    background: "#c7f5d9",
                    foreground: "#0b4121",
                  },
                },
                {
                  summary: "React Meetup",
                  start: {
                    date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                  },
                  end: {
                    date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                  },
                  color: {
                    background: "#fdd8de",
                    foreground: "#790619",
                  },
                },
                {
                  summary: "Meeting",
                  start: {
                    date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
                  },
                  end: {
                    date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
                  },
                  color: {
                    background: "#cfe0fc",
                    foreground: "#0a47a9",
                  },
                },
                {
                  summary: "Call",
                  start: {
                    date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
                  },
                  end: {
                    date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
                  },
                  color: {
                    background: "#292929",
                    foreground: "#f5f5f5",
                  },
                },
              ]);
            </script>

Default date

A starting day can be easily set using the defaultDate property. 

        
            
            <template>
              <MDBCalendar
                ref="defaultDateCalendar"
                :events="defaultDateEvents"
                defaultDate="01-12-2019"
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBCalendar, dayjs } from "mdb-vue-calendar";
              import { ref } from "vue";
              export default {
                components: {
                  MDBCalendar
                },
                setup() {
                  const defaultDateCalendar = ref(null);
                  const defaultDateEvents = ref([
                    {
                      summary: "JS Conference",
                      start: {
                        date: dayjs().format("DD/MM/YYYY"),
                      },
                      end: {
                        date: dayjs().format("DD/MM/YYYY"),
                      },
                      color: {
                        background: "#cfe0fc",
                        foreground: "#0a47a9",
                      },
                    },
                    {
                      summary: "Vue Meetup",
                      start: {
                        date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                      },
                      end: {
                        date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                      },
                      color: {
                        background: "#ebcdfe",
                        foreground: "#6e02b1",
                      },
                    },
                    {
                      summary: "Angular Meetup",
                      description:
                        "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                      start: {
                        date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
                      },
                      end: {
                        date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
                      },
                      color: {
                        background: "#c7f5d9",
                        foreground: "#0b4121",
                      },
                    },
                    {
                      summary: "React Meetup",
                      start: {
                        date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                      },
                      end: {
                        date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                      },
                      color: {
                        background: "#fdd8de",
                        foreground: "#790619",
                      },
                    },
                    {
                      summary: "Meeting",
                      start: {
                        date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
                      },
                      end: {
                        date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
                      },
                      color: {
                        background: "#cfe0fc",
                        foreground: "#0a47a9",
                      },
                    },
                    {
                      summary: "Call",
                      start: {
                        date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
                      },
                      end: {
                        date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
                      },
                      color: {
                        background: "#292929",
                        foreground: "#f5f5f5",
                      },
                    },
                  ]);
                  return {
                    defaultDateCalendar,
                    defaultDateEvents
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBCalendar, dayjs } from "mdb-vue-calendar";
              import { ref } from "vue";

              const defaultDateCalendar = ref(null);
              const defaultDateEvents = ref([
                {
                  summary: "JS Conference",
                  start: {
                    date: dayjs().format("DD/MM/YYYY"),
                  },
                  end: {
                    date: dayjs().format("DD/MM/YYYY"),
                  },
                  color: {
                    background: "#cfe0fc",
                    foreground: "#0a47a9",
                  },
                },
                {
                  summary: "Vue Meetup",
                  start: {
                    date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                  },
                  end: {
                    date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                  },
                  color: {
                    background: "#ebcdfe",
                    foreground: "#6e02b1",
                  },
                },
                {
                  summary: "Angular Meetup",
                  description:
                    "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                  start: {
                    date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
                  },
                  end: {
                    date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
                  },
                  color: {
                    background: "#c7f5d9",
                    foreground: "#0b4121",
                  },
                },
                {
                  summary: "React Meetup",
                  start: {
                    date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                  },
                  end: {
                    date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                  },
                  color: {
                    background: "#fdd8de",
                    foreground: "#790619",
                  },
                },
                {
                  summary: "Meeting",
                  start: {
                    date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
                  },
                  end: {
                    date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
                  },
                  color: {
                    background: "#cfe0fc",
                    foreground: "#0a47a9",
                  },
                },
                {
                  summary: "Call",
                  start: {
                    date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
                  },
                  end: {
                    date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
                  },
                  color: {
                    background: "#292929",
                    foreground: "#f5f5f5",
                  },
                },
              ]);
            </script>

Readonly

The editable mode can be easily disabled using the readonly property. 

        
            
            <template>
              <MDBCalendar ref="readonlyCalendar" :events="readonlyEvents" readonly />
            </template>
          
        
    
        
            
            <script>
              import { MDBCalendar, dayjs } from "mdb-vue-calendar";
              import { ref } from "vue";
              export default {
                components: {
                  MDBCalendar
                },
                setup() {
                  const readonlyCalendar = ref(null);
                  const readonlyEvents = ref([
                    {
                      summary: "JS Conference",
                      start: {
                        date: dayjs().format("DD/MM/YYYY"),
                      },
                      end: {
                        date: dayjs().format("DD/MM/YYYY"),
                      },
                      color: {
                        background: "#cfe0fc",
                        foreground: "#0a47a9",
                      },
                    },
                    {
                      summary: "Vue Meetup",
                      start: {
                        date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                      },
                      end: {
                        date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                      },
                      color: {
                        background: "#ebcdfe",
                        foreground: "#6e02b1",
                      },
                    },
                    {
                      summary: "Angular Meetup",
                      description:
                        "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                      start: {
                        date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
                      },
                      end: {
                        date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
                      },
                      color: {
                        background: "#c7f5d9",
                        foreground: "#0b4121",
                      },
                    },
                    {
                      summary: "React Meetup",
                      start: {
                        date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                      },
                      end: {
                        date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                      },
                      color: {
                        background: "#fdd8de",
                        foreground: "#790619",
                      },
                    },
                    {
                      summary: "Meeting",
                      start: {
                        date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
                      },
                      end: {
                        date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
                      },
                      color: {
                        background: "#cfe0fc",
                        foreground: "#0a47a9",
                      },
                    },
                    {
                      summary: "Call",
                      start: {
                        date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
                      },
                      end: {
                        date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                        dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
                      },
                      color: {
                        background: "#292929",
                        foreground: "#f5f5f5",
                      },
                    },
                  ]);
                  return {
                    readonlyCalendar,
                    readonlyEvents
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBCalendar, dayjs } from "mdb-vue-calendar";
              import { ref } from "vue";

              const readonlyCalendar = ref(null);
              const readonlyEvents = ref([
                {
                  summary: "JS Conference",
                  start: {
                    date: dayjs().format("DD/MM/YYYY"),
                  },
                  end: {
                    date: dayjs().format("DD/MM/YYYY"),
                  },
                  color: {
                    background: "#cfe0fc",
                    foreground: "#0a47a9",
                  },
                },
                {
                  summary: "Vue Meetup",
                  start: {
                    date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                  },
                  end: {
                    date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                  },
                  color: {
                    background: "#ebcdfe",
                    foreground: "#6e02b1",
                  },
                },
                {
                  summary: "Angular Meetup",
                  description:
                    "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                  start: {
                    date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
                  },
                  end: {
                    date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
                  },
                  color: {
                    background: "#c7f5d9",
                    foreground: "#0b4121",
                  },
                },
                {
                  summary: "React Meetup",
                  start: {
                    date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                  },
                  end: {
                    date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                  },
                  color: {
                    background: "#fdd8de",
                    foreground: "#790619",
                  },
                },
                {
                  summary: "Meeting",
                  start: {
                    date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
                  },
                  end: {
                    date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
                  },
                  color: {
                    background: "#cfe0fc",
                    foreground: "#0a47a9",
                  },
                },
                {
                  summary: "Call",
                  start: {
                    date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
                  },
                  end: {
                    date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                    dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
                  },
                  color: {
                    background: "#292929",
                    foreground: "#f5f5f5",
                  },
                },
              ]);
            </script>

Readonly events

The editable mode for any event can be easily disabled by adding readonly attribute in the event's dataset. 

        
            
                <template>
                  <MDBCalendar ref="readonlyCalendar" :events="readonlyEvents" />
                </template>
                
        
    
        
            
                <script>
                  import { MDBCalendar, dayjs } from "mdb-vue-calendar";
                  import { ref } from "vue";
                  export default {
                    components: {
                      MDBCalendar
                    },
                    setup() {
                      const readonlyCalendar = ref(null);
                      const readonlyEvents = ref([
                        {
                          summary: "Readonly event",
                          start: {
                            date: dayjs().format("DD/MM/YYYY"),
                          },
                          end: {
                            date: dayjs().format("DD/MM/YYYY"),
                          },
                          color: {
                            background: "#cfe0fc",
                            foreground: "#0a47a9",
                          },
                          readonly: true,
                        },
                        {
                          summary: "Vue Meetup",
                          start: {
                            date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                          },
                          end: {
                            date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                          },
                          color: {
                            background: "#ebcdfe",
                            foreground: "#6e02b1",
                          },
                        },
                        {
                          summary: "Readonly event",
                          description:
                            "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                          start: {
                            date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                            dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
                          },
                          end: {
                            date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                            dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
                          },
                          color: {
                            background: "#c7f5d9",
                            foreground: "#0b4121",
                          },
                          readonly: true,
                        },
                        {
                          summary: "React Meetup",
                          start: {
                            date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                          },
                          end: {
                            date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                          },
                          color: {
                            background: "#fdd8de",
                            foreground: "#790619",
                          },
                        },
                        {
                          summary: "Meeting",
                          start: {
                            date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                            dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
                          },
                          end: {
                            date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                            dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
                          },
                          color: {
                            background: "#cfe0fc",
                            foreground: "#0a47a9",
                          },
                        },
                        {
                          summary: "Readonly event",
                          start: {
                            date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                            dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
                          },
                          end: {
                            date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                            dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
                          },
                          color: {
                            background: "#292929",
                            foreground: "#f5f5f5",
                          },
                          readonly: true,
                        },
                      ]);
                      return {
                        readonlyCalendar,
                        readonlyEvents
                      };
                    }
                  };
                </script>
              
        
    
        
            
              <script setup lang="ts">
                import { MDBCalendar, dayjs } from "mdb-vue-calendar";
                import { ref } from "vue";
   
                const readonlyCalendar = ref(null);
                const readonlyEvents = ref([
                  {
                    summary: "Readonly event",
                    start: {
                      date: dayjs().format("DD/MM/YYYY"),
                    },
                    end: {
                      date: dayjs().format("DD/MM/YYYY"),
                    },
                    color: {
                      background: "#cfe0fc",
                      foreground: "#0a47a9",
                    },
                    readonly: true,
                  },
                  {
                    summary: "Vue Meetup",
                    start: {
                      date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                    },
                    end: {
                      date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                    },
                    color: {
                      background: "#ebcdfe",
                      foreground: "#6e02b1",
                    },
                  },
                  {
                    summary: "Readonly event",
                    description:
                      "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                    start: {
                      date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                      dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
                    },
                    end: {
                      date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                      dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
                    },
                    color: {
                      background: "#c7f5d9",
                      foreground: "#0b4121",
                    },
                    readonly: true,
                  },
                  {
                    summary: "React Meetup",
                    start: {
                      date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                    },
                    end: {
                      date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                    },
                    color: {
                      background: "#fdd8de",
                      foreground: "#790619",
                    },
                  },
                  {
                    summary: "Meeting",
                    start: {
                      date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                      dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
                    },
                    end: {
                      date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                      dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
                    },
                    color: {
                      background: "#cfe0fc",
                      foreground: "#0a47a9",
                    },
                  },
                  {
                    summary: "Readonly event",
                    start: {
                      date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                      dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
                    },
                    end: {
                      date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                      dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
                    },
                    color: {
                      background: "#292929",
                      foreground: "#f5f5f5",
                    },
                    readonly: true,
                  },
                ]);
              </script>

Disabled modules

Some of the modules can be disabled via props. Here's an example without tooltips and some toolbar action elements: 

        
            
                <template>
                  <MDBCalendar
                    ref="modulesCalendar"
                    :events="modulesEvents"
                    :todayBtn="false"
                    :disableTooltip="true"
                    :addEventButton="false"
                    :navigation="false"
                    :viewSelect="false"
                  />
                </template>
                
        
    
        
            
                  <script>
                    import { MDBCalendar, dayjs } from "mdb-vue-calendar";
                    import { ref } from "vue";
                    export default {
                      components: {
                        MDBCalendar
                      },
                      setup() {
                        const modulesCalendar = ref(null);
                        const modulesEvents = ref([
                          {
                            summary: "JS Conference",
                            start: {
                              date: dayjs().format("DD/MM/YYYY"),
                            },
                            end: {
                              date: dayjs().format("DD/MM/YYYY"),
                            },
                            color: {
                              background: "#cfe0fc",
                              foreground: "#0a47a9",
                            },
                          },
                          {
                            summary: "Vue Meetup",
                            start: {
                              date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                            },
                            end: {
                              date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                            },
                            color: {
                              background: "#ebcdfe",
                              foreground: "#6e02b1",
                            },
                          },
                          {
                            summary: "Angular Meetup",
                            description:
                              "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                            start: {
                              date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                              dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
                            },
                            end: {
                              date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                              dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
                            },
                            color: {
                              background: "#c7f5d9",
                              foreground: "#0b4121",
                            },
                          },
                          {
                            summary: "React Meetup",
                            start: {
                              date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                            },
                            end: {
                              date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                            },
                            color: {
                              background: "#fdd8de",
                              foreground: "#790619",
                            },
                          },
                          {
                            summary: "Meeting",
                            start: {
                              date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                              dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
                            },
                            end: {
                              date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                              dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
                            },
                            color: {
                              background: "#cfe0fc",
                              foreground: "#0a47a9",
                            },
                          },
                          {
                            summary: "Call",
                            start: {
                              date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                              dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
                            },
                            end: {
                              date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                              dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
                            },
                            color: {
                              background: "#292929",
                              foreground: "#f5f5f5",
                            },
                          },
                        ]);
                        return {
                          modulesCalendar,
                          modulesEvents
                        };
                      }
                    };
                  </script>
                
        
    
        
            
                  <script setup lang="ts">
                    import { MDBCalendar, dayjs } from "mdb-vue-calendar";
                    import { ref } from "vue";
      
                    const modulesCalendar = ref(null);
                    const modulesEvents = ref([
                      {
                        summary: "JS Conference",
                        start: {
                          date: dayjs().format("DD/MM/YYYY"),
                        },
                        end: {
                          date: dayjs().format("DD/MM/YYYY"),
                        },
                        color: {
                          background: "#cfe0fc",
                          foreground: "#0a47a9",
                        },
                      },
                      {
                        summary: "Vue Meetup",
                        start: {
                          date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                        },
                        end: {
                          date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                        },
                        color: {
                          background: "#ebcdfe",
                          foreground: "#6e02b1",
                        },
                      },
                      {
                        summary: "Angular Meetup",
                        description:
                          "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                        start: {
                          date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                          dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
                        },
                        end: {
                          date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                          dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
                        },
                        color: {
                          background: "#c7f5d9",
                          foreground: "#0b4121",
                        },
                      },
                      {
                        summary: "React Meetup",
                        start: {
                          date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                        },
                        end: {
                          date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                        },
                        color: {
                          background: "#fdd8de",
                          foreground: "#790619",
                        },
                      },
                      {
                        summary: "Meeting",
                        start: {
                          date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                          dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
                        },
                        end: {
                          date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                          dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
                        },
                        color: {
                          background: "#cfe0fc",
                          foreground: "#0a47a9",
                        },
                      },
                      {
                        summary: "Call",
                        start: {
                          date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                          dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
                        },
                        end: {
                          date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                          dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
                        },
                        color: {
                          background: "#292929",
                          foreground: "#f5f5f5",
                        },
                      },
                    ]);
                  </script>

Blur

Past events can be blurred with the blur prop. 

        
            
                <template>
                  <MDBCalendar ref="blurCalendar" :events="blurEvents" blur />
                </template>
                
        
    
        
            
                  <script>
                    import { MDBCalendar, dayjs } from "mdb-vue-calendar";
                    import { ref } from "vue";
                    export default {
                      components: {
                        MDBCalendar
                      },
                      setup() {
                        const blurCalendar = ref(null);
                        const blurEvents = ref([
                          {
                            summary: "JS Conference",
                            start: {
                              date: dayjs().format("DD/MM/YYYY"),
                            },
                            end: {
                              date: dayjs().format("DD/MM/YYYY"),
                            },
                            color: {
                              background: "#cfe0fc",
                              foreground: "#0a47a9",
                            },
                          },
                          {
                            summary: "Vue Meetup",
                            start: {
                              date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                            },
                            end: {
                              date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                            },
                            color: {
                              background: "#ebcdfe",
                              foreground: "#6e02b1",
                            },
                          },
                          {
                            summary: "Angular Meetup",
                            description:
                              "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                            start: {
                              date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                              dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
                            },
                            end: {
                              date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                              dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
                            },
                            color: {
                              background: "#c7f5d9",
                              foreground: "#0b4121",
                            },
                          },
                          {
                            summary: "React Meetup",
                            start: {
                              date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                            },
                            end: {
                              date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                            },
                            color: {
                              background: "#fdd8de",
                              foreground: "#790619",
                            },
                          },
                          {
                            summary: "Meeting",
                            start: {
                              date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                              dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
                            },
                            end: {
                              date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                              dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
                            },
                            color: {
                              background: "#cfe0fc",
                              foreground: "#0a47a9",
                            },
                          },
                          {
                            summary: "Call",
                            start: {
                              date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                              dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
                            },
                            end: {
                              date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                              dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
                            },
                            color: {
                              background: "#292929",
                              foreground: "#f5f5f5",
                            },
                          },
                        ]);
                        return {
                          blurCalendar,
                          blurEvents
                        };
                      }
                    };
                  </script>
                
        
    
        
            
                  <script>
                    import { MDBCalendar, dayjs } from "mdb-vue-calendar";
                    import { ref } from "vue";
               
                    const blurCalendar = ref(null);
                    const blurEvents = ref([
                      {
                        summary: "JS Conference",
                        start: {
                          date: dayjs().format("DD/MM/YYYY"),
                        },
                        end: {
                          date: dayjs().format("DD/MM/YYYY"),
                        },
                        color: {
                          background: "#cfe0fc",
                          foreground: "#0a47a9",
                        },
                      },
                      {
                        summary: "Vue Meetup",
                        start: {
                          date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                        },
                        end: {
                          date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                        },
                        color: {
                          background: "#ebcdfe",
                          foreground: "#6e02b1",
                        },
                      },
                      {
                        summary: "Angular Meetup",
                        description:
                          "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                        start: {
                          date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                          dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
                        },
                        end: {
                          date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                          dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
                        },
                        color: {
                          background: "#c7f5d9",
                          foreground: "#0b4121",
                        },
                      },
                      {
                        summary: "React Meetup",
                        start: {
                          date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                        },
                        end: {
                          date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                        },
                        color: {
                          background: "#fdd8de",
                          foreground: "#790619",
                        },
                      },
                      {
                        summary: "Meeting",
                        start: {
                          date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                          dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
                        },
                        end: {
                          date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                          dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
                        },
                        color: {
                          background: "#cfe0fc",
                          foreground: "#0a47a9",
                        },
                      },
                      {
                        summary: "Call",
                        start: {
                          date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                          dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
                        },
                        end: {
                          date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                          dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
                        },
                        color: {
                          background: "#292929",
                          foreground: "#f5f5f5",
                        },
                      },
                    ]);
                  </script>

Custom attributes

You can add your own attributes to existing and new events. Below is an example with the id attribute. 

        
            
                <template>
                  <MDBCalendar ref="idCalendar" :events="idEvents" :newEventAtrributes="addAtrributes" />
                </template>
                
        
    
        
            
                  <script>
                    import { MDBCalendar, dayjs } from "mdb-vue-calendar";
                    import { ref } from "vue";
                    export default {
                      components: {
                        MDBCalendar
                      },
                      setup() {
                        const idCalendar = ref(null);
                        const idEvents = ref([
                          {
                            summary: "JS Conference",
                            start: {
                              date: dayjs().format("DD/MM/YYYY"),
                            },
                            end: {
                              date: dayjs().format("DD/MM/YYYY"),
                            },
                            color: {
                              background: "#cfe0fc",
                              foreground: "#0a47a9",
                            },
                            id: 1,
                          },
                          {
                            summary: "Vue Meetup",
                            start: {
                              date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                            },
                            end: {
                              date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                            },
                            color: {
                              background: "#ebcdfe",
                              foreground: "#6e02b1",
                            },
                            id: 2,
                          },
                          {
                            summary: "Angular Meetup",
                            description:
                              "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                            start: {
                              date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                              dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
                            },
                            end: {
                              date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                              dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
                            },
                            color: {
                              background: "#c7f5d9",
                              foreground: "#0b4121",
                            },
                            id: 3,
                          },
                          {
                            summary: "React Meetup",
                            start: {
                              date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                            },
                            end: {
                              date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                            },
                            color: {
                              background: "#fdd8de",
                              foreground: "#790619",
                            },
                            id: 4,
                          },
                          {
                            summary: "Meeting",
                            start: {
                              date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                              dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
                            },
                            end: {
                              date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                              dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
                            },
                            color: {
                              background: "#cfe0fc",
                              foreground: "#0a47a9",
                            },
                            id: 5,
                          },
                          {
                            summary: "Call",
                            start: {
                              date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                              dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
                            },
                            end: {
                              date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                              dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
                            },
                            color: {
                              background: "#292929",
                              foreground: "#f5f5f5",
                            },
                            id: 6,
                          },
                        ]);

                        let newEventId = idEvents.value.length;
                        const addAtrributes = (event) => {
                          newEventId++;

                          return {
                            ...event,
                            id: newEventId,
                          };
                        };

                        return {
                          idCalendar,
                          idEvents,
                          addAtrributes,
                        };
                      }
                    };
                  </script>
                
        
    
        
            
                  <script>
                    import { MDBCalendar, dayjs } from "mdb-vue-calendar";
                    import { ref } from "vue";
              
                    const idCalendar = ref(null);
                    const idEvents = ref([
                      {
                        summary: "JS Conference",
                        start: {
                          date: dayjs().format("DD/MM/YYYY"),
                        },
                        end: {
                          date: dayjs().format("DD/MM/YYYY"),
                        },
                        color: {
                          background: "#cfe0fc",
                          foreground: "#0a47a9",
                        },
                        id: 1,
                      },
                      {
                        summary: "Vue Meetup",
                        start: {
                          date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                        },
                        end: {
                          date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                        },
                        color: {
                          background: "#ebcdfe",
                          foreground: "#6e02b1",
                        },
                        id: 2,
                      },
                      {
                        summary: "Angular Meetup",
                        description:
                          "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
                        start: {
                          date: dayjs().subtract(3, "day").format("DD/MM/YYYY"),
                          dateTime: dayjs().subtract(3, "day").format("DD/MM/YYYY") + " 10:00",
                        },
                        end: {
                          date: dayjs().add(3, "day").format("DD/MM/YYYY"),
                          dateTime: dayjs().add(3, "day").format("DD/MM/YYYY") + " 14:00",
                        },
                        color: {
                          background: "#c7f5d9",
                          foreground: "#0b4121",
                        },
                        id: 3,
                      },
                      {
                        summary: "React Meetup",
                        start: {
                          date: dayjs().add(5, "day").format("DD/MM/YYYY"),
                        },
                        end: {
                          date: dayjs().add(8, "day").format("DD/MM/YYYY"),
                        },
                        color: {
                          background: "#fdd8de",
                          foreground: "#790619",
                        },
                        id: 4,
                      },
                      {
                        summary: "Meeting",
                        start: {
                          date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                          dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 8:00",
                        },
                        end: {
                          date: dayjs().add(1, "day").format("DD/MM/YYYY"),
                          dateTime: dayjs().add(1, "day").format("DD/MM/YYYY") + " 12:00",
                        },
                        color: {
                          background: "#cfe0fc",
                          foreground: "#0a47a9",
                        },
                        id: 5,
                      },
                      {
                        summary: "Call",
                        start: {
                          date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                          dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 11:00",
                        },
                        end: {
                          date: dayjs().add(2, "day").format("DD/MM/YYYY"),
                          dateTime: dayjs().add(2, "day").format("DD/MM/YYYY") + " 14:00",
                        },
                        color: {
                          background: "#292929",
                          foreground: "#f5f5f5",
                        },
                        id: 6,
                      },
                    ]);

                    let newEventId = idEvents.value.length;
                    const addAtrributes = (event) => {
                      newEventId++;

                      return {
                        ...event,
                        id: newEventId,
                      };
                    };
                  </script>

Calendar - API

Import

        
            
          <script>
            import { MDBCalendar, dayjs } from "mdb-vue-calendar";
          </script>

Properties

Property Type Default Description
weekdays Array ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] Defines weekdays displayed names.
months Array ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] Defines months displayed names.
monthsShort Array ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] Defines shortened months displayed names.
mondayFirst Boolean false Changes first day of week to monday.
defaultView String 'month' Defines default view.
twelveHour Boolean false Changes time mode from 24h to 12h.
defaultDate Object / String dayjs() Defines the default starting date.
readonly Boolean false Disables event's edition.
todayCaption String 'today' Defines caption for today.
monthCaption String 'month' Defines caption for month button.
weekCaption String 'week' Defines caption for week button.
listCaption String 'list' Defines caption for list button.
allDayCaption String 'All day event' Defines caption for all day event checkbox.
noEventsCaption String No events Defines caption for empty list view.
summaryCaption String Summary Defines caption for summary input label.
descriptionCaption String Description Defines caption for description input label.
startCaption String Start Defines caption for start input label.
endCaption String End Defines caption for end input label.
addCaption String Add Defines caption for add event button.
deleteCaption String Remove Defines caption for remove event button.
saveCaption String Save Defines caption for save event button.
closeCaption String Close Defines caption for close button.
addEventModalCaption String Add an event Defines caption for add event modal title.
editEventModalCaption String Edit an event Defines caption for edit event modal title.
events Array of Objects [] Defines calendar events.
tag String "div" Defines component tag
addEventCaption String Add event Defines caption for add event button.
todayBtn Boolean true Enables today button.
listOption Boolean true Enables list option in select.
weekOption Boolean true Enables week option in select.
monthOption Boolean true Enables month option in select.
disableTooltip Boolean false Disables tooltip.
blur Boolean false Enables blur for past events.
navigation Boolean true Enables navigation.
viewSelect Boolean true Enables viewSelect.
addEventButton Boolean true Enables add event button.
newEventAtrributes Function (event) => event Modifies new events attributes.
timepickerConfig Object {} Allows to provide options for timepicker component
datepickerConfig Object {} Allows to provide options for datepicker component

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>