如何用FullCalendar实现周视图时段选择后通过提交按钮发送数据

这个需求完全可以通过FullCalendar的API结合自定义逻辑实现，以下是具体的实现思路和代码示例：

1. 基础配置：周视图与时段设置 #

先初始化周视图，配置1小时时段间隔并开启选择功能：

document.addEventListener('DOMContentLoaded', function() {
  let selectedSlots = new Set(); // 用Set存储选中时段，自动去重
  const calendarEl = document.getElementById('calendar');

  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    slotMinTime: '08:00:00', // 可选：设置时段起始时间
    slotMaxTime: '18:00:00', // 可选：设置时段结束时间
    slotDuration: '01:00:00', // 定义1小时的时段间隔
    selectable: true, // 允许点击选择时段
    selectMirror: true, // 选中时的临时视觉反馈
    // 处理时段选中/取消事件
    select: function(info) {
      const slotKey = `${info.startStr}-${info.endStr}`;
      if (selectedSlots.has(slotKey)) {
        // 取消选中：从集合移除并重新渲染状态
        selectedSlots.delete(slotKey);
      } else {
        // 添加选中：加入集合并渲染状态
        selectedSlots.add(slotKey);
      }
      renderSelectedSlots();
      calendar.unselect(); // 清除默认的选中高亮框
    },
    // 视图切换或日期变更时重新渲染选中状态
    datesSet: function() {
      renderSelectedSlots();
    }
  });

  calendar.render();

  // 渲染选中时段的背景色标识
  function renderSelectedSlots() {
    const events = Array.from(selectedSlots).map(key => {
      const [start, end] = key.split('-');
      return {
        start,
        end,
        display: 'background',
        backgroundColor: '#aaf0d1' // 自定义选中背景色
      };
    });
    // 先清空原有背景事件，再添加新的
    calendar.removeAllEventSources();
    calendar.addEventSource(events);
  }

  // 提交按钮的处理逻辑
  document.getElementById('submit-btn').addEventListener('click', function() {
    // 转换为后端需要的格式
    const submitData = Array.from(selectedSlots).map(key => {
      const [start, end] = key.split('-');
      return { start, end };
    });
    // 替换为实际的API请求
    console.log('提交的选中时段:', submitData);
    // fetch('/api/submit-slots', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify(submitData)
    // });
  });
});

2. 复选框标识的实现（可选） #

如果需要给每个时段添加复选框，可通过slotLabelContent自定义时段标签：

// 在Calendar配置中添加
slotLabelContent: function(info) {
  const slotEnd = info.date.add(calendar.options.slotDuration);
  const slotKey = `${info.date.toISOString()}-${slotEnd.toISOString()}`;
  const isChecked = selectedSlots.has(slotKey);
  return {
    html: `<input type="checkbox" ${isChecked ? 'checked' : ''} 
            data-slot="${slotKey}"> ${info.text}`
  };
}

然后添加复选框的点击监听，同步选中状态：

// 在calendar.render()之后添加
calendarEl.addEventListener('change', function(e) {
  if (e.target.type === 'checkbox') {
    const slotKey = e.target.dataset.slot;
    e.target.checked ? selectedSlots.add(slotKey) : selectedSlots.delete(slotKey);
    renderSelectedSlots(); // 同步背景色标识
  }
});

3. 关键说明 #

• 用Set存储选中时段的唯一标识（起始+结束时间字符串），避免重复选择
• 通过背景事件display: 'background'实现选中状态的视觉标识，无需额外DOM操作
• 复选框方式需要自定义slot内容，同时关联选中状态集合，保证交互一致性
• 提交时将Set转换为数组，可根据后端需求调整数据格式

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