React FullCalendar禁用前后3个月外日期弹窗异常问题求助

问题说明 #

需要实现：在@fullcalendar/react ^6.1.5中，禁止选择当前日期前后3个月范围外的日期。现有实现存在以下异常：

• 首次选择范围外日期时会弹出提示，后续选择则不再触发提示
• 若移除isAlertShown状态控制，鼠标悬停日历日期时也会频繁触发弹窗

原代码问题分析 #

1. selectAllow回调触发频率高：该回调不仅在用户点击选择日期时触发，鼠标悬停在日期上时也会反复调用，用于实时判断当前位置是否允许选择，直接在其中调用alert会导致悬停时频繁弹窗。
2. 状态控制逻辑缺陷：使用isAlertShown状态标记是否已弹窗，一旦设置为true，后续选择范围外日期时会跳过弹窗逻辑，且React状态更新是异步的，无法精准控制弹窗时机。

修复方案 #

核心优化点 #

• 区分操作类型：通过selectInfo.event.type判断当前是用户点击选择（'select'）还是鼠标悬停（'mouseover'），仅在点击时触发提示。
• 归一化日期比较：将所有参与比较的日期统一设置为当天的起始时间（0时0分0秒），避免时间部分（如当前时分秒）干扰日期范围判断。
• 移除冗余状态：取消isAlertShown状态，直接在不符合条件且是点击操作时触发弹窗。

修复后代码示例 #

处理回调函数

const handleSelectAllow = (selectInfo) => {
  // 归一化当前日期到当天0点
  const currentDate = new Date();
  currentDate.setHours(0, 0, 0, 0);

  const selectedDate = new Date(selectInfo.start);
  selectedDate.setHours(0, 0, 0, 0);

  // 计算前后3个月的日期，同样归一化到0点
  const threeMonthsAgo = new Date(currentDate);
  threeMonthsAgo.setMonth(currentDate.getMonth() - 3);

  const threeMonthsFromNow = new Date(currentDate);
  threeMonthsFromNow.setMonth(currentDate.getMonth() + 3);

  // 判断是否在允许范围内
  const isInRange = selectedDate >= threeMonthsAgo && selectedDate <= threeMonthsFromNow;

  if (isInRange) {
    return true;
  } else {
    // 仅在用户点击选择时弹出提示
    if (selectInfo.event?.type === 'select') {
      alert('日期选择超出范围，请选择当前日期前后3个月内的日期。');
    }
    return false;
  }
};

FullCalendar组件使用

<FullCalendar
  plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
  selectAllow={handleSelectAllow}
  selectLongPressDelay={null}
  initialView="dayGridMonth"
  editable={false}
  selectable={true}
  showNonCurrentDates={false}
  selectMirror={true}
  events={allEvents}
  select={handleDateClick}
  eventContent={renderEventContent}
  eventDidMount={eventDidMount}
  eventWillUnmount={eventWillUnmount}
/>

额外优化建议 #

• 替换原生alert为项目中统一的UI提示组件（如Modal、Toast），提升用户体验。
• 如果需要限制日历导航（禁止切换到3个月外的月份视图），可以添加validRange配置：

  validRange={{
    start: threeMonthsAgo,
    end: threeMonthsFromNow
  }}
  

  这样日历会直接禁用超出范围的月份切换按钮，从根源减少用户误操作。

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