FullCalendar v5如何过滤Google Calendar中标注为Busy的日程事件

FullCalendar 自带的谷歌日历集成默认仅拉取日程的常用字段，不会主动请求transparency（闲/忙状态）字段，所以你在extendedProps中找不到该属性，这个需求完全可以实现，调整配置即可。

可行实现方案 #

方案1：修改现有FullCalendar配置，追加请求字段 #

只需要调整你要过滤的目标日历的事件源配置，增加参数让谷歌日历API返回transparency字段，同时映射到事件属性中即可：

1. 给目标事件源添加extraParams指定返回字段，增加eventDataTransform回调处理原始返回数据
   比如你要过滤工作室日历的Busy日程，修改对应eventSource配置：

{
  id: getStudioCalendar().id,
  googleCalendarId: getStudioCalendar().googleid,
  editable: false,
  color: getStudioCalendar().color,
  // 追加以下配置
  extraParams: {
    // 指定谷歌API返回字段，包含transparency
    fields: 'items(id,summary,description,location,start,end,transparency,htmlLink)'
  },
  eventDataTransform: function(rawEvent) {
    // Busy状态的日程直接返回null，不会被渲染到日历中
    if (rawEvent.transparency === 'opaque') {
      return null
    }
    // 将transparency字段写入扩展属性，方便后续逻辑调用
    return {
      ...rawEvent,
      extendedProps: {
        ...rawEvent.extendedProps,
        transparency: rawEvent.transparency
      }
    }
  }
}

2. 之后你可以直接在getEventDetails方法中获取闲忙状态：

// transparency值为transparent代表空闲，opaque代表忙碌
var available = event.extendedProps.transparency === 'transparent'

方案2：自主调用谷歌日历API拉取数据 #

如果方案1无法满足你的深度定制需求，可以放弃FullCalendar自带的谷歌日历集成，自行通过fetch调用谷歌日历events.list接口拿到完整的日程数据，处理后再传入FullCalendar的events配置项，这种方式可以拿到谷歌日历返回的所有字段，自由度更高。

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