Angular项目中如何访问Fullcalendar的events数组并显示事件标题

方案一：直接从本地events数组筛选（静态事件场景） #

如果你的事件是静态定义在calendarOptions里的，直接从本地数组中匹配点击日期的事件即可，无需调用额外API：

import { CalendarOptions, DateClickArg } from '@fullcalendar/angular';
import { dayGridPlugin, interactionPlugin } from '@fullcalendar/core';

// 定义事件类型，匹配你的事件结构
interface CalendarEvent {
  title: string;
  date: string;
}

export class HomeComponent {
  calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    plugins: [dayGridPlugin, interactionPlugin],
    dateClick: (arg: DateClickArg) => this.handleDateClick(arg),
    events: [
      { title: 'Primo Evento', date: '2024-04-06' },
      { title: 'Secondo Evento', date: '2024-04-13' }
    ] as CalendarEvent[]
  };

  handleDateClick(arg: DateClickArg) {
    // 筛选出当前点击日期的所有事件
    const dayEvents = (this.calendarOptions.events as CalendarEvent[]).filter(
      event => event.date === arg.dateStr
    );

    if (dayEvents.length > 0) {
      // 拼接多个事件的title（如果一天有多个事件）
      const eventTitles = dayEvents.map(event => event.title).join(', ');
      alert(`日期点击！当日事件：${eventTitles}`);
    } else {
      alert(`日期点击！${arg.dateStr} 无事件`);
    }
  }
}

方案二：通过Calendar实例调用getEvents()（动态事件场景） #

如果你的事件是动态加载的（比如从后端获取），可以通过@ViewChild获取FullCalendar组件实例，调用官方的getEvents()方法：

1. 先在模板给FullCalendar添加模板引用变量：

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

2. 组件代码修改：

import { Component, ViewChild } from '@angular/core';
import { CalendarOptions, DateClickArg, FullCalendarComponent } from '@fullcalendar/angular';
import { dayGridPlugin, interactionPlugin } from '@fullcalendar/core';

export class HomeComponent {
  // 获取Calendar组件实例
  @ViewChild('calendar') calendarComponent!: FullCalendarComponent;

  calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    plugins: [dayGridPlugin, interactionPlugin],
    dateClick: (arg: DateClickArg) => this.handleDateClick(arg),
    events: [
      { title: 'Primo Evento', date: '2024-04-06' },
      { title: 'Secondo Evento', date: '2024-04-13' }
    ]
  };

  handleDateClick(arg: DateClickArg) {
    // 获取FullCalendar的API实例
    const calendarApi = this.calendarComponent.getApi();
    // 筛选当前点击日期的事件
    const dayEvents = calendarApi.getEvents().filter(
      event => event.startStr === arg.dateStr
    );

    if (dayEvents.length > 0) {
      const eventTitles = dayEvents.map(event => event.title).join(', ');
      alert(`日期点击！当日事件：${eventTitles}`);
    } else {
      alert(`日期点击！${arg.dateStr} 无事件`);
    }
  }
}

说明 #

• 方案一适合事件固定的场景，代码简单直接，无需依赖组件实例；
• 方案二更灵活，支持动态事件，能利用FullCalendar的内置事件API处理复杂场景。

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