FullCalendar Angular，在 eventDidMount 中，按下导航按钮后，只有最后一个 setProp 起作用

Question

我在 Angular 中使用 FullCalendar 进行规则插入和重复事件。我想更改 eventDidMount 回调内的背景颜色、文本颜色等。但是，在 eventDidMount 挂钩内使用设置多个道具时，按下任何导航按钮后，只有最后一个按顺序起作用。在使用后端调用事件时，即使在按下导航按钮之前它也会显示相同的行为。请提供一种根据重复事件的开始日期时间更改其多个属性的方法。

这是展示问题的演示 - https://stackblitz.com/edit/stackblitz-starters-r8rgqd?file=src%2Fcalendar%2Fcalendar.component.ts

日历选项和事件已安装：

calendarOptions = {
    plugins: [timeGridPlugin, rrulePlugin],
    initialView: 'timeGridWeek',
    eventSources: [
      {// any dummy repeating data with rrule
        events: (a: any, success: any, c: any) =>
          this.initDummyEvents(a, success, c),
      },
    ],
    eventDidMount: (mountArg: EventMountArg) => this.onEventMounted(mountArg),
  };
  constructor() {}

  ngOnInit() {}

  onEventMounted(mountArg: EventMountArg) {
    if (mountArg.event.extendedProps['type'] === 'break_event') {
      // ONLY LAST (textColor) WILL WORK IF NAVIGATION BUTTON IS PRESSE
      mountArg.event.setProp('backgroundColor', '#FDDD9F');
      mountArg.event.setProp('borderColor', '#202020');
      mountArg.event.setProp('textColor', '#202020');
    }
    // I am not using the eventDataTransform callback because I need the calculated start Date of expanded event
  }

Answer 1

我在官方fullcalendar Angular文档中找到了它，特别是针对Angular，我认为：-

如果您想修改复杂对象的选项，例如 headerToolbar 或事件，您需要复制该对象，进行更改，然后重新分配它。如果您不想这样做，您可以让角度连接器递归地搜索对象内的更改，尽管这会带来轻微的性能成本。将 deepChangeDetection 属性设置为“true”

因此，按照建议中的第一个选项，我最终进行了以下更改：

stackblitz 上的工作示例。 在 eventDidMount 回调中，我使用回调中提供的 EventImpl 对象中的值创建另一个 EventInput 类型的对象。我从日历中删除提供的事件并使用日历对象添加此事件。

onEventMounted(mountArg: EventMountArg) {
  if (mountArg.event.extendedProps['type'] === 'break_event') {
    let event: EventImpl = mountArg.event;
    let eventInput: EventInput = {
      title: event.title,
      start: event.startStr,
      end: event.endStr,
      backgroundColor: '#FDDD9F',
      borderColor: '#202020',
      textColor: '#202020',
    };
    mountArg.event.remove();
    this.calendarComponent
      .getApi()
      .addEvent(eventInput, 'example-event-source');
  }
}

要访问日历对象以添加事件，请进行以下更改：- 在您的模板中，在完整日历元素中使用本地引用（如#calendar），如

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

和你的 component.ts，添加：-

@ViewChild('calendar') calendarComponent!: FullCalendarComponent;

像这样使用日历对象（在 eventDidMount 内）：-

this.calendarComponent.getApi().addEvent(eventInput, 'example-event-source');

重要提示：

提供事件源时，请确保为事件源提供一个 ID，如下所示：-

eventSources: [
  {
    id: 'example-event-source',
    events: (a: any, success: any, c: any) =>
      this.initDummyEvents(a, success, c),
  },
]

在 EvenDidMount 中添加事件时，在 Calendar::addEvent 方法中提供此 id：-

this.calendarComponent.getApi().addEvent(eventInput, 'example-event-source');

这很重要，否则，刷新源时日历将不会刷新此事件，并且每次加载日期时您最终都会收到一个额外的事件。