Bootstrap模态框中FullCalendar显示异常问题求助

这种情况的核心原因是模态框初始处于隐藏状态，FullCalendar初始化时无法正确读取容器的宽高，导致渲染布局错乱；而窗口resize事件会触发FullCalendar重新计算容器尺寸，所以调整屏幕后显示恢复正常。以下是具体解决思路：

1. 模态框显示后再初始化日历 #

不要在页面加载时就初始化FullCalendar，而是监听Bootstrap模态框的shown.bs.modal事件，在模态框完全显示后再执行日历初始化：

$('#yourModalId').on('shown.bs.modal', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    // 你的日历配置项
    initialView: 'dayGridMonth',
    events: '/your-events-api'
  });
  calendar.render();
});

如果已经提前初始化过日历实例，也可以在模态框显示后调用render()方法重新渲染：

$('#yourModalId').on('shown.bs.modal', function() {
  calendar.render(); // calendar为已初始化的日历实例
});

2. 给日历容器设置明确宽高（备选方案） #

给FullCalendar的容器添加固定宽高样式，确保初始化时能获取到有效尺寸：

#calendar {
  width: 100%;
  min-height: 600px;
}

注：该方式适配性稍弱，不如第一种方案灵活，适合固定尺寸的场景。

3. 避免在隐藏容器中提前初始化 #

绝对不要在模态框的隐藏内容块中提前执行FullCalendar初始化代码，必须等容器完全可见后再执行，否则尺寸计算逻辑会直接失效。

按上述方法处理后，模态框打开时FullCalendar能正确读取容器的可见尺寸，直接渲染出正常布局，无需手动调整屏幕大小。

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