Calendar

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

March 2025
Month
SunMonTueWedThuFriSat
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Angular Meetup
21
 
22
 
23
Angular Meetup
JS Conference
24
 
Vue Meetup
Meeting
25
 
 
Call
26
 
 
27
 
 
28
 
 
React Meetup
29
 
 
 
30
 
 
React Meetup
31
 
 
 
1
2
3
4
5
import React from 'react';
import { MDBCalendar } from 'mdb-react-calendar';

export default function App() {
  const today = new Date();

  const getStringDate = (date: Date) => date.toLocaleDateString('en-GB').replaceAll('.', '/');

  const addDays = (date: Date, days: number) => {
    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
  };

  const myEvents = [
    {
      summary: 'JS Conference',
      description: '',
      start: {
        date: getStringDate(today),
      },
      end: {
        date: getStringDate(today),
      },
      color: {
        background: 'rgb(207, 224, 252)',
        foreground: 'rgb(10, 71, 169)',
      },
    },
    {
      summary: 'Vue Meetup',
      description: '',
      start: {
        date: getStringDate(addDays(today, 1)),
      },
      end: {
        date: getStringDate(addDays(today, 5)),
      },
      color: {
        background: 'rgb(235, 205, 254)',
        foreground: 'rgb(110, 2, 177)',
      },
    },
    {
      summary: 'Angular Meetup',
      description:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
      start: {
        date: getStringDate(addDays(today, -3)),
        time: '10:00',
      },
      end: {
        date: getStringDate(addDays(today, 3)),
        time: '14:00',
      },
      color: {
        background: 'rgb(199, 245, 217)',
        foreground: 'rgb(11, 65, 33)',
      },
    },
    {
      summary: 'React Meetup',
      description: '',
      start: {
        date: getStringDate(addDays(today, 5)),
      },
      end: {
        date: getStringDate(addDays(today, 8)),
      },
      color: {
        background: 'rgb(253, 216, 222)',
        foreground: 'rgb(121, 6, 25)',
      },
    },
    {
      summary: 'Meeting',
      description: '',
      start: {
        date: getStringDate(addDays(today, 1)),
        time: '8:00',
      },
      end: {
        date: getStringDate(addDays(today, 1)),
        time: '12:00',
      },
      color: {
        background: 'rgb(207, 224, 252)',
        foreground: 'black',
      },
    },
    {
      summary: 'Call',
      description: '',
      start: {
        date: getStringDate(addDays(today, 2)),
        time: '11:00',
      },
      end: {
        date: getStringDate(addDays(today, 2)),
        time: '14:00',
      },
      color: {
        background: 'black',
        foreground: 'black',
      },
    },
  ];

  return (
    <MDBCalendar defaultEvents={myEvents} />
  );
}

Event formats

Calendar events can be added with time in two different formats - 12h or 24h. 

{
  summary: 'Call',
  start: {
    date: '08/09/2020',
    time: '10:00',
  },
  end: {
    date: '08/09/2020',
    time: '14:00',
  },
  color: {
    background: '#292929',
    foreground: '#f5f5f5',
  },
}
{
  summary: 'Call',
  start: {
    date: '08/09/2020',
    time: '10:00 AM',
  },
  end: {
    date: '08/09/2020',
    time: '02:00 PM',
  },
  color: {
    background: '#292929',
    foreground: '#f5f5f5',
  },
}

Monday first

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

March 2025
Month
MonTueWedThuFriSatSun
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Angular Meetup
21
 
22
 
23
 
JS Conference
24
Angular Meetup
Vue Meetup
Meeting
25
 
 
Call
26
 
 
27
 
 
28
 
 
React Meetup
29
 
 
 
30
 
 
 
31
 
 
React Meetup
1
2
3
4
5
6
import React from 'react';
import { MDBCalendar } from 'mdb-react-calendar';

