FullCalendar初始化异常：页面加载仅显头部，需触发重绘才完整显示

问题原因 #

这种现象的核心原因是：FullCalendar初始化时，日历容器（或其父级容器）处于不可见状态（比如被display: none隐藏、在未激活的标签页/折叠面板中）。此时FullCalendar无法正确获取容器的实际尺寸，导致仅渲染了头部区域；当你打开开发者工具或调整窗口时，浏览器触发重排，FullCalendar自动重新计算尺寸，才会渲染完整日历。

解决方案 #

1. 确保初始化时容器可见 #

如果日历放在动态显示的区域（比如Tab页、折叠面板），不要在页面加载完成就初始化FullCalendar，而是在该区域被激活显示后再执行初始化代码。

2. 显示后强制更新尺寸 #

如果必须提前初始化，在容器显示的瞬间调用updateSize()方法，让FullCalendar重新计算尺寸：

// 示例：假设你有一个触发日历显示的按钮/Tab切换事件
document.getElementById('show-calendar-trigger').addEventListener('click', function() {
  // 先让容器显示（比如移除隐藏类）
  document.getElementById('box6').classList.remove('hidden');
  // 调用updateSize更新日历尺寸
  calendar.updateSize();
});

3. 给日历容器设置固定高度 #

直接通过CSS给日历容器指定高度，让FullCalendar初始化时就能明确渲染高度：

#calendar {
  height: 600px;
  min-height: 600px;
}

代码修改示例 #

比如在你的HTML中添加CSS样式：

<div class="profile-content" id="box6">
<div class="profile-schedule">
    <h2 class="profile-schedule-title">Schedule</h2>
    <div id="calendar"></div>
</div>
<style>
#calendar {
  height: 600px;
  min-height: 600px;
}
</style>

或者调整JavaScript逻辑，确保容器可见后再初始化：

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var container = document.getElementById('box6');
    
    // 检查容器是否可见，不可见则监听显示状态变化
    if (window.getComputedStyle(container).display === 'none') {
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.attributeName === 'style' && window.getComputedStyle(container).display !== 'none') {
                    initCalendar(calendarEl);
                    observer.disconnect();
                }
            });
        });
        observer.observe(container, { attributes: true });
    } else {
        initCalendar(calendarEl);
    }
});

function initCalendar(el) {
    var calendar = new FullCalendar.Calendar(el, {
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek'
        },
        initialView: 'dayGridMonth',
        expandRows: true,
        navLinks: true,
        editable: true,
        dragScroll: true,
        eventColor: '#E43D50',
        events: [{
                title: 'Clyde Stokes',
                start: '2022-07-04',
                display: 'background',
                color: '#E43D50'
            },
            {
                title: 'Lunch',
                start: '2022-07-12T12:00:00'
            },
            {
                title: 'Conference',
                start: '2022-07-11',
                end: '2022-07-13',
                color: 'rgba(255,255,255, 0.04)' // override!
            }
        ]
    });
    calendar.render();
}

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