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.

Responsive Calendar plugin built with the Bootstrap 5, Angular and Material Design. 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.

March 2025
Month
SunMonTueWedThuFriSat
23
24
25
26
27
28
1
2
Angular Meetup
3
 
4
 
5
 
JS Conference
6
 
Vue Meetup
Meeting
7
 
 
Call
8
 
 
9
 
Vue Meetup
10
 
 
React Meetup
11
 
 
 
12
 
 
 
13
 
 
 
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
<mdb-calendar [events]="events"></mdb-calendar>
import { Component } from '@angular/core';
import { MdbCalendarEvent, startOfDay, endOfDay } from 'mdb-angular-calendar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  events: MdbCalendarEvent[] = [
    {
      id: 'event1',
      summary: 'JS Conference',
      startDate: startOfDay(new Date()),
      endDate: endOfDay(new Date()),
      color: {
        background: '#cfe0fc',
        foreground: '#0a47a9',
      },
    },
    { id: 'event2',
      summary: 'Vue Meetup',
      startDate: startOfDay(new Date(new Date().setDate(new Date().getDate() + 1))),
      endDate: endOfDay(new Date(new Date().setDate(new Date().getDate() + 5))),
      color: {
        background: '#ebcdfe',
        foreground: '#6e02b1',
      },
    },
    {
      id: 'event3',
      summary: 'Angular Meetup',
      description:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() - 3)).setHours(10,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 3)).setHours(14,0,0,0)),
      color: {
        background: '#c7f5d9',
        foreground: '#0b4121',
      },
    },
    {
      id: 'event4',
      summary: 'React Meetup',
      startDate: startOfDay(new Date(new Date().setDate(new Date().getDate() + 5))),
      endDate: endOfDay(new Date(new Date().setDate(new Date().getDate() + 8))),
      color: {
        background: '#fdd8de',
        foreground: '#790619',
      },
    },
    {
      id: 'event5',
      summary: 'Meeting',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() + 1)).setHours(8,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 1)).setHours(12,0,0,0)),
      color: {
        background: '#cfe0fc',
        foreground: '#0a47a9',
      },
    },
    {
      id: 'event6',
      summary: 'Call',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() + 2)).setHours(11,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 2)).setHours(14,0,0,0)),
      color: {
        background: '#292929',
        foreground: '#f5f5f5',
      },
    }
  ];
};

Event formats

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

{
  id: 'event6',
  summary: 'Call',
  startDate: new Date('2020/09/08 11:00'),
  endDate: new Date('2020/09/08 14:00'),
  color: {
    background: '#292929',
    foreground: '#f5f5f5',
  },
}
{
  id: 'event6',
  summary: 'Call',
  startDate: new Date('2021/09/10 11:00 AM'),
  endDate: new Date('2021/09/10 02:00 PM'),
  color: {
    background: '#292929',
    foreground: '#f5f5f5',
  },
}

Monday first

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

March 2025
Month
MonTueWedThuFriSatSun
24
25
26
27
28
1
2
Angular Meetup
3
Angular Meetup
4
 
5
 
JS Conference
6
 
Vue Meetup
Meeting
7
 
 
Call
8
 
 
9
 
 
10
 
Vue Meetup
React Meetup
11
 
 
 
12
 
 
 
