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.

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

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

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

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

        
            
            <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ń'],
                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',
              }
            };

Default date

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

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

        
            
            <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',
                  },
                }
              ];
            }

Blur

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

        
            
        <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

Import

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

Inputs

Name Type Default Description
mondayFirst Boolean false Changes first day of week to monday.
defaultView String '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 CalendarEvent[] - Array of calendar events

Options

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.

Outputs

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

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
              })
              export class AppComponent {
                onEventAdd(event): void {
                  console.log(event);
                }
              }

Methods

Name Parameters Description
prevPeriod - Changes the period of time to previous.
nextPeriod - Changes the period of time to next.
todayPeriod - Changes the period of time to today.
changeView view Changes the view.
addEvent MdbCalendarEvent Adds new event to the calendar.
removeEvents - Removes all events from the calendar. 
        
            
            <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 } from 'mdb-angular-calendar';

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

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