如何使用NgOnChanges更新FullCalendar上的事件？

import { Component, ViewChild, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
import * as $ from 'jquery';
import 'fullcalendar';

@Component({
  selector: 'app-calendar',
  template: '<div #calendar></div>'
})
export class CalendarComponent implements AfterViewInit, OnChanges {
  @ViewChild('calendar') calendarRef: ElementRef;

  ngAfterViewInit() {
    $(this.calendarRef.nativeElement).fullCalendar({
      // FullCalendar的配置选项
      // ...
    });
  }

  ngOnChanges(changes: SimpleChanges) {
    // 在输入属性变化时更新事件
    if (changes.events) {
      const calendar = $(this.calendarRef.nativeElement).fullCalendar('getCalendar');
      calendar.removeEvents();
      calendar.addEventSource(changes.events.currentValue);
    }
  }
}

<app-calendar [events]="calendarEvents"></app-calendar>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="updateEvents()">更新事件</button>
    <app-calendar [events]="calendarEvents"></app-calendar>
  `
})
export class AppComponent {
  calendarEvents: any[] = [];

  updateEvents() {
    // 更新事件数据
    this.calendarEvents = [
      {
        title: '事件1',
        start: '2022-01-01'
      },
      {
        title: '事件2',
        start: '2022-01-05'
      },
      // ...
    ];
  }
}