Angular中FullCalendar从4.X升级到6.0.1后eventClick属性获取异常

FullCalendar从v5版本开始调整了事件属性的访问规则，你遇到的问题正是这个版本变更导致的。

问题根源 #

v4.x版本中允许直接通过.运算符读取自定义事件属性（比如borderColor），但v5+版本要求所有非内置的事件属性必须通过getProp()方法读取。直接访问的话，无法获取到之前用setProp()设置的值，所以第二次点击事件时，borderColor依然显示为空。

修复代码 #

把eventClick处理器里的属性读取逻辑改成调用getProp()方法即可：

eventClick: (info)=>{
  // 用getProp替代直接访问属性
  console.log("event #1 :"+info.event.getProp("borderColor"));
  info.event.setProp("borderColor",'red');
  console.log("event #2 :"+info.event.getProp("borderColor"));
},

验证效果 #

修改后再次测试：

• 第一次点击输出：

  event #1 :
  event #2 :red
  

• 第二次点击输出：

  event #1 :red
  event #2 :red
  

完全符合预期结果。

补充说明 #

FullCalendar的内置事件属性（如title、start、end）仍支持直接访问，但自定义属性、样式类相关的非标准属性，必须通过getProp()/setProp()来读写，这是v5+版本的规范设计，用于统一事件属性的管理机制，避免属性冲突和意外覆盖。

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