13
 
 
 
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
<mdb-calendar [mondayFirst]="true" [events]="events"></mdb-calendar>
import { Component } from '@angular/core';
import { MdbCalendarEvent, startOfDay, endOfDay } from 'mdb-angular-calendar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  events: MdbCalendarEvent[] = [
    {
      id: 'event1',
      summary: 'JS Conference',
      startDate: startOfDay(new Date()),
      endDate: endOfDay(new Date()),
      color: {
        background: '#cfe0fc',
        foreground: '#0a47a9',
      },
    },
    { id: 'event2',
      summary: 'Vue Meetup',
      startDate: startOfDay(new Date(new Date().setDate(new Date().getDate() + 1))),
      endDate: endOfDay(new Date(new Date().setDate(new Date().getDate() + 5))),
      color: {
        background: '#ebcdfe',
        foreground: '#6e02b1',
      },
    },
    {
      id: 'event3',
      summary: 'Angular Meetup',
      description:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() - 3)).setHours(10,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 3)).setHours(14,0,0,0)),
      color: {
        background: '#c7f5d9',
        foreground: '#0b4121',
      },
    },
    {
      id: 'event4',
      summary: 'React Meetup',
      startDate: startOfDay(new Date(new Date().setDate(new Date().getDate() + 5))),
      endDate: endOfDay(new Date(new Date().setDate(new Date().getDate() + 8))),
      color: {
        background: '#fdd8de',
        foreground: '#790619',
      },
    },
    {
      id: 'event5',
      summary: 'Meeting',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() + 1)).setHours(8,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 1)).setHours(12,0,0,0)),
      color: {
        background: '#cfe0fc',
        foreground: '#0a47a9',
      },
    },
    {
      id: 'event6',
      summary: 'Call',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() + 2)).setHours(11,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 2)).setHours(14,0,0,0)),
      color: {
        background: '#292929',
        foreground: '#f5f5f5',
      },
    }
  ];
};

Default view

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

March 2025
Week
Sun
02
Mon
03
Tue
04
Wed
05
Thu
06
Fri
07
Sat
08
Angular Meetup
 
 
 
JS Conference
 
Vue Meetup
Meeting
 
 
Call
 
 
1:00
2:00
3:00
4:00
5:00
6:00
7:00
8:00
Meeting
9:00
Meeting
10:00
Meeting
11:00
Meeting
Call
12:00
Call
13:00
Call
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
<mdb-calendar [defaultView]="'week'" [events]="events"></mdb-calendar>
import { Component } from '@angular/core';
import { MdbCalendarEvent, startOfDay, endOfDay } from 'mdb-angular-calendar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  events: MdbCalendarEvent[] = [
    {
      id: 'event1',
      summary: 'JS Conference',
      startDate: startOfDay(new Date()),
      endDate: endOfDay(new Date()),
      color: {
        background: '#cfe0fc',
        foreground: '#0a47a9',
      },
    },
    { id: 'event2',
      summary: 'Vue Meetup',
      startDate: startOfDay(new Date(new Date().setDate(new Date().getDate() + 1))),
      endDate: endOfDay(new Date(new Date().setDate(new Date().getDate() + 5))),
      color: {
        background: '#ebcdfe',
        foreground: '#6e02b1',
      },
    },
    {
      id: 'event3',
      summary: 'Angular Meetup',
      description:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() - 3)).setHours(10,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 3)).setHours(14,0,0,0)),
      color: {
        background: '#c7f5d9',
        foreground: '#0b4121',
      },
    },
    {
      id: 'event4',
      summary: 'React Meetup',
      startDate: startOfDay(new Date(new Date().setDate(new Date().getDate() + 5))),
      endDate: endOfDay(new Date(new Date().setDate(new Date().getDate() + 8))),
      color: {
        background: '#fdd8de',
        foreground: '#790619',
      },
    },
    {
      id: 'event5',
      summary: 'Meeting',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() + 1)).setHours(8,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 1)).setHours(12,0,0,0)),
      color: {
        background: '#cfe0fc',
        foreground: '#0a47a9',
      },
    },
    {
      id: 'event6',
      summary: 'Call',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() + 2)).setHours(11,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 2)).setHours(14,0,0,0)),
      color: {
        background: '#292929',
        foreground: '#f5f5f5',
      },
    }
  ];
};

Twelve hour

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

March 2025
Week
Sun
02
Mon
03
Tue
04
Wed
05
Thu
06
Fri
07
Sat
08
Angular Meetup
 
 
 
JS Conference
 
