Angular Calendar Scheduler自定义eventTemplate无法正常工作

问题1：*ngFor导致所有事件渲染到同一单元格 #

原因 #

Angular Calendar Scheduler的eventTemplate是为单个事件设计的模板，组件内部会自动遍历事件列表，为每个事件单独渲染该模板。如果手动在模板里用*ngFor循环全部事件，会把所有事件强行塞进同一个单元格的模板容器中，导致布局混乱。

解决方案 #

移除模板中的*ngFor循环，直接使用组件提供的单个事件上下文变量。

问题2：let-events="events"绑定时报错Cannot read properties of undefined (reading 'title') #

原因 #

Scheduler模板的上下文变量是单数的event，指代当前渲染的单个事件对象，而非复数的events（整个事件数组）。使用events会导致变量未定义，访问event.title自然抛出错误。

解决方案 #

在模板中使用let-event="event"来绑定单个事件对象。

完整正确实现示例 #

1. 组件模板代码 #

<mwl-calendar-scheduler-view
  [viewDate]="viewDate"
  [events]="events"
  [eventTemplate]="customEventTemplate"
></mwl-calendar-scheduler-view>

<!-- 自定义事件模板 -->
<ng-template #customEventTemplate let-event="event">
  <div class="custom-event-container">
    <!-- 事件标题 -->
    <span class="event-title">{{ event.title }}</span>
    <!-- 自定义操作按钮 -->
    <div class="event-actions">
      <button (click)="editEvent(event)" class="action-btn">
        <span class="icon">✏️</span>
      </button>
      <button (click)="deleteEvent(event)" class="action-btn">
        <span class="icon">🗑️</span>
      </button>
    </div>
  </div>
</ng-template>

2. 组件类代码 #

import { Component } from '@angular/core';
import { CalendarEvent } from 'angular-calendar';

@Component({
  selector: 'app-scheduler',
  templateUrl: './scheduler.component.html',
  styleUrls: ['./scheduler.component.css']
})
export class SchedulerComponent {
  viewDate: Date = new Date();
  events: CalendarEvent[] = [
    {
      title: '团队会议',
      start: new Date(),
      end: new Date(new Date().setHours(new Date().getHours() + 1)),
      color: { primary: '#1e90ff', secondary: '#D1E8FF' }
    },
    {
      title: '项目评审',
      start: new Date(new Date().setHours(new Date().getHours() + 2)),
      end: new Date(new Date().setHours(new Date().getHours() + 3)),
      color: { primary: '#ff6b6b', secondary: '#FFE6E6' }
    }
  ];

  editEvent(event: CalendarEvent): void {
    // 编写事件编辑逻辑
    console.log('编辑事件:', event);
  }

  deleteEvent(event: CalendarEvent): void {
    // 编写事件删除逻辑
    this.events = this.events.filter(item => item !== event);
  }
}

3. 可选样式调整 #

.custom-event-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  height: 100%;
}

.event-title {
  flex: 1;
  margin-right: 8px;
}

.action-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px;
}

.icon {
  font-size: 16px;
}

注意事项 #

• 确保安装的angular-calendar及scheduler插件版本与Angular 14兼容（推荐angular-calendar@0.31.x系列）
• 不要手动遍历整个events数组，Scheduler组件会自动完成事件与单元格的匹配渲染
• 模板上下文变量必须使用let-event="event"，严格匹配组件提供的变量名

内容的提问来源于stack exchange，提问作者ItsaSimulation