export default function App() {
  const today = new Date();

  const getStringDate = (date: Date) => date.toLocaleDateString('en-GB').replaceAll('.', '/');

  const addDays = (date: Date, days: number) => {
    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
  };

  const myEvents = [
    {
      summary: 'JS Conference',
      description: '',
      start: {
        date: getStringDate(today),
      },
      end: {
        date: getStringDate(today),
      },
      color: {
        background: '#1266F1',
        foreground: 'white',
      },
    },
    {
      summary: 'Vue Meetup',
      description: '',
      start: {
        date: getStringDate(addDays(today, 1)),
      },
      end: {
        date: getStringDate(addDays(today, 5)),
      },
      color: {
        background: 'rgb(235, 205, 254)',
        foreground: 'rgb(110, 2, 177)',
      },
    },
    {
      summary: 'Angular Meetup',
      description:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
      start: {
        date: getStringDate(addDays(today, -3)),
        time: '10:00',
      },
      end: {
        date: getStringDate(addDays(today, 3)),
        time: '14:00',
      },
      color: {
        background: '#F93154',
        foreground: 'white',
      },
    },
    {
      summary: 'React Meetup',
      description: '',
      start: {
        date: getStringDate(addDays(today, 5)),
      },
      end: {
        date: getStringDate(addDays(today, 8)),
      },
      color: {
        background: '#39C0ED',
        foreground: 'white',
      },
    },
    {
      summary: 'Meeting',
      description: '',
      start: {
        date: getStringDate(addDays(today, 1)),
        time: '8:00',
      },
      end: {
        date: getStringDate(addDays(today, 1)),
        time: '12:00',
      },
      color: {
        background: '#1266F1',
        foreground: 'white',
      },
    },
    {
      summary: 'Call',
      description: '',
      start: {
        date: getStringDate(addDays(today, 2)),
        time: '11:00',
      },
      end: {
        date: getStringDate(addDays(today, 2)),
        time: '14:00',
      },
      color: {
        background: '#FFA900',
        foreground: 'white',
      },
    },
  ];

  return (
    <MDBCalendar defaultEvents={myEvents} mondayFirst />
  );
}

Default view

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

March 2025
Week
Sun
23
Mon
24
Tue
25
Wed
26
Thu
27
Fri
28
Sat
29
Angular Meetup
JS Conference
 
Vue Meetup
Meeting
 
 
Call
 
 
 
 
 
 
React Meetup
 
 
 
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
Call
12:00
Call
13:00
Call
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
import React from 'react';
import { MDBCalendar } from 'mdb-react-calendar';

export default function App() {
  const today = new Date();

  const getStringDate = (date: Date) => date.toLocaleDateString('en-GB').replaceAll('.', '/');

  const addDays = (date: Date, days: number) => {
    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
  };

  const myEvents = [
    {
      summary: 'JS Conference',
      description: '',
      start: {
        date: getStringDate(today),
      },
      end: {
        date: getStringDate(today),
      },
      color: {
        background: 'rgb(207, 224, 252)',
        foreground: 'rgb(10, 71, 169)',
      },
    },
    {
      summary: 'Vue Meetup',
      description: '',
      start: {
        date: getStringDate(addDays(today, 1)),
      },
      end: {
        date: getStringDate(addDays(today, 5)),
      },
      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: getStringDate(addDays(today, -3)),
        time: '10:00',
      },
      end: {
        date: getStringDate(addDays(today, 3)),
        time: '14:00',
      },
      color: {
        background: '#F93154',
        foreground: 'white',
      },
    },
    {
      summary: 'React Meetup',
      description: '',
      start: {
        date: getStringDate(addDays(today, 5)),
      },
      end: {
        date: getStringDate(addDays(today, 8)),
      },
      color: {
        background: '#39C0ED',
        foreground: 'white',
      },
    },
    {
      summary: 'Meeting',
      description: '',
      start: {
        date: getStringDate(addDays(today, 1)),
        time: '8:00',
      },
      end: {
        date: getStringDate(addDays(today, 1)),
        time: '12:00',
      },
      color: {
        background: 'rgb(207, 224, 252)',
        foreground: 'rgb(10, 71, 169)',
      },
    },
    {
      summary: 'Call',
      description: '',
      start: {
        date: getStringDate(addDays(today, 2)),
        time: '11:00',
      },
      end: {
        date: getStringDate(addDays(today, 2)),
        time: '14:00',
      },
      color: {
        background: '#FFA900',
        foreground: 'white',
      },
    },
  ];

  return (
    <MDBCalendar defaultEvents={myEvents} defaultView='week' />
  );
}

Twelve hour

By setting the twelveHour property to true, you get a 12-hour schedule.

