Angular中FullCalendar切换月份后事件不显示（JSON数据源）

核心问题 #

你的FullCalendar无法显示事件，主要存在两个关键原因：

1. 事件缺少必填的title字段 #

FullCalendar要求每个事件必须包含title属性，作为日历上显示的文本内容。但你的接口返回的JSON数据里完全没有这个字段，所以即便事件被成功加载，也无法在日历上看到实际内容。

2. 日期格式可能存在解析异常 #

你的接口返回的日期格式是2021-01-09T16:00（缺少秒数部分），虽然FullCalendar理论上兼容这种格式，但部分场景下会导致日期解析失败，建议补全为标准ISO8601格式（如2021-01-09T16:00:00）。

解决方案 #

方案一：修改后端接口返回数据 #

直接在接口输出的每个事件对象中添加title字段（比如用phoneNumber或组合其他字段作为标题），同时补全日期的秒数部分：

[
  {"id":1510,"title":"338-3248104","description":null,"doctorId":1,"endTime":"2021-01-09T16:15:00","healthServiceId":3,"isEventDone":false,"isRecurring":false,"patientId":null,"patientName":null,"patientSurname":null,"phoneNumber":"338-3248104","startTime":"2021-01-09T16:00:00"},
  // 其他事件按此格式修改
]

方案二：前端手动转换数据 #

如果无法修改后端，可以在FullCalendar的事件加载逻辑中转换数据，补充title并处理日期：
修改你的calendarOptions，将events改为函数形式，手动请求并处理数据：

calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin],
    editable: true,
    selectable: true,
    select: this.handleDateSelect.bind(this),
    eventClick: this.handleEventClick.bind(this),
    eventsSet: this.handleEvents.bind(this),
    events: (info, successCallback, failureCallback) => {
      fetch('http://127.0.0.1:8097/event')
        .then(response => response.json())
        .then(data => {
          const transformedEvents = data.map(event => ({
            ...event,
            title: event.phoneNumber, // 用手机号作为事件标题
            startTime: `${event.startTime}:00`,
            endTime: `${event.endTime}:00`
          }));
          successCallback(transformedEvents);
        })
        .catch(error => failureCallback(error));
    },
    startParam: 'startTime',
    endParam: 'endTime',
    timeZone: 'local' // 注意：设置日历时区用timeZone，timeZoneParam是请求时传递时区的参数名
  };

额外验证步骤 #

可以通过handleEvents回调打印事件，确认数据是否被正确加载：

handleEvents(events: EventApi[]) {
  console.log('已加载的事件:', events); // 查看控制台是否有事件数据输出
}

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