FullCalendar页面刷新后显示异常，点击视图按钮或调整窗口才恢复

问题描述 #

页面刷新后日历无法正常展示，只有点击Month、Week、Day等操作按钮，或者调整浏览器窗口大小时才能正常显示，页面再次刷新后问题复现。
问题截图：

问题根因 #

FullCalendar执行calendar.render()初始化时，目标容器#leave_calendar尚未完成最终尺寸计算，导致日历初始渲染尺寸异常。触发视图切换、窗口resize操作时，FullCalendar会自动重新计算布局，因此显示恢复正常。

修复方案 #

方案1：调整初始化时机（优先推荐） #

将初始化逻辑从DOMContentLoaded事件迁移到window.load事件，确保所有样式资源加载完成、容器尺寸计算完毕后再初始化日历，同时添加强制更新尺寸逻辑做双重保险：

window.addEventListener('load', function() {
  var calendarEl = document.getElementById('leave_calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    height: 650,
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    navLinks: true,
    nowIndicator: true,
    selectable: true,
    dayMaxEvents: true,
    events: [
      {
        title: 'Frank',
        start: '2021-09-17',
        end: '2021-09-21',
      },
    ]
  });
  calendar.render();
  // 强制重新计算日历尺寸
  calendar.updateSize();
});

方案2：适配容器隐藏场景 #

如果日历容器默认处于隐藏状态（如放在tab页、折叠面板内），需要在容器第一次切换为显示状态的时机，手动调用calendar.updateSize()更新布局。

方案3：样式检查 #

确认自定义类leave-calendar未设置display: none等会影响初始尺寸计算的属性，也可尝试将配置项height改为'auto'适配自适应高度场景。

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