Event Calendar in Angular

In this article we discuss on how to easily implement event calendar in our angular application. For that first we need to install module. To install node module run below command in your command-prompt.

npm install --save angular-calendar date-fns

After run above command we need to add CSS in global in (src/style.css)

@import "../node_modules/angular-calendar/css/angular-calendar.css";

After adding CSS now we need to add module in our app.module.ts file. So we can use in any of our component.

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';

  imports: [
      provide: DateAdapter,
      useFactory: adapterFactory
export class AppModule {}

Let’s create basic example for the Event calendar.
1) Main Module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CalendarModule } from 'angular-calendar';
import { CalUtilsModule } from '../demo-utils/module';
import { CalComponent } from './component';

  imports: [
  declarations: [CalComponent],
  exports: [CalComponent]
export class CalModule {}

2) CalComponent

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CalendarEvent, CalendarMonthViewDay } from 'angular-calendar';
import { colors } from '../demo-utils/colors';

  selector: 'first-calview',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: 'template.html'
export class CalModule {
  viewDate: Date = new Date();

  events: Array> = [
      title: 'Increments badge total on the day cell',
      color: colors.yellow,
      start: new Date(),
      meta: {
        incrementsBadgeTotal: true
      title: 'Does not increment the badge total on the day cell',
      color: colors.blue,
      start: new Date(),
      meta: {
        incrementsBadgeTotal: false

  beforeMonthViewRender({ body }: { body: CalendarMonthViewDay[] }): void {
    body.forEach(day => {
      day.badgeTotal = day.events.filter(
        event => event.meta.incrementsBadgeTotal

3) In Our Template File


You can get output like in below screenshot.

Refer More example Click here.

Spread the love