March 2025
Week
Sun
23
Mon
24
Tue
25
Wed
26
Thu
27
Fri
28
Sat
29
1:00 am
2:00 am
3:00 am
4:00 am
5:00 am
6:00 am
7:00 am
8:00 am
9:00 am
10:00 am
11:00 am
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
March 2025
Week
Sun
23
Mon
24
Tue
25
Wed
26
Thu
27
Fri
28
Sat
29
Angular Meetup
JS Conference
 
Vue Meetup
Meeting
 
 
Call
 
 
 
 
 
 
React Meetup
 
 
 
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
Call
12:00 pm
Call
1:00 pm
Call
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
import React from 'react';
import { MDBCalendar } from 'mdb-react-calendar';

export default function App() {
  const today = new Date();

  const getStringDate = (date: Date) => date.toLocaleDateString('en-GB').replaceAll('.', '/');

  const addDays = (date: Date, days: number) => {
    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
  };

  const myEvents12h = [
  {
    summary: 'JS Conference',
    description: '',
    start: {
      date: getStringDate(today),
    },
    end: {
      date: getStringDate(today),
    },
    color: {
      background: '#1266F1',
      foreground: 'white',
    },
  },
  {
    summary: 'Vue Meetup',
    description: '',
    start: {
      date: getStringDate(addDays(today, 1)),
    },
    end: {
      date: getStringDate(addDays(today, 5)),
    },
    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: getStringDate(addDays(today, -3)),
      time: '11:00 AM',
    },
    end: {
      date: getStringDate(addDays(today, 3)),
      time: '02:00 PM',
    },
    color: {
      background: '#F93154',
      foreground: 'white',
    },
  },
  {
    summary: 'React Meetup',
    description: '',
    start: {
      date: getStringDate(addDays(today, 5)),
    },
    end: {
      date: getStringDate(addDays(today, 8)),
    },
    color: {
      background: '#39C0ED',
      foreground: 'white',
    },
  },
  {
    summary: 'Meeting',
    description: '',
    start: {
      date: getStringDate(addDays(today, 1)),
      time: '8:00 AM',
    },
    end: {
      date: getStringDate(addDays(today, 1)),
      time: '12:00 PM',
    },
    color: {
      background: '#1266F1',
      foreground: 'white',
    },
  },
  {
    summary: 'Call',
    description: '',
    start: {
      date: getStringDate(addDays(today, 2)),
      time: '11:00 AM',
    },
    end: {
      date: getStringDate(addDays(today, 2)),
      time: '02:00 PM',
    },
    color: {
      background: '#FFA900',
      foreground: 'white',
    },
  },
];
  return (
    <MDBCalendar defaultEvents={myEvents12h} twelveHour />
  );
}

Customize captions

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

Marzec 2025
Miesiąc
NdPonWtŚrCzwPtSb
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Angular Meetup
21
 
22
 
23
Angular Meetup
JS Conference
24
 
Vue Meetup
Meeting
25
 
 
Call
26
 
 
27
 
 
28
 
 
React Meetup
29
 
 
 
30
 
 
React Meetup
31
 
 
 
1
2
3
4
5
import React from 'react';
import { MDBCalendar } from 'mdb-react-calendar';

