$.getJSON配合evoCalendar使用时日历事件无法正常显示问题

问题原因 #

• 核心原因是$.getJSON属于异步网络请求，你当前的代码执行顺序有误，在请求还没返回结果时就已经执行了日历初始化逻辑，此时calEvents还是未赋值的空值/undefined，日历初始化阶段没有拿到有效事件数据，自然无法渲染。
• 次要可能原因：
  • 接口返回的JSON结构和你硬编码的结构不一致，比如外层多了接口通用包装层（例如{code:200, data: [...], msg:"success"}），你直接把返回的整体传给calendarEvents导致结构不匹配
  • 网络请求被跨域限制、请求地址报错404/500，导致JSON没有正常获取到，calEvents没有被正确赋值

解决方法 #

方案1：在getJSON回调中初始化日历 #

等异步请求拿到数据之后再执行日历初始化，确保传入的事件数据已经是有效值：

$.getJSON("JSON URL", function(json) {
  // 可以先在控制台打印确认返回的json和你硬编码的结构完全一致
  console.log(json);
  // 拿到数据后再初始化日历
  $('#evoCalendar').evoCalendar({
    todayHighlight: true,
    sidebarToggler: true,
    eventListToggler: true,
    canAddEvent: false,
    calendarEvents: json, // 如果返回的json外层有包装，这里替换为对应字段，比如json.data
    onSelectDate: function() {
        // console.log('onSelectDate!')
    },
    onAddEvent: function() {
        console.log('onAddEvent!')
    }
  });
});

方案2：先初始化日历，拿到数据后动态更新事件 #

如果你需要提前渲染日历框架，后续再加载事件，可以调用evoCalendar提供的动态添加事件方法更新：

// 先初始化日历，此时可以传空的事件数组
$('#evoCalendar').evoCalendar({
  todayHighlight: true,
  sidebarToggler: true,
  eventListToggler: true,
  canAddEvent: false,
  calendarEvents: [],
  onSelectDate: function() {
      // console.log('onSelectDate!')
  },
  onAddEvent: function() {
      console.log('onAddEvent!')
  }
});

// 异步请求获取事件
$.getJSON("JSON URL", function(json) {
  // 调用evoCalendar的addEvent方法批量添加事件
  $('#evoCalendar').evoCalendar('addEvent', json);
});

排查校验步骤 #

如果上述方法仍不生效，可按顺序排查：

1. 打开浏览器控制台，查看$.getJSON请求是否正常返回，有没有跨域、404、500等报错
2. 打印请求返回的json值，对比你硬编码的事件结构，确认完全一致，没有多余的嵌套层级
3. 检查返回的日期格式是否和硬编码的格式完全统一，避免多余空格、大小写错误等问题

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