Angular Bootstrap Calendar

Angular Calendar - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

The Angular Bootstrap calendar plugin is an extension that allows you to create calendar functionality. Thanks to this plugin, you will be able to easily create, delete and manage events.

Live preview

Basic example

To update calendar events array dynamically, the mdb-calendar component uses Angular's change detection mechanism. Since Angular only checks if the array reference has changed, the component will not detect a change when you add a new event with the push method. Instead, you can use the spread operator like in examples below:

        
            
            <mdb-calendar
              [events]="events"
              eventEdited)="onEventEdit($event)"
              (eventAdded)="onEventAdd($event)"
              (eventDeleted)="onEventDelete($event)"
            >
            </mdb-calendar>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { startOfDay, endOfDay } from 'date-fns';
            import { CalendarEvent } from 'mdb-calendar';

            @Component({
              selector: 'calendar-example',
              templateUrl: './calendar-example.component.html',
              styleUrls: ['./calendar-example.component.css']
            })
            export class AppComponent {
              events: CalendarEvent[] = [
                {
                  id: 'mdb-calendar-event-1',
                  startDate: new Date(startOfDay(new Date())),
                  endDate: new Date(endOfDay(new Date(2019, 2, 9))),
                  name: 'Conference',
                  color: 'info',
                },
                {
                  id: 'mdb-calendar-event-2',
                  startDate: new Date(startOfDay(new Date())),
                  endDate: new Date(endOfDay(new Date())),
                  name: 'Meeting',
                  color: 'success'
                },
              ];

              generateUid() {
                const uid = Math.random().toString(36).substr(2, 9);
                return `mdb-calendar-event-${uid}`;
              }

              onEventEdit(event: CalendarEvent) {
                const oldEvent = this.events.findIndex( test => test.id === event.id);
                this.events[oldEvent] = event;
                this.events = [...this.events];
              }

              onEventAdd(event: CalendarEvent) {
                event.id = this.generateUid();
                this.events = [...this.events, event];
              }

              onEventDelete(deletedEvent: CalendarEvent) {
                const eventIndex = this.events.findIndex( event => event.id === deletedEvent.id);
                this.events.splice(eventIndex, 1);
                this.events = [...this.events];
              }
            }

Add events

You can listen to (eventAdded) output and update your events array with a new event.

        
            
            <mdb-calendar [events]="events" (eventAdded)="onEventAdd($event)"></mdb-calendar>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { startOfDay, endOfDay } from 'date-fns';
            import { CalendarEvent } from 'mdb-calendar';

            @Component({
              selector: 'calendar-example',
              templateUrl: './calendar-example.component.html',
              styleUrls: ['./calendar-example.component.css']
            })
            export class AppComponent {
              events: CalendarEvent[] = [
                {
                  id: 'mdb-calendar-event-1',
                  startDate: new Date(startOfDay(new Date())),
                  endDate: new Date(endOfDay(new Date(2019, 2, 9))),
                  name: 'Conference',
                  color: 'info',
                },
                {
                  id: 'mdb-calendar-event-2',
                  startDate: new Date(startOfDay(new Date())),
                  endDate: new Date(endOfDay(new Date())),
                  name: 'Meeting',
                  color: 'success'
                },
              ];

              generateUid() {
                const uid = Math.random().toString(36).substr(2, 9);
                return `mdb-calendar-event-${uid}`;
              }

              onEventAdd(event: CalendarEvent) {
                event.id = this.generateUid();
                this.events = [...this.events, event];
              }
            }

Edit events

You can listen to (eventEdited) output and update specific events in your events array.

        
            
            <mdb-calendar [events]="events" (eventEdited)="onEventEdit($event)"></mdb-calendar>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { startOfDay, endOfDay } from 'date-fns';
            import { CalendarEvent } from 'mdb-calendar';

            @Component({
              selector: 'calendar-example',
              templateUrl: './calendar-example.component.html',
              styleUrls: ['./calendar-example.component.css']
            })
            export class AppComponent {
              events: CalendarEvent[] = [
                {
                  id: 'mdb-calendar-event-1',
                  startDate: new Date(startOfDay(new Date())),
                  endDate: new Date(endOfDay(new Date(2019, 2, 9))),
                  name: 'Conference',
                  color: 'info',
                },
                {
                  id: 'mdb-calendar-event-2',
                  startDate: new Date(startOfDay(new Date())),
                  endDate: new Date(endOfDay(new Date())),
                  name: 'Meeting',
                  color: 'success'
                },
              ];

              onEventEdit(event: CalendarEvent) {
                const oldEvent = this.events.findIndex( test => test.id === event.id);
                this.events[oldEvent] = event;
                this.events = [...this.events];
              }
            }

