@arjentienkamp/ngx-mat-calendar NPM

Angular Calendar Component

This component displays a calendar in your Angular (Material) project.

Demo

Live demo

Features

Display a day/week/month calendar with your events
Navigate between days/weeks/months, jump to today
Use a custom component for rendering events
Uses colors of your Material theme
Keyboard shortcuts
Call a function on event click
Call a function on add button click

Requirements

Angular 13+ (tested on Angular 13) + Angular Material + Typescript
Angular Material Theme within your app (https://material.angular.io)

Installation and minimal setup

npm install @arjentienkamp/ngx-mat-calendar

Import the module:

@NgModule({
    imports: [
        NgxMatCalendarModule
    ]
})

Include the global SCSS file in your Angular app:

@import '../node_modules/@arjentienkamp/ngx-mat-calendar/src/lib/styles/_styles.scss';

Material basics

If you have not done this already, make sure to include the styles from Angular Material to your app's stylesheet, and also include the Roboto and Material Icons fonts in your app's index.html (alternatively, read how to setup Angular Material in your project here):

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Also make sure the <body> tag has the mat-typoghrapy class:

<body class="mat-typography">

Calendar setup

Initiate default options:

this.calendarOptions = new CalendarOptions();

Or, change default options:

this.calendarOptions = new CalendarOptions({
    enableAddEventButton: false,
    view: WEEK
    // see CalendarOptions class for full list of options
});

Add the component to the template:

<ngx-mat-calendar
    [options]="calendarOptions"
    [events]="events"
    [selectedDate]="date"
    (eventClick)="handleEventClick($event)"
    (dateChange)="handleDateChange($event)"
    (addButtonClick)="handleAddButtonClick()">
</ngx-mat-calendar>

Inputs

Property	Description	Type	Required
options	options have to be passed here	CalendarOptions	true
events	array of events (i.e from API or other datasource)	CalendarEvent[]	true
selectedDate	the date for initiating the calendar	Date	true

Outputs

Property	Description	Type
eventClick	emits when event is clicked	`EventEmitter<CalendarEvent>`
dateChange	emits on date change	`EventEmitter<Date>`
addButtonClick	emits on add button click	`EventEmitter<any>`