FullCalendar v3.9.0多选日期时仅选起止时间矩形区域的技术问询

我刚好处理过类似的需求，在FullCalendar v3.9.0里完全可以实现——核心就是拦截默认的多选日期拆分逻辑，只记录用户选择的起始和结束时间点，把中间的处理交给后端就行。下面是具体的实现步骤：

1. 基础配置开启选择功能 #

先确保你的日历配置里开启了选择权限，同时可以根据需求调整辅助参数：

$('#calendar').fullCalendar({
  selectable: true, // 开启日期/时间选择功能
  selectHelper: true, // 显示选择区域的辅助提示框
  unselectAuto: false, // 关闭点击其他区域自动取消选择的默认行为（可选，按需开启）
  // 其他日历配置（比如视图、事件源等）...
});

2. 重写选择逻辑，仅记录起止时间 #

默认情况下，拖拽选择跨天范围时，FullCalendar会自动拆分出每天的时间段并生成选择数组。我们要做的就是在select事件里阻止这个默认行为，自己维护一个全局的起止时间变量：

// 全局变量存储选择的起止时间
let selectionStart = null;
let selectionEnd = null;

$('#calendar').fullCalendar({
  // ...其他配置
  select: function(start, end, jsEvent, view) {
    // 第一次选择时初始化起止时间
    if (!selectionStart) {
      selectionStart = start.clone();
      selectionEnd = end.clone();
    } else {
      // 后续选择时更新范围：取最早的开始时间和最晚的结束时间
      if (start.isBefore(selectionStart)) {
        selectionStart = start.clone();
      }
      if (end.isAfter(selectionEnd)) {
        selectionEnd = end.clone();
      }
    }

    // 返回false阻止FullCalendar的默认选择行为，避免生成按天拆分的选择数组
    return false;
  },
  // 可选：监听取消选择事件，重置全局变量
  unselect: function() {
    selectionStart = null;
    selectionEnd = null;
  }
});

3. 自定义跨天选择的视觉反馈（可选） #

默认的选择框可能不会自动适配跨天的大范围，你可以手动添加自定义样式来优化视觉效果：

select: function(start, end, jsEvent, view) {
  // ...前面的起止时间逻辑
  // 移除之前的自定义选择框
  $('.custom-selection').remove();
  // 创建新的选择覆盖层
  const $selection = $('<div class="custom-selection"></div>');
  $('#calendar .fc-content').append($selection);
  
  // 根据日历视图类型（月/周/日）计算选择框的位置和尺寸
  // 这里仅提供思路，具体计算需要结合你的DOM结构调整
  $selection.css({
    position: 'absolute',
    backgroundColor: 'rgba(0, 123, 255, 0.2)',
    border: '1px solid rgba(0, 123, 255, 0.5)',
    borderRadius: '4px',
    left: /* 起始位置X坐标 */,
    top: /* 起始位置Y坐标 */,
    width: /* 选择区域宽度 */,
    height: /* 选择区域高度 */,
    pointerEvents: 'none' // 避免遮挡日历交互
  });
}

对应的CSS可以单独写在样式文件里：

.custom-selection {
  transition: all 0.2s ease;
}

4. 提交数据到后端 #

当用户确认要保存休息时段时，直接把selectionStart和selectionEnd这两个Moment对象转换成后端需要的格式（比如ISO字符串）提交即可：

$('#save-rest-btn').click(function() {
  if (selectionStart && selectionEnd) {
    const submitData = {
      start: selectionStart.toISOString(),
      end: selectionEnd.toISOString()
    };
    
    // 发送请求到后端
    $.ajax({
      url: '/api/save-rest-period',
      method: 'POST',
      data: submitData,
      success: function(res) {
        // 处理成功逻辑：比如刷新日历、提示用户
        $('#calendar').fullCalendar('refetchEvents');
        $('#calendar').fullCalendar('unselect');
        alert('休息时段已保存');
      }
    });
  }
});

注意事项 #

• FullCalendar v3默认依赖Moment.js，所以代码里的时间操作都是用Moment的方法（clone()、isBefore()等），如果你的项目里没有引入Moment，需要先添加依赖。
• 测试不同视图（月视图、周视图、日视图）下的选择行为，确保起止时间的记录逻辑在所有视图下都正常工作。
• 如果需要支持调整已选择的范围，可以监听日历的拖拽事件，更新全局的selectionStart和selectionEnd变量。

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