How to push data count on calendar according to date in ionic 4

Question

I'm new to Ionic. I used ionic 2-calendar to show datewise data count show on the calendar, but I'm not able to work because I put data count by using eventSource, this does not work. below I show my code.

/=================== HTML Code ==================/

<calendar
    [eventSource]="eventSource"
    [calendarMode]="calendar.mode"
    [showEventDetail] = "false"
    [currentDate]="calendar.currentDate"
    (onTitleChanged)="onViewTitleChanged($event)"
    (onTimeSelected)="onTimeSelected($event)"
    [dateFormatter]="calendar.dateFormatter"
    step="30"
    [monthviewDisplayEventTemplate]="template"
    ></calendar>

/=================== TS File Code ==================/

getDateCaseCount:any;
getAllDatecase(){
this.cal_date = new Date().toDateString()
//alert(this.cal_date);
this.CommonProcess.getDateCaseCountProcess(this.user_id).subscribe((result:any) => {
  console.log(result.data[0].data[0].next_date);
  if (result.data[0].status == "true"){
    for(let x=0;x<result.data[0].data.length;x++){
      this.eventCopy = {
        startTime:  new Date(),
        endTime: new Date(),
        allDay: true,
      }
     this.eventSource.push(this.eventCopy);
     this.myCal.loadEvents();
    }
    console.log(this.eventCopy);
  }
});}

/======================== Output Wants ===================/

Answer 1

View File =================================

<div class="calender_Box_outer">
<div class="">
  <ion-row>
    <!-- Move back one screen of the slides -->
    <ion-col size="3" text-left>
      <ion-button fill="clear" (click)="back()" class="btn-pre">
        <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-col>
    <!-- Show Current according to sliders -->
    <ion-col size="6">
      <h3 class="cal_month_name">{{ viewTitle }}</h3>
    </ion-col>
    <!-- Move forward one screen of the slides -->
    <ion-col size="3" class="text-right">
      <ion-button fill="clear" (click)="next()" class="btn-next">
        <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-col>
  </ion-row>
  <calendar
    [eventSource]="eventSource"
    [calendarMode]="calendar.mode"
    [showEventDetail] = "false"
    [currentDate]="calendar.currentDate"
    (onTitleChanged)="onViewTitleChanged($event)"
    (onTimeSelected)="onTimeSelected($event)"
    [dateFormatter]="calendar.dateFormatter"
    step="30"
    [monthviewDisplayEventTemplate]="template"
    [allDayLabel]
    
    >
  </calendar>

  <ng-template #template let-view="view" let-row="row" let-col="col">
    <div [class.with-event]="view.dates[row*7+col].events.length">
      {{view.dates[row*7+col].label}}
      <div class="indicator-container">
        <div class="event-indicator" [class.no-event]="view.dates[row*7+col].events.length == 0">{{view.dates[row*7+col].events.length}}</div>
      </div>
    </div>
  </ng-template>
</div>

TS File =================================

getAllDatecase(){
this.cal_date = new Date().toDateString()
//alert(this.cal_date);
this.CommonProcess.getDateCaseCountProcess(this.user_id).subscribe((result:any) => {
  
  if (result.data[0].status == "true"){
    for(let x=0;x<result.data[0].data.length;x++){
      let current = new Date(result.data[0].data[x].next_date);
      let year = new Date(result.data[0].data[x].next_date).getFullYear();
      console.log('eventYear:',year);
      let month = new Date(result.data[0].data[x].next_date).getMonth();
      console.log('eventMonth:',month);
      let date = new Date(result.data[0].data[x].next_date).getDate();
      console.log('eventMonth:',date);
      
      console.log('start:',new Date(Date.UTC(year, month, date)));
      this.eventCopy = {
        startTime:  new Date(Date.UTC(year, month, date, 0, 4, 5)),
        endTime: new Date(Date.UTC(year, month, date, 0, 4, 5)),
        allDay: true,
      }
      this.eventSource.push(this.eventCopy);
      this.myCal.loadEvents();
      //console.log('this.eventCopy',this.eventCopy);
    }
  }
});}