Vue 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.

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.

Monday first

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

Default view

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

Twelve hour

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

Customize captions

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

Default date

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


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

Vue Calendar - API


        import { MDBCalendar, dayjs } from "mdb-vue-calendar";


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 ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] Defines shortened months displayed names.
mondayFirst Boolean false Changes first day of week to monday.
defaultView String 'month' Defines default view.
twelveHour Boolean false Changes time mode from 24h to 12h.
defaultDate Object / String dayjs() Defines the default starting date.
readonly Boolean false Disables event's edition.
todayCaption String 'today' Defines caption for today.
monthCaption String 'month' Defines caption for month button.
weekCaption String 'week' Defines caption for week button.
listCaption String 'list' Defines caption for list button.
allDayCaption String 'All day event' Defines caption for all day event checkbox.
noEventsCaption String No events Defines caption for empty list view.
summaryCaption String Summary Defines caption for summary input label.
descriptionCaption String Description Defines caption for description input label.
startCaption String Start Defines caption for start input label.
endCaption String End Defines caption for end input label.
addCaption String Add Defines caption for add event button.
deleteCaption String Remove Defines caption for remove event button.
editCaption String Edit Defines caption for edit event button.
closeCaption String Close Defines caption for close button.
addEventModalCaption String Add an event Defines caption for add event modal title.
editEventModalCaption String Edit an event Defines caption for edit event modal title.
events Array of Objects [] Defines calendar events.
tag String "div" Defines component tag


Name Description
prev Changes the period of time to previous.
next Changes the period of time to next.
today Changes the period of time to today.
changeView Changes the view.
addEvents Adds new events to the calendar.
removeEvents Removes all events from the calendar.


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.