Vue中使用FullCalendar加载ICS文件时如何将自定义字段存入extendedProps

FullCalendar官方iCalendar插件默认仅自动映射description、location、organizer等标准非核心字段到事件的extendedProps中，自定义ICS字段不会被默认识别，需通过内置钩子手动提取。

实现方法 #

在calendarOptions中添加eventDataTransform钩子，该钩子会在每个ICS事件解析完成后、插入日历前触发，可获取完整原始iCal事件实例，从中提取自定义字段注入extendedProps即可。

修改后完整代码 #

data() {  
  return {
    selectedEvent: {},
    calendarOptions: {
      themeSystem: 'bootstrap',
      editable: false,
      plugins: [ dayGridPlugin, timeGridPlugin, listPlugin, bootstrapPlugin, iCalendarPlugin ],
      initialView: 'timeGridWeek',
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay',
      },
      // 新增事件数据转换钩子
      eventDataTransform: (eventData) => {
        const rawIcalEvent = eventData.extendedProps.icalEvent
        if (rawIcalEvent) {
          // 字段名与ICS内的自定义字段完全一致，大小写敏感
          eventData.extendedProps.SITE = rawIcalEvent.getProperty('SITE')
          eventData.extendedProps.TITLE = rawIcalEvent.getProperty('TITLE')
          eventData.extendedProps.CUSTOM_FIELDS = rawIcalEvent.getProperty('CUSTOM_FIELDS')
          // 其他自定义字段按以上格式补充即可
        }
        return eventData
      },
      events: {
        url: 'my_ics_url',                             
        format: 'ics',  
      },           
      eventClick: function(info) {                     
        // 此处可直接读取自定义字段
        console.log(info.event.extendedProps.CUSTOM_FIELDS)
      },
    }
  }
}

注意事项 #

• 原代码中events和eventClick配置放在了calendarOptions外部，属于配置位置错误，需同步修正到calendarOptions内部才能生效
• getProperty方法的入参需要和ICS文件中的自定义字段名完全匹配，区分大小写
• 如果自定义字段包含多个值，可调用getProperties方法获取全部值的列表

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