FullCalendar v4日模式下强制显示周格式日期头部的实现问询

方案一：自定义7天日期头部（推荐） #

直接在timeGridDay视图下生成自定义的7天导航头部，保持内容区域的原生单日样式，避免结构混乱。

1. 初始化日历并自定义头部渲染

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['timeGrid'],
    defaultView: 'timeGridDay',
    // 自定义DayHeader内容，生成7天的周导航
    dayHeaderContent: function(info) {
      const startOfWeek = info.date.clone().startOf('week'); // 周起始日可根据需求调整为周日/周一
      let headerHtml = '<div class="fc-custom-week-header">';

      // 循环生成7天的日期标签
      for (let i = 0; i < 7; i++) {
        const currentDate = startOfWeek.clone().add(i, 'day');
        const isActive = currentDate.isSame(info.date, 'day');
        const dateClass = isActive ? 'fc-header-day-active' : '';

        headerHtml += `
          <div class="fc-header-day ${dateClass}" data-date="${currentDate.format('YYYY-MM-DD')}">
            ${currentDate.format('MMM D')} <!-- 可自定义日期显示格式，比如'YYYY-MM-DD' -->
          </div>
        `;
      }

      headerHtml += '</div>';
      return headerHtml;
    },
    // 其他日历配置（事件、时区等）
    events: [
      // 你的预订事件数据
    ]
  });

  calendar.render();

  // 绑定日期切换事件
  document.addEventListener('click', function(e) {
    if (e.target.classList.contains('fc-header-day')) {
      const targetDate = e.target.getAttribute('data-date');
      calendar.gotoDate(targetDate);
    }
  });
});

2. 添加CSS样式适配

/* 隐藏原生的单日头部 */
.fc-timeGridDay-view .fc-day-header {
  display: none;
}

/* 自定义周头部布局，模仿原生周视图样式 */
.fc-custom-week-header {
  display: flex;
  justify-content: space-around;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  padding: 8px 0;
}

.fc-header-day {
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.fc-header-day-active {
  background-color: #007bff;
  color: #fff;
}

方案二：基于周视图隐藏多余内容 #

如果不想自定义头部，可以用timeGridWeek视图，通过CSS隐藏非当前日的内容列，保留完整的7天头部。

1. 初始化日历

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['timeGrid'],
    defaultView: 'timeGridWeek',
    // 确保内容只显示当前日
    visibleRange: function(currentDate) {
      return {
        start: currentDate.clone().startOf('day'),
        end: currentDate.clone().endOf('day')
      };
    },
    // 其他配置
    events: [/* 事件数据 */]
  });

  calendar.render();

  // 点击头部日期切换到对应日期
  document.querySelectorAll('.fc-day-header').forEach(el => {
    el.addEventListener('click', function() {
      const targetDate = this.getAttribute('data-date');
      calendar.gotoDate(targetDate);
    });
  });
});

2. CSS隐藏多余列并调整宽度

/* 隐藏非激活日的内容列 */
.fc-timeGridWeek-view .fc-time-grid .fc-day:not(.fc-day-active) {
  display: none;
}

/* 让激活日的内容列占满整个宽度 */
.fc-timeGridWeek-view .fc-time-grid .fc-day-active {
  width: 100% !important;
}

/* 确保头部的7天日期正常显示 */
.fc-timeGridWeek-view .fc-day-header-container {
  display: flex;
}

为什么之前的方法失效？ #

FullCalendar会根据初始化时的duration参数生成对应的DOM结构和计算样式（比如单元格宽度、布局比例）。动态修改duration后，内部布局逻辑会重新执行，之前复制的7天头部结构和修改后的单日DOM结构不匹配，必然导致样式错位。上述两种方案都避免了动态修改duration，从根源上解决了对齐问题。

内容的提问来源于stack exchange，提问作者Patryk Szczepański