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

Answer 1

You can use template as follows:

<ng-template #eTemplate
  let-my_showStatus="showStatus"
  let-my_showContent="showContent"
  let-my_showActions="showActions"
  let-my_event="event">
    <div>showStatus: {{my_showStatus |json}}</div>
    <div>showContent: {{my_showContent |json}}</div>
    <div>showActions: {{my_showActions |json}}</div>
    <div>event: {{my_event |json}}</div>
</ng-template>

which produces something like this:

<div>showStatus: true</div>
<div>showContent: true</div>
<div>showActions: true</div>
<div>event: {
  "event": {
    "id": "1",
    "start": "2023-12-28T17:00:00.000Z",
    "end": "2023-12-28T18:00:00.000Z",
    "title": "Event 1",
    "content": "IMPORTANT EVENT",
    "color": {
      "primary": "#E0E0E0",
      "secondary": "#EEEEEE"
    },
    "actions": [],
    "status": "danger",
    "isClickable": true,
    "isDisabled": false,
    "draggable": true,
    "resizable": {
      "beforeStart": true,
      "afterEnd": true
    },
    "data": {
      "t1": 1,
      "t2": 2
    }
  },
  "top": 972.0000000000001,
  "height": 81,
  "width": 100,
  "left": 0,
  "startsBeforeDay": false,
  "endsAfterDay": false
}</div>

Note, my_event.event field contains source event.

The source below (taken from angular-calendar-scheduler) shows how this template is used:

@Component({
    selector: 'calendar-scheduler-event',
    template: `
        <ng-template #defaultTemplate>
            <div class="cal-scheduler-event"
                [title]="title"
                [style.max-width.px]="container.clientWidth - 4"
                [class.cal-cancelled]="event.event.isCancelled"
                [class.cal-disabled]="event.event.isDisabled"
                [class.cal-not-clickable]="!event.event.isClickable"
                [class.cal-draggable]="event.event.draggable"
                [class.cal-starts-before-day]="event.startsBeforeDay"
                [class.cal-ends-after-day]="event.endsAfterDay"
                [style.backgroundColor]="event.event.color?.secondary"
                [style.borderColor]="event.event.color?.primary"
                (mwlClick)="onEventClick($event, event.event)"
                (mouseenter)="onMouseEnter()"
                (mouseleave)="onMouseLeave()">
                <calendar-scheduler-event-title
                    view="week"
                    [event]="event.event"
                    [showStatus]="showStatus"
                    [showContent]="showContent"
                    [showActions]="showActions"
                    [customTemplate]="eventTitleTemplate">
                </calendar-scheduler-event-title>
                <calendar-scheduler-event-content
                    *ngIf="showContent"
                    [event]="event.event"
                    [eventContainer]="container">
                </calendar-scheduler-event-content>
                <calendar-scheduler-event-actions
                    *ngIf="showActions && showContent && (event.event.isClickable || event.event.isDisabled)"
                    [event]="event.event">
                </calendar-scheduler-event-actions>
            </div>
        </ng-template>
        <ng-template
            [ngTemplateOutlet]="customTemplate || defaultTemplate"
            [ngTemplateOutletContext]="{
                title: title,
                day: day,
                event: event,
                container: container,
                showContent: showContent,
                showActions: showActions,
                showStatus: showStatus,
                eventTitleTemplate: eventTitleTemplate,
                eventClicked: eventClicked
            }">
        </ng-template>
    `,
    host: {
        '[style.height.%]': '100'
    }
})
export class CalendarSchedulerEventComponent implements OnInit, AfterContentChecked {
  // [...]
  @Input() event: SchedulerViewEvent;
}