Angular集成FullCalendar时如何获取选中日期的全部已有事件

可以获取选中日期上的所有已存在事件，selectDate 事件回调不会直接返回事件列表，但可以通过回调携带的时间参数配合日历API快速完成筛选，完全支持事件数量统计的业务需求。

具体实现步骤 #

• 首先在模板中给 FullCalendar 组件绑定实例引用，同时注册selectDate事件回调

<full-calendar 
  #calendarRef
  [options]="calendarConfig"
></full-calendar>

• 在组件类中获取日历实例，在selectDate回调中拿到选中日期的起止时间，调用日历内置的getEvents()方法拉取全量事件后做区间匹配

import { Component, ViewChild } from '@angular/core';
import { FullCalendarComponent } from '@fullcalendar/angular';

@Component({
  selector: 'app-event-calendar',
  templateUrl: './event-calendar.component.html'
})
export class EventCalendarComponent {
  @ViewChild('calendarRef') calendar!: FullCalendarComponent;
  
  calendarConfig = {
    initialView: 'dayGridMonth',
    selectable: true,
    selectDate: (selectInfo: { start: Date, end: Date }) => {
      // 选中日期的起止时间：单日选中时start为当日0点，end为次日0点
      const { start: selectStart, end: selectEnd } = selectInfo;
      // 拉取日历当前加载的所有事件（实时同步最新增删改状态）
      const allEvents = this.calendar.getApi().getEvents();
      
      // 筛选出和选中日期区间重叠的事件，兼容跨天事件
      const selectedDateEvents = allEvents.filter(event => {
        const eventStart = event.start!;
        const eventEnd = event.end ?? eventStart;
        return eventStart < selectEnd && eventEnd >= selectStart;
      });

      // 拿到目标事件数量，直接写后续业务逻辑即可
      const eventCount = selectedDateEvents.length;
      console.log('选中日期事件：', selectedDateEvents, '事件总数：', eventCount);
    }
  };
}

注意事项 #

• 如果你绑定的是点击单日格子触发的dateClick事件，回调参数里只有date字段对应当日时间，自行构造当日0点、次日0点作为起止参数传入筛选逻辑即可，筛选逻辑完全通用
• 不要自行维护独立的事件列表做匹配，getEvents()返回的是和日历视图完全同步的事件数据，能避免增删事件后数据不一致的问题
• 上述区间判断逻辑可以正确识别跨天事件、跨多日的长周期事件，不会出现漏算

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