export default function App() {
  const today = new Date();

  const getStringDate = (date: Date) => date.toLocaleDateString('en-GB').replaceAll('.', '/');

  const addDays = (date: Date, days: number) => {
    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
  };

  const myEvents = [
    {
      summary: 'JS Conference',
      description: '',
      start: {
        date: getStringDate(today),
      },
      end: {
        date: getStringDate(today),
      },
      color: {
        background: 'rgb(207, 224, 252)',
        foreground: 'rgb(10, 71, 169)',
      },
    },
    {
      summary: 'Vue Meetup',
      description: '',
      start: {
        date: getStringDate(addDays(today, 1)),
      },
      end: {
        date: getStringDate(addDays(today, 5)),
      },
      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: getStringDate(addDays(today, -3)),
        time: '10:00',
      },
      end: {
        date: getStringDate(addDays(today, 3)),
        time: '14:00',
      },
      color: {
        background: '#F93154',
        foreground: 'white',
      },
    },
    {
      summary: 'React Meetup',
      description: '',
      start: {
        date: getStringDate(addDays(today, 5)),
      },
      end: {
        date: getStringDate(addDays(today, 8)),
      },
      color: {
        background: '#39C0ED',
        foreground: 'white',
      },
    },
    {
      summary: 'Meeting',
      description: '',
      start: {
        date: getStringDate(addDays(today, 1)),
        time: '8:00',
      },
      end: {
        date: getStringDate(addDays(today, 1)),
        time: '12:00',
      },
      color: {
        background: 'rgb(207, 224, 252)',
        foreground: 'rgb(10, 71, 169)',
      },
    },
    {
      summary: 'Call',
      description: '',
      start: {
        date: getStringDate(addDays(today, 2)),
        time: '11:00',
      },
      end: {
        date: getStringDate(addDays(today, 2)),
        time: '14:00',
      },
      color: {
        background: '#FFA900',
        foreground: 'white',
      },
    },
  ];

  return (
    <MDBCalendar
      defaultEvents={myEvents}
      weekdays={['Nd', 'Pon', 'Wt', 'Śr', 'Czw', 'Pt', 'Sb']}
      months={[
        'Styczeń',
        'Luty',
        'Marzec',
        'Kwiecień',
        'Maj',
        'Czerwiec',
        'Lipiec',
        'Sierpień',
        'Wrzesień',
        'Październik',
        'Listopad',
        'Grudzień',
      ]}
      monthsShort={['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru']}
      todayCaption='Dzisiaj'
      monthCaption='Miesiąc'
      weekCaption='Tydzień'
      listCaption='Lista'
      allDayCaption='Cały dzień'
      noEventsCaption='Brak wydarzeń'
      summaryCaption='Nazwa wydarzenia'
      descriptionCaption='Szczegółowy opis wydarzenia'
      startCaption='Początek'
      endCaption='Koniec'
      addEventModalCaption='Dodaj wydarzenie'
      editEventModalCaption='Edytuj wydarzenie'
      addCaption='Dodaj'
      editCaption='Edytuj'
      deleteCaption='Usuń'
      closeCaption='Zamknij'
    />
  );
}

Default date

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

December 2019
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
import React from 'react';
import { MDBCalendar } from 'mdb-react-calendar';

export default function App() {
  const today = new Date();

  const getStringDate = (date: Date) => date.toLocaleDateString('en-GB').replaceAll('.', '/');

  const addDays = (date: Date, days: number) => {
    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
  };

  const myEvents = [
    {
      summary: 'JS Conference',
      description: '',
      start: {
        date: getStringDate(today),
      },
      end: {
        date: getStringDate(today),
      },
      color: {
        background: 'rgb(207, 224, 252)',
        foreground: 'rgb(10, 71, 169)',
      },
    },
    {
      summary: 'Vue Meetup',
      description: '',
      start: {
        date: getStringDate(addDays(today, 1)),
      },
      end: {
        date: getStringDate(addDays(today, 5)),
      },
      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: getStringDate(addDays(today, -3)),
        time: '10:00',
      },
      end: {
        date: getStringDate(addDays(today, 3)),
        time: '14:00',
      },
      color: {
        background: '#F93154',
        foreground: 'white',
      },
    },
    {
      summary: 'React Meetup',
      description: '',
      start: {
        date: getStringDate(addDays(today, 5)),
      },
      end: {
        date: getStringDate(addDays(today, 8)),
      },
      color: {
        background: '#39C0ED',
        foreground: 'white',
      },
    },
    {
      summary: 'Meeting',
      description: '',
      start: {
        date: getStringDate(addDays(today, 1)),
        time: '8:00',
      },
      end: {
        date: getStringDate(addDays(today, 1)),
        time: '12:00',
      },
      color: {
        background: 'rgb(207, 224, 252)',
        foreground: 'rgb(10, 71, 169)',
      },
    },
    {
      summary: 'Call',
      description: '',
      start: {
        date: getStringDate(addDays(today, 2)),
        time: '11:00',
      },
      end: {
        date: getStringDate(addDays(today, 2)),
        time: '14:00',
      },
      color: {
        background: '#FFA900',
        foreground: 'white',
      },
    },
  ];

  return (
    <MDBCalendar defaultEvents={myEvents} defaultDate={new Date(2019, 11, 1)} />
  );
}

Readonly

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

March 2025
Month
SunMonTueWedThuFriSat
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Angular Meetup
21
 
22
 
23
Angular Meetup
JS Conference
24
 
Vue Meetup
Meeting
25
 
 
Call
26
 
 
27
 
 
28
 
 
React Meetup
29
 
 
 
