如何在 fullCalendar 中显示新事件答案

【问题标题】：How to show a new event in fullCalendar如何在 fullCalendar 中显示新事件
【发布时间】：2020-09-07 15:21:00
【问题描述】：

我正在使用 fullCalendar 来显示这样的事件列表：

this.audiencias = [{
    title: "Audiencia 1",
    date: "2020-09-06",
    allDay: false
  },
  {
    title: "audiencia 2",
    date: "2020-09-07",
    allDay: false
  }];

然后我像这样创建我的日历：

this.calendarOptions = {
  initialView: "dayGridMonth",
  dateClick: this.handleDateClick.bind(this),
  events: this.audiencias
};

事件显示良好。在我的“handleDateClick”函数中，我打开一个模式来创建一个新事件，我创建了一个新事件并将这个新事件推送到“audiencias”数组，但是日历没有显示新事件，我不知道是否我必须渲染或重新加载日历，我使用的是 Angular 9.1.9，有什么想法可以解决这个问题吗？提前致谢

【问题讨论】：

FullCalendar 在您初始化日历时复制了您的数组。您的“audencias”变量和由 fullCalendar 内部保存的副本之间没有链接，因此更新“audencias”变量将永远不会导致日历更新。如果您想在日历中添加事件，请使用 fullCalendar 提供的方法：fullcalendar.io/docs/Calendar-addEvent
嗯，好的，我明白了，但是如果我把这个日历的创建放在这样的函数中：createCalendar() { this.calendarOptions = { initialView: "dayGridMonth", dateClick: this.handleDateClick.绑定（此），事件：this.audiencias，progressiveEventRendering：true };当我在数组中推送新事件时，我调用这个函数，它工作吗？
据我所知，该函数所做的只是创建一个包含一些选项的对象。它实际上并没有创建日历。然后，您必须使用这些选项初始化日历。日历选项仅在首次在页面上创建日历时应用。但是每次要添加单个事件时重新初始化整个日历确实效率很低。
如果您想要一个可以更新的真正动态事件源，然后让 fullcalendar 从该事件源更新自身，请使用文档中描述的动态事件源模式之一：fullcalendar.io/docs/events-json-feed 或fullcalendar.io/docs/events-function
我最近找到了解决方案，我添加了我的问题的答案，非常感谢兄弟。

标签： angular typescript fullcalendar

【解决方案1】：

在阅读和阅读后，我在文档中找到了解决方案，我不得不将角度连接器递归地搜索我的对象中的更改，所以我只需将“deepChangeDetection”设置为 true，如下所示：

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

【讨论】：