Vue Meetup
Meeting
 
 
Call
 
 
1:00 am
2:00 am
3:00 am
4:00 am
5:00 am
6:00 am
7:00 am
8:00 am
Meeting
9:00 am
Meeting
10:00 am
Meeting
11:00 am
Meeting
Call
12:00 pm
Call
1:00 pm
Call
2:00 pm
3:00 pm
4:00 pm
5:00 pm
6:00 pm
7:00 pm
8:00 pm
9:00 pm
10:00 pm
11:00 pm
<mdb-calendar [twelveHours]="true" [events]="events"></mdb-calendar>
import { Component } from '@angular/core';
import { MdbCalendarEvent, startOfDay, endOfDay } from 'mdb-angular-calendar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  events: MdbCalendarEvent[] = [
    {
      id: 'event1',
      summary: 'JS Conference',
      startDate: startOfDay(new Date()),
      endDate: endOfDay(new Date()),
      color: {
        background: '#cfe0fc',
        foreground: '#0a47a9',
      },
    },
    { id: 'event2',
      summary: 'Vue Meetup',
      startDate: startOfDay(new Date(new Date().setDate(new Date().getDate() + 1))),
      endDate: endOfDay(new Date(new Date().setDate(new Date().getDate() + 5))),
      color: {
        background: '#ebcdfe',
        foreground: '#6e02b1',
      },
    },
    {
      id: 'event3',
      summary: 'Angular Meetup',
      description:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() - 3)).setHours(10,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 3)).setHours(14,0,0,0)),
      color: {
        background: '#c7f5d9',
        foreground: '#0b4121',
      },
    },
    {
      id: 'event4',
      summary: 'React Meetup',
      startDate: startOfDay(new Date(new Date().setDate(new Date().getDate() + 5))),
      endDate: endOfDay(new Date(new Date().setDate(new Date().getDate() + 8))),
      color: {
        background: '#fdd8de',
        foreground: '#790619',
      },
    },
    {
      id: 'event5',
      summary: 'Meeting',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() + 1)).setHours(8,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 1)).setHours(12,0,0,0)),
      color: {
        background: '#cfe0fc',
        foreground: '#0a47a9',
      },
    },
    {
      id: 'event6',
      summary: 'Call',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() + 2)).setHours(11,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 2)).setHours(14,0,0,0)),
      color: {
        background: '#292929',
        foreground: '#f5f5f5',
      },
    }
  ];
};

Customize captions

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

Marzec 2025
Miesiąc
NdPonWtŚrCzwPtSb
23
24
25
26
27
28
1
2
Angular Meetup
3
 
4
 
5
 
JS Conference
6
 
Vue Meetup
Meeting
7
 
 
Call
8
 
 
9
 
Vue Meetup
10
 
 
React Meetup
11
 
 
 
12
 
 
 
13
 
 
 
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
<mdb-calendar [options]="options" [events]="events"></mdb-calendar>
import { Component } from '@angular/core';
import { MdbCalendarEvent, MdbCalendarOptions, startOfDay, endOfDay } from 'mdb-angular-calendar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  events: MdbCalendarEvent[] = [
    {
      id: 'event1',
      summary: 'JS Conference',
      startDate: startOfDay(new Date()),
      endDate: endOfDay(new Date()),
      color: {
        background: '#cfe0fc',
        foreground: '#0a47a9',
      },
    },
    { id: 'event2',
      summary: 'Vue Meetup',
      startDate: startOfDay(new Date(new Date().setDate(new Date().getDate() + 1))),
      endDate: endOfDay(new Date(new Date().setDate(new Date().getDate() + 5))),
      color: {
        background: '#ebcdfe',
        foreground: '#6e02b1',
      },
    },
    {
      id: 'event3',
      summary: 'Angular Meetup',
      description:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() - 3)).setHours(10,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 3)).setHours(14,0,0,0)),
      color: {
        background: '#c7f5d9',
        foreground: '#0b4121',
      },
    },
    {
      id: 'event4',
      summary: 'React Meetup',
      startDate: startOfDay(new Date(new Date().setDate(new Date().getDate() + 5))),
      endDate: endOfDay(new Date(new Date().setDate(new Date().getDate() + 8))),
      color: {
        background: '#fdd8de',
        foreground: '#790619',
      },
    },
    {
      id: 'event5',
      summary: 'Meeting',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() + 1)).setHours(8,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 1)).setHours(12,0,0,0)),
      color: {
        background: '#cfe0fc',
        foreground: '#0a47a9',
      },
    },
    {
      id: 'event6',
      summary: 'Call',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() + 2)).setHours(11,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 2)).setHours(14,0,0,0)),
      color: {
        background: '#292929',
        foreground: '#f5f5f5',
      },
    }
  ];

  options: MdbCalendarOptions = {
    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',
    addCaption: 'Dodaj',
    deleteCaption: 'Usuń',
    editCaption: 'Edytuj',
    closeCaption: 'Zamknij',
    addEventModalCaption: 'Dodaj wydarzenie',
    editEventModalCaption: 'Edytuj wydarzenie',
    addEventButtonCaption: "Dodaj wydarzenie",
  }
};