30
 
 
React Meetup
31
 
 
 
1
2
3
4
5
import React from 'react';
import { MDBCalendar } from 'mdb-react-calendar';

export default function App() {
  const today = new Date();

  const getStringDate = (date: Date) => date.toLocaleDateString('en-GB').replaceAll('.', '/');

  const addDays = (date: Date, days: number) => {
    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
  };

  const myEvents = [
    {
      summary: 'JS Conference',
      description: '',
      start: {
        date: getStringDate(today),
      },
      end: {
        date: getStringDate(today),
      },
      color: {
        background: 'rgb(207, 224, 252)',
        foreground: 'rgb(10, 71, 169)',
      },
    },
    {
      summary: 'Vue Meetup',
      description: '',
      start: {
        date: getStringDate(addDays(today, 1)),
      },
      end: {
        date: getStringDate(addDays(today, 5)),
      },
      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: getStringDate(addDays(today, -3)),
        time: '10:00',
      },
      end: {
        date: getStringDate(addDays(today, 3)),
        time: '14:00',
      },
      color: {
        background: '#F93154',
        foreground: 'white',
      },
    },
    {
      summary: 'React Meetup',
      description: '',
      start: {
        date: getStringDate(addDays(today, 5)),
      },
      end: {
        date: getStringDate(addDays(today, 8)),
      },
      color: {
        background: '#39C0ED',
        foreground: 'white',
      },
    },
    {
      summary: 'Meeting',
      description: '',
      start: {
        date: getStringDate(addDays(today, 1)),
        time: '8:00',
      },
      end: {
        date: getStringDate(addDays(today, 1)),
        time: '12:00',
      },
      color: {
        background: 'rgb(207, 224, 252)',
        foreground: 'rgb(10, 71, 169)',
      },
    },
    {
      summary: 'Call',
      description: '',
      start: {
        date: getStringDate(addDays(today, 2)),
        time: '11:00',
      },
      end: {
        date: getStringDate(addDays(today, 2)),
        time: '14:00',
      },
      color: {
        background: '#FFA900',
        foreground: 'white',
      },
    },
  ];

  return (
    <MDBCalendar defaultEvents={myEvents} readonly />
  );
}

Readonly events

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

March 2025
Month
SunMonTueWedThuFriSat
23
24
25
26
27
28
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
March 2025
Month
SunMonTueWedThuFriSat
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Readonly event
21
 
22
 
23
Readonly event
Readonly event
24
 
Vue Meetup
Meeting
25
 
 
Readonly event
26
 
 
27
 
 
28
 
 
React Meetup
29
 
 
 
30
 
 
React Meetup
31
 
 
 
1
2
3
4
5
import React from 'react';
import { MDBCalendar } from 'mdb-react-calendar';

export default function App() {
  const today = new Date();

  const getStringDate = (date: Date) => date.toLocaleDateString('en-GB').replaceAll('.', '/');

  const addDays = (date: Date, days: number) => {
    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
  };

  const myEvents = [
    {
      summary: 'Readonly event',
      description: '',
      start: {
        date: getStringDate(today),
      },
      end: {
        date: getStringDate(today),
      },
      color: {
        background: 'rgb(207, 224, 252)',
        foreground: 'rgb(10, 71, 169)',
      },
      readonly: true,
    },
    {
      summary: 'Vue Meetup',
      description: '',
      start: {
        date: getStringDate(addDays(today, 1)),
      },
      end: {
        date: getStringDate(addDays(today, 5)),
      },
      color: {
        background: '#00B74A',
        foreground: 'white',
      },
    },
    {
      summary: 'Readonly event',
      description:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
      start: {
        date: getStringDate(addDays(today, -3)),
        time: '10:00',
      },
      end: {
        date: getStringDate(addDays(today, 3)),
        time: '14:00',
      },
      color: {
        background: '#F93154',
        foreground: 'white',
      },
      readonly: true,
    },
    {
      summary: 'React Meetup',
      description: '',
      start: {
        date: getStringDate(addDays(today, 5)),
      },
      end: {
        date: getStringDate(addDays(today, 8)),
      },
      color: {
        background: '#39C0ED',
        foreground: 'white',
      },
    },
    {
      summary: 'Meeting',
      description: '',
      start: {
        date: getStringDate(addDays(today, 1)),
        time: '8:00',
      },
      end: {
        date: getStringDate(addDays(today, 1)),
        time: '12:00',
      },
      color: {
        background: 'rgb(207, 224, 252)',
        foreground: 'rgb(10, 71, 169)',
      },
    },
    {
      summary: 'Readonly event',
      description: '',
      start: {
        date: getStringDate(addDays(today, 2)),
        time: '11:00',
      },
      end: {
        date: getStringDate(addDays(today, 2)),
        time: '14:00',
      },
      color: {
        background: '#FFA900',
        foreground: 'white',
      },
      readonly: true,
    },
  ];

  return (
    <MDBCalendar defaultEvents={myEvents} />
  );
}

