FullCalendar v3：如何在选中时段前获取时长并做限制？

嘿，针对你用FullCalendar v3 + moment.js开发可选中日历的需求，我整理了一套可行的实现方案，刚好能解决"选中前实时校验时长"和"超时时段高亮警示"的问题，往下看：

一、选中过程中实时校验时长（选中前处理） #

FullCalendar v3里没有直接叫"选中前"的事件，但有个selecting事件——它会在用户拖动鼠标选时段的整个过程中实时触发，完美契合你"选中完成前获取时长"的需求。我们可以在这里实时计算时长，动态调整选中区域的样式：

$(function() {
  $('#calendar').fullCalendar({
    selectable: true,
    defaultView: 'agendaDay',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'agendaDay'
    },
    // 拖动选中时实时触发，相当于"选中前"的处理
    selecting: function(startDate, endDate) {
      // 用moment的diff方法算时长，比手动转时间戳靠谱多了，第三个参数true返回小数小时
      const durationHours = endDate.diff(startDate, 'hours', true);
      const highlightArea = $('.fc-highlight');
      
      // 根据时长切换高亮色
      if (durationHours > 3) {
        highlightArea.css('background-color', '#f8d7da'); // 浅红警示
      } else {
        highlightArea.css('background-color', ''); // 恢复默认样式
      }
    },
    // 选中完成后触发的最终处理
    select: function(startDate, endDate) {
      const durationHours = endDate.diff(startDate, 'hours', true);
      
      if (durationHours > 3) {
        alert('选中时长超过3小时啦，请重新选择！');
        // 可选：直接清空选中区域
        $('#calendar').fullCalendar('unselect');
      } else {
        alert('没问题，继续后续操作吧！');
        // 这里加你的业务逻辑就行
      }
    }
  });
});

二、进阶：直接禁止选中超时时段 #

如果你不想让用户选中超过3小时的时段，还可以用selectAllow回调——它会在选中前判断是否允许该操作，返回false就直接阻止选中：

selectAllow: function(selectInfo) {
  const durationHours = selectInfo.end.diff(selectInfo.start, 'hours', true);
  // 只允许选中3小时及以内的时段
  return durationHours <= 3;
}

三、关于选中区域变色的内置功能说明 #

很遗憾，FullCalendar v3没有内置的配置项可以直接修改选中区域的颜色，框架默认给选中区域加了.fc-highlight类，所以我们只能通过操作这个类的样式来实现警示效果。我更推荐提前定义CSS类，这样比直接写内联样式更灵活：

/* 定义警示样式类 */
.fc-highlight.danger {
  background-color: #f8d7da; /* 红色警示 */
}
.fc-highlight.warning {
  background-color: #fff3cd; /* 黄色警示，比如接近3小时时提示 */
}

然后在selecting事件里切换类：

if (durationHours > 3) {
  highlightArea.addClass('danger').removeClass('warning');
} else if (durationHours > 2.5) {
  highlightArea.addClass('warning').removeClass('danger');
} else {
  highlightArea.removeClass('danger warning');
}

这样就能实现多等级的警示效果啦～

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