Angular FullCalendar：按单日事件数控制eventContent事件时间显隐

API 探路者

2026-6-13

解决FullCalendar月视图事件显示逻辑问题

1. 标准化事件日期映射（TS层）

先确保你在TS中生成的日期-事件数映射使用统一格式的日期键（比如YYYY-MM-DD），避免时区或格式差异导致匹配失败：

import { formatDate } from '@fullcalendar/core';

// 存储日期与对应事件数的映射
eventCountByDate: Map<string, number> = new Map();

// 生成/更新事件数映射的方法
updateEventCountMap(events: any[]) {
  this.eventCountByDate.clear();
  events.forEach(event => {
    // 用FullCalendar工具函数标准化日期格式
    const dateKey = formatDate(event.start, { year: 'numeric', month: '2-digit', day: '2-digit' }, 'en-US');
    this.eventCountByDate.set(dateKey, (this.eventCountByDate.get(dateKey) || 0) + 1);
  });
}

调用时机：事件数据加载完成后、数据更新时，执行updateEventCountMap同步映射。

2. 在HTML模板中关联映射并判断显示逻辑

直接通过事件的start日期提取键值，调用TS层的辅助方法获取当日事件数，进而控制时间显示：

<full-calendar [options]="calendarOptions" #fullcalendar> 
    <ng-template #eventContent let-arg> 
        {{arg.event.title}} 
        <!-- 根据当日事件数判断是否显示时间 -->
        <div *ngIf="getDayEventCount(arg.event.start) <= 3" class="event-time">
            {{ formatTime(arg.event.start) }}-{{ formatTime(arg.event.end) }} 
        </div> 
    </ng-template> 
</full-calendar>

在TS中添加辅助方法，供模板调用：

getDayEventCount(startDate: Date): number {
  const dateKey = formatDate(startDate, { year: 'numeric', month: '2-digit', day: '2-digit' }, 'en-US');
  return this.eventCountByDate.get(dateKey) || 0;
}