Disabled modules

Some of the modules can be disabled via properties. Here's an example without tooltips and some toolbar action elements:

March 2025
SunMonTueWedThuFriSat
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Angular Meetup
21
 
22
 
23
Angular Meetup
JS Conference
24
 
Vue Meetup
Meeting
25
 
 
Call
26
 
 
27
 
 
28
 
 
React Meetup
29
 
 
 
30
 
 
React Meetup
31
 
 
 
1
2
3
4
5
import React from 'react';
import { MDBCalendar } from 'mdb-react-calendar';

export default function App() {
  const today = new Date();

  const getStringDate = (date: Date) => date.toLocaleDateString('en-GB').replaceAll('.', '/');

  const addDays = (date: Date, days: number) => {
    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
  };

  const myEvents = [
    {
      summary: 'JS Conference',
      description: '',
      start: {
        date: getStringDate(today),
      },
      end: {
        date: getStringDate(today),
      },
      color: {
        background: 'rgb(207, 224, 252)',
        foreground: 'rgb(10, 71, 169)',
      },
    },
    {
      summary: 'Vue Meetup',
      description: '',
      start: {
        date: getStringDate(addDays(today, 1)),
      },
      end: {
        date: getStringDate(addDays(today, 5)),
      },
      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: getStringDate(addDays(today, -3)),
        time: '10:00',
      },
      end: {
        date: getStringDate(addDays(today, 3)),
        time: '14:00',
      },
      color: {
        background: '#F93154',
        foreground: 'white',
      },
    },
    {
      summary: 'React Meetup',
      description: '',
      start: {
        date: getStringDate(addDays(today, 5)),
      },
      end: {
        date: getStringDate(addDays(today, 8)),
      },
      color: {
        background: '#39C0ED',
        foreground: 'white',
      },
    },
    {
      summary: 'Meeting',
      description: '',
      start: {
        date: getStringDate(addDays(today, 1)),
        time: '8:00',
      },
      end: {
        date: getStringDate(addDays(today, 1)),
        time: '12:00',
      },
      color: {
        background: 'rgb(207, 224, 252)',
        foreground: 'rgb(10, 71, 169)',
      },
    },
    {
      summary: 'Call',
      description: '',
      start: {
        date: getStringDate(addDays(today, 2)),
        time: '11:00',
      },
      end: {
        date: getStringDate(addDays(today, 2)),
        time: '14:00',
      },
      color: {
        background: '#FFA900',
        foreground: 'white',
      },
    },
  ];

  return (
    <MDBCalendar
      disableTooltips
      disableNavigation
      disableSelect
      disableEventButton
      defaultEvents={myEvents}
    />
  );
}

Blur

Past events can be blurred with the blur property.

March 2025
Month
SunMonTueWedThuFriSat
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Angular Meetup
21
 
22
 
23
Angular Meetup
JS Conference
24
 
Vue Meetup
Meeting
25
 
 
Call
26
 
 
27
 
 
28
 
 
React Meetup
29
 
 
 
30
 
 
React Meetup
31
 
 
 
1
2
3
4
5
import React from 'react';
import { MDBCalendar } from 'mdb-react-calendar';

