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.


Monday first

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


Default view

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


Twelve hour

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


Default date

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


Readonly

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

Calendar - API


Import


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

Properties

MDBCalendar

Name Type Default Description Example
className String '' Add custom class to MDBCalendar <MDBCalendar className="class" />
weekdays Array / String ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] Defines weekdays displayed names. <MDBCalendar weekdays={exampleWeekdays} />
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 />
defaultView String 'month' Defines default view. <MDBCalendar defaultView='week' />
twelveHour Boolean false Changes time mode from 24h to 12h. <MDBCalendar twelveHour />
defaultDate Date new Date() Defines the default starting date. <MDBCalendar defaultDate={exampleDate} />