
本文详解在 GWT(结合 Domino/UI 与 Nalu)中集成 FullCalendar v6 时,通过 refetchEvents 和手动事件源重载实现日历视图刷新而不丢失事件的完整方案,重点解决 gotoDate 后事件消失问题。
本文详解在 gwt(结合 domino/ui 与 nalu)中集成 fullcalendar v6 时,通过 `refetchevents` 和手动事件源重载实现日历视图刷新而不丢失事件的完整方案,重点解决 `gotodate` 后事件消失问题。
在基于 GWT 的富客户端应用中,使用 FullCalendar v6 集成日历功能时,一个常见痛点是:当用户通过弹窗修改或删除事件后调用 gotoDate() 切换日期,再执行 refetchEvents(),结果周视图中的事件全部消失——表面看是“刷新失败”,实则是 FullCalendar 的事件加载机制未被正确触发。
根本原因在于:FullCalendar v6 的 refetchEvents() 仅重新触发已注册的 eventSources.events 回调(即 onEventNeedMain),但该回调本身不会自动将新获取的事件注入日历实例;它仅用于异步提供事件数组,而日历是否渲染这些事件,取决于回调返回后是否完成了内部状态同步。尤其在 gotoDate() 强制跳转后,若未确保事件源上下文(如时间范围)与当前视图一致,回调可能返回空数据或旧缓存,导致视图清空。
✅ 正确解法不是单纯调用 refetchEvents(),而是 显式控制事件获取时机 + 主动更新日历事件源。参考已验证的解决方案,关键步骤如下:
1. 精确计算目标周范围,避免时间窗口错位
FullCalendar 的 eventSources.events 回调会传入 FcEventFetchInfo 对象,其中 start/end 是日历当前视图的精确时间边界(ISO 字符串)。若直接 gotoDate() 而不调整视图范围,回调可能仍按旧范围请求数据,导致服务端返回空结果。因此需主动计算目标周的周一至周日:
public void moveToLastEventModifiedDate() {
Date eventDate = lastModifiedEvent.getBeginDate();
// 获取该事件所在周的周一和下一个周一(即下周周一,用于确定本周结束)
Date previousMonday = DateUtils.getPreviousMonday(eventDate);
Date nextMonday = DateUtils.getNextMonday(eventDate);
JsDate jsDateBegin = new JsDate(
1900 + previousMonday.getYear(),
previousMonday.getMonth(),
previousMonday.getDate()
);
JsDate jsDateEnd = new JsDate(
1900 + nextMonday.getYear(),
nextMonday.getMonth(),
nextMonday.getDate()
);
// 跳转到事件日期,并在小日历中高亮
mainCalendar.gotoDate(new JsDate(1900 + eventDate.getYear(), eventDate.getMonth(), eventDate.getDate()));
smallCalendar.select(jsDateBegin); // 或使用 eventDate
// 构造 fetch info,强制指定时间范围
FcEventFetchInfo info = new FcEventFetchInfo();
info.start = jsDateBegin;
info.end = jsDateEnd;
// 手动触发事件获取(绕过自动 refetch 的不确定性)
this.getController().onEventNeedMain(info, success -> {
// ✅ 关键:将新事件数组直接设为日历的 events 选项
// 注意:fcOnEventNeed 应为包含最新事件列表的 JsArray 或 List<JsEvent>
mainCalendar.setOption("events", fcOnEventNeed);
// 再次 refetchEvents 确保渲染(此时 events 已更新)
mainCalendar.refetchEvents();
}, failure -> {
ErrorManager.displayServerError("event.list", failure.message, getController().getEventBus());
});
}2. refreshCalendar() 方法需分路径处理
- 若存在 lastModifiedEvent,走 moveToLastEventModifiedDate() 流程(含范围计算 + 手动 fetch + setOption("events", ...));
- 否则直接 refetchEvents(),依赖原始事件源回调自动填充。
@Override
public void refreshCalendar() {
if (lastModifiedEvent != null) {
moveToLastEventModifiedDate();
} else {
mainCalendar.refetchEvents();
}
}3. 注意事项与最佳实践
- 避免 addEventSource 误用:addEventSource() 是添加新事件源,而非替换现有源。重复调用会导致事件重复叠加,且无法清除旧源。应优先使用 setOption("events", ...) 直接覆盖事件数组。
- JsDate 构造陷阱:Java Date.getYear() 返回的是自1900年起的年份数(如2024 → 124),务必加 1900;getMonth() 返回 0~11,无需额外处理。
- 服务端接口对齐:确保 onEventNeedMain 回调中调用的服务端 API 支持接收 start/end 参数,并严格按 ISO 时间范围过滤事件,否则前端逻辑再完善也无意义。
- 性能优化建议:对高频操作(如拖拽调整),可增加防抖(debounce)逻辑,避免连续 gotoDate + refetchEvents 导致多次请求。
通过以上结构化处理,即可在 GWT 应用中稳定实现 FullCalendar v6 的精准刷新:既跳转到目标日期,又完整保留并重新渲染对应周期内的所有事件,彻底规避“事件消失”问题。

















