Angular Calendar - How to use Dynamic beforeMonthViewRender

Question

I'm trying create a attendance calendar and i have to change column color based on leave types.

But In angular-calendar data it's not working, attendance data is showing null.

Here is my code.

Please help.

import { AfterViewInit, ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
import { CalendarDateFormatter, CalendarEvent, CalendarMonthViewBeforeRenderEvent, CalendarView } from 'angular-calendar';
import { Subject } from 'rxjs';
import { AttendanceService } from '../services/attendance.service';

@Component({
  selector: 'amt-staff-attendance-statistics',
  templateUrl: './attendance-statistics.component.html',
  styleUrls: ['./attendance-statistics.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None
})
export class AttendanceStatisticsComponent implements AfterViewInit{
  view: CalendarView = CalendarView.Month;
  Month: Date = new Date();
  events: CalendarEvent[] = [];
  refresh: Subject<any> = new Subject();
  attendace: any;

  constructor(
    public attendanceService: AttendanceService
  ){}

  getAttendace()
  {
    this.attendanceService.getAttendance().pipe().subscribe(res => {
      this.attendace = res;
    }, error =>{
      console.log("error", error.error.message);
    });
  }

  beforeMonthViewRender(renderEvent: CalendarMonthViewBeforeRenderEvent): void {
    console.log("attendace" ,this.attendace)
    renderEvent.body.forEach((day) => {
      const dayOfMonth = day.date.getDate();
      if(day.isWeekend)
      {
        day.cssClass = "text-red";
      }

    });
  }

  refreshView(): void {
    this.refresh.next();
  }
  

}

HTML

<div [ngSwitch]="view">
  <mwl-calendar-month-view
     *ngSwitchCase="'month'"
     [viewDate]="m"
     [events]="events"
     [refresh]="refresh"
     (beforeViewRender)="beforeMonthViewRender($event)"
   ></mwl-calendar-month-view>
</div>

Thanks.............................................................

Answer 1

I have fixed the issue by using refresh function,

refreshView(): void {
   this.refresh.next();
}

and it's called after getting api response,

this.refresh.next();