Calendar

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

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.

Event formats

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

Monday first

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

Default view

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

Twelve hour

By setting the twelveHours input to true, you get a 12-hour schedule.

Customize captions

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

Default date

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

Readonly

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

Disabled modules

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

Blur

Past events can be blurred with the data-mdb-blur attribute.

Related resources