export default function App() {
  const today = new Date();

  const getStringDate = (date: Date) => date.toLocaleDateString('en-GB').replaceAll('.', '/');

  const addDays = (date: Date, days: number) => {
    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
  };

  const myEvents = [
    {
      summary: 'JS Conference',
      description: '',
      start: {
        date: getStringDate(today),
      },
      end: {
        date: getStringDate(today),
      },
      color: {
        background: 'rgb(207, 224, 252)',
        foreground: 'rgb(10, 71, 169)',
      },
    },
    {
      summary: 'Vue Meetup',
      description: '',
      start: {
        date: getStringDate(addDays(today, 1)),
      },
      end: {
        date: getStringDate(addDays(today, 5)),
      },
      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: getStringDate(addDays(today, -3)),
        time: '10:00',
      },
      end: {
        date: getStringDate(addDays(today, 3)),
        time: '14:00',
      },
      color: {
        background: '#F93154',
        foreground: 'white',
      },
    },
    {
      summary: 'React Meetup',
      description: '',
      start: {
        date: getStringDate(addDays(today, 5)),
      },
      end: {
        date: getStringDate(addDays(today, 8)),
      },
      color: {
        background: '#39C0ED',
        foreground: 'white',
      },
    },
    {
      summary: 'Meeting',
      description: '',
      start: {
        date: getStringDate(addDays(today, 1)),
        time: '8:00',
      },
      end: {
        date: getStringDate(addDays(today, 1)),
        time: '12:00',
      },
      color: {
        background: 'rgb(207, 224, 252)',
        foreground: 'rgb(10, 71, 169)',
      },
    },
    {
      summary: 'Call',
      description: '',
      start: {
        date: getStringDate(addDays(today, 2)),
        time: '11:00',
      },
      end: {
        date: getStringDate(addDays(today, 2)),
        time: '14:00',
      },
      color: {
        background: '#FFA900',
        foreground: 'white',
      },
    },
  ];

  return (
    <MDBCalendar defaultEvents={myEvents} blur />
  );
}

Custom attributes

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

March 2025
Month
SunMonTueWedThuFriSat
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Angular Meetup
21
 
22
 
23
Angular Meetup
JS Conference
24
 
Vue Meetup
Meeting
25
 
 
Call
26
 
 
27
 
 
28
 
 
React Meetup
29
 
 
 
30
 
 
React Meetup
31
 
 
 
1
2
3
4
5
import React from 'react';
import { MDBCalendar } from 'mdb-react-calendar';

export default function App() {
  const today = new Date();

  const getStringDate = (date: Date) => date.toLocaleDateString('en-GB').replaceAll('.', '/');

  const addDays = (date: Date, days: number) => {
    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
  };

  const myEvents = [
    {
      summary: 'JS Conference',
      description: '',
      start: {
        date: getStringDate(today),
      },
      end: {
        date: getStringDate(today),
      },
      color: {
        background: 'rgb(207, 224, 252)',
        foreground: 'rgb(10, 71, 169)',
      },
      id: 1
    },
    {
      summary: 'Vue Meetup',
      description: '',
      start: {
        date: getStringDate(addDays(today, 1)),
      },
      end: {
        date: getStringDate(addDays(today, 5)),
      },
      color: {
        background: '#00B74A',
        foreground: 'white',
      },
      id: 2
    },
    {
      summary: 'Angular Meetup',
      description:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
      start: {
        date: getStringDate(addDays(today, -3)),
        time: '10:00',
      },
      end: {
        date: getStringDate(addDays(today, 3)),
        time: '14:00',
      },
      color: {
        background: '#F93154',
        foreground: 'white',
      },
      id: 3
    },
    {
      summary: 'React Meetup',
      description: '',
      start: {
        date: getStringDate(addDays(today, 5)),
      },
      end: {
        date: getStringDate(addDays(today, 8)),
      },
      color: {
        background: '#39C0ED',
        foreground: 'white',
      },
      id: 4
    },
    {
      summary: 'Meeting',
      description: '',
      start: {
        date: getStringDate(addDays(today, 1)),
        time: '8:00',
      },
      end: {
        date: getStringDate(addDays(today, 1)),
        time: '12:00',
      },
      color: {
        background: 'rgb(207, 224, 252)',
        foreground: 'rgb(10, 71, 169)',
      },
      id: 5
    },
    {
      summary: 'Call',
      description: '',
      start: {
        date: getStringDate(addDays(today, 2)),
        time: '11:00',
      },
      end: {
        date: getStringDate(addDays(today, 2)),
        time: '14:00',
      },
      color: {
        background: '#FFA900',
        foreground: 'white',
      },
      id: 6
    },
  ];

  return (
    <MDBCalendar defaultEvents={myEvents} />
  );
}

Calendar - API

Import

import { MDBCalendar } from 'mdb-react-calendar';

Properties

