Ionic2-calender Integration in Ionic5 version

**home.page.ts** 
  import { Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
import { NavController, IonModal, AlertController } from '@ionic/angular';
import { ModalController } from '@ionic/angular';
import { Account } from 'src/model/account.model';
import { AccountService } from '../../services/auth/account.service';
import { LoginService } from '../../services/login/login.service';
import { HttpClient} from '@angular/common/http';
import { HttpResponse, HttpHeaders } from '@angular/common/http';
import { filter, map } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { CalendarComponent } from 'ionic2-calendar';
import { formatDate } from '@angular/common';
import { ViewChild } from '@angular/core';

  
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  account: Account;
  type= 'task'
  map_detail: any; 
  name: string;
  eventSource = [];
  viewTitle: string;
  calendar = {
    mode: 'month',
    currentDate: new Date(),
  };
   selectedDate: Date;
     @ViewChild(CalendarComponent) myCal: CalendarComponent;

  constructor(public navController: NavController,  private alertCtrl: AlertController, @Inject(LOCALE_ID) private locale: string, 
  private modalCtrl: ModalController,private accountService: AccountService, private loginService: LoginService,public httpClient: HttpClient) {}

  async ngOnInit() {
    this.accountService.identity().then(account => {
      if (account === null) {
        this.goBackToHomePage();
      } else {
        this.account = account;
      }
    });
     
  }  
  next() {
    this.myCal.slideNext();
  }
  back() {
    this.myCal.slidePrev();
  }
  onViewTitleChanged(title) {
    this.viewTitle = title;
  }
  async onEventSelected(event) {
    let start = formatDate(event.startTime, 'medium', this.locale);
    let end = formatDate(event.endTime, 'medium', this.locale);
    const alert = await this.alertCtrl.create({
      header: event.title,
      subHeader: event.desc,
      message: 'From: ' + start + '<br><br>To: ' + end,
      buttons: ['OK'],
    });
    alert.present();
  }
  createRandomEvents() {
    var events = [];
    for (var i = 0; i < 50; i += 1) {
      var date = new Date();
      var eventType = Math.floor(Math.random() * 2);
      var startDay = Math.floor(Math.random() * 90) - 45;
      var endDay = Math.floor(Math.random() * 2) + startDay;
      var startTime;
      var endTime;
      if (eventType === 0) {
        startTime = new Date(
          Date.UTC(
            date.getUTCFullYear(),
            date.getUTCMonth(),
            date.getUTCDate() + startDay
          )
        );
        if (endDay === startDay) {
          endDay += 1;
        }
        endTime = new Date(
          Date.UTC(
            date.getUTCFullYear(),
            date.getUTCMonth(),
            date.getUTCDate() + endDay
          )
        );
        events.push({
          title: 'All Day - ' + i,
          startTime: startTime,
          endTime: endTime,
          allDay: true,
        });
      } else {
        var startMinute = Math.floor(Math.random() * 24 * 60);
        var endMinute = Math.floor(Math.random() * 180) + startMinute;
        startTime = new Date(
          date.getFullYear(),
          date.getMonth(),
          date.getDate() + startDay,
          0,
          date.getMinutes() + startMinute
        );
        endTime = new Date(
          date.getFullYear(),
          date.getMonth(),
          date.getDate() + endDay,
          0,
          date.getMinutes() + endMinute
        );
        events.push({
          title: 'Event - ' + i,
          startTime: startTime,
          endTime: endTime,
          allDay: false,
        });
      }
    }
    this.eventSource = events;
  }
  removeEvents() {
    this.eventSource = [];
  }
  isAuthenticated() {
    return this.accountService.isAuthenticated();
  }
  logout() {
    this.loginService.logout();
    this.goBackToHomePage();
  }

  private goBackToHomePage(): void {
    this.navController.navigateBack('');
  }
  openperson(){
    this.navController.navigateForward('profile')
  }
}





**home.page.html**          
 <ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      Ionic Calendar
    </ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="openCalModal()">
        <ion-icon name="add" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
 <ion-content>
  <ion-segment [(ngModel)]="calendar.mode">
    <ion-segment-button value="month">
      <ion-label>Month</ion-label>
    </ion-segment-button>
    <ion-segment-button value="week">
      <ion-label>Week</ion-label>
    </ion-segment-button>
    <ion-segment-button value="day">
      <ion-label>Day</ion-label>
    </ion-segment-button>
  </ion-segment>
  <ion-row>
    <ion-col size="6">
      <ion-button (click)="createRandomEvents()" expand="block" fill="outline">
        Add random events
      </ion-button>
    </ion-col>
    <ion-col size="6">
      <ion-button (click)="removeEvents()" expand="block" fill="outline">
        Remove all events
      </ion-button>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col size="2">
      <ion-button fill="clear" (click)="back()">
        <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-col>
    <ion-col size="8" class="ion-text-center">
      <h2>{{ viewTitle }}</h2>
    </ion-col>
    <ion-col size="2">
      <ion-button fill="clear" (click)="next()">
        <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-col>
  </ion-row> 
  <calendar
    [eventSource]="eventSource"
    [calendarMode]="calendar.mode"
    [currentDate]="calendar.currentDate"
    (onEventSelected)="onEventSelected($event)" 
    (onTitleChanged)="onViewTitleChanged($event)"
    startHour="6"
    endHour="20"
    step="30"
    startingDayWeek="1"
    >  
  </calendar>
</ion-content> 





**home.module.ts**     
   import { CommonModule } from '@angular/common';
import { LOCALE_ID, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { TranslateModule } from '@ngx-translate/core';
import { UserRouteAccessService } from 'src/app/services/auth/user-route-access.service';
import { HomePage } from './home.page';
import { NgxEchartsModule } from 'ngx-echarts';


  import { NgCalendarModule  } from 'ionic2-calendar';


import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
registerLocaleData(localeDe);

const routes: Routes = [
  {
    path: '',
    component: HomePage,
    data: {
      authorities: ['ROLE_USER'],
    },
    canActivate: [UserRouteAccessService],
  },
];

@NgModule({
  imports: [ NgCalendarModule ,
   IonicModule, CommonModule, FormsModule, TranslateModule, RouterModule.forChild(routes),
    NgxEchartsModule.forRoot({
      echarts: () => import('echarts'),
    })],
  declarations: [HomePage],
  providers: [
    { provide: LOCALE_ID, useValue: 'de-DE' }
  ]
})
export class HomePageModule {}
````Preformatted text`

I have integrated Ionic2-calender in ionic5 version but getting error in below line
@ViewChild(CalendarComponent) myCal: CalendarComponent;

If anyone know how to resolve that error please help me.