jQuery FullCalendar页面刷新后样式异常，如何维持中间竖线样式稳定？

我之前也碰到过类似FullCalendar刷新后样式跑偏的问题，尤其是时间轴的竖线异常，结合你给出的代码片段，给你几个实用的排查和解决方向：

1. 确保CSS加载顺序与完整性 #

这是最常见的诱因：

• 确认你已经正确引入了FullCalendar的核心CSS（包括agenda视图对应的样式文件），并且把FullCalendar的CSS放在自定义样式之前加载——这样自定义样式才能正确覆盖默认样式，不会被框架样式冲掉。
• 如果用的是CDN引入的CSS，试试强制清空浏览器缓存（Ctrl+Shift+R），旧缓存的样式文件经常会导致刷新后显示异常。

2. 调整日历初始化时机 #

如果页面刷新后DOM还没完全渲染就初始化了日历，会导致样式计算错误。把你的初始化代码放到DOM加载完成的回调里：

$(document).ready(function() {
  $('#calendar').fullCalendar({
    locale: 'nl',
    weekends: true,
    defaultView: 'agendaWeek',
    allDaySlot: false,
    slotLabelFormat: "HH:mm",
    axisFormat: 'HH:mm',
    timeFormat: 'HH:mm'
    // 其他配置项...
  });
});

如果是单页应用，要确保在组件挂载完成后再执行初始化（比如Vue的mounted钩子、React的useEffect）。

3. 强制触发日历重新渲染 #

如果上述方法无效，可以在页面完全加载后手动让FullCalendar重新计算布局：

window.onload = function() {
  // 针对你用的旧版FullCalendar（v3及以前）
  $('#calendar').fullCalendar('render');
};

这会强制日历重新解析容器尺寸和样式，修复竖线变长或错位的问题。

4. 排查自定义样式冲突 #

检查你自己写的CSS有没有不小心修改了FullCalendar的核心类，比如.fc-axis、.fc-time-grid、.fc-divider这些和时间轴竖线相关的类。用浏览器开发者工具（F12）对比初始加载和刷新后的元素样式，看看哪些属性（比如height、border、position）发生了异常变化。

5. 给日历容器设置明确尺寸 #

如果#calendar容器没有固定宽高，刷新后容器尺寸变化会导致FullCalendar布局计算出错。可以给容器添加明确的样式：

#calendar {
  width: 100%;
  height: 800px; /* 根据你的页面布局调整数值 */
}

先从CSS加载顺序和初始化时机开始排查，这两个是解决这类问题的核心方向，大部分情况都能搞定。

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