FullCalendar v3如何同时加载PHP接口与政府假日API两个事件源

问题根因 #

你配置的法定假日API返回格式为{日期字符串: 节日名称}的键值对对象，不符合FullCalendar默认要求的事件数组结构，所以直接配置到eventSources中时，框架无法识别解析，不会进入eventDataTransform回调；自定义拉取函数则存在变量名错误、未将格式化后的事件接入日历实例的问题。

方案一：直接配置eventSources实现双源加载 #

给假日事件源添加success回调，在回调中完成数据格式转换即可，完整配置如下：

$('#calendar').fullCalendar({
  eventSources: [
    // 法定假日事件源
    {
      url: 'https://calendrier.api.gouv.fr/jours-feries/metropole.json',
      type: 'GET',
      success: function(res) {
        const events = []
        for (const day in res) {
          events.push({
            title: res[day],
            start: day,
            allDay: true,
            color: '#ff9f89' // 单独设置假日事件颜色，区分自定义事件
          })
        }
        return events
      }
    },
    // 原有自定义事件源
    {
      url: myevents.php,
      type: 'GET',
      data: {
        param: parametreFilter
      }
    }
  ],
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  },
  lazyFetching: false,
  editable: true,
  droppable: true,
  dragScroll: true,
  defaultView: 'agendaWeek'
  // 其余原有配置保持不变
})

方案二：修复自定义getHolidays函数 #

你原函数中的变量引用错误，且没有将格式化后的事件同步到日历实例，修复后代码如下：

// 日历初始化后调用该函数即可
function getHolidays(url) {
  fetch(url)
    .then(function(res) {
      if (res.ok) {
        return res.json().then(function(days) {
          const holidays = []
          for (const day in days) {
            holidays.push({
              title: days[day],
              start: day,
              allDay: true,
              color: '#ff9f89'
            })
          }
          // 直接将格式化后的事件源添加到日历实例
          $('#calendar').fullCalendar('addEventSource', holidays)
        })
      } else {
        console.log("假日接口请求失败")
      }
    })
    .catch(function(err) {
      alert("请求错误: " + err)
    })
}

调用方法：在日历初始化完成后执行getHolidays('https://calendrier.api.gouv.fr/jours-feries/metropole.json')即可。

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