Angular中FullCalendar绑定API返回的账单数据后日历无事件显示问题

问题原因及修复步骤 #

1. 配置冲突
   你同时给eventSources和events两个属性传了事件数组，eventSources接收的是事件源配置对象数组，不是直接的事件列表，两个属性同时配置会导致事件加载冲突。直接删除eventSources: this.calendarBills,这一行即可。

2. 异步初始化时机问题
   你在接口请求的异步回调里才初始化calendarOptions，如果模板里的FullCalendar组件在页面初始化时就已经加载，此时calendarOptions为undefined，后续赋值后可能没有触发组件重新加载事件。
   建议把配置初始化移到ngOnInit里，初始给events设为空数组，异步拿到数据后再更新events的值：

export class BillPageComponent implements OnInit {

  userId = localStorage.getItem('userId') || '';
  token = localStorage.getItem('token') || '';

  bills: Bill[] = [];
  calendarBills: {title: string, date: string}[] = [];

  calendarOptions: CalendarOptions = {
    headerToolbar: {
      center: 'title',
    },
    initialView: 'dayGridMonth',
    events: [], // 初始为空
    weekends: true,
    editable: true,
    selectable: true,
    selectMirror: true,
    dayMaxEvents: true,
    dateClick: this.handleDateClick.bind(this),
  };

  constructor(
    public fetchApiData: FetchApiDataService,
    public snackBar: MatSnackBar,
    public dialog: MatDialog,
  ) { }

  ngOnInit(): void {
    this.getBills(this.userId, this.token);
  }

  getBills(userId: string, token: string): void {
    this.fetchApiData.getBills(userId, token).subscribe((resp: any) => {
      this.bills = resp;
      this.calendarBills = resp.map((e: any) => ({ title: e.Description, date: e.Date }));
      // 解构赋值生成新数组，触发FullCalendar的变更检测
      this.calendarOptions.events = [...this.calendarBills];
    })
  }
  handleDateClick(arg: { dateStr: string; }) {
    alert('date click! ' + arg.dateStr)
  }
}

3. 日期格式校验
   确认你的e.Date输出格式是FullCalendar支持的ISO标准格式（如2024-05-20），如果是其他格式比如2024/05/20、时间戳或者中文格式，需要先转换为标准格式再赋值。

如果修改后还是不显示，可以通过FullCalendar的API手动触发事件刷新：
先通过@ViewChild获取日历组件实例：

import { FullCalendarComponent } from '@fullcalendar/angular';

// 类内部定义
@ViewChild(FullCalendarComponent) calendarComponent!: FullCalendarComponent;

// 数据赋值完成后调用
this.calendarComponent.getApi().refetchEvents();

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