Angular中FullCalendar增改事件后无需重初始化的刷新方案

你当前的代码存在两个关键问题：一是重复编写大量冗余的日历配置代码，二是在getEvent的订阅回调中创建了局部的calendarOptions变量，并未赋值给组件的this.calendarOptions，导致日历根本不会更新事件。下面提供几种更高效的解决方案：

方案1：直接更新配置中的事件属性（最简洁） #

利用Angular的变更检测机制，无需重新创建整个calendarOptions对象，仅更新其中的事件相关属性即可。

如果你的日历使用initialEvents初始化事件：

getEvent() {
  this.Svc.EventList().subscribe((res) => {
    this.resultres = res;
    // 直接更新calendarOptions的initialEvents属性
    this.calendarOptions.initialEvents = this.resultres;
  });
}

如果你的日历使用events属性（如补充代码所示）：

getEvent() {
  this.Svc.EventList().subscribe((res) => {
    this.Events = [...res]; // 创建新数组触发变更检测
    this.calendarOptions.events = this.Events;
  });
}

注意：如果直接修改原数组的元素，Angular可能无法检测到变化，因此建议使用扩展运算符[...res]创建新数组，确保变更检测生效。

方案2：使用FullCalendar API操作事件（更灵活） #

通过获取FullCalendar的实例，调用官方API直接添加、删除或更新事件，适合需要精细控制事件的场景。

1. 首先在模板中给日历组件添加引用：

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

2. 在组件中获取日历实例并操作事件：

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

export class calcomponent implements OnInit, AfterViewInit {
  @ViewChild('calendar') calendarComponent!: FullCalendarComponent;
  private calendarApi!: Calendar;

  ngAfterViewInit() {
    // 获取FullCalendar的API实例
    this.calendarApi = this.calendarComponent.getApi();
  }

  getEvent() {
    this.Svc.EventList().subscribe((res) => {
      // 清空现有事件，再批量添加新事件
      this.calendarApi.removeAllEvents();
      res.forEach(event => {
        this.calendarApi.addEvent(event);
      });
    });
  }
}

这种方式支持单独操作单个事件（比如addEvent、removeEventById、updateEvent等），无需替换整个事件列表。

方案3：抽离固定配置，减少冗余代码 #

如果仍希望通过更新calendarOptions对象的方式实现，可以将固定的配置抽离为常量，每次仅更新可变的事件部分，避免重复编写配置代码：

export class calcomponent implements OnInit {
  // 抽离固定的日历配置
  private readonly baseCalendarConfig: Partial<CalendarOptions> = {
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    initialView: "dayGridMonth",
    allDaySlot: false,
    contentHeight: "auto",
    weekends: true,
    editable: true,
    selectable: true,
    selectMirror: true,
    dayMaxEvents: true,
    plugins: [rrulePlugin, dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin]
  };

  calendarOptions: CalendarOptions = {
    ...this.baseCalendarConfig,
    initialEvents: this.initialEvents
  };

  getEvent() {
    this.Svc.EventList().subscribe((res) => {
      this.resultres = res;
      // 仅合并固定配置和新的事件数据
      this.calendarOptions = {
        ...this.baseCalendarConfig,
        initialEvents: this.resultres
      };
    });
  }
}

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