Angular中FullCalendar重复事件多属性设置仅最后一项生效求助

问题原因 #

调用event.setProp()修改属性时，每次调用都会触发FullCalendar的重绘逻辑。对于rrule生成的重复事件，多次重绘会导致之前设置的属性被覆盖，最终只有最后一次setProp()生效。

解决方案：直接操作事件DOM元素 #

在eventDidMount回调中，直接修改挂载的DOM元素样式，跳过FullCalendar的事件属性更新逻辑，避免重绘冲突。这种方式既可以获取到rrule展开后的实际start日期，又能一次性设置所有样式属性。

修改后的代码示例 #

onEventMounted(mountArg: EventMountArg) {
  const event = mountArg.event;
  const eventEl = mountArg.el;

  if (event.extendedProps['type'] === 'break_event') {
    // 直接操作DOM元素设置样式
    eventEl.style.backgroundColor = '#FDDD9F';
    eventEl.style.borderColor = '#202020';
    eventEl.style.color = '#202020';

    // 若需要根据展开后的start日期做额外逻辑，直接用event.start即可
    // 示例：如果是周末，调整透明度
    const dayOfWeek = event.start.getDay();
    if (dayOfWeek === 0 || dayOfWeek === 6) {
      eventEl.style.opacity = '0.8';
    }
  }
}

补充说明 #

• 这种方式不会触发FullCalendar的事件重绘，所有样式设置都会保留，无论点击导航按钮还是后端加载数据都不会失效。
• 如果需要修改更多样式（比如hover状态），可以通过添加自定义CSS类来实现：

// 在onEventMounted中添加类名
eventEl.classList.add('break-event');

/* 组件CSS文件中定义样式 */
.break-event {
  background-color: #FDDD9F !important;
  border-color: #202020 !important;
  color: #202020 !important;
}
.break-event:hover {
  opacity: 0.9 !important;
}

添加!important是为了覆盖FullCalendar的默认样式优先级。

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