如何在FullCalendar预约流程中限制可用时段的单次选择数量

实现逻辑 #

通过计算选中时间段的总时长，除以单时段步长得到选中的时段数量，超过设定阈值时直接拦截选择操作即可，修改点如下：

• 提前定义基础配置参数：MAX_SELECT_SLOT 为最大可选中的时段数（示例设为4，可自行调整为5或其他值），SLOT_DURATION 为日历单时段的时长（单位为毫秒，示例为30分钟，需和你日历配置的slotDuration保持一致）
• 在select回调中先计算本次选中的时段总数，超过阈值时提示并终止后续操作
• 补充重复选择时清除之前选中的背景事件的逻辑，避免选中记录冲突

完整修改后代码 #

$(document).ready(function() {
  // 自定义选择限制配置
  const MAX_SELECT_SLOT = 4; // 最多可选4个时段，可自行修改为5
  const SLOT_DURATION = 30 * 60 * 1000; // 单时段30分钟，单位毫秒，需和你日历实际的slotDuration配置一致
  let currentSelectEvent = null; // 存储当前选中的临时背景事件

  var calendar = $('#calendar').fullCalendar({
    timeZone: 'America/Caraca',
    initialView: 'timeline',
    allDaySlot: false,
    views: {
      dayGridMonth: { 
      }
    },
    editable:true,
    header:{
      center:' ',//'prev,next today',
      left:'title',
      right:'<span></'
    },
    businessHours: {
      // days of week. an array of zero-based day of week integers (0=Sunday)
      dow: [0, 1, 2, 3, 4, 5, 6], // 周日到周六
      start: '<?php echo $detData['stime']; ?>', // 营业开始时间
      end: '<?php echo $detData['endtime']; ?>', // 营业结束时间
    },
    events:{
      url: '<?php echo URL; ?>includes/action/teacher/booking_info.php',
      data: {home:'2',key:'<?php echo $teacherProfile['id']; ?>'},
      type: "GET",    
    },
    selectable: true,
    selectConstraint: "businessHours",
    select: function (start, end, jsEvent, view) {
      // 计算本次选中的时段总数
      const selectDuration = end.diff(start);
      const selectSlotCount = selectDuration / SLOT_DURATION;
      
      // 超过最大可选数直接拦截
      if(selectSlotCount > MAX_SELECT_SLOT){
        alert(`单次最多可选${MAX_SELECT_SLOT}个时段`);
        $("#calendar").fullCalendar('unselect'); // 清除本次无效选择
        return;
      }
      
      // 清除之前选中的临时背景事件，避免重复添加
      if(currentSelectEvent){
        $("#calendar").fullCalendar('removeEvents', currentSelectEvent.id);
      }
      
      // 新增本次选中的背景事件
      const newSelectEvent = {
        id: 'temp-select-' + Date.now(),
        start: start,
        end: end,
        rendering: 'background',
        block: true,
      };
      $("#calendar").fullCalendar('addEventSource', [newSelectEvent]);
      currentSelectEvent = newSelectEvent;
    },
    eventRender: function(event, eventElement) {
      if(event.status == 1) {
        eventElement.addClass('available');
      }
      if(event.status == 2) {
        eventElement.addClass('booked');
        eventElement.attr('data-bs-toggle','tooltip')
        eventElement.attr('data-bs-placement','top')
        eventElement.attr('title','已预约')
      }
      if(event.status == 3)
      {
        eventElement.addClass('booked-other'); 
      }
    },
  });
  $('.fc-content-col.booked').addClass('data-bs-toggletooltip')
});

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