Rate these docs

Angular Bootstrap calendar

Angular Calendar - Bootstrap 4 & Material Design

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, mdb-calendar component uses the Angular change detection mechanism. Since Angular only checks if array reference has changed, component will not detect a change when you add new event with push method. Instead, you can use spread operator like in examples below:


          <mdb-calendar [events]="events" (eventEdited)="onEventEdit($event)" (eventAdded)="onEventAdd($event)" (eventDeleted)="onEventDelete($event)"></mdb-calendar>
        

          import { Component, OnInit } 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 implements OnInit {

            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}`;
            }

            ngOnInit() {
            }

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


          <mdb-calendar [events]="events" (eventAdded)="onEventAdd($event)"></mdb-calendar>
        

          import { Component, OnInit } 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 implements OnInit {

            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}`;
            }

            ngOnInit() {
            }

            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, OnInit } 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 implements OnInit {

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

            ngOnInit() {
            }

            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, OnInit } 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 implements OnInit {

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

            ngOnInit() {
            }

            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, OnInit } 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 implements OnInit {

                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}`;
                }

                ngOnInit() {
                }

                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

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Angular Calendar - API

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


Download

This plugin requires a purchase.

Buy Calendar plugin - $9

Components

MdbCalendarComponent

Selector: mdb-calendar

Type: MdbCalendarComponent


Inputs

Name Type Default Description Example
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)"
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'