MDBCalendar

Name Type Default Description Example
addCaption React.ReactNode 'Add' Defines caption for add event button. <MDBCalendar addCaption='' />
addEventModalCaption React.ReactNode 'Add an event' Defines caption for add event modal title. <MDBCalendar addEventModalCaption='' />
allDayCaption React.ReactNode 'All day event' Defines caption for all day event checkbox. <MDBCalendar allDayCaption='' />
blur boolean false Blur past events <MDBCalendar blur />
closeCaption React.ReactNode 'Close' Defines caption for close button. <MDBCalendar closeCaption='' />
defaultDate Date new Date() Defines the default starting date. <MDBCalendar defaultDate={exampleDate} />
defaultEvents CaleandarEvent[] [] Defines default events of the calendar. <MDBCalendar defaultEvents={myEvents} />
defaultView "month" | "week" | "list" 'month' Defines default view. <MDBCalendar defaultView='week' />
deleteCaption React.ReactNode 'Remove' Defines caption for remove event button. <MDBCalendar deleteCaption='' />
descriptionCaption React.ReactNode 'Description' Defines caption for description input label. <MDBCalendar descriptionCaption='' />
disableEventButton boolean false Disable event button module <MDBCalendar disableEventButton />
disableNavigation boolean false Disable navigation module <MDBCalendar disableNavigation />
disableSelect boolean false Disable select module <MDBCalendar disableSelect />
disableTooltips boolean false Disable tooltips module <MDBCalendar disableTooltips />
editCaption React.ReactNode 'Edit' Defines caption for edit event button. <MDBCalendar editCaption='' />
editEventModalCaption React.ReactNode 'Edit an event' Defines caption for edit event modal title. <MDBCalendar editEventModalCaption='' />
endCaption React.ReactNode 'End' Defines caption for end input label. <MDBCalendar endCaption='' />
hours Array<string> [ '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', ] Changes hours displayed in week view. <MDBCalendar hours={hours} />
listCaption React.ReactNode 'list' Defines caption for list button. <MDBCalendar listCaption='' />
mondayFirst boolean false Changes first day of week to monday. <MDBCalendar mondayFirst />
mondayWeekdays Array<string> ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] Defines shortened days displayed names. <MDBCalendar mondayWeekdays={exampleDays} />
monthCaption React.ReactNode 'month' Defines caption for month button. <MDBCalendar monthCaption='' />
months Array<string> ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] Defines months displayed names. <MDBCalendar months={exampleMonths} />
monthsShort Array<string> ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] Defines shortened months displayed names. <MDBCalendar monthsShort={exampleMonths} />
noEventsCaption React.ReactNode 'No events' Defines caption for empty list view. <MDBCalendar noEventsCaption='' />
readonly boolean false Disables event's edition. <MDBCalendar readonly />
startCaption React.ReactNode 'Start' Defines caption for start input label. <MDBCalendar startCaption='' />
summaryCaption React.ReactNode 'Summary' Defines caption for summary input label. <MDBCalendar summaryCaption='' />
todayCaption React.ReactNode 'today' Defines caption for today. <MDBCalendar todayCaption='' />
twelveHour boolean false Defines twelve hour mode. <MDBCalendar twelveHours />
weekCaption React.ReactNode 'week' Defines caption for week button. <MDBCalendar weekCaption='' />
weekdays Array<string> ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] Disables event's edition. <MDBCalendar weekdays={weekdays} />

Events

Name Type Description
onChange (events: CalendarEvent[]) => void Emitted when the events chage.
onEventClick (e: MouseEvent) => void Emitted on event click.
onPrev () => void Emitted when the prev method triggers.
onNext () => void Emitted when the next method triggers.
onToday () => void Emitted when the today method triggers.
onViewChange (view: 'month' | 'week' | 'list') => void Emitted when the changeView method triggers.
onAddEvent (event: CalendarEvent) => void Emitted when a new event is added.
onEditEvent (events: CalendarEvent[]) => void Emitted when any event is editted.
onDeleteEvent (event: CalendarEvent) => void Emitted when any event is deleted.

Advanced types

CalendarEvent

type CalendarEvent = {
  summary: string;
  description?: string;
  start: { date: string; time?: string };
  end: { date: string; time?: string };
  color: {
    background: string;
    foreground?: string;
  };
  readonly?: boolean;
};