ng add angular-calendar

<mwl-calendar-month-view *ngSwitchCase="CalendarView.Month" 
[viewDate]="viewDate" [events]="events" 
[refresh]="refresh" [activeDayIsOpen]="activeDayIsOpen" 
(dayClicked)="dayClicked($event.day)" 
(eventClicked)="handleEvent('Clicked', $event.event)"
(eventTimesChanged)="eventTimesChanged($event)">
</mwl-calendar-month-view>

import {Component,ChangeDetectionStrategy,ViewChild,TemplateRef} from '@angular/core';
import {startOfDay,endOfDay,subDays,addDays,endOfMonth,isSameDay,isSameMonth,addHours} from 'date-fns';
import { Subject } from 'rxjs';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import {CalendarEvent,CalendarEventAction,CalendarEventTimesChangedEvent,CalendarView} from 'angular-calendar';

const colors: any = {
red: {
primary: '#ad2121',
secondary: '#FAE3E3',
},
blue: {
primary: '#1e90ff',
secondary: '#D1E8FF',
},
yellow: {
primary: '#e3bc08',
secondary: '#FDF1BA',
},
};

@Component({
selector: 'mwl-demo-component',
changeDetection: ChangeDetectionStrategy.OnPush,
styleUrls: ['styles.css'],
templateUrl: 'template.html',
})
export class DemoComponent {
@ViewChild('modalContent', { static: true }) modalContent: TemplateRef;

view: CalendarView = CalendarView.Month;

CalendarView = CalendarView;

viewDate: Date = new Date();

modalData: {
action: string;
event: CalendarEvent;
};

actions: CalendarEventAction[] = [
{
label: '',
a11yLabel: 'Edit',
onClick: ({ event }: { event: CalendarEvent }): void => {
this.handleEvent('Edited', event);
},
},
{
label: '',
a11yLabel: 'Delete',
onClick: ({ event }: { event: CalendarEvent }): void => {
this.events = this.events.filter((iEvent) => iEvent !== event);
this.handleEvent('Deleted', event);
},
},
];

refresh: Subject = new Subject();

  events: CalendarEvent[] = [
  {
  start: subDays(startOfDay(new Date()), 1),
  end: addDays(new Date(), 1),
  title: 'A 3 day event',
  color: colors.red,
  actions: this.actions,
  allDay: true,
  resizable: {
  beforeStart: true,
  afterEnd: true,
  },
  draggable: true,
  },
  {
  start: startOfDay(new Date()),
  title: 'An event with no end date',
  color: colors.yellow,
  actions: this.actions,
  },
  {
  start: subDays(endOfMonth(new Date()), 3),
  end: addDays(endOfMonth(new Date()), 3),
  title: 'A long event that spans 2 months',
  color: colors.blue,
  allDay: true,
  },
  {
  start: addHours(startOfDay(new Date()), 2),
  end: addHours(new Date(), 2),
  title: 'A draggable and resizable event',
  color: colors.yellow,
  actions: this.actions,
  resizable: {
  beforeStart: true,
  afterEnd: true,
  },
  draggable: true,
  },
  ];

  activeDayIsOpen: boolean = true;

  constructor(private modal: NgbModal) {}

  dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
  if (isSameMonth(date, this.viewDate)) {
  if (
  (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
  events.length === 0
  ) {
  this.activeDayIsOpen = false;
  } else {
  this.activeDayIsOpen = true;
  }
  this.viewDate = date;
  }
  }

  eventTimesChanged({
  event,
  newStart,
  newEnd,
  }: CalendarEventTimesChangedEvent): void {
  this.events = this.events.map((iEvent) => {
  if (iEvent === event) {
  return {
  ...event,
  start: newStart,
  end: newEnd,
  };
  }
  return iEvent;
  });
  this.handleEvent('Dropped or resized', event);
  }

  handleEvent(action: string, event: CalendarEvent): void {
  this.modalData = { event, action };
  this.modal.open(this.modalContent, { size: 'lg' });
  }

  addEvent(): void {
  this.events = [
  ...this.events,
  {
  title: 'New event',
  start: startOfDay(new Date()),
  end: endOfDay(new Date()),
  color: colors.red,
  draggable: true,
  resizable: {
  beforeStart: true,
  afterEnd: true,
  },
  },
  ];
  }

  deleteEvent(eventToDelete: CalendarEvent) {
  this.events = this.events.filter((event) => event !== eventToDelete);
  }

  setView(view: CalendarView) {
  this.view = view;
  }

  closeOpenMonthViewDay() {
  this.activeDayIsOpen = false;
  }
  }

npm uninstall angular-calendar