fullCalendar在Bootstrap非激活标签页加载时渲染异常如何解决

你之前绑定click事件调用updateSize()不生效的核心原因有两个：

• 非激活状态的Bootstrap标签页默认是display: none状态，fullCalendar初始化时无法获取容器的真实宽高，会按0尺寸或者默认错误尺寸渲染
• 普通click事件触发时，标签页的切换动画、DOM布局更新还没完成，此时执行尺寸计算拿到的还是容器隐藏状态下的错误数值，重绘自然无效

方案1：监听Bootstrap标签页的官方显示完成事件（推荐） #

不要自己给标签绑原生click事件，改用Bootstrap标签页组件自带的shown.bs.tab事件，这个事件会在标签完全激活、CSS动画执行完毕、DOM布局稳定后才触发，此时重算尺寸可以拿到正确数值：

// 绑定所有标签的切换完成事件
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  // 判断当前切换到的是否为日历标签
  if (e.target.id === 'mytabcalendar') {
    calendar.updateSize();
  }
})

如果你的项目用的是Bootstrap 5，选择器里的data属性改成data-bs-toggle="tab"即可，事件名不变。

方案2：延迟初始化日历组件 #

如果不想每次切到日历标签都重算尺寸，可以等第一次打开日历标签的时候再初始化fullCalendar，从根源避免隐藏状态下初始化拿错尺寸的问题：

let calendarInitStatus = false;
let calendar = null;

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  if (e.target.id === 'mytabcalendar' && !calendarInitStatus) {
    // 此处替换成你自己的fullCalendar初始化逻辑
    const calendarDom = document.getElementById('你的日历容器ID');
    calendar = new FullCalendar.Calendar(calendarDom, {
      // 你的原有日历配置
    });
    calendar.render();
    calendarInitStatus = true;
  }
})

方案3：核对fullCalendar版本对应API #

如果你用的是v3及更早版本的fullCalendar，没有updateSize()方法，需要调用旧版的重渲染API：

// v3及更早版本写法
$('#你的日历容器ID').fullCalendar('render');

注意：所有尺寸重算、组件渲染逻辑，必须放在容器可见后执行，隐藏状态下DOM元素的宽高计算值为0，必然导致渲染错乱。

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