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

Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.

Basic example

Several predefined events provide a visual representation of how the plugin appears."

April 2025
Month
SunMonTueWedThuFriSat
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Angular Meetup
16
 
17
 
18
 
JS Conference
19
 
Vue Meetup
Meeting
20
Angular Meetup
Vue Meetup
Call
21
 
 
22
 
 
23
 
 
React Meetup
24
 
 
 
25
 
 
 
26
 
 
 
27
28
29
30
1
2
3
4
5
6
7
8
9
10
Edit in sandbox 
<div class="calendar" data-mdb-calendar-init id="calendar"></div>
const events = [
  {
    summary: 'JS Conference',
    start: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Vue Meetup',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.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: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00',
    },
    end: {
      date: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#c7f5d9',
      foreground: '#0b4121',
    },
  },
  {
    summary: 'React Meetup',
    start: {
      date: Calendar.dayjs().add(5, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().add(8, 'day').format('DD/MM/YYYY'),
    },
    color: {
      background: '#fdd8de',
      foreground: '#790619',
    },
  },
  {
    summary: 'Meeting',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 8:00',
    },
    end: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 12:00',
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Call',
    start: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
    },
    end: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#292929',
      foreground: '#f5f5f5',
    },
  }
  ];

  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 dayjs static getter which returns the current date object. We recommend reading the dayjs library documentation before using this method.

Edit in sandbox 
{
  summary: 'Call',
  description: 'Agree the terms of contracts',
  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',
  description: 'Agree the terms of contracts',
  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',
  description: 'Agree the terms of contracts',
  start: {
    date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
    dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
  },
  end: {
    date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
    dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
  },
  color: {
    background: '#292929',
    foreground: '#f5f5f5',
  },
}

Monday first

Set the data-mdb-monday-first attribute to true to designate Monday as the first day of the week

April 2025
Month
MonTueWedThuFriSatSun
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Angular Meetup
16
 
17
 
18
 
JS Conference
19
 
Vue Meetup
Meeting
20
 
 
Call
21
Angular Meetup
Vue Meetup
22
 
 
23
 
 
React Meetup
24
 
 
 
25
 
 
 
26
 
 
 
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
Edit in sandbox 
<div class="calendar" id="calendar-2" data-mdb-calendar-init data-mdb-monday-first="true"></div>
const events = [
  {
    summary: 'JS Conference',
    start: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Vue Meetup',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.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: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00',
    },
    end: {
      date: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#c7f5d9',
      foreground: '#0b4121',
    },
  },
  {
    summary: 'React Meetup',
    start: {
      date: Calendar.dayjs().add(5, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().add(8, 'day').format('DD/MM/YYYY'),
    },
    color: {
      background: '#fdd8de',
      foreground: '#790619',
    },
  },
  {
    summary: 'Meeting',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 8:00',
    },
    end: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 12:00',
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Call',
    start: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
    },
    end: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#292929',
      foreground: '#f5f5f5',
    },
  }
];

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.

April 2025
Week
Sun
13
Mon
14
Tue
15
Wed
16
Thu
17
Fri
18
Sat
19
Angular Meetup
 
 
 
JS Conference
 
Vue Meetup
Meeting
1:00
2:00
3:00
4:00
5:00
6:00
7:00
8:00
Meeting
9:00
Meeting
10:00
Meeting
11:00
Meeting
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
Edit in sandbox 
<div class="calendar" id="calendar-3" data-mdb-calendar-init data-mdb-default-view="week"></div>
const events = [
  {
    summary: 'JS Conference',
    start: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Vue Meetup',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.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: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00',
    },
    end: {
      date: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#c7f5d9',
      foreground: '#0b4121',
    },
  },
  {
    summary: 'React Meetup',
    start: {
      date: Calendar.dayjs().add(5, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().add(8, 'day').format('DD/MM/YYYY'),
    },
    color: {
      background: '#fdd8de',
      foreground: '#790619',
    },
  },
  {
    summary: 'Meeting',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 8:00',
    },
    end: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 12:00',
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Call',
    start: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
    },
    end: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#292929',
      foreground: '#f5f5f5',
    },
  }
];

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.

