Fullcalendar点击星期名选中当前视图同星期所有日期的实现问询

当然可以实现这个需求！我来一步步教你怎么搞定它～

核心思路 #

我们需要给星期表头的每个单元格绑定点击事件，当用户点击某个星期名称时，遍历当前视图内的所有日期，筛选出和该星期对应的日期，然后给这些日期单元格添加选中样式或标记。

具体实现步骤 #

1. 绑定表头点击事件

在FullCalendar的视图渲染完成后，给每个星期表头单元格绑定点击事件。我们可以用viewDidMount和viewDidUpdate钩子（适用于v5/v6版本），确保切换视图时也能重新绑定事件。

2. 筛选同星期日期

利用你提供的enumerateDaysBetweenDates函数获取当前视图的所有日期范围，然后筛选出和点击的星期索引匹配的日期。

3. 添加选中样式

给筛选出的日期单元格添加自定义的选中样式，让用户能直观看到选中状态。

完整代码示例 #

首先是日历初始化配置：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    // 你的基础配置，比如视图、事件源等
    initialView: 'dayGridMonth',
    firstDay: 0, // 0=周日作为一周第一天，1=周一，根据你的需求调整
    viewDidMount: function(info) {
      bindDayHeaderClick(info.view);
    },
    viewDidUpdate: function(info) {
      bindDayHeaderClick(info.view);
    },
    // 其他配置...
  });

  calendar.render();
});

然后是辅助函数实现：

// 补全你提供的日期遍历函数
function enumerateDaysBetweenDates(startDate, endDate) {
  var now = startDate.clone(), dates = [];
  while (now.isSameOrBefore(endDate)) {
    dates.push(now.format('M/D/YYYY'));
    now.add(1, 'day');
  }
  return dates;
}

// 绑定表头点击事件的函数
function bindDayHeaderClick(view) {
  // 获取所有星期表头单元格
  const dayHeaders = view.el.querySelectorAll('.fc-col-header-cell');
  
  dayHeaders.forEach((header, index) => {
    // 先移除旧的点击事件，避免重复绑定
    header.removeEventListener('click', handleDayHeaderClick);
    // 绑定新的点击事件，传递星期索引和当前视图
    header.addEventListener('click', () => handleDayHeaderClick(index, view));
  });
}

// 处理表头点击的核心函数
function handleDayHeaderClick(dayIndex, view) {
  // 先清除之前的选中状态
  document.querySelectorAll('.fc-day-selected').forEach(el => {
    el.classList.remove('fc-day-selected');
  });

  // 获取当前视图的日期范围（注意activeEnd是视图最后一天的下一天，所以要减1天）
  const startDate = view.activeStart;
  const endDate = view.activeEnd.clone().subtract(1, 'day');
  
  // 获取该范围内的所有日期
  const allDates = enumerateDaysBetweenDates(startDate, endDate);
  
  // 筛选出和点击星期匹配的日期
  const targetDates = allDates.filter(dateStr => {
    const date = moment(dateStr, 'M/D/YYYY');
    // 这里要和你的firstDay配置对应：
    // 如果firstDay=0（周日开头），dayIndex 0对应周日，date.day() === 0
    // 如果firstDay=1（周一开头），需要调整索引，比如下面的注释代码
    return date.day() === dayIndex;

    // 当firstDay=1时的判断逻辑：
    // const adjustedDay = dayIndex === 6 ? 0 : dayIndex + 1;
    // return date.day() === adjustedDay;
  });

  // 给目标日期单元格添加选中样式
  targetDates.forEach(dateStr => {
    // 转换为FullCalendar使用的YYYY-MM-DD格式的日期字符串
    const formattedDate = moment(dateStr, 'M/D/YYYY').format('YYYY-MM-DD');
    const dayEl = document.querySelector(`[data-date="${formattedDate}"]`);
    if (dayEl) {
      dayEl.classList.add('fc-day-selected');
    }
  });
}

最后添加自定义的选中样式（放在CSS里）：

.fc-day-selected {
  background-color: #e3f2fd; /* 浅蓝色背景，可根据需求自定义 */
  border-radius: 4px;
  cursor: pointer;
}

关键注意点 #

• 星期索引匹配：一定要根据你设置的firstDay参数调整筛选逻辑，否则会出现选中日期和点击的星期不匹配的情况。
• 视图切换兼容：使用viewDidUpdate钩子确保切换视图（比如月视图→周视图）时，表头点击事件能重新绑定。
• 样式自定义：你可以修改fc-day-selected的CSS样式，让选中状态更符合你的项目设计。

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