FullCalendar 周视图中高亮指定日期与时间范围的完整实现指南-html教程

本文详解如何在 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 提取为外部常量或组件状态变量。

⚠️ 注意事项：