求助：FullCalendar无法动态添加事件问题

我帮你分析下问题核心：你现在的代码里存在异步执行的时序问题——AJAX是异步操作，当FullCalendar调用你的events函数时，函数会立刻执行完并返回空的events数组，而AJAX的success回调要等接口返回数据后才会触发，这时候早就错过了FullCalendar加载事件的时机，所以日历上自然看不到事件。

下面给你两种可行的解决方案：

方案一：使用FullCalendar的异步回调机制 #

FullCalendar的events函数支持传入回调参数，你可以在AJAX请求完成后，把处理好的事件数据通过这个回调传递给日历：

events: function(fetchInfo, successCallback) {
  jQuery.ajax({
    url: '/employee/leave/2',
    type: 'GET',
    dataType: 'json',
    success: function(doc) {
      console.log(doc);
      const eventList = [];
      if (doc != null) {
        eventList.push({
          id: doc.id,
          title: doc.reason,
          start: "2018-05-22", // 建议用带前导零的ISO日期格式，避免解析出错
          // end: doc.to_date
        });
      }
      // 把事件数组传给FullCalendar的回调，完成加载
      successCallback(eventList);
    }
  });
}

方案二：直接让FullCalendar处理AJAX请求（更简洁） #

FullCalendar本身就支持直接配置URL来获取事件数据，不需要自己写AJAX，它会自动处理请求和数据解析：

events: {
  url: '/employee/leave/2',
  type: 'GET',
  dataType: 'json',
  // 可选：对接口返回的数据做格式转换
  success: function(doc) {
    const eventList = [];
    if (doc != null) {
      eventList.push({
        id: doc.id,
        title: doc.reason,
        start: "2018-05-22",
        // end: doc.to_date
      });
    }
    return eventList;
  }
}

额外注意事项 #

• 检查接口返回的doc结构是否符合预期，比如id、reason这些字段是否存在；
• 日期格式尽量使用ISO标准格式（如2018-05-22），避免FullCalendar解析出错；
• 如果你的接口返回的是事件数组（而不是单个对象），可以直接把返回值转成符合要求的事件结构，不用逐个push。

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