如何为angular-calendar日历组件的事件或日期设置onHover悬停事件

1. 内置事件绑定（默认单元格模板适用） #

你使用的日历组件原生支持日期悬停、事件悬停的输出事件，直接在现有组件标签上追加对应事件绑定即可：

<mwl-calendar-month-view 
  *ngSwitchCase="CalendarView.Month" 
  [viewDate]="viewDate"
  [events]="events" 
  [refresh]="refresh" 
  [activeDayIsOpen]="activeDayIsOpen"
  (dayClicked)="dayClicked($event.day)" 
  (eventClicked)="handleEvent('Clicked', $event.event)"
  <!-- 新增悬停事件绑定 -->
  (dayHover)="handleDayHover($event)"
  (eventHover)="handleEventHover($event)"
  [cellTemplate]="customCellTemplate" 
  (eventTimesChanged)="eventTimesChanged($event)"
>
</mwl-calendar-month-view>

在ts文件中补充对应的悬停处理逻辑，替换成你自己的模态框打开/关闭代码即可：

// 日期单元格悬停处理
handleDayHover(event: { day: CalendarDay; isHovering: boolean }): void {
  if (event.isHovering) {
    // 悬停进入时打开日期对应模态框
    this.openDateModal(event.day);
  } else {
    // 悬停离开时关闭模态框，不需要该逻辑可删除
    this.closeDateModal();
  }
}

// 日历事件悬停处理
handleEventHover(event: { event: CalendarEvent; isHovering: boolean }): void {
  if (event.isHovering) {
    // 悬停进入时打开事件对应模态框
    this.openEventModal(event.event);
  } else {
    // 悬停离开时关闭模态框，不需要该逻辑可删除
    this.closeEventModal();
  }
}

2. 自定义单元格模板适配 #

如果你使用了自定义cellTemplate，需要在自定义模板的元素上手动绑定鼠标事件触发上面的处理逻辑，参考示例：

<ng-template #customCellTemplate let-day="day" let-locale="locale">
  <div 
    class="cal-cell-top"
    (mouseenter)="handleDayHover({day: day, isHovering: true})"
    (mouseleave)="handleDayHover({day: day, isHovering: false})"
  >
    <!-- 原有自定义单元格内容 -->
    <span class="cal-day-number">{{ day.date | date: 'd' }}</span>
    <div class="cal-events">
      <div 
        *ngFor="let event of day.events"
        (mouseenter)="handleEventHover({event: event, isHovering: true})"
        (mouseleave)="handleEventHover({event: event, isHovering: false})"
      >
        {{ event.title }}
      </div>
    </div>
  </div>
</ng-template>

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