Default date

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

December 2019
Month
SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
<mdb-calendar [defaultDate]="defaultDate" [events]="events"></mdb-calendar>
import { Component } from '@angular/core';
import { MdbCalendarEvent, startOfDay, endOfDay } from 'mdb-angular-calendar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  defaultDate = new Date('2019/12/01');

  events: MdbCalendarEvent[] = [
    {
      id: 'event1',
      summary: 'JS Conference',
      startDate: startOfDay(new Date()),
      endDate: endOfDay(new Date()),
      color: {
        background: '#cfe0fc',
        foreground: '#0a47a9',
      },
    },
    { id: 'event2',
      summary: 'Vue Meetup',
      startDate: startOfDay(new Date(new Date().setDate(new Date().getDate() + 1))),
      endDate: endOfDay(new Date(new Date().setDate(new Date().getDate() + 5))),
      color: {
        background: '#ebcdfe',
        foreground: '#6e02b1',
      },
    },
    {
      id: 'event3',
      summary: 'Angular Meetup',
      description:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() - 3)).setHours(10,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 3)).setHours(14,0,0,0)),
      color: {
        background: '#c7f5d9',
        foreground: '#0b4121',
      },
    },
    {
      id: 'event4',
      summary: 'React Meetup',
      startDate: startOfDay(new Date(new Date().setDate(new Date().getDate() + 5))),
      endDate: endOfDay(new Date(new Date().setDate(new Date().getDate() + 8))),
      color: {
        background: '#fdd8de',
        foreground: '#790619',
      },
    },
    {
      id: 'event5',
      summary: 'Meeting',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() + 1)).setHours(8,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 1)).setHours(12,0,0,0)),
      color: {
        background: '#cfe0fc',
        foreground: '#0a47a9',
      },
    },
    {
      id: 'event6',
      summary: 'Call',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() + 2)).setHours(11,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 2)).setHours(14,0,0,0)),
      color: {
        background: '#292929',
        foreground: '#f5f5f5',
      },
    }
  ];
};

Readonly

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

March 2025
Month
SunMonTueWedThuFriSat
23
24
25
26
27
28
1
2
Angular Meetup
3
 
4
 
5
 
JS Conference
6
 
Vue Meetup
Meeting
7
 
 
Call
8
 
 
9
 
Vue Meetup
10
 
 
React Meetup
11
 
 
 
12
 
 
 
