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.
Readonly
The editable mode can be easily disabled using the readonly property.
Readonly events
The editable mode for any event can be easily disabled by adding readonly attribute in the event's dataset.
Disabled modules
Some of the modules can be disabled via props. Here's an example without tooltips and some toolbar action elements:
Blur
Past events can be blurred with the blur prop.
Custom attributes
You can add your own attributes to existing and new events. Below is an example with the id attribute.