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.
import React from 'react';
import { MDBCalendar } from 'mdb-react-calendar';
export default function App() {
const today = new Date();
const getStringDate = (date: Date) => date.toLocaleDateString().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: '#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: '#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} />
);
}
Monday first
Set the mondayFirst property to true so that Monday is the first day
of the week.
import React from 'react';
import { MDBCalendar } from 'mdb-react-calendar';
export default function App() {
const today = new Date();
const getStringDate = (date: Date) => date.toLocaleDateString().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: '#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: '#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.
import React from 'react';
import { MDBCalendar } from 'mdb-react-calendar';
export default function App() {
const today = new Date();
const getStringDate = (date: Date) => date.toLocaleDateString().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: '#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: '#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} defaultView='week' />
);
}
Twelve hour
By setting the twelveHour property to true, you get a 12-hour
schedule.
import React from 'react';
import { MDBCalendar } from 'mdb-react-calendar';
export default function App() {
const today = new Date();
const getStringDate = (date: Date) => date.toLocaleDateString().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 data attributes. Detailed options are described in the API tab.
import React from 'react';
import { MDBCalendar } from 'mdb-react-calendar';
export default function App() {
const today = new Date();
const getStringDate = (date: Date) => date.toLocaleDateString().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: '#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: '#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}
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.
import React from 'react';
import { MDBCalendar } from 'mdb-react-calendar';
export default function App() {
const today = new Date();
const getStringDate = (date: Date) => date.toLocaleDateString().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: '#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: '#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} defaultDate={new Date(2019, 11, 1)} />
);
}
Readonly
The editable mode can be easily disabled using the
readOnly property.
import React from 'react';
import { MDBCalendar } from 'mdb-react-calendar';
export default function App() {
const today = new Date();
const getStringDate = (date: Date) => date.toLocaleDateString().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: '#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: '#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} readonly />
);
}
Calendar - API
Import
import { MDBCalendar } from 'mdb-react-calendar';
Properties
MDBCalendar
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
className
|
string | '' |
Adds a custom class to MDBCalendar |
<MDBCalendar className="class" />
|
defaultEvents
|
Array<Event> | [] |
Defines default events of the calendar. |
<MDBCalendar defaultEvents={myEvents} />
|
defaultDate
|
Date | new Date() |
Defines the default starting date. |
<MDBCalendar defaultDate={exampleDate} />
|
defaultView
|
"month" | "week" | "list" | 'month' |
Defines default view. |
<MDBCalendar defaultView='week' />
|
getEvents
|
(events: Array<Event>) => any | |
Function to return saved events. |
<MDBCalendar getEvents={(events) => console.log(events)} />
|
monthsShort
|
Array<string> | ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] |
Defines shortened months displayed names. |
<MDBCalendar months={exampleMonths} />
|
months
|
Array<string> | ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] |
Defines months displayed names. |
<MDBCalendar months={exampleMonths} />
|
mondayFirst
|
boolean | false |
Changes first day of week to monday. |
<MDBCalendar mondayFirst />
|
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} />
|
twelveHour
|
boolean | false |
Defines twelve hour mode. |
<MDBCalendar twelveHours />
|
readonly
|
boolean | false |
Disables event's edition. |
<MDBCalendar readonly />
|
weekdays
|
Array<string> | ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] |
Disables event's edition. |
<MDBCalendar weekdays={weekdays} />
|
todayCaption
|
React.ReactNode | 'today' |
Defines caption for today. |
<MDBCalendar todayCaption='' />
|
monthCaption
|
React.ReactNode | 'month' |
Defines caption for month button. |
<MDBCalendar monthCaption='' />
|
weekCaption
|
React.ReactNode | 'week' |
Defines caption for week button. |
<MDBCalendar weekCaption='' />
|
listCaption
|
React.ReactNode | 'list' |
Defines caption for list button. |
<MDBCalendar listCaption='' />
|
allDayCaption
|
React.ReactNode | 'All day event' |
Defines caption for all day event checkbox. |
<MDBCalendar allDayCaption='' />
|
noEventsCaption
|
React.ReactNode | 'No events' |
Defines caption for empty list view. |
<MDBCalendar noEventsCaption='' />
|
summaryCaption
|
React.ReactNode | 'Summary' |
Defines caption for summary input label. |
<MDBCalendar summaryCaption='' />
|
descriptionCaption
|
React.ReactNode | 'Description' |
Defines caption for description input label. |
<MDBCalendar descriptionCaption='' />
|
startCaption
|
React.ReactNode | 'Start' |
Defines caption for start input label. |
<MDBCalendar startCaption='' />
|
endCaption
|
React.ReactNode | 'End' |
Defines caption for end input label. |
<MDBCalendar endCaption='' />
|
addCaption
|
React.ReactNode | 'Add' |
Defines caption for add event button. |
<MDBCalendar addCaption='' />
|
deleteCaption
|
React.ReactNode | 'Remove' |
Defines caption for remove event button. |
<MDBCalendar deleteCaption='' />
|
editCaption
|
React.ReactNode | 'Edit' |
Defines caption for edit event button. |
<MDBCalendar editCaption='' />
|
closeCaption
|
React.ReactNode | 'Close' |
Defines caption for close button. |
<MDBCalendar closeCaption='' />
|
addEventModalCaption
|
React.ReactNode | 'Add an event' |
Defines caption for add event modal title. |
<MDBCalendar addEventModalCaption='' />
|
editEventModalCaption
|
React.ReactNode | 'Edit an event' |
Defines caption for edit event modal title. |
<MDBCalendar editEventModalCaption='' />
|
onEventClick
|
(e: MouseEvent) => any | |
An event that fires right after clicking an item. |
<MDBCalendar onEventClick={(e: any) => console.log(e.target)} />
|
Advanced types
Event
type Event = {
summary: string;
description?: string;
start: { date: string; time?: string };
end: { date: string; time?: string };
color: {
background: string;
foreground?: string;
};
};