April 2025
Week
Sun
13
Mon
14
Tue
15
Wed
16
Thu
17
Fri
18
Sat
19
Angular Meetup
 
 
 
JS Conference
 
Vue Meetup
Meeting
1:00 am
2:00 am
3:00 am
4:00 am
5:00 am
6:00 am
7:00 am
8:00 am
Meeting
9:00 am
Meeting
10:00 am
Meeting
11:00 am
Meeting
12:00 pm
1:00 pm
2:00 pm
3:00 pm
4:00 pm
5:00 pm
6:00 pm
7:00 pm
8:00 pm
9:00 pm
10:00 pm
11:00 pm
Edit in sandbox 
<div class="calendar" id="calendar-4" data-mdb-calendar-init data-mdb-default-view="week" data-mdb-twelve-hour="true"></div>
const events = [
  {
    summary: 'JS Conference',
    start: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Vue Meetup',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.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: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00 AM',
    },
    end: {
      date: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY') + ' 02:00 PM',
    },
    color: {
      background: '#c7f5d9',
      foreground: '#0b4121',
    },
  },
  {
    summary: 'React Meetup',
    start: {
      date: Calendar.dayjs().add(5, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().add(8, 'day').format('DD/MM/YYYY'),
    },
    color: {
      background: '#fdd8de',
      foreground: '#790619',
    },
  },
  {
    summary: 'Meeting',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 8:00 AM',
    },
    end: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 12:00 PM',
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Call',
    start: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 11:00 AM',
    },
    end: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 02:00 PM',
    },
    color: {
      background: '#292929',
      foreground: '#f5f5f5',
    },
  }
];

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

Customize captions

You can effortlessly customize all captions using data attributes. Available options are listed in the API tab.

Kwiecień 2025
Miesiąc
NdPonWtŚrCzwPtSb
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Angular Meetup
16
 
17
 
18
 
JS Conference
19
 
Vue Meetup
Meeting
20
Angular Meetup
Vue Meetup
Call
21
 
 
22
 
 
23
 
 
React Meetup
24
 
 
 
25
 
 
 
26
 
 
 
27
28
29
30
1
2
3
4
5
6
7
8
9
10
Edit in sandbox 
<div
  class="calendar"
  data-mdb-calendar-init
  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-save-caption="Zapisz"
  data-mdb-delete-caption="Usuń"
  data-mdb-close-caption="Zamknij"
  data-mdb-add-event-caption="Dodaj wydarzenie"
></div>
const events = [
  {
    summary: 'JS Conference',
    start: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Vue Meetup',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.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: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00',
    },
    end: {
      date: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#c7f5d9',
      foreground: '#0b4121',
    },
  },
  {
    summary: 'React Meetup',
    start: {
      date: Calendar.dayjs().add(5, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().add(8, 'day').format('DD/MM/YYYY'),
    },
    color: {
      background: '#fdd8de',
      foreground: '#790619',
    },
  },
  {
    summary: 'Meeting',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 8:00',
    },
    end: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 12:00',
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Call',
    start: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
    },
    end: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#292929',
      foreground: '#f5f5f5',
    },
  }
];

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

Customize pickers

You can customize datepicker and timepicker displayed in the calendar changing options availible in the API tab of respected pickers.

April 2025
Month
SunMonTueWedThuFriSat
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Angular Meetup
16
 
17
 
18
 
JS Conference
19
 
Vue Meetup
Meeting
20
Angular Meetup
Vue Meetup
Call
21
 
 
22
 
 
23
 
 
React Meetup
24
 
 
 
25
 
 
 
26
 
 
 
