本文详解如何在 fullcalendar 的周视图（agendaweek）中，基于精确的日期时间范围动态高亮背景色，替代月视图中简单的 `data-date` 选择器方案。
在 FullCalendar 中，月视图（month view）可通过 DOM 属性选择器（如 $('.fc-day[data-date="2023-04-05"]')）快速定位并样式化某天单元格；但周视图（agendaWeek）结构更复杂——它由“天列 + 时间行”构成二维网格，每个可视单元格对应一个具体日期+时间段（如 2023-04-05 09:00–10:00），因此无法仅靠 data-date 精准匹配。正确方式是利用 FullCalendar 提供的生命周期钩子 dayRender（用于日单元格）或更精准的 eventRender / businessHours，但若目标是整日高亮（不区分时段），dayRender 是简洁可靠的方案。
以下为推荐实现（兼容 FullCalendar v3，适用于 jQuery 版本）：
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
// 注意：v5+ 已弃用 fullCalendar() 方法，改用 new Calendar(...)，此处按 v3 语法示例
dayRender: function(date, cell) {
const startDate = moment('2023-04-02T00:00:00');
const endDate = moment('2023-04-06T23:59:59'); // 使用闭区间确保包含末日全天
if (date.isBetween(startDate, endDate, null, '[]')) {
$(cell).css('background-color', 'rgba(143, 223, 130, 0.5)');
}
}
});✅ 关键说明：
- dayRender 回调在每个日单元格渲染完成时触发，参数 date 是该列代表的 moment 对象（仅含日期，不含具体时间），cell 是对应
的 jQuery 元素； - isBetween(..., '[]') 中的 '[]' 表示闭区间（包含起止日期），避免因时间精度丢失导致首尾日未被命中；
- 若需按具体时间段高亮（如仅 9:00–17:00），则应改用 viewSkeletonRender 配合手动遍历时间槽，或通过添加透明 backgroundEvents 实现（更语义化且支持响应式）；
- FullCalendar v5+（@fullcalendar/core）中，dayRender 已更名为 dayCellDidMount，且参数结构变化，需使用 info.dayEl.style.backgroundColor = '...' 方式设置样式。
⚠️ 注意事项：
- 避免在 dayRender 中执行耗时操作或频繁 DOM 查询，否则影响滚动性能；
- 若高亮逻辑依赖用户交互（如点击后高亮），建议将日期范围存入变量，并调用 calendar.refetchEvents() 或 calendar.rerenderEvents() 触发重绘（v3）；v5+ 可调用 calendar.updateSize() 或重新设置 dayCellContent；
- CSS 覆盖优先级问题：若主题样式使用 !important，需确保内联样式或更高权重的选择器生效。
综上，dayRender 是周视图整日高亮的首选方案——语义清晰、兼容性好、无需侵入 DOM 结构。对于更复杂的时段粒度控制，建议结合事件源（Event Source）或自定义插件实现，兼顾可维护性与扩展性。
