如何清空数组以将新Date()对象插入日历，替换旧节假日API返回数据

问题原因 #

你当前的写法是每次获取新数据后都重新调用$("#calendar").simpleCalendar()初始化插件，这类jQuery日历插件首次初始化后会将配置缓存并生成DOM结构，重复初始化不会覆盖已有的实例配置，因此就算eventsArr更新了也不会触发日历重新渲染。

解决步骤 #

1. 首次初始化日历的时候将实例缓存，后续更新直接操作实例，不要重复初始化
2. 拿到新的API数据后，调用插件提供的事件更新方法刷新日历即可

修正后代码示例 #

// 全局保存日历实例，只初始化一次
let calendarInstance = null;

// 首次页面加载时初始化日历
$(document).ready(function() {
  calendarInstance = $("#calendar").simpleCalendar({
    displayEvent: true,
    events: [] // 初始为空数组
  }).data('simpleCalendar'); // 拿到插件实例
})

// 每次从API拿到新数据后的处理逻辑
function updateCalendarEvents(result) {
  // 清空旧事件，组装新事件
  const newEvents = [];
  for(let i = 0; i < result.data.holidays.length; i++){
    const date = result.data.holidays[i].date.iso;
    newEvents.push({
      startDate: new Date(date),
      endDate: new Date(date),
      summary: result.data.holidays[i].description
    });
  }
  // 更新实例的事件配置
  calendarInstance.events = newEvents;
  // 调用渲染方法刷新日历
  calendarInstance.render();
}

兼容方案 #

如果你使用的simpleCalendar版本没有公开render方法，可以在更新事件后先销毁旧实例再重新初始化：

// 销毁旧实例
$("#calendar").simpleCalendar('destroy');
// 用新数据重新初始化
$("#calendar").simpleCalendar({
  displayEvent:true,
  events: newEvents
});

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