27
28
29
30
1
2
3
4
5
6
7
8
9
10
Edit in sandbox 
<div id="calendar-with-custom-pickers"></div>
const events = [
  {
    summary: 'JS Conference',
    start: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Vue Meetup',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.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 nullpariatur',
    start: {
    date: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00',
},
  end: {
    date: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY') + ' 14:00',
  },
    color: {
      background: '#c7f5d9',
        foreground: '#0b4121',
    },
},
  {
    summary: 'React Meetup',
      start: {
        date: Calendar.dayjs().add(5, 'day').format('DD/MM/YYYY'),
      },
        end: {
          date: Calendar.dayjs().add(8, 'day').format('DD/MM/YYYY'),
        },
          color: {
            background: '#fdd8de',
              foreground: '#790619',
          },
  },
    {
      summary: 'Meeting',
        start: {
          date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
            dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 8:00',
        },
          end: {
            date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
              dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 12:00',
          },
            color: {
              background: '#cfe0fc',
                foreground: '#0a47a9',
            },
    },
      {
        summary: 'Call',
          start: {
            date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
              dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
          },
            end: {
              date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
                dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
            },
              color: {
                background: '#292929',
                  foreground: '#f5f5f5',
              },
      }
];


  const calendarElement = document.getElementById('calendar-with-custom-pickers');
  calendarElement.classList.add('calendar');
  const calendarInstance = new Calendar(calendarElement, {
    events: events,
    timepickerOptions: {
      clearLabel: "Example Clear",
    },
    datepickerOptions: {
      okBtnText: "Example Ok",
    }
  });

Default date

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

December 2024
Month
SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
Edit in sandbox 
<div class="calendar" id="calendar-6" data-mdb-calendar-init data-mdb-default-date="01-12-2024"></div>
const events = [
  {
    summary: 'JS Conference',
    start: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Vue Meetup',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.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: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00',
    },
    end: {
      date: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#c7f5d9',
      foreground: '#0b4121',
    },
  },
  {
    summary: 'React Meetup',
    start: {
      date: Calendar.dayjs().add(5, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().add(8, 'day').format('DD/MM/YYYY'),
    },
    color: {
      background: '#fdd8de',
      foreground: '#790619',
    },
  },
  {
    summary: 'Meeting',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 8:00',
    },
    end: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 12:00',
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Call',
    start: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
    },
    end: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#292929',
      foreground: '#f5f5f5',
    },
  }
];

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.

April 2025
Month
SunMonTueWedThuFriSat
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Angular Meetup
16
 
17
 
18
 
JS Conference
19
 
Vue Meetup
Meeting
20
Angular Meetup
Vue Meetup
Call
21
 
 
22
 
 
23
 
 
React Meetup
24
 
 
 
25
 
 
 
26
 
 
 
27
28
29
30
1
2
3
4
5
6
7
8
9
10
Edit in sandbox 
<div class="calendar" id="calendar-7" data-mdb-calendar-init data-mdb-readonly="true"></div>
const events = [
  {
    summary: 'JS Conference',
    start: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Vue Meetup',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.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: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00',
    },
    end: {
      date: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#c7f5d9',
      foreground: '#0b4121',
    },
  },
  {
    summary: 'React Meetup',
    start: {
      date: Calendar.dayjs().add(5, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().add(8, 'day').format('DD/MM/YYYY'),
    },
    color: {
      background: '#fdd8de',
      foreground: '#790619',
    },
  },
  {
    summary: 'Meeting',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 8:00',
    },
    end: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 12:00',
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Call',
    start: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
    },
    end: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#292929',
      foreground: '#f5f5f5',
    },
  }
];

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

Readonly events

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

April 2025
Month
SunMonTueWedThuFriSat
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Readonly event
16
 
17
 
18
 
Readonly event
19
 
Vue Meetup
Meeting
20
Readonly event
Vue Meetup
Readonly event
21
 
 
22
 
 
23
 
 
React Meetup
24
 
 
 
25
 
 
 
26
 
 
 