Delete events

You can listen to (eventDeleted) output and update your events array accordingly.

        
            
            <mdb-calendar [events]="events" (eventDeleted)="onEventDelete($event)"></mdb-calendar>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { startOfDay, endOfDay } from 'date-fns';
            import { CalendarEvent } from 'mdb-calendar';

            @Component({
              selector: 'calendar-example',
              templateUrl: './calendar-example.component.html',
              styleUrls: ['./calendar-example.component.css']
            })
            export class AppComponent {
              events: CalendarEvent[] = [
                {
                  id: 'mdb-calendar-event-1',
                  startDate: new Date(startOfDay(new Date())),
                  endDate: new Date(endOfDay(new Date(2019, 2, 9))),
                  name: 'Conference',
                  color: 'info',
                },
                {
                  id: 'mdb-calendar-event-2',
                  startDate: new Date(startOfDay(new Date())),
                  endDate: new Date(endOfDay(new Date())),
                  name: 'Meeting',
                  color: 'success'
                },
              ];

              onEventDelete(deletedEvent: CalendarEvent) {
                const eventIndex = this.events.findIndex( event => event.id === deletedEvent.id);
                this.events.splice(eventIndex, 1);
                this.events = [...this.events];
              }
            }

Options usage 

        
            
              <mdb-calendar
                [events]="events"
                [options]="calendarOptions"
                (eventEdited)="onEventEdit($event)"
                (eventAdded)="onEventAdd($event)"
                (eventDeleted)="onEventDelete($event)"
              >
              </mdb-calendar>
            
        
    
        
            
              import { Component } from '@angular/core';
              import { startOfDay, endOfDay } from 'date-fns';
              import { CalendarEvent, MdbCalendarOptions } from 'mdb-calendar';
              @Component({
              selector: 'calendar-example',
              templateUrl: './calendar-example.component.html',
              styleUrls: ['./calendar-example.component.css']
              })
              export class AppComponent {
                calendarOptions: MdbCalendarOptions = {
                  firstDayOfWeek: 'Monday',
                  monthViewBtnTxt: 'Month view',
                  weekViewBtnTxt: 'Week view',
                  listViewBtnTxt: 'List view',
                  todayBtnTxt: 'Go to today',
                  eventAddTitle: 'Custom add modal title',
                  eventEditTitle: 'Custom edit modal title',
                  eventCancelBtnTxt: 'Close',
                  eventAddBtnTxt: 'Save new event',
                  eventEditBtnTxt: 'Update event data',
                  eventDeleteBtnTxt: 'Delete event'
                };

                events: CalendarEvent[] = [
                  {
                    id: 'mdb-calendar-event-1',
                    startDate: new Date(startOfDay(new Date())),
                    endDate: new Date(endOfDay(new Date(2019, 2, 9))),
                    name: 'Conference',
                    color: 'info',
                  },
                  {
                    id: 'mdb-calendar-event-2',
                    startDate: new Date(startOfDay(new Date())),
                    endDate: new Date(endOfDay(new Date())),
                    name: 'Meeting',
                    color: 'success'
                  },
                ];

                generateUid() {
                  const uid = Math.random().toString(36).substr(2, 9);
                  return `mdb-calendar-event-${uid}`;
                }

                onEventEdit(event: CalendarEvent) {
                  const oldEvent = this.events.findIndex( test => test.id === event.id);
                  this.events[oldEvent] = event;
                  this.events = [...this.events];
                }

                onEventAdd(event: CalendarEvent) {
                  event.id = this.generateUid();
                  this.events = [...this.events, event];
                }

                onEventDelete(deletedEvent: CalendarEvent) {
                  const eventIndex = this.events.findIndex( event => event.id === deletedEvent.id);
                  this.events.splice(eventIndex, 1);
                  this.events = [...this.events];
                }
              }

Events colors

Here is a list of available events colors:

  • info
  • success
  • warning
  • danger
  • primary
  • secondary

Installation guide

Step 1: Create a new Angular application using the Angular CLI command:

ng new application-name --style=scss --routing=false

Step 2: Download this plugin from your user dashboard

Step 3: Extract the downloaded archive from Step 2 and copy the mdb-calendar-{version-number}.tgz file to your application root directory

Step 4: Install the mdb-calendar-{version-number}.tgz package in your application by executing the below command in the application's terminal:

npm install mdb-calendar-{version-number.tgz} --save

For example, the installation command should look like the following: npm install mdb-calendar-8.0.0.tgz --save

