Angular Full calendar View

I'm using an angular full calendar in my project and I have tried this https://mattlewis92.github.io/angular-calendar/#/kitchen-sink.
but in this, I'm getting some errors.

here is my HTML code

 <div class="row text-center"> <div class="col-md-4"> <div class="btn-group"> <div class="btn btn-primary" mwlCalendarPreviousView [view]="view" [(viewDate)]="viewDate" (viewDateChange)="closeOpenMonthViewDay()" > Previous </div> <div class="btn btn-outline-secondary" mwlCalendarToday [(viewDate)]="viewDate" > Today </div> <div class="btn btn-primary" mwlCalendarNextView [view]="view" [(viewDate)]="viewDate" (viewDateChange)="closeOpenMonthViewDay()" > Next </div> </div> </div> <div class="col-md-4"> <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3> </div> <div class="col-md-4"> <div class="btn-group"> <div class="btn btn-primary" (click)="setView(CalendarView.Month)" [class.active]="view === CalendarView.Month" > Month </div> <div class="btn btn-primary" (click)="setView(CalendarView.Week)" [class.active]="view === CalendarView.Week" > Week </div> <div class="btn btn-primary" (click)="setView(CalendarView.Day)" [class.active]="view === CalendarView.Day" > Day </div> </div> </div> </div> <br /> <div [ngSwitch]="view"> <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> <mwl-calendar-week-view *ngSwitchCase="CalendarView.Week" [viewDate]="viewDate" [events]="events" [refresh]="refresh" (eventClicked)="handleEvent('Clicked', $event.event)" (eventTimesChanged)="eventTimesChanged($event)" > </mwl-calendar-week-view> <mwl-calendar-day-view *ngSwitchCase="CalendarView.Day" [viewDate]="viewDate" [events]="events" [refresh]="refresh" (eventClicked)="handleEvent('Clicked', $event.event)" (eventTimesChanged)="eventTimesChanged($event)" > </mwl-calendar-day-view> </div> <!-- Everything you see below is just for the demo, you don't need to include it in your app --> <br /><br /><br /> <h3> Edit events <button class="btn btn-primary float-right" (click)="addEvent()"> Add new </button> <div class="clearfix"></div> </h3> <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>Title</th> <th>Primary color</th> <th>Secondary color</th> <th>Starts at</th> <th>Ends at</th> <th>Remove</th> </tr> </thead> <tbody> <tr *ngFor="let event of events"> <td> <input type="text" class="form-control" [(ngModel)]="event.title" (keyup)="refresh.next()" /> </td> <td> <input type="color" [(ngModel)]="event.color.primary" (change)="refresh.next()" /> </td> <td> <input type="color" [(ngModel)]="event.color.secondary" (change)="refresh.next()" /> </td> <td> <input class="form-control" type="text" mwlFlatpickr [(ngModel)]="event.start" (ngModelChange)="refresh.next()" [altInput]="true" [convertModelValue]="true" [enableTime]="true" dateFormat="Y-m-dTH:i" altFormat="F j, Y H:i" placeholder="Not set" /> </td> <td> <input class="form-control" type="text" mwlFlatpickr [(ngModel)]="event.end" (ngModelChange)="refresh.next()" [altInput]="true" [convertModelValue]="true" [enableTime]="true" dateFormat="Y-m-dTH:i" altFormat="F j, Y H:i" placeholder="Not set" /> </td> <td> <button class="btn btn-danger" (click)="deleteEvent(event)"> Delete </button> </td> </tr> </tbody> </table> </div> <ng-template #modalContent let-close="close"> <div class="modal-header"> <h5 class="modal-title">Event action occurred</h5> <button type="button" class="close" (click)="close()"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div> Action: <pre>{{ modalData?.action }}</pre> </div> <div> Event: <pre>{{ modalData?.event | json }}</pre> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-outline-secondary" (click)="close()"> OK </button> </div> </ng-template> 

Here is my component.ts code

import { 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', }, }; // declare let $:any; // declare var jQuery: any; @Component({ selector: 'app-attendance', changeDetection: ChangeDetectionStrategy.OnPush, templateUrl: './attendance.component.html', styleUrls: ['./attendance.component.scss'] }) export class AttendanceComponent implements OnInit { @ViewChild('modalContent', { static: true }) modalContent!: TemplateRef<any>; view: CalendarView = CalendarView.Month; CalendarView = CalendarView; viewDate: Date = new Date(); modalData!: { action: string; event: CalendarEvent; }; actions: CalendarEventAction[] = [ { label: '<i class="fas fa-fw fa-pencil-alt"></i>', a11yLabel: 'Edit', onClick: ({ event }: { event: CalendarEvent }): void => { this.handleEvent('Edited', event); }, }, { label: '<i class="fas fa-fw fa-trash-alt"></i>', a11yLabel: 'Delete', onClick: ({ event }: { event: CalendarEvent }): void => { this.events = this.events.filter((iEvent) => iEvent !== event); this.handleEvent('Deleted', event); }, }, ]; refresh = new Subject<void>(); 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; 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; } 

here is my module.ts file

import { CalendarModule, DateAdapter } from 'angular-calendar'; import { adapterFactory } from 'angular-calendar/date-adapters/date-fns'; import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap'; import { FormsModule } from '@angular/forms'; imports: [ BrowserModule, CalendarModule.forRoot({ provide: DateAdapter, useFactory: adapterFactory, }), FormsModule, NgbModalModule ], 

I'm getting error message like this.

error TS2532: Object is possibly 'undefined'. [(ngModel)]="event.color.primary" Object is possibly 'undefined'. [(ngModel)]="event.color.secondary" Can't bind to 'altInput' since it isn't a known property of 'input'. [altInput]="true" Can't bind to 'enableTime' since it isn't a known property of 'input'. [enableTime]="true" Can't bind to 'convertModelValue' since it isn't a known property of 'input'. [convertModelValue]="true" 

can anyone help me out with these errors?