27
28
29
30
1
2
3
4
5
6
7
8
9
10
Edit in sandbox 
<div class="calendar" data-mdb-calendar-init id="calendar-8"></div>
const events = [
  {
    summary: 'Readonly event',
    start: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
    readonly: true
  },
  {
    summary: 'Vue Meetup',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.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: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00',
    },
    end: {
      date: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#c7f5d9',
      foreground: '#0b4121',
    },
    readonly: true
  },
  {
    summary: 'React Meetup',
    start: {
      date: Calendar.dayjs().add(5, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().add(8, 'day').format('DD/MM/YYYY'),
    },
    color: {
      background: '#fdd8de',
      foreground: '#790619',
    },
  },
  {
    summary: 'Meeting',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 8:00',
    },
    end: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 12:00',
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Readonly event',
    start: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
    },
    end: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#292929',
      foreground: '#f5f5f5',
    },
    readonly: true
  }
];

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

Disabled modules

Some of the modules can be disabled via data attributes or JavaScript. Here's an example without tooltips and some toolbar action elements.

April 2025
SunMonTueWedThuFriSat
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Angular Meetup
16
 
17
 
18
 
JS Conference
19
 
Vue Meetup
Meeting
20
Angular Meetup
Vue Meetup
Call
21
 
 
22
 
 
23
 
 
React Meetup
24
 
 
 
25
 
 
 
26
 
 
 
27
28
29
30
1
2
3
4
5
6
7
8
9
10
Edit in sandbox 
<div class="calendar" id="calendar-9" data-mdb-calendar-init data-mdb-tooltips="false" data-mdb-navigation="false" data-mdb-view-select="false" data-mdb-add-event-button="false"></div>
const events = [
  {
    summary: 'JS Conference',
    start: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Vue Meetup',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.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: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00',
    },
    end: {
      date: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#c7f5d9',
      foreground: '#0b4121',
    },
  },
  {
    summary: 'React Meetup',
    start: {
      date: Calendar.dayjs().add(5, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().add(8, 'day').format('DD/MM/YYYY'),
    },
    color: {
      background: '#fdd8de',
      foreground: '#790619',
    },
  },
  {
    summary: 'Meeting',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 8:00',
    },
    end: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 12:00',
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Call',
    start: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
    },
    end: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#292929',
      foreground: '#f5f5f5',
    },
  }
];

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

Blur

Past events can be blurred with the data-mdb-blur attribute.

April 2025
Month
SunMonTueWedThuFriSat
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Angular Meetup
16
 
17
 
18
 
JS Conference
19
 
Vue Meetup
Meeting
20
Angular Meetup
Vue Meetup
Call
21
 
 
22
 
 
23
 
 
React Meetup
24
 
 
 
25
 
 
 
26
 
 
 
27
28
29
30
1
2
3
4
5
6
7
8
9
10
Edit in sandbox 
<div class="calendar" data-mdb-calendar-init id="calendar-10" data-mdb-blur="true"></div>
const events = [
  {
    summary: 'JS Conference',
    start: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Vue Meetup',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.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: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00',
    },
    end: {
      date: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#c7f5d9',
      foreground: '#0b4121',
    },
  },
  {
    summary: 'React Meetup',
    start: {
      date: Calendar.dayjs().add(5, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().add(8, 'day').format('DD/MM/YYYY'),
    },
    color: {
      background: '#fdd8de',
      foreground: '#790619',
    },
  },
  {
    summary: 'Meeting',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 8:00',
    },
    end: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 12:00',
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Call',
    start: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
    },
    end: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#292929',
      foreground: '#f5f5f5',
    },
  }
];

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

Custom attributes

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

April 2025
Month
SunMonTueWedThuFriSat
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Angular Meetup
16
 
17
 
18
 
JS Conference
19
 
Vue Meetup
Meeting
20
Angular Meetup
Vue Meetup
Call
21
 
 
22
 
 
23
 
 
React Meetup
24
 
 
 
25
 
 
 
26
 
 
 
