本文详解如何在 fullcalendar 的周视图（agendaweek）中精准高亮包含具体时间的日期范围，通过 `dayrender` 回调结合 moment.js 的 `isbetween` 方法实现动态样式控制，并规避 dom 直接操作的兼容性风险。
在 FullCalendar 中，月视图（month view）可通过 jQuery 选择器直接定位 .fc-day 元素并设置背景色，但该方式在周视图（如 agendaWeek 或 timeGridWeek）中不可靠——因为周视图的单元格结构更复杂（含多行时间槽），且日期容器类名和 DOM 层级随版本变化较大（v5+ 已移除 fullCalendar 方法，改用 @fullcalendar/core）。因此，推荐使用官方支持的生命周期回调函数进行语义化渲染控制。
核心方案是利用 dayRender 回调（v4 及更早）或 dayCellDidMount（v5+），它会在每个日期单元格渲染完成时触发，并传入标准化的日期对象与 DOM 节点。以下以兼容性更广的 v4 版本为例（适用于 jQuery + FullCalendar v3/v4）：
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
// 注意：startDate 和 endDate 需为 Moment 对象或 ISO 字符串（自动解析）
dayRender: function(date, cell) {
const startDate = moment('2023-04-02T09:00:00');
const endDate = moment('2023-04-06T17:30:00');
// 使用 isBetween 判断 date 是否落在 [startDate, endDate] 闭区间内
if (date.isBetween(startDate, endDate, null, '[]')) {
$(cell).css('background-color', 'rgba(143, 223, 130, 0.5)');
// 可选：增强可访问性，添加 aria-label 提示
$(cell).attr('aria-label', '高亮时段：' + startDate.format('MM/DD HH:mm') + ' 至 ' + endDate.format('MM/DD HH:mm'));
}
}
});✅ 关键要点说明：
- date 参数是 Moment 实例（v4），代表当前渲染的日期粒度（不含具体时间），因此 isBetween 的比较逻辑默认按“日”对齐；若需精确到小时/分钟，应改用 eventRender 或 businessHours 配置，或结合 slotDuration 手动计算时间槽高亮。
- '[]' 表示闭区间（包含起止日期），若仅需高亮中间日期，可改为 '(]'（左开右闭）等。
- 避免在循环中重复创建 Moment 对象，建议将 startDate/endDate 提取为外部常量或组件状态变量。
⚠️ 注意事项：
-
FullCalendar v5+ 已弃用 fullCalendar() 方法，需改用 @fullcalendar/interaction 插件配合 datesSet 或 dayCellDidMount 钩子；示例迁移如下：
import { Calendar } from '@fullcalendar/core'; import dayGridPlugin from '@fullcalendar/daygrid'; import timeGridPlugin from '@fullcalendar/timegrid'; const calendar = new Calendar(calendarEl, { plugins: [dayGridPlugin, timeGridPlugin], initialView: 'timeGridWeek', dayCellDidMount: ({ date, el }) => { const start = moment('2023-04-02T09:00:00'); const end = moment('2023-04-06T17:30:00'); if (moment(date).isBetween(start, end, 'day', '[]')) { el.style.backgroundColor = 'rgba(143, 223, 130, 0.5)'; } } }); 若需高亮跨天的时间段（如 4月5日 22:00 至 4月6日 02:00），dayRender 仅能按日期着色整列；此时应使用 events 数组添加透明占位事件（rendering: 'background'），实现真正的时间维度高亮。
综上，dayRender 是周视图日期高亮的首选方案——语义清晰、版本兼容、易于维护。始终优先使用 FullCalendar 提供的钩子而非手动 DOM 查询，既保障稳定性，也为未来升级预留空间。