13
 
 
 
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
<mdb-calendar [readonly]="true" [events]="events"></mdb-calendar>
import { Component } from '@angular/core';
import { MdbCalendarEvent, startOfDay, endOfDay } from 'mdb-angular-calendar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  events: MdbCalendarEvent[] = [
    {
      id: 'event1',
      summary: 'JS Conference',
      startDate: startOfDay(new Date()),
      endDate: endOfDay(new Date()),
      color: {
        background: '#cfe0fc',
        foreground: '#0a47a9',
      },
    },
    { id: 'event2',
      summary: 'Vue Meetup',
      startDate: startOfDay(new Date(new Date().setDate(new Date().getDate() + 1))),
      endDate: endOfDay(new Date(new Date().setDate(new Date().getDate() + 5))),
      color: {
        background: '#ebcdfe',
        foreground: '#6e02b1',
      },
    },
    {
      id: 'event3',
      summary: 'Angular Meetup',
      description:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() - 3)).setHours(10,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 3)).setHours(14,0,0,0)),
      color: {
        background: '#c7f5d9',
        foreground: '#0b4121',
      },
    },
    {
      id: 'event4',
      summary: 'React Meetup',
      startDate: startOfDay(new Date(new Date().setDate(new Date().getDate() + 5))),
      endDate: endOfDay(new Date(new Date().setDate(new Date().getDate() + 8))),
      color: {
        background: '#fdd8de',
        foreground: '#790619',
      },
    },
    {
      id: 'event5',
      summary: 'Meeting',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() + 1)).setHours(8,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 1)).setHours(12,0,0,0)),
      color: {
        background: '#cfe0fc',
        foreground: '#0a47a9',
      },
    },
    {
      id: 'event6',
      summary: 'Call',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() + 2)).setHours(11,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 2)).setHours(14,0,0,0)),
      color: {
        background: '#292929',
        foreground: '#f5f5f5',
      },
    }
  ];
}

Disabled modules

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

March 2025
SunMonTueWedThuFriSat
23
24
25
26
27
28
1
2
Angular Meetup
3
 
4
 
5
 
JS Conference
6
 
Vue Meetup
Meeting
7
 
 
Call
8
 
 
9
 
Vue Meetup
10
 
 
React Meetup
11
 
 
 
12
 
 
 
13
 
 
 
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
<mdb-calendar
[events]="events"
[tooltips]="false"
[navigation]="false"
[viewSelect]="false"
[addEventButton]="false"
></mdb-calendar>
import { Component } from '@angular/core';
import { MdbCalendarEvent, startOfDay, endOfDay } from 'mdb-angular-calendar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  events: MdbCalendarEvent[] = [
    {
      id: 'event1',
      summary: 'JS Conference',
      startDate: startOfDay(new Date()),
      endDate: endOfDay(new Date()),
      color: {
        background: '#cfe0fc',
        foreground: '#0a47a9',
      },
    },
    { id: 'event2',
      summary: 'Vue Meetup',
      startDate: startOfDay(new Date(new Date().setDate(new Date().getDate() + 1))),
      endDate: endOfDay(new Date(new Date().setDate(new Date().getDate() + 5))),
      color: {
        background: '#ebcdfe',
        foreground: '#6e02b1',
      },
    },
    {
      id: 'event3',
      summary: 'Angular Meetup',
      description:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() - 3)).setHours(10,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 3)).setHours(14,0,0,0)),
      color: {
        background: '#c7f5d9',
        foreground: '#0b4121',
      },
    },
    {
      id: 'event4',
      summary: 'React Meetup',
      startDate: startOfDay(new Date(new Date().setDate(new Date().getDate() + 5))),
      endDate: endOfDay(new Date(new Date().setDate(new Date().getDate() + 8))),
      color: {
        background: '#fdd8de',
        foreground: '#790619',
      },
    },
    {
      id: 'event5',
      summary: 'Meeting',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() + 1)).setHours(8,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 1)).setHours(12,0,0,0)),
      color: {
        background: '#cfe0fc',
        foreground: '#0a47a9',
      },
    },
    {
      id: 'event6',
      summary: 'Call',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() + 2)).setHours(11,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 2)).setHours(14,0,0,0)),
      color: {
        background: '#292929',
        foreground: '#f5f5f5',
      },
    }
  ];
};

Blur

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

March 2025
Month
SunMonTueWedThuFriSat
23
24
25
26
27
28
1
2
Angular Meetup
3
 
4
 
5
 
JS Conference
6
 
Vue Meetup
Meeting
7
 
 
Call
8
 
 
9
 
Vue Meetup
10
 
 
React Meetup
11
 
 
 
12
 
 
 
