TypeError: Cannot read properties of undefined (reading 'event')

I am trying to create a custom day event template for Angular 14.0+ Calendar and I cannot figure out why my events are being returned as undefined. The regular month view for the calendar is working fine.

HTML:

<div [ngSwitch]="view">
<mwl-calendar-month-view *ngSwitchCase="'month'" [viewDate]="viewDate" [events]="events" [cellTemplate]="CUSTOM_CELL_TEMPLATE" [refresh]="refresh"></mwl-calendar-month-view>
<mwl-calendar-day-view *ngSwitchCase="'day'" [viewDate]="viewDate" [events]="events" [eventTemplate]="defaultTemplate" [refresh]="refresh"></mwl-calendar-day-view>
</div>


Template for Month View (working):

<ng-template #CUSTOM_CELL_TEMPLATE let-day="day" let-locale="locale">
<div class="cal-cell-top">
<span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{day.badgeTotal}}</span>
<span class="cal-day-number">{{day.date | calendarDate:'monthViewDayNumber':locale}}</span>
</div>
<div style="max-height: 76px; overflow-x: hidden; overflow-y: auto;">
<div class="customCellRow" *ngFor="let event of day.events">
<div class="mx-1 d-flex" (click)="openScheduleItemModal(event.meta.scheduleItem);">
<fa-icon [icon]="getScheduleItemTypeIcon(event.meta.scheduleItem.type)" class="my-auto" [size]="(isMobile) ? 'xs' : 'sm'" [style.color]="event.color.primary"></fa-icon>
<small class="ms-1 my-auto h-fit w-100 d-flex flex-column">
<span style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap; max-width: 85%;">{{event.title}}</span>
<strong *ngIf="event.meta.scheduleItem.clientId" style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap; max-width: 85%;">{{event.meta.scheduleItem.clientName}}</strong>
</small>
</div>
</div>
</div>
</ng-template>


Template for Day View (not working):

<ng-template
#defaultTemplate
let-dayEvent="dayEvent"
let-tooltipPlacement="tooltipPlacement"
let-eventClicked="eventClicked"
let-tooltipTemplate="tooltipTemplate"
let-tooltipAppendToBody="tooltipAppendToBody">
<div
class="cal-event" >
<mwl-calendar-event-actions
[event]="dayEvent.event"
[customTemplate]="eventActionsTemplate">
</mwl-calendar-event-actions>
&ngsp;
<mwl-calendar-event-title
[event]="dayEvent.event"
[customTemplate]="eventTitleTemplate"
view="day">
</mwl-calendar-event-title>
</div>
</ng-template>


Error:



Continue reading...