Step 5: Follow the Quickstart Guide to add MDB Angular Free or MDB Angular Pro (depending on which version you're using) to the application

Step 6: Import the MdbCalendarModule in the app.module.ts file

Step 7: Copy the basic example from this site and enjoy your new plugin!

Step 1: Download this plugin from your user dashboard

Step 2: Extract the downloaded archive from Step 1 and copy the mdb-calendar-{version-number}.tgz file to your application root directory

Step 3: Install the mdb-calendar-{version-number}.tgz package in your application by executing the below command in the application's terminal:

npm install mdb-calendar-{version-number.tgz} --save

For example, the installation command should look like the following: npm install mdb-calendar-8.0.0.tgz --save

Step 4: Follow the Quickstart Guide to add MDB Angular Free or MDB Angular Pro (depending on which version you're using) to the application

Step 5: Import the MdbCalendarModule in the app.module.ts file

Step 6: Copy the basic example from this site and enjoy your new plugin!

Angular Calendar - API

In this section you will find informations about the required modules and the available inputs, outputs, methods and events of the calendar plugin.

Download

This plugin requires a purchase.

Buy Calendar plugin

Components

MdbCalendarComponent

Selector: mdb-calendar

Type: MdbCalendarComponent

Inputs

Name Type Default Description Example
defaultView 'month' / 'week' / 'list' 'month' Sets display of calendar [defaultView]="week"
events CalendarEvent[] - Array of calendar events [events] = [ { id: 'mdb-calendar-event-1', startDate: new Date(startOfDay(new Date())), endDate: new Date(endOfDay(new Date(2019, 2, 9))), name: 'Conference', color: 'info', }, ];
editable boolean true Specifies whether events should be editable [editable]="false"
months string[] [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]; Array of month names [months] = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ];
monthsShort string[] [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]; Array of months names [monthsShort] = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ];
weekDays string[] [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ]; Array of week days names [weekDays] = [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ];
weekDaysShort string[] ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; Array of week days short names [weekDaysShort] = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

Outputs

Name Type Description Example
eventAdded EventEmitter<CalendarEvent> Event fired when new event is added (eventAdded)="onEventAdd($event)"
eventDeleted EventEmitter<CalendarEvent> Event fired when event is deleted (eventDeleted)="onEventDelete($event)"
eventEdited EventEmitter<CalendarEvent> Event fired when event is edited (eventEdited)="onEventEdit($event)"
listChanged EventEmitter<{startDate: Date, endDate: Date}> Event fired on date change in list view (listChanged)="onListChange($event)"
monthChanged EventEmitter<{index: number, month: string, year: number}> Event fired on date change in month view (monthChanged)="onMonthChange($event)"
weekChanged EventEmitter<{startDate: Date, endDate: Date}> Event fired on date change in week view (weekChanged)="onWeekChange($event)"
CalendarEvent

Calendar event properties:

Name Type Description
id string Unique event id
name string Event name
startDate Date Event start date
endDate Date Event end date
color string Event color class

Options

Name Type Default Description Example
eventAddBtnTxt string 'Add' Text content of confirmation button when adding new event eventAddBtnTxt: 'Your custom button text'
eventAddTitle string 'Add new event' Modal title when adding new event eventAddTitle: 'Your custom title'
eventCancelBtnTxt string 'Cancel' Text content of cancel button when adding new event eventCancelBtnTxt: 'Your custom button text'
eventDeleteBtnTxt string 'Delete' Text content of delete button when editing event eventDeleteBtnTxt: 'Your custom button text'
eventEditBtnTxt string 'Edit' Text content of confirmation button when editing event eventEditBtnTxt: 'Your custom button text'
eventEditTitle string 'Edit event' Modal title when editing event eventEditTitle: 'Your custom title'
firstDayOfWeek string 'Sunday' Specifies first day of week on the calendar firstDayOfWeek: 'Monday'
listViewBtnTxt string 'List' Text content of list view button listViewBtnTxt: 'Your custom button text'
monthViewBtnTxt string 'Month' Text content of month view button monthViewBtnTxt: 'Your custom button text'
todayBtnTxt string 'Today' Text content of today button todayBtnTxt: 'Your custom button text'
weekViewBtnTxt string 'Week' Text content of week view button weekViewBtnTxt: 'Your custom button text'

Methods

You can get access to tabs methods from another component. Add template reference variable to your mdb-calendar component in HTML file

<mdb-calendar #calendar></mdb-calendar>

Then in your typescript file use @ViewChild decorator to get access to MdbCalendar methods

@ViewChild('calendar', { static: true }) calendar: MdbCalendarComponent

Name Description Example
onViewChange Sets display for month/week/list this.calendar.onViewChange('week')