13
 
 
 
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
<mdb-calendar [blur]="true" [events]="events"></mdb-calendar>
import { Component } from '@angular/core';
import { MdbCalendarEvent, startOfDay, endOfDay } from 'mdb-angular-calendar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  events: MdbCalendarEvent[] = [
    {
      id: 'event1',
      summary: 'JS Conference',
      startDate: startOfDay(new Date()),
      endDate: endOfDay(new Date()),
      color: {
        background: '#cfe0fc',
        foreground: '#0a47a9',
      },
    },
    { id: 'event2',
      summary: 'Vue Meetup',
      startDate: startOfDay(new Date(new Date().setDate(new Date().getDate() + 1))),
      endDate: endOfDay(new Date(new Date().setDate(new Date().getDate() + 5))),
      color: {
        background: '#ebcdfe',
        foreground: '#6e02b1',
      },
    },
    {
      id: 'event3',
      summary: 'Angular Meetup',
      description:
        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() - 3)).setHours(10,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 3)).setHours(14,0,0,0)),
      color: {
        background: '#c7f5d9',
        foreground: '#0b4121',
      },
    },
    {
      id: 'event4',
      summary: 'React Meetup',
      startDate: startOfDay(new Date(new Date().setDate(new Date().getDate() + 5))),
      endDate: endOfDay(new Date(new Date().setDate(new Date().getDate() + 8))),
      color: {
        background: '#fdd8de',
        foreground: '#790619',
      },
    },
    {
      id: 'event5',
      summary: 'Meeting',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() + 1)).setHours(8,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 1)).setHours(12,0,0,0)),
      color: {
        background: '#cfe0fc',
        foreground: '#0a47a9',
      },
    },
    {
      id: 'event6',
      summary: 'Call',
      startDate: new Date(new Date(new Date().setDate(new Date().getDate() + 2)).setHours(11,0,0,0)),
      endDate: new Date(new Date(new Date().setDate(new Date().getDate() + 2)).setHours(14,0,0,0)),
      color: {
        background: '#292929',
        foreground: '#f5f5f5',
      },
    }
  ];
}

Calendar - API

Installation

To install and configure the plugin follow our Plugins Installation Guide. Please remember to update all the plugin names and import paths. You can find all the necessary information in the Import section. 

npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/calendar

Import

import { MdbCalendarModule } from 'mdb-angular-calendar';
…
@NgModule ({
  ...
  imports: [MdbCalendarModule],
  ...
})
@import 'mdb-angular-calendar/scss/calendar.scss';

Inputs

Name Type Default Description
mondayFirst Boolean false Changes first day of week to monday.
defaultView MdbCalendarView 'month' Defines default view.
twelveHour Boolean false Changes time mode from 24h to 12h.
defaultDate Date new Date() Defines the default starting date.
readonly Boolean false Disables event's edition.
events MdbCalendarEvent[] - Array of calendar events
tooltips Boolean true Enables tooltips.
navigation Boolean true Enables navigation.
viewSelect Boolean true Enables viewSelect.
addEventButton Boolean true Enables addEventButton.

Outputs

Name Type Description
prev EventEmitter<any> Emitted when the prev method triggers.
next EventEmitter<any> Emitted when the next method triggers.
today EventEmitter<any> Emitted when the today method triggers.
viewChanged EventEmitter<MdbCalendarView> Emitted when the changeView method triggers.
eventAdded EventEmitter<MdbCalendarEvent> Emitted when a new event is added. Returns a new event object.
eventEdited EventEmitter<MdbCalendarEvent> Emitted when any event is editted. Returns an editted event object.
eventDeleted EventEmitter<MdbCalendarEvent> Emitted when any event is deleted. Returns a deleted event object. 
<mdb-calendar
  [events]="events"
  (eventAdded)="onEventAdd($event)"
  (next)="onNext()"
></mdb-calendar>
import { Component } from '@angular/core';
import { MdbCalendarEvent, endOfDay, startOfDay } from 'mdb-angular-calendar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  events: MdbCalendarEvent[] = [
    {
      id: 'event1',
      summary: 'JS Conference',
      startDate: startOfDay(new Date()),
      endDate: endOfDay(new Date()),
      color: {
        background: '#cfe0fc',
        foreground: '#0a47a9',
      },
    },
    {
      id: 'event2',
      summary: 'Vue Meetup',
      startDate: startOfDay(
        new Date(new Date().setDate(new Date().getDate() + 1))
      ),
      endDate: endOfDay(new Date(new Date().setDate(new Date().getDate() + 5))),
      color: {
        background: '#ebcdfe',
        foreground: '#6e02b1',
      },
    },
  ];

  onEventAdd(event: MdbCalendarEvent) {
    console.log('event added: ', event);
  }

  onNext() {
    console.log('next clicked');
  }
}

