ReactJS中Full Calendar禁止拖拽超出选中日期及移动端交互处理咨询

结论 #

完全可以通过自定义函数实现你提到的所有需求，不需要依赖官方未公开的接口，也不需要额外重写触摸事件逻辑。

实现方案 #

你提的三个需求（自定义拖拽选择逻辑、移动端触摸适配、禁止拖拽到指定日期外）都可以通过interaction插件自带的回调钩子实现，不需要自己造轮子：

1. 核心限制逻辑实现 #

interaction插件提供了两个专门的校验钩子，分别对应「已有事件拖拽」和「框选新增事件」两个场景的范围校验，返回false就会直接禁止对应操作，不需要事后回退，用户体验更好：

• eventAllow：控制已有事件拖拽时的允许放置范围
• selectAllow：控制框选操作的允许选择范围

2. 移动端适配 #

@fullcalendar/interaction插件已经原生适配了移动端触摸事件，包括触摸拖拽、触摸框选，上述两个校验钩子在移动端场景下会自动触发，不需要你额外编写触摸监听逻辑。如果出现触摸灵敏度问题，可以加touchStartThreshold配置调整触发拖拽的像素阈值。

3. 修改后的组件代码示例 #

你可以参考下面的代码修改你的配置，其中allowedRange是你要允许操作的日期范围，可以根据业务逻辑动态更新：

import { useState, useRef } from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import allLocales from '@fullcalendar/core/locales-all'
import momentTimezonePlugin from '@fullcalendar/moment-timezone'

// 你的组件内部逻辑
const CalendarComponent = () => {
  const calendarRef = useRef(null)
  // 定义允许操作的日期范围，可根据业务逻辑动态修改
  const [allowedRange, setAllowedRange] = useState({
    start: new Date('2024-01-01'), // 替换为你的允许范围起始
    end: new Date('2024-12-31') // 替换为你的允许范围结束
  })

  return (
    <FullCalendar
      nowIndicator
      plugins={[momentTimezonePlugin, timeGridPlugin, dayGridPlugin, interactionPlugin]}
      initialView="timeGridWeek"
      headerToolbar={{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay',
      }}
      ref={calendarRef}
      editable
      selectable
      selectMirror
      dayMaxEvents
      weekends
      {/* 新增：限制已有事件拖拽范围 */}
      eventAllow={(dropInfo) => {
        return dropInfo.start >= allowedRange.start && dropInfo.end <= allowedRange.end
      }}
      {/* 新增：限制框选新增的范围 */}
      selectAllow={(selectInfo) => {
        return selectInfo.start >= allowedRange.start && selectInfo.end <= allowedRange.end
      }}
      {/* 可选：调整移动端触摸拖拽灵敏度，单位为像素 */}
      touchStartThreshold={5}
      select={(e) => handleEventAdd(e)}
      eventClick={(e) => handleEventUpdate(e)}
      events={currentevents}
      eventDrop={(e) => handleupdateSchedule(e)}
    />
  )
}

自定义扩展 #

如果需要更复杂的校验逻辑，比如排除特定时间段、区分不同事件的可拖拽范围，直接在上述两个钩子的返回逻辑里增加对应的判断条件即可，完全支持自定义规则。

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