Angular Calendar Scheduler custom eventTemplate no working properly

Question

I followed the usage on this npm page to recreate the calendar schedular view, now I want to change the event template, so that I can add some event buttons and icons to it.

I created a custom template and added it to the calendar-scheduler-view as a property, as shown

<div class="calendar-weeks" [ngSwitch]="view">
        <calendar-scheduler-view *ngSwitchCase="CalendarView.Week"
                                [viewDate]="viewDate"
                                [events]="events"
                                [locale]="locale"
                                [viewDays]="viewDays"
                                [weekStartsOn]="weekStartsOn"
                                [eventTemplate]="eTemplate"
                                [excludeDays]="excludeDays"
                                [startsWithToday]="startsWithToday"
                                [hourSegments]="hourSegments"
                                [hourSegmentHeight]="hourSegmentHeight"
                                [dayStartHour]="dayStartHour"
                                [dayEndHour]="dayEndHour"
                                [dayModifier]="dayModifier"
                                [hourModifier]="hourModifier"
                                [segmentModifier]="segmentModifier"
                                [eventModifier]="eventModifier"
                                [showEventActions]="true"
                                [showSegmentHour]="false"
                                [zoomEventOnHover]="true"
                                (dayHeaderClicked)="dayHeaderClicked($event.day)"
                                (hourClicked)="hourClicked($event.hour)"
                                (segmentClicked)="segmentClicked('Clicked', $event.segment)"
                                (eventClicked)="eventClicked('Clicked', $event.event)"
                                (eventTimesChanged)="eventTimesChanged($event)"
                                [refresh]="refresh">
        </calendar-scheduler-view>

        <ng-template #eTemplate>
            <div class="cellContainer" *ngFor="let event of events">
                <div class="cellMainContent">
                    <p>{{event.title}}</p>
                    <p>{{event.content}}</p>
                </div>
                <span class="typeOfMeeting">
                    <mat-icon>videocam</mat-icon>
                </span>
                <div class="timing">
                    <!-- <p>{{getTimeFromDate(event.start)}} - {{getTimeFromDate(event.end)}}</p> -->
                </div>
            </div>
        </ng-template>
    </div>

using a *ngFor loops doesn't work as it populates all events in one cell and the final screen looks like this

enter image description here

I also tried this approach

<ng-template #eTemplate let-events="events">
            <div class="cellContainer">
                <div class="cellMainContent">
                    <p>{{events.title}}</p>
                    <p>{{events.content}}</p>
                </div>
                <span class="typeOfMeeting">
                    <mat-icon>videocam</mat-icon>
                </span>
                <div class="timing">
                    <!-- <p>{{getTimeFromDate(event.start)}} - {{getTimeFromDate(event.end)}}</p> -->
                </div>
            </div>
        </ng-template>

however this also doesn't help, as it throws an error saying "Cannot read properties of undefined (reading 'title')".

What am I doing wrong here?

Setup info: => Angular version 14 => Angular calendar schedular version 14, along with other dependencies such as date-fns, calendar-utils