Methods

Name Description Example
prevPeriod Changes the period of time to previous. calendar.prevPeriod()
nextPeriod Changes the period of time to next. calendar.nextPeriod()
todayPeriod Changes the period of time to today. calendar.todayPeriod()
changeView(view: MdbCalendarView) Changes the view. You can choose between 'list', 'month' or 'week' calendar.changeView('list')
addEvent(event:MdbCalendarEvent) Adds new event to the calendar. calendar.addEvent(event)
removeEvents Removes all events from the calendar. calendar.removeEvents() 
<mdb-calendar #calendar [events]="events"></mdb-calendar>
<button class="btn btn-primary" (click)="removeEvents()">
  Remove all events
</button>
import { Component, ViewChild } from '@angular/core';
import {
  MdbCalendarComponent,
  MdbCalendarEvent,
  endOfDay,
  startOfDay,
} from 'mdb-angular-calendar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  @ViewChild('calendar', { static: true }) calendar!: MdbCalendarComponent;

  events: MdbCalendarEvent[] = [
    {
      id: 'event1',
      summary: 'JS Conference',
      startDate: startOfDay(new Date()),
      endDate: endOfDay(new Date()),
      color: {
        background: '#cfe0fc',
        foreground: '#0a47a9',
      },
    },
    {
      id: 'event2',
      summary: 'Vue Meetup',
      startDate: startOfDay(
        new Date(new Date().setDate(new Date().getDate() + 1))
      ),
      endDate: endOfDay(new Date(new Date().setDate(new Date().getDate() + 5))),
      color: {
        background: '#ebcdfe',
        foreground: '#6e02b1',
      },
    },
  ];

  removeEvents(): void {
    this.calendar.removeEvents();
  }
}

Advanced types

MdbCalendarOptions

Name Type Default Description
weekdays Array ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] Defines weekdays displayed names.
months Array ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] Defines months displayed names.
monthsShort Array ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] Defines shortened months displayed names.
todayCaption String 'today' Defines caption for today.
monthCaption String 'month' Defines caption for month button.
weekCaption String 'week' Defines caption for week button.
listCaption String 'list' Defines caption for list button.
allDayCaption String 'All day event' Defines caption for all day event checkbox.
noEventsCaption String 'No events' Defines caption for empty list view.
summaryCaption String 'Summary' Defines caption for summary input label.
descriptionCaption String 'Description' Defines caption for description input label.
startCaption String 'Start' Defines caption for start input label.
endCaption String 'End' Defines caption for end input label.
addCaption String 'Add' Defines caption for add event button.
deleteCaption String 'Remove' Defines caption for remove event button.
editCaption String 'Edit' Defines caption for edit event button.
closeCaption String 'Close' Defines caption for close button.
addEventModalCaption String 'Add an event' Defines caption for add event modal title.
editEventModalCaption String 'Edit an event' Defines caption for edit event modal title.
addEventButtonCaption String 'Add event' Defines caption for add event button.

MdbCalendarEvent

interface MdbCalendarEvent {
  id?: string;
  order?: number;
  summary: string;
  startDate: Date | string;
  endDate: Date | string;
  startData?: {
    date: string;
    day: number | string;
    month: number | string;
    string: string;
    time: string;
    year: number;
  };
  endData?: {
    date: string;
    day: number | string;
    month: number | string;
    string: string;
    time: string;
    year: number;
  };
  eventStart?: boolean;
  eventEnd?: boolean;
  description?: string;
  longEvent?: boolean;
  color: {
    background: string;
    foreground?: string;
  };
  allDay?: boolean;
  oneDay?: boolean;
}

MdbCalendarView

type MdbCalendarView = 'month' | 'list' | 'week';