Angular-Calendar problem loading async events on custom cell template

Question

I'm developing and app that displays the daily price of a hotel room on a calendar generated with angular-calendar.

This is my component.ts:

  events$!: Observable<CalendarEvent<{ hotel: Hotel }>[]>

  ngOnInit(): void {
    this.fetchEvents()
  }

  fetchEvents(): void{
    this.hotelService.getHotels().pipe(
      map((hotels: Hotel[]) => {
        const events: CustomCalendarEvent[] = [];
        hotels.forEach(hotel => {
          if (hotel.rooms.single) {
            hotel.rooms.single.daily_prices.forEach(element => {
              events.push({
                start: new Date(element.start),
                price: element.price,
                title: '',
                allDay: true,
              })
            })
          }
        })
        return events
      })
    ).subscribe(events => {
      this.events$ = of(events)
      console.log(events)
    })
  }

Here I fetch all the data using a service, I console-logged the observable in order to see if the data is showing up and it does correctly. So I guess the problem is with my HTML:

<ng-template #customCellTemplate let-day="day" let-locale="locale" class="cell">
    <div class="cal-cell-top">
        <span class="cal-day-number">
            {{ day.date | calendarDate:'monthViewDayNumber':locale }}
        </span>
    </div>
    <small class="price-cell">
        Precio habitación:
        <br>
        <strong>{{ day.events$ }}</strong>
    </small>
</ng-template>

<ng-template #loading>
    <div class="text-center">
      <i class="fas fa-spin fa-spinner fa-5x"></i> <br />
      Loading events...
    </div>
</ng-template>

<div *ngIf="events$ | async; else loading; let events">
    <div [ngSwitch]="view">
        <mwl-calendar-month-view
            *ngSwitchCase="'month'"
            [viewDate]="viewDate"
            [locale]="locale"
            [weekStartsOn]="weekStartsOn"
            [weekendDays]="weekendDays"
            [cellTemplate]="customCellTemplate"
            [events]="events">
        </mwl-calendar-month-view>
    </div>
</div>

I copied the same example on the angular-calendar documentation but the only thing I see is the loading template.

I also tried to hardcode some events and data is showing properly on every cell, so that's why I guess the problem it's about gathering the data asynchronously

Why the data is not loading on the calendar events? What I'm I doing wrong?

Answer 1

You are assigning the observable asynchronously. You should directly set the observable, to which is subscribed in your template.

Change your code to following:

  events$!: Observable<CalendarEvent<{ hotel: Hotel }>[]>

  ngOnInit(): void {
    this.fetchEvents();
  }

  fetchEvents(): void{
    this.events$ = this.hotelService.getHotels().pipe(/*your map*/);
  }

No subscription.