Fullcalendar v5.7.0周模式无日期分隔线、当日未高亮问题求助

第一步：确认依赖引入完整 #

FullCalendar v5的不同视图对应单独的样式文件，样式异常大概率是缺失对应CSS文件导致的，请先检查项目中是否正确引入了以下资源：

• FullCalendar核心CSS文件
• dayGrid视图对应CSS文件
• timeGrid视图对应CSS文件
  如果是全量引入FullCalendar包，只需要引入全量CSS文件即可，无需单独引入各视图样式。

第二步：添加自定义修复样式 #

如果确认依赖引入完整后问题仍存在，添加以下自定义CSS即可同时解决两个异常问题：

/* 修复周视图各日期列分隔线 */
.fc-timeGridWeek-view .fc-col-header-cell,
.fc-timeGridWeek-view .fc-daygrid-day,
.fc-timeGridWeek-view .fc-timegrid-col {
    border-right: 1px solid #e5e7eb !important;
}

/* 修复周视图当前日期高亮效果 */
.fc-timeGridWeek-view .fc-day-today {
    background-color: #fffbeb !important;
}
/* 补充周视图表头今日单元格高亮 */
.fc-timeGridWeek-view .fc-col-header-cell.fc-day-today {
    background-color: #fef3c7 !important;
}

样式调整说明 #

• 分隔线的颜色、粗细可根据你的项目设计规范自行修改border-right参数
• 高亮背景色可替换为适配项目的色值，建议选择低透明度的浅色系避免遮挡日历事件内容
• 若样式仍不生效，可打开浏览器开发者工具选中对应日历单元格，查看是否有更高优先级的样式覆盖了自定义规则，通过提升选择器优先级即可解决。

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