Calendar

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

HTML
JavaScript


          <div class="calendar" id="calendar"></div>


          const events = [
            {
              summary: 'JS Conference',
              start: {
                date: Calendar.moment.format('DD/MM/YYYY'),
              },
              end: {
                date: Calendar.moment.format('DD/MM/YYYY'),
              },
              color: {
                background: '#1266F1',
                foreground: 'white',
              },
            },
            {
              summary: 'Vue Meetup',
              start: {
                date: Calendar.moment.add(1, 'day').format('DD/MM/YYYY'),
              },
              end: {
                date: Calendar.moment.add(5, 'day').format('DD/MM/YYYY'),
              },
              color: {
                background: '#00B74A',
                foreground: 'white',
              },
            },
            {
              summary: 'Angular Meetup',
              description:
                'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
              start: {
                date: Calendar.moment.subtract(3, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00',
              },
              end: {
                date: Calendar.moment.add(3, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(3, 'day').format('DD/MM/YYYY') + ' 14:00',
              },
              color: {
                background: '#F93154',
                foreground: 'white',
              },
            },
            {
              summary: 'React Meetup',
              start: {
                date: Calendar.moment.add(5, 'day').format('DD/MM/YYYY'),
              },
              end: {
                date: Calendar.moment.add(8, 'day').format('DD/MM/YYYY'),
              },
              color: {
                background: '#39C0ED',
                foreground: 'white',
              },
            },
            {
              summary: 'Meeting',
              start: {
                date: Calendar.moment.add(1, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(1, 'day').format('DD/MM/YYYY') + ' 8:00',
              },
              end: {
                date: Calendar.moment.add(1, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(1, 'day').format('DD/MM/YYYY') + ' 12:00',
              },
              color: {
                background: '#1266F1',
                foreground: 'white',
              },
            },
            {
              summary: 'Call',
              start: {
                date: Calendar.moment.add(2, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
              },
              end: {
                date: Calendar.moment.add(2, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
              },
              color: {
                background: '#FFA900',
              },
            }
          ];

          const calendarElement = document.getElementById('calendar');
          const calendarInstance = Calendar.getInstance(calendarElement);
          calendarInstance.addEvents(events);

Event formats

Calendar events can be added with time in two different formats - 12h or 24h. Optionally, you can also use the moment static getter which returns the current date object. We recommend reading the moment library documentation before using this method.

Monday first

Set the data-mdb-monday-first attribute to true so that Monday is the first day of the week.

HTML
JavaScript


          <div class="calendar" id="calendar-2" data-mdb-monday-first="true"></div>


          const events = [
            {
              summary: 'JS Conference',
              start: {
                date: Calendar.moment.format('DD/MM/YYYY'),
              },
              end: {
                date: Calendar.moment.format('DD/MM/YYYY'),
              },
              color: {
                background: '#1266F1',
                foreground: 'white',
              },
            },
            {
              summary: 'Vue Meetup',
              start: {
                date: Calendar.moment.add(1, 'day').format('DD/MM/YYYY'),
              },
              end: {
                date: Calendar.moment.add(5, 'day').format('DD/MM/YYYY'),
              },
              color: {
                background: '#00B74A',
                foreground: 'white',
              },
            },
            {
              summary: 'Angular Meetup',
              description:
                'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
              start: {
                date: Calendar.moment.subtract(3, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00',
              },
              end: {
                date: Calendar.moment.add(3, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(3, 'day').format('DD/MM/YYYY') + ' 14:00',
              },
              color: {
                background: '#F93154',
                foreground: 'white',
              },
            },
            {
              summary: 'React Meetup',
              start: {
                date: Calendar.moment.add(5, 'day').format('DD/MM/YYYY'),
              },
              end: {
                date: Calendar.moment.add(8, 'day').format('DD/MM/YYYY'),
              },
              color: {
                background: '#39C0ED',
                foreground: 'white',
              },
            },
            {
              summary: 'Meeting',
              start: {
                date: Calendar.moment.add(1, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(1, 'day').format('DD/MM/YYYY') + ' 8:00',
              },
              end: {
                date: Calendar.moment.add(1, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(1, 'day').format('DD/MM/YYYY') + ' 12:00',
              },
              color: {
                background: '#1266F1',
                foreground: 'white',
              },
            },
            {
              summary: 'Call',
              start: {
                date: Calendar.moment.add(2, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
              },
              end: {
                date: Calendar.moment.add(2, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
              },
              color: {
                background: '#FFA900',
              },
            }
          ];

          const calendarElement = document.getElementById('calendar-2');
          const calendarInstance = Calendar.getInstance(calendarElement);
          calendarInstance.addEvents(events);

Default view

Set the data-mdb-default-view attribute to week or list to change the start view. By default, it is a month.

HTML
JavaScript


          <div class="calendar" id="calendar-3" data-mdb-default-view="week"></div>


          const events = [
            {
              summary: 'JS Conference',
              start: {
                date: Calendar.moment.format('DD/MM/YYYY'),
              },
              end: {
                date: Calendar.moment.format('DD/MM/YYYY'),
              },
              color: {
                background: '#1266F1',
                foreground: 'white',
              },
            },
            {
              summary: 'Vue Meetup',
              start: {
                date: Calendar.moment.add(1, 'day').format('DD/MM/YYYY'),
              },
              end: {
                date: Calendar.moment.add(5, 'day').format('DD/MM/YYYY'),
              },
              color: {
                background: '#00B74A',
                foreground: 'white',
              },
            },
            {
              summary: 'Angular Meetup',
              description:
                'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
              start: {
                date: Calendar.moment.subtract(3, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00',
              },
              end: {
                date: Calendar.moment.add(3, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(3, 'day').format('DD/MM/YYYY') + ' 14:00',
              },
              color: {
                background: '#F93154',
                foreground: 'white',
              },
            },
            {
              summary: 'React Meetup',
              start: {
                date: Calendar.moment.add(5, 'day').format('DD/MM/YYYY'),
              },
              end: {
                date: Calendar.moment.add(8, 'day').format('DD/MM/YYYY'),
              },
              color: {
                background: '#39C0ED',
                foreground: 'white',
              },
            },
            {
              summary: 'Meeting',
              start: {
                date: Calendar.moment.add(1, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(1, 'day').format('DD/MM/YYYY') + ' 8:00',
              },
              end: {
                date: Calendar.moment.add(1, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(1, 'day').format('DD/MM/YYYY') + ' 12:00',
              },
              color: {
                background: '#1266F1',
                foreground: 'white',
              },
            },
            {
              summary: 'Call',
              start: {
                date: Calendar.moment.add(2, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
              },
              end: {
                date: Calendar.moment.add(2, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
              },
              color: {
                background: '#FFA900',
              },
            }
          ]);

          const calendarElement = document.getElementById('calendar-3');
          const calendarInstance = Calendar.getInstance(calendarElement);
          calendarInstance.addEvents(events);

Twelve hour

By setting the data-mdb-twelve-hour attribute to true, you get a 12-hour schedule.

HTML
JavaScript


          <div class="calendar" id="calendar-4" data-mdb-default-view="week" data-mdb-twelve-hour="true"></div>


          const events = [
            {
              summary: 'JS Conference',
              start: {
                date: Calendar.moment.format('DD/MM/YYYY'),
              },
              end: {
                date: Calendar.moment.format('DD/MM/YYYY'),
              },
              color: {
                background: '#1266F1',
                foreground: 'white',
              },
            },
            {
              summary: 'Vue Meetup',
              start: {
                date: Calendar.moment.add(1, 'day').format('DD/MM/YYYY'),
              },
              end: {
                date: Calendar.moment.add(5, 'day').format('DD/MM/YYYY'),
              },
              color: {
                background: '#00B74A',
                foreground: 'white',
              },
            },
            {
              summary: 'Angular Meetup',
              description:
                'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
              start: {
                date: Calendar.moment.subtract(3, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00 AM',
              },
              end: {
                date: Calendar.moment.add(3, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(3, 'day').format('DD/MM/YYYY') + ' 02:00 PM',
              },
              color: {
                background: '#F93154',
                foreground: 'white',
              },
            },
            {
              summary: 'React Meetup',
              start: {
                date: Calendar.moment.add(5, 'day').format('DD/MM/YYYY'),
              },
              end: {
                date: Calendar.moment.add(8, 'day').format('DD/MM/YYYY'),
              },
              color: {
                background: '#39C0ED',
                foreground: 'white',
              },
            },
            {
              summary: 'Meeting',
              start: {
                date: Calendar.moment.add(1, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(1, 'day').format('DD/MM/YYYY') + ' 8:00 AM',
              },
              end: {
                date: Calendar.moment.add(1, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(1, 'day').format('DD/MM/YYYY') + ' 12:00 PM',
              },
              color: {
                background: '#1266F1',
                foreground: 'white',
              },
            },
            {
              summary: 'Call',
              start: {
                date: Calendar.moment.add(2, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(2, 'day').format('DD/MM/YYYY') + ' 11:00 AM',
              },
              end: {
                date: Calendar.moment.add(2, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(2, 'day').format('DD/MM/YYYY') + ' 02:00 PM',
              },
              color: {
                background: '#FFA900',
              },
            }
          ];

          const calendarElement = document.getElementById('calendar-4');
          const calendarInstance = Calendar.getInstance(calendarElement);
          calendarInstance.addEvents(events);

Customize captions

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

HTML
JavaScript


          <div
            class="calendar"
            id="calendar-5"
            data-mdb-weekdays="Nd, Pon, Wt, Śr, Czw, Pt, Sb"
            data-mdb-months="Styczeń, Luty, Marzec, Kwiecień, Maj, Czerwiec, Lipiec, Sierpień, Wrzesień, Październik, Listopad, Grudzień"
            data-mdb-months-short="Sty, Lut, Mar, Kwi, Maj, Cze, Lip, Sie, Wrz, Paź, Lis, Gru"
            data-mdb-today-caption="Dzisiaj"
            data-mdb-month-caption="Miesiąc"
            data-mdb-week-caption="Tydzień"
            data-mdb-list-caption="Lista"
            data-mdb-all-day-caption="Cały dzień"
            data-mdb-no-events-caption="Brak wydarzeń"
            data-mdb-summary-caption="Nazwa wydarzenia"
            data-mdb-description-caption="Szczegółowy opis wydarzenia"
            data-mdb-start-caption="Początek"
            data-mdb-end-caption="Koniec"
            data-mdb-add-event-modal-caption="Dodaj wydarzenie"
            data-mdb-edit-event-modal-caption="Edytuj wydarzenie"
            data-mdb-add-caption="Dodaj"
            data-mdb-edit-caption="Edytuj"
            data-mdb-delete-caption="Usuń"
            data-mdb-close-caption="Zamknij"
          ></div>


          const events = [
            {
              summary: 'JS Conference',
              start: {
                date: Calendar.moment.format('DD/MM/YYYY'),
              },
              end: {
                date: Calendar.moment.format('DD/MM/YYYY'),
              },
              color: {
                background: '#1266F1',
                foreground: 'white',
              },
            },
            {
              summary: 'Vue Meetup',
              start: {
                date: Calendar.moment.add(1, 'day').format('DD/MM/YYYY'),
              },
              end: {
                date: Calendar.moment.add(5, 'day').format('DD/MM/YYYY'),
              },
              color: {
                background: '#00B74A',
                foreground: 'white',
              },
            },
            {
              summary: 'Angular Meetup',
              description:
                'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
              start: {
                date: Calendar.moment.subtract(3, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00',
              },
              end: {
                date: Calendar.moment.add(3, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(3, 'day').format('DD/MM/YYYY') + ' 14:00',
              },
              color: {
                background: '#F93154',
                foreground: 'white',
              },
            },
            {
              summary: 'React Meetup',
              start: {
                date: Calendar.moment.add(5, 'day').format('DD/MM/YYYY'),
              },
              end: {
                date: Calendar.moment.add(8, 'day').format('DD/MM/YYYY'),
              },
              color: {
                background: '#39C0ED',
                foreground: 'white',
              },
            },
            {
              summary: 'Meeting',
              start: {
                date: Calendar.moment.add(1, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(1, 'day').format('DD/MM/YYYY') + ' 8:00',
              },
              end: {
                date: Calendar.moment.add(1, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(1, 'day').format('DD/MM/YYYY') + ' 12:00',
              },
              color: {
                background: '#1266F1',
                foreground: 'white',
              },
            },
            {
              summary: 'Call',
              start: {
                date: Calendar.moment.add(2, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
              },
              end: {
                date: Calendar.moment.add(2, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
              },
              color: {
                background: '#FFA900',
              },
            }
          ];

          const calendarElement = document.getElementById('calendar-5');
          const calendarInstance = Calendar.getInstance(calendarElement);
          calendarInstance.addEvents(events);

Default date

A starting day can be easily set using the data-mdb-default-date attribute.

HTML
JavaScript


          <div class="calendar" id="calendar-6" data-mdb-default-date="01-12-2019"></div>


          const events = [
            {
              summary: 'JS Conference',
              start: {
                date: Calendar.moment.format('DD/MM/YYYY'),
              },
              end: {
                date: Calendar.moment.format('DD/MM/YYYY'),
              },
              color: {
                background: '#1266F1',
                foreground: 'white',
              },
            },
            {
              summary: 'Vue Meetup',
              start: {
                date: Calendar.moment.add(1, 'day').format('DD/MM/YYYY'),
              },
              end: {
                date: Calendar.moment.add(5, 'day').format('DD/MM/YYYY'),
              },
              color: {
                background: '#00B74A',
                foreground: 'white',
              },
            },
            {
              summary: 'Angular Meetup',
              description:
                'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
              start: {
                date: Calendar.moment.subtract(3, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00',
              },
              end: {
                date: Calendar.moment.add(3, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(3, 'day').format('DD/MM/YYYY') + ' 14:00',
              },
              color: {
                background: '#F93154',
                foreground: 'white',
              },
            },
            {
              summary: 'React Meetup',
              start: {
                date: Calendar.moment.add(5, 'day').format('DD/MM/YYYY'),
              },
              end: {
                date: Calendar.moment.add(8, 'day').format('DD/MM/YYYY'),
              },
              color: {
                background: '#39C0ED',
                foreground: 'white',
              },
            },
            {
              summary: 'Meeting',
              start: {
                date: Calendar.moment.add(1, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(1, 'day').format('DD/MM/YYYY') + ' 8:00',
              },
              end: {
                date: Calendar.moment.add(1, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(1, 'day').format('DD/MM/YYYY') + ' 12:00',
              },
              color: {
                background: '#1266F1',
                foreground: 'white',
              },
            },
            {
              summary: 'Call',
              start: {
                date: Calendar.moment.add(2, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
              },
              end: {
                date: Calendar.moment.add(2, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
              },
              color: {
                background: '#FFA900',
              },
            }
          ];

          const calendarElement = document.getElementById('calendar-6');
          const calendarInstance = Calendar.getInstance(calendarElement);
          calendarInstance.addEvents(events);

Readonly

The editable mode can be easily disabled using the data-mdb-readonly attribute.

HTML
JavaScript


          <div class="calendar" id="calendar-7" data-mdb-readonly="true"></div>


          const events = [
            {
              summary: 'JS Conference',
              start: {
                date: Calendar.moment.format('DD/MM/YYYY'),
              },
              end: {
                date: Calendar.moment.format('DD/MM/YYYY'),
              },
              color: {
                background: '#1266F1',
                foreground: 'white',
              },
            },
            {
              summary: 'Vue Meetup',
              start: {
                date: Calendar.moment.add(1, 'day').format('DD/MM/YYYY'),
              },
              end: {
                date: Calendar.moment.add(5, 'day').format('DD/MM/YYYY'),
              },
              color: {
                background: '#00B74A',
                foreground: 'white',
              },
            },
            {
              summary: 'Angular Meetup',
              description:
                'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
              start: {
                date: Calendar.moment.subtract(3, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00',
              },
              end: {
                date: Calendar.moment.add(3, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(3, 'day').format('DD/MM/YYYY') + ' 14:00',
              },
              color: {
                background: '#F93154',
                foreground: 'white',
              },
            },
            {
              summary: 'React Meetup',
              start: {
                date: Calendar.moment.add(5, 'day').format('DD/MM/YYYY'),
              },
              end: {
                date: Calendar.moment.add(8, 'day').format('DD/MM/YYYY'),
              },
              color: {
                background: '#39C0ED',
                foreground: 'white',
              },
            },
            {
              summary: 'Meeting',
              start: {
                date: Calendar.moment.add(1, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(1, 'day').format('DD/MM/YYYY') + ' 8:00',
              },
              end: {
                date: Calendar.moment.add(1, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(1, 'day').format('DD/MM/YYYY') + ' 12:00',
              },
              color: {
                background: '#1266F1',
                foreground: 'white',
              },
            },
            {
              summary: 'Call',
              start: {
                date: Calendar.moment.add(2, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
              },
              end: {
                date: Calendar.moment.add(2, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.moment.add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
              },
              color: {
                background: '#FFA900',
              },
            }
          ];

          const calendarElement = document.getElementById('calendar-7');
          const calendarInstance = Calendar.getInstance(calendarElement);
          calendarInstance.addEvents(events);

Calendar - API

Usage

Via data attributes

HTML


        <div class="calendar" data-mdb-monday-first="true"></div>

Via JavaScript

JavaScript


        const calendarElement = document.getElementById('calendar');
        const instance = new Calendar(calendarElement, {
          mondayFirst: true
        });
        instance.next();

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

jQuery


        $('#calendar').calendar('next');

Options

Options can be passed via data attributes, JavaScript, or jQuery. For data attributes append the option name to data-mdb-, as in data-mdb-monday-first="true".

Name	Type	Default	Description
`weekdays`	Array / String	`['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`	Defines weekdays displayed names.
`months`	Array / String	`['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']`	Defines months displayed names.
`monthsShort`	Array / String	`['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	`moment().format('DD/MM/YYYY')`	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.

Methods

Name	Parameters	Description	Example
`init`		Initializes the calendar.	`instance.init()`
`prev`		Changes the period of time to previous.	`instance.prev()`
`next`		Changes the period of time to next.	`instance.next()`
`today`		Changes the period of time to today.	`instance.today()`
`changeView`	view	Changes the view.	`instance.changeView('week')`
`refresh`		Refreshes the calendar.	`instance.refresh()`
`addEvents`	events	Adds new events to the calendar.	`instance.addEvents([...])`
`removeEvents`		Removes all events from the calendar.	`instance.removeEvents()`
`dispose`		Disposes a calendar instance.	`instance.dispose()`
`moment`		Static method which returns a current moment.	`Calendar.moment`
`getInstance`		Static method which allows you to get the calendar instance associated with a DOM element.	`calendar.getInstance(calendarElement)`

JavaScript


        const calendarElement = document.getElementById('calendar');
        const instance = Calendar.getInstance(calendarElement);
        instance.next();

Events

Name	Description
`prev.calendar`	Emitted when the prev method triggers.
`next.calendar`	Emitted when the next method triggers.
`today.calendar`	Emitted when the today method triggers.
`viewChange.calendar`	Emitted when the changeView method triggers.
`update.calendar`	Emitted when the refresh method triggers.
`addEvent.calendar`	Emitted when a new event is added. Returns a new event object.
`editEvent.calendar`	Emitted when any event is editted. Returns an editted event object.
`deleteEvent.calendar`	Emitted when any event is deleted. Returns a deleted event object.

JavaScript


          window.addEventListener('next.calendar', () => alert('Time period changed'));

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

JavaScript


        import Calendar from 'mdb-calendar';