angularangular-calendar

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:

Error

Solution

  • Just add optional to your dayEvent.event as dayEvent?.event to prevent template asking for event of undefined

    <ng-template #defaultTemplate let-dayEvent="dayEvent" 
  let-tooltipPlacement="tooltipPlacement" 
  let-eventClicked="eventClicked" 
  let-txooltipTemplate="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>