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';

@NgModule({
  ......................
  imports: [
    BrowserAnimationsModule,
    CalendarModule.forRoot({
      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';

@NgModule({
  imports: [
    CommonModule,
    CalendarModule.forRoot(),
    DemoUtilsModule
  ],
  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';

@Component({
  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
      ).length;
    });
  }
}

3) In Our Template File


<mwl-calendar-month-view
  [viewDate]="viewDate"
  [events]="events"
  [activeDayIsOpen]="true"
  (beforeViewRender)="beforeMonthViewRender($event)">
</mwl-calendar-month-view>

You can get output like in below screenshot.

Refer More example Click here.

Spread the love
  • 39
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •