如何在FullCalendar的dayGridWeek视图添加额外列并获取初始内容？

不用纠结在content()里直接获取原有视图内容，换个继承+扩展的思路更靠谱：

1. 基于dayGridWeek继承自定义视图 #

直接继承dayGridWeek的视图逻辑，复用它生成的原有结构，再插入额外列：

const customWeekView = {
  type: 'dayGridWeek',
  buttonText: '自定义周视图',
  content(renderProps) {
    // 调用父视图的content方法，拿到原有的周视图DOM结构
    const originalViewDom = this.parent.content(renderProps);
    
    // 创建你需要的额外列元素
    const extraColumn = document.createElement('div');
    extraColumn.className = 'fc-day fc-custom-extra-col';
    extraColumn.innerHTML = `
      <div class="fc-day-header">总计</div>
      <div class="fc-day-content"></div>
    `;
    
    // 找到原有日期列的容器，把额外列追加进去
    const dayGridContainer = originalViewDom.querySelector('.fc-day-grid');
    if (dayGridContainer) {
      dayGridContainer.appendChild(extraColumn);
    }
    
    return originalViewDom;
  }
};

2. 调整CSS适配布局 #

新增列后需要修改网格布局，避免样式错乱：

/* 把原来的7列网格改成8列 */
.fc-day-grid {
  grid-template-columns: repeat(8, 1fr) !important;
}

/* 可选：给额外列加个区分样式 */
.fc-custom-extra-col {
  background-color: #f5f5f5;
  border-left: 2px solid #ddd;
}

3. 注册并启用自定义视图 #

初始化日历时注册这个视图，设置为默认视图或添加到头部按钮：

document.addEventListener('DOMContentLoaded', () => {
  const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    plugins: ['dayGrid'],
    views: {
      customWeek: customWeekView
    },
    headerToolbar: {
      center: 'customWeek,dayGridWeek' // 把自定义视图加到头部切换按钮
    },
    initialView: 'customWeek'
  });
  
  calendar.render();
});

注意事项 #

如果你的FullCalendar版本较新，DOM结构类名可能有变化，比如fc-day-grid可能改成了其他类，需要用浏览器开发者工具查看实际的容器类名，调整选择器即可。

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