FullCalendar在react-bootstrap Accordion中渲染错乱的原因排查

组件代码示例 #

events = [{ title: "今日事件", date: new Date() }];
<FullCalendar
    height="auto"
    contentHeight="auto"
    defaultView="dayGridMonth"
    plugins={[dayGridPlugin]}
    events={this.events}
/>

问题现象 #

将上述 FullCalendar 组件放入 React-Bootstrap 的 Accordion 组件中时，会出现渲染错乱的情况：

点击上月/下月按钮，或者对页面进行缩放操作后，组件即可恢复正常渲染。

已复现该场景：Accordion 1 初始处于折叠状态，展开后会出现和上图完全一致的渲染问题；同样，对页面进行缩放或点击月份切换按钮后，组件恢复正常渲染。

使用的依赖版本 #

"bootstrap": "^4.6.0",
"@fullcalendar/daygrid": "^5.11.3",
"@fullcalendar/react": "^5.11.2",
"react": "^17.0.1",
"react-bootstrap": "^1.4.3",

问题原因 #

核心原因是FullCalendar 初始化时无法获取容器的正确尺寸：

• React-Bootstrap 的 Accordion 初始折叠时，内部内容容器被设置为display: none，此时 FullCalendar 渲染时无法读取到容器的实际宽高，只能基于错误的尺寸值进行布局计算，最终导致日历的格子、日期等元素排版错乱。
• 点击月份切换按钮或缩放页面时，FullCalendar 会触发内部的重绘/布局重新计算逻辑（比如监听窗口 resize 事件、视图切换事件），此时容器已经展开，能获取到正确的尺寸参数，因此渲染恢复正常。

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