如何在FullCalendar周视图中高亮特定日期及时间？

• 核心思路：周视图的日期单元格同样带有data-date属性，但DOM类名和月视图略有差异，同时要利用FullCalendar的内置事件（而非直接绑定jQuery事件）避免视图切换时的失效问题。

• 方案一：使用FullCalendar内置dateClick回调（推荐，适配所有视图）
  这个方法会在用户点击任意日期单元格时触发，自动处理视图切换后的DOM重新渲染问题：

  document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');
    const calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'timeGridWeek', // 周视图模式
      dateClick: function(info) {
        // 先移除所有已高亮的日期
        document.querySelectorAll('.fc-highlighted-date').forEach(el => {
          el.classList.remove('fc-highlighted-date');
        });
        // 给点击的日期单元格添加高亮类
        info.dayEl.classList.add('fc-highlighted-date');
      },
      // 其他日历配置项...
    });
    calendar.render();
  });
  

  配合CSS定义高亮样式（比直接操作内联CSS更易维护）：

  .fc-highlighted-date {
    background-color: rgba(143,223,130,0.5) !important;
  }
  

• 方案二：沿用月视图的jQuery写法（适配周视图DOM）
  周视图中，日期单元格的类名通常是fc-daygrid-day（DayGrid周视图）或fc-timegrid-day（TimeGrid周视图），仍保留data-date属性，可调整选择器实现：

  // 假设已获取目标日期变量date
  // 先清除之前的高亮状态
  $('.fc-daygrid-day.fc-highlighted-date, .fc-timegrid-day.fc-highlighted-date').removeClass('fc-highlighted-date');
  // 给目标日期添加高亮类
  $('.fc-daygrid-day[data-date="' + date + '"], .fc-timegrid-day[data-date="' + date + '"]')
    .addClass('fc-highlighted-date');
  

• 注意事项：

  • 不要直接给DOM元素绑定click事件，FullCalendar切换视图时会重新渲染DOM，之前绑定的事件会失效，优先使用内置回调。
  • 若需跨视图保留高亮状态，可将选中日期存入全局变量，在datesRender回调中重新应用高亮。

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