在FullCalendar的AgendaWeek视图中为所有单元格（含空单元格）添加复选框的咨询

我之前在项目里刚好遇到过一模一样的需求，FullCalendar官方文档确实没有直接给出现成方案，但通过它提供的插槽渲染钩子完全可以实现，下面是我验证过的可行步骤：

核心思路 #

利用FullCalendar的插槽内容渲染钩子，为每个时间段插槽（无论是否包含事件）插入自定义的复选框元素。不同版本的FullCalendar对应的钩子名称略有不同，下面分版本说明：

版本5及以上（推荐） #

新版FullCalendar中AgendaWeek视图已更名为timeGridWeek，我们可以使用slotContent回调函数来生成每个插槽的内容：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek', // 对应原AgendaWeek视图
    slotMinTime: '08:00:00', // 自定义时间段起始
    slotMaxTime: '18:00:00', // 自定义时间段结束
    slotContent: function(arg) {
      // 为每个插槽生成带唯一标识的复选框
      return `<input type="checkbox" class="slot-checkbox" data-slot-start="${arg.start.toISOString()}">`;
    },
    // 其他日历配置（如事件源、头部导航等）
  });
  calendar.render();
});

版本4及以下 #

旧版中使用slotRender钩子，需要手动创建DOM元素并插入到插槽容器中：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['dayGrid', 'timeGrid'],
    defaultView: 'agendaWeek',
    slotRender: function(info) {
      const checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.classList.add('slot-checkbox');
      checkbox.dataset.slotStart = info.date.toISOString();
      info.el.appendChild(checkbox);
    },
    // 其他日历配置
  });
  calendar.render();
});

样式调整（可选） #

为了让复选框显示在合适的位置，避免与事件内容重叠，可以添加以下CSS：

/* 给插槽容器设置相对定位，让复选框可以绝对定位 */
.fc-timegrid-slot-frame {
  position: relative;
}

/* 调整复选框的位置和层级 */
.slot-checkbox {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 10; /* 确保复选框在事件上方，可点击 */
  transform: scale(0.9); /* 可选：缩小复选框适配插槽 */
}

处理复选框交互（可选） #

如果需要监听复选框的选中/取消事件，比如保存用户选择，可以添加全局事件监听：

document.addEventListener('change', function(e) {
  if (e.target.classList.contains('slot-checkbox')) {
    const slotStartTime = e.target.dataset.slotStart;
    const isChecked = e.target.checked;
    // 这里可以根据需求做后续处理，比如存入本地存储或发送到后端
    console.log(`时间段 ${slotStartTime} 已${isChecked ? '选中' : '取消选中'}`);
  }
});

注意事项 #

• 确保你的FullCalendar版本支持对应的钩子函数，避免版本不兼容问题
• 如果插槽内有事件，可通过调整z-index控制复选框与事件的层级关系
• 可以根据业务需求，给复选框添加更多自定义属性（如日期、时间段标识），方便后续逻辑处理

亲测这个方案是完全可行的，我之前在排班类项目里就是这么实现的，你可以根据自己的项目版本调整代码~

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