如何通过FullCalendar的getEventById获取事件对象的editable属性？

调用calendar.getEventById获取事件后，直接访问evdata.editable返回undefined，但原始传入的事件对象明明包含editable: true字段。

原始事件对象 #

{"id":"8_1","start":"2024-02-22 20:24","end":"2024-02-23 20:24","title":"Eileen","editable":true,"backgroundColor":"#40FF00","textColor":"#000000"}

相关代码 #

eventClick: function(info) {
    console.log(info.event.id)
    let evdata = calendar.getEventById( info.event.id )
    console.log(evdata)
}

控制台输出 #

8_1 calendars.js:228
Object { _context: {…}, _def: {…}, _instance: {…} }
_context: Object { viewTitle: "18 Feb – 24 Feb", calendarApi: {…}, dispatch: dispatch(action), … }
_def: Object { title: "Eileen", publicId: "8_1", defId: "232", … }
allDay: false
defId: "232"
extendedProps: Object {  }
groupId: ""​​
hasEnd: true​​
interactive: undefined​​
publicId: "8_1"​​
recurringDef: null
​​sourceId: "16"
​​title: "Eileen"
​​ui: Object { startEditable: true, durationEditable: true, backgroundColor: "#40FF00", … }
​​url: ""
​​<prototype>: Object { … }
​_instance: Object { instanceId: "233", defId: "232", range: {…}, … }
​<prototype>: Object { … }
calendars.js:230

原因与解决办法 #

从控制台输出能看到，FullCalendar返回的事件对象结构和原始传入的不同，editable属性没有直接暴露在顶层，而是被拆解到了内部的_def.ui对象中（对应startEditable和durationEditable），或者可以通过官方API方法判断：

方法1：使用官方API方法（推荐） #

FullCalendar提供了isEditable()方法来判断事件是否可编辑：

eventClick: function(info) {
    console.log(info.event.id)
    let evdata = calendar.getEventById( info.event.id )
    let isEditable = evdata.isEditable();
    alert(isEditable); // 会返回true
}

方法2：直接访问内部属性（不推荐，内部结构可能随版本变化） #

如果要直接读取属性，可以从_def.ui中获取：

eventClick: function(info) {
    console.log(info.event.id)
    let evdata = calendar.getEventById( info.event.id )
    let editable = evdata._def.ui.startEditable && evdata._def.ui.durationEditable;
    alert(editable); // 会返回true
}

简单说，FullCalendar会把你传入的editable: true转换成UI层面的具体控制项，所以不能直接在返回的事件对象顶层拿到这个属性，用官方方法是最稳妥的方式。

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