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. Note: Read the API tab to find all available options and advanced customization A few predefined events allowing you to see how the plugin looks like. 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. Set the Set the Bootstrap 5 Calendar plugin
Basic example
Event formats
Monday first
data-mdb-monday-first attribute to true so that Monday is the first day of the week. Default view
data-mdb-default-view attribute to week or list to
change the start view. By default, it is a month.
Twelve hour
By setting the data-mdb-twelve-hour attribute to true, you get a 12-hour schedule.
Customize captions
You can customize all captions very easily using data attributes. Detailed options are described in the API tab.
Default date
A starting day can
be easily set using the data-mdb-default-date attribute.
Readonly
The editable mode can be easily disabled using the data-mdb-readonly attribute.
Readonly events
The editable mode for any event can be easily disabled by adding readonly attribute in the event's dataset.
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:
Blur
Past events can be blurred with the data-mdb-blur attribute.
Custom attributes
You can add your own attributes to existing and new events. Below is an example with the id attribute.
Bootstrap full calendar plugin
Note: This documentation is for an older version of Bootstrap [v.4]. A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5
Bootstrap full calendar plugin is an extension that allows you to create calendar functionality.
Thanks to this plugin you will be able to easily create new events, manage current events, move existing events between other days, and integrate with your Google Calendar.
To start working with full calendar plugin see "Getting Started" tab on this page.
Basic Example
A few predefined events allowing you to see how the plugin looks like.
Dynamically added events
Find out how easy it is to add new events with the Full Calendar plugin! One button, and the event is already in your calendar.
Events with tooltips
You can easily add tooltip to an event in the calendar. This way you can easily remember what this event is all about.
Movable events
Didn't you do something today? Set it aside for tomorrow! Full Calendar allows you to move events between other days.
Long dynamic events
Select few days and create an event with one click! Just like in Google Calendar.
Full Calendar options list
Below options are available to use in Full Calendar.
header
| object | left: 'title', center: ' ', right: 'today prev, next' | Defines the buttons and title at the top of the calendar. | title, prev, next, prevYear, nextYear, today
| header: {left: 'title', center: ' ', right: 'today prev, next' }
|
footer
| object | false | Defines the controls at the bottom of the calendar. | title, prev, next, prevYear, nextYear, today
| footer: {left: 'title', center: ' ', right: 'today prev, next' }
|
titleFormat
| object | - | Determines the text that will be displayed in the header’s title. | -
| titleFormat: 'MM/YYYY'
|
buttonText
| object | buttonText: {today: 'today', month: 'month, week: 'week', day: 'day', list: 'list'} | Defines the buttons and title at the top of the calendar. | -
| buttonText: {today: 'today', month: 'month, week: 'week', day: 'day', list: 'list'}
|
buttonIcons
| object | prev: 'left-single-arrow', next: 'right-single-arrow', prevYear: 'left-double-arrow', nextYear: 'right-double-arrow' | Icons that will be displayed in buttons of the header/footer. | 'left-single-arrow', 'right-single-arrow', 'left-double-arrow', 'right-double-arrow'
| buttonIcons: {next: 'right-single-arrow', prevYear: 'left-double-arrow', nextYear: 'right-double-arrow'}
|
customButtons
| object | - | Defines custom buttons that can be used in the header/footer. Specify a hash of custom buttons. Then reference them from the header setting. | text, click, icon, themeIcon, bootstrapGlyphicon
| customButtons: { myCustomButton: { text: 'Custom', click: function[] { alert['Clicked the custom button']; } } }, header: {left: 'myCustomButton', center: ' ', right: ' ' }
|
Below events are available to use in Full Calendar.
eventClick
| any | The event is fired when user has clicked the event. | eventClick: function[calEvent, jsEvent, view] { console.log['click', calEvent.title]; }
|
eventMouseover
| any | The event is fired when user has mouseover the event. | eventMouseover: function[calEvent, jsEvent, view] { console.log['mouseover', calEvent]; }
|
eventMouseout
| any | The event is fired when user has mouseout the event. | eventMouseout: function[calEvent, jsEvent, view] { console.log['mouseout', calEvent]; }
|