Bootstrap模态框中FullCalendar显示异常，窗口调整后恢复正常

我正在开发一款Web应用，已集成FullCalendar并将其嵌入Bootstrap模态框中，相关代码如下：

HTML代码 #

<div class="modal" tabindex="-1" role="dialog" id="calendar-modal">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Booking Calendar</h3>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div id="calendar"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Create</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

脚本代码 #

<script>
document.addEventListener('DOMContentLoaded', function(){
    var calendarUI = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarUI,{
    });
    calendar.render();
});
</script>

打开模态框时日历显示异常，只要调整窗口大小（甚至打开开发者工具），日历显示就会恢复正常。请问问题出在哪里？是否FullCalendar不适用于模态框？

原因 #

不是FullCalendar不适用于模态框，问题核心是日历初始化时模态框处于隐藏状态。FullCalendar执行render()时需要读取父容器（#calendar元素）的实际尺寸来布局，但隐藏的模态框容器尺寸为0，导致日历渲染错乱。而调整窗口大小会触发FullCalendar的resize事件，它会重新计算容器尺寸并修正布局，所以显示恢复正常。

解决方案 #

两种可行方案，按需选择：

方案1：模态框完全显示后再初始化日历

修改脚本，监听Bootstrap模态框的shown.bs.modal事件（这个事件在模态框动画完成、完全显示后触发），此时再创建并渲染日历：

<script>
document.addEventListener('DOMContentLoaded', function(){
    let calendar;
    // 监听模态框显示完成事件
    document.getElementById('calendar-modal').addEventListener('shown.bs.modal', function() {
        if (!calendar) {
            const calendarUI = document.getElementById('calendar');
            calendar = new FullCalendar.Calendar(calendarUI, {
                // 这里添加你的日历配置项
            });
        }
        calendar.render();
    });

    // 可选：模态框隐藏时销毁日历，减少内存占用
    document.getElementById('calendar-modal').addEventListener('hidden.bs.modal', function() {
        if (calendar) {
            calendar.destroy();
            calendar = null;
        }
    });
});
</script>

方案2：提前初始化，模态框显示时触发重绘

如果需要提前初始化日历（比如预加载数据），可以在页面加载时先创建日历实例，等模态框显示后调用render()或updateSize()强制重绘：

<script>
document.addEventListener('DOMContentLoaded', function(){
    const calendarUI = document.getElementById('calendar');
    const calendar = new FullCalendar.Calendar(calendarUI, {
        // 这里添加你的日历配置项
    });

    // 模态框显示后触发重绘
    document.getElementById('calendar-modal').addEventListener('shown.bs.modal', function() {
        calendar.render();
        // 也可以用updateSize方法：calendar.updateSize();
    });
});
</script>

关键提示 #

Bootstrap的shown.bs.modal事件是核心，它确保容器已经有了正确的尺寸，FullCalendar能基于这个尺寸完成正常渲染，避免出现布局错乱。

内容的提问来源于stack exchange，提问作者Ieva Kriščiūnaitė