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ń'],
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.
<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',
},
}
];
}
Disabled modules
Some of the modules can be disabled via inputs. Here's an example without tooltips and some toolbar action elements:
<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.
<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';