Vue Bootstrap Calendar

Vue Calendar Plugin - Bootstrap 4 & Material Design. Examples & tutorial.

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Vue Bootstrap Calendar Plugin is an extension that allows you to create calendar functionality.

Thanks to this plugin you will be able to easily create new events, manage current events and move existing events between other days.

Basic Example

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

        
            
                <template>
                  <mdb-calendar :events="events" />
                </template>
  
              
        
    
        
            
              <script>
                import {
                  mdbCalendar
                } from 'mdb-calendar'
                export default {
                  name: 'app',
                  components: {
                    mdbCalendar
                  },
                  data() {
                    return {
                      events: [
                        {
                          title: 'Meeting',
                          start: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 7),
                          end: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 8, 23, 59,
                            59),
                          color: 'warning'
                        },
                        {
                          title: 'Front-End Conference',
                          start: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1),
                          end: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 3, 23, 59,
                            59),
                          color: 'danger'
                        },
                        {
                          title: 'Feedback',
                          start: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 13),
                          end: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 13, 23, 59,
                            59),
                          color: 'success'
                        }
                      ]
                    }
                  }
                }
              </script>

Main features

Hold Ctrl key and pick two days to add a long event.
For quick edit simply drag&drop an event between different dates.

MDB Vue Calendar - API

Download

This plugin requires a purchase.

Buy Vue Calendar Plugin

Vue Calendar props list

All props, which are ready to use in Vue Calendar.

Name Type Default Description Example
defaultDate Date new Date() Changes the starting calendar date <mdb-calendar :defaultDate="new Date(2019, 0, 1)" />
defaultView String 'month' Changes the default calendar view (month/week/list) <mdb-calendar defaultView="list" />
monthNames Array ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] Thanks to this prop You're able to change month's names, for example if You want to change the calendar language. <mdb-calendar :monthNames="[]" />
shortMonthNames Array ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] Thanks to this prop You're able to change month's short names. <mdb-calendar :shortMonthNames="[]" />
dayNames Array ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] Thanks to this prop You're able to change day's names. <mdb-calendar :dayNames="[]" />
shortDayNames Array ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] Thanks to this prop You're able to change day's short names. <mdb-calendar :shortDayNames="[]" />
todayText String 'Today' Changes today's text <mdb-calendar todayText="Now" />
events Array / Boolean false Applies pre-defined events to the calendar <mdb-calendar :events="events: [{...}]" />
@getEvents Event - Event emits new events added to the calendar. <mdb-calendar @getEvents="handleEvents" />