FullCalendar v5编辑事件后render()不刷新及隐藏区域加载问题咨询

问题根因 #

该问题不属于Bootstrap兼容问题，由两个逻辑触发：

• 你调用的render()方法仅会重绘FullCalendar本地已缓存的事件数据，不会主动重新请求最新的事件接口，所以后端数据更新后视图无变化
• FullCalendar渲染时需要读取容器的宽高尺寸，如果容器处于隐藏状态（未激活的标签页、折叠面板、隐藏的模块等），读取到的尺寸为0，就会出现渲染异常、白屏等问题

事件修改后视图不刷新的修复方案 #

把dateClick事件中ajax请求成功回调里的dCal.render()替换为dCal.refetchEvents()即可：

// 修改前
dCal.render();
// 修改后
dCal.refetchEvents();

refetchEvents()会主动触发你初始化时配置的events回调，拉取最新的后端事件数据，拉取成功后自动触发视图更新，background类型的事件也会同步刷新，不需要额外处理。

隐藏区域加载日历的解决方案 #

你现在绑定的shown.bs.tab事件逻辑是正确的，补充调整即可：

• 方案一（推荐）：延迟初始化日历，第一次切换到日历标签页时再执行getCalendar()初始化逻辑，避免初始化时容器隐藏导致的尺寸计算错误
• 方案二：如果需要提前初始化日历，调整标签页触发的回调逻辑，增加updateSize()方法强制重新计算容器尺寸：

$('#dati-fasce-tab').on('shown.bs.tab', function (event) {
    dCal.updateSize();
    // 如果需要同时刷新事件可以再加一行 dCal.refetchEvents();
})

如果是其他隐藏区域（比如模态框、折叠面板），对应在区域显示的回调事件中执行dCal.updateSize()即可解决渲染异常问题。

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