27
28
29
30
1
2
3
4
5
6
7
8
9
10
Edit in sandbox 
<div id="calendar-11"></div>
const events = [
  {
    summary: 'JS Conference',
    start: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
    id: 1
  },
  {
    summary: 'Vue Meetup',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.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: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00',
    },
    end: {
      date: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#c7f5d9',
      foreground: '#0b4121',
    },
    id: 3
  },
  {
    summary: 'React Meetup',
    start: {
      date: Calendar.dayjs().add(5, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().add(8, 'day').format('DD/MM/YYYY'),
    },
    color: {
      background: '#fdd8de',
      foreground: '#790619',
    },
    id: 4
  },
  {
    summary: 'Meeting',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 8:00',
    },
    end: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 12:00',
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
    id: 5
  },
  {
    summary: 'Call',
    start: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
    },
    end: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#292929',
      foreground: '#f5f5f5',
    },
    id: 6
  }
];

const calendarElement = document.getElementById('calendar-11');
calendarElement.classList.add('calendar');
let newEventId = events.length;

const calendarInstance = new Calendar(calendarElement, {
  newEventAttributes: (event) => {
    newEventId++;

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

calendarInstance.addEvents(events);

calendarElement.addEventListener('addEvent.mdb.calendar', (e) => {
  console.log(e.event);
  console.log(calendarInstance.events);
});

Custom modal

This example demonstrates a calendar with a custom modal that allows users to add, edit, and remove events, including fields not available in the default modal. For simplicity, the example uses only dates without specifying hours.

April 2025
Month
SunMonTueWedThuFriSat
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
SUNDAY EVENT
14
15
Angular Meetup
16
 
17
 
18
 
JS Conference
19
 
Vue Meetup
Meeting
20
Angular Meetup
Vue Meetup
Call
21
 
 
22
 
 
23
 
 
React Meetup
24
 
 
 
25
 
 
 
26
 
 
 
27
28
29
30
1
2
3
4
5
6
7
8
9
10
Edit in sandbox 
<div id="calendar-with-custom-modal" data-mdb-calendar-init></div>

<div class="modal fade" id="addEventModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <form>
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button
            type="button"
            class="btn-close"
            data-mdb-ripple-init
            data-mdb-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <div class="form-outline mb-2" data-mdb-input-init>
            <input type="text" id="summary" name="summary" class="form-control" />
            <label class="form-label" for="summary">Summary</label>
          </div>
          <div class="form-outline mb-2" data-mdb-input-init>
            <textarea
              type="text"
              id="description"
              name="description"
              class="form-control"
            ></textarea>
            <label class="form-label" for="description">Description</label>
          </div>

          <div class="mb-2">
            <select data-mdb-select-init id="location" name="location">
              <option value="1">Location 1</option>
              <option value="2">Location 2</option>
              <option value="3">Location 3</option>
              <option value="4">Online</option>
            </select>
          </div>

          <div
            class="form-outline mb-2"
            data-mdb-datepicker-init
            data-mdb-input-init
          >
            <input
              type="text"
              class="form-control"
              id="startDate"
              name="startDate"
            />
            <label for="startDate" class="form-label">Select a date</label>
          </div>

          <div
            class="form-outline mb-2"
            data-mdb-datepicker-init
            data-mdb-input-init
          >
            <input type="text" class="form-control" id="endDate" name="endDate" />
            <label for="endDate" class="form-label">Select a date</label>
          </div>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-danger"
            data-mdb-ripple-init
            data-mdb-dismiss="modal"
            id="remove-btn"
          >
            Remove
          </button>
          <button
            type="button"
            class="btn btn-secondary"
            data-mdb-ripple-init
            data-mdb-dismiss="modal"
            id="close-btn"
          >
            Close
          </button>
          <button
            type="button"
            class="btn btn-primary"
            type="submit"
            data-mdb-ripple-init
            id="save-btn"
          >
            Save changes
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
const eventsWitLocation = [
  {
    summary: 'JS Conference',
    location: '4',
    start: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().format('DD/MM/YYYY'),
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'SUNDAY EVENT',
    start: {
      date: Calendar.dayjs().day(0).format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().day(0).format('DD/MM/YYYY'),
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Vue Meetup',
    location: '1',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().add(5, 'day').format('DD/MM/YYYY'),
    },
    color: {
      background: '#ebcdfe',
      foreground: '#6e02b1',
    },
  },
  {
    summary: 'Angular Meetup',
    location: '2',
    description:
      'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
    start: {
      date: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().subtract(3, 'day').format('DD/MM/YYYY') + ' 10:00',
    },
    end: {
      date: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(3, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#c7f5d9',
      foreground: '#0b4121',
    },
  },
  {
    summary: 'React Meetup',
    location: '3',
    start: {
      date: Calendar.dayjs().add(5, 'day').format('DD/MM/YYYY'),
    },
    end: {
      date: Calendar.dayjs().add(8, 'day').format('DD/MM/YYYY'),
    },
    color: {
      background: '#fdd8de',
      foreground: '#790619',
    },
  },
  {
    summary: 'Meeting',
    location: '2',
    start: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 8:00',
    },
    end: {
      date: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(1, 'day').format('DD/MM/YYYY') + ' 12:00',
    },
    color: {
      background: '#cfe0fc',
      foreground: '#0a47a9',
    },
  },
  {
    summary: 'Call',
    location: '4',
    start: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 11:00',
    },
    end: {
      date: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY'),
      dateTime: Calendar.dayjs().add(2, 'day').format('DD/MM/YYYY') + ' 14:00',
    },
    color: {
      background: '#292929',
      foreground: '#f5f5f5',
    },
  },
];

let currentEvent = null;

const calendarWithCustomModal = document.getElementById('calendar-with-custom-modal');
calendarWithCustomModal.classList.add('calendar');
const calendarWithCustomModalInstance = Calendar.getInstance(calendarWithCustomModal);
calendarWithCustomModalInstance.addEvents(eventsWitLocation);

const addEventModal = document.getElementById('addEventModal');
const modalInstance = new mdb.Modal(addEventModal);
const form = addEventModal.querySelector('form');

const summary = document.getElementById('summary');
const description = document.getElementById('description');
const locationInstance = mdb.Select.getInstance(document.getElementById('location'));
const start = document.getElementById('startDate');
const end = document.getElementById('endDate');

const saveButton = document.getElementById('save-btn');
const deleteButton = document.getElementById('remove-btn');
const closeButton = document.getElementById('close-btn');

const toggleBtnVisibility = (showClose = true, showDelete = false) => {
  closeButton.classList.toggle('d-none', !showClose);
  deleteButton.classList.toggle('d-none', !showDelete);
};

const updateModalInputFields = () => {
  const inputFields = addEventModal.querySelectorAll('.form-outline');
  inputFields.forEach((formOutline) => {
    mdb.Input.getInstance(formOutline).forceInactive();
  });
};

const setEmptyEvent = () => {
  form.reset();
  locationInstance.setValue('4');
};

const formattedDate = (date) => date.format('DD/MM/YYYY');

const setExistingEvent = (event) => {
  summary.value = event.summary;
  description.value = event.description ? event.description : '';
  locationInstance.setValue(event.location);
  start.value = formattedDate(event.start.date);
  end.value = formattedDate(event.end.date);
};

calendarWithCustomModal.addEventListener('addEvent.mdb.calendar', (e) => {
  e.preventDefault();

  toggleBtnVisibility(true, false);
  setEmptyEvent();
  modalInstance.show();
  updateModalInputFields();

  currentEvent = null;
});

calendarWithCustomModal.addEventListener('editEvent.mdb.calendar', (e) => {
  e.preventDefault();

  currentEvent = e.event;

  setExistingEvent(e.event);
  toggleBtnVisibility(false, true);
  modalInstance.show();
});

saveButton.addEventListener('click', () => {
  const event = {
    summary: summary.value,
    description: description.value,
    location: locationInstance.value,
    start: {
      date: start.value,
      dateTime: start.value + ` 00:00`,
    },
    end: {
      date: end.value,
      dateTime: end.value + ` 00:00`,
    },
  };

  if (event.summary && event.start.date && event.end.date) {
    if (currentEvent) {
      calendarWithCustomModalInstance.editEvent({ ...currentEvent, ...event });
    } else {
      calendarWithCustomModalInstance.addEvents([event]);
    }

    modalInstance.hide();
  }
});

deleteButton.addEventListener('click', () => {
  if (currentEvent) {
    calendarWithCustomModalInstance.removeEvent(currentEvent);
  }
  modalInstance.hide();
});

Calendar - API

Import

Edit in sandbox 
import Calendar from 'mdb-calendar';
@import '~mdb-calendar/css/calendar.min.css';

Usage

Via data attributes

Using the Calendar plugin doesn't require any additional JavaScript code - simply add data-mdb-calendar-init attribute to .calendar and use other data attributes to set all options.

Edit in sandbox 
<div class="calendar" data-mdb-calendar-init></div>

Via JavaScript

Edit in sandbox 
const element = document.querySelector('.calendar');
const instance = new Calendar(calendarElement);

Via jQuery

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

Edit in sandbox 
$(document).ready(() => {
  $('#calendar').calendar('next');
});

Options

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

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 ['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 option.
weekCaption String 'Week' Defines caption for week option.
listCaption String 'List' Defines caption for list option.
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.
addEventCaption String 'Add event' Defines caption for button that trigger the add event modal.
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.
tooltips Boolean true Enables tooltips.
navigation Boolean true Enables navigation.
viewSelect Boolean true Enables viewSelect.
addEventButton Boolean true Enables addEventButton.
blur Boolean false Enables past events blur style.
newEventAttributes Function (event) => event Modifies new events attributes.
datepickerOptions Object {} Allow setting custom options for datepicker displayed in the calendar.
timepickerOptions Object {} Allow setting custom options for timepicker displayed in the calendar.
dateFormat String 'DD/MM/YYY' Allow setting custom date format in the calendar.

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([...])
editEvents event Updates the details of a specified event. instance.editEvents({...})
removeEvent event Removes the specified event from the calendar. instance.removeEvent({...})
removeEvents Removes all events from the calendar. instance.removeEvents()
dispose Disposes a calendar instance. instance.dispose()
dayjs Static method which returns a dayjs function. Calendar.dayjs()
getInstance Static method which allows you to get the calendar instance associated with a DOM element. Calendar.getInstance(calendarElement)
Edit in sandbox 
const calendarElement = document.getElementById('calendar');
const instance = Calendar.getInstance(calendarElement);
instance.next();

Events

Name Description
prev.mdb.calendar Emitted when the prev method triggers.
next.mdb.calendar Emitted when the next method triggers.
today.mdb.calendar Emitted when the today method triggers.
viewChange.mdb.calendar Emitted when the changeView method triggers.
update.mdb.calendar Emitted when the refresh method triggers.
addEvent.mdb.calendar Emitted before the "Add Event" event modal appears. Returns the selected date. Use e.preventDefault() to prevent the default modal from displaying.
addedEvent.mdb.calendar Emitted after new events are added. Returns array of newly event objects.
editEvent.mdb.calendar Emitted before the "Edit Event" modal appears. Returns the event object. Use e.preventDefault() to prevent the default modal from displaying.
editedEvent.mdb.calendar Emitted after an event is edited. Returns the updated event object.
deleteEvent.mdb.calendar Emitted before an event is deleted. Returns the event object that is about to be removed. Use e.preventDefault() to prevent deletion.
deletedEvent.mdb.calendar Emitted after an event is deleted.
Edit in sandbox 
window.addEventListener('next.mdb.calendar', () => {
  alert('Time period changed'));
}