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('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.
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.
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.
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.
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.
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.
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.
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:
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.
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.
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;
};