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?
