实现 FullCalendar 日期范围选择

Question

有没有一种方法可以实现 FullCalendar 日期范围选择，用户可以点击某一天成为范围的开始，另一天成为范围的结束？

在文档中，我只能看到可以通过单击和拖动来选择日期，对于可以更改 longPressDelay 的移动设备也是如此，但是让用户通过单击或点击日期来选择范围会更方便而不是按住并拖动来创建日期范围。

我尝试将 selectMirror 设置为 false 并将 selectable 设置为 true，但这并没有改变任何东西。这是我的日历组件：

const BookingCalendar = ({ onSelectRange }: BookingCalendarProps) => {
  const calendarRef = useRef<HTMLDivElement>(null)
  const [calendarHeight, setCalendarHeight] = useState(0)
  const [reservedDates, setReservedDates] = useState<Date[]>([])

  const handleSelect = ({ start, end }: DateSelectArg) => {
    onSelectRange(start, end)
  }

  useEffect(() => {
    // Mocked reserve dates - TODO: get dates from API
    const dates = [
      new Date('2023-05-01'),
      new Date('2023-05-05'),
      new Date('2023-05-10'),
      new Date('2023-05-18')
    ]
    setReservedDates(dates)

    if (calendarRef.current) {
      const height = calendarRef.current.offsetHeight
      setCalendarHeight(height)
    }
  }, [calendarRef])

  const today = new Date()
  const oneYearFromNow = new Date(today.getFullYear() + 1, today.getMonth(), today.getDate())

  return (
    <div className="h-screen max-h-[350px] sm:max-h-[600px]" ref={calendarRef}>
      <FullCalendar
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      selectable={true}
      selectMirror={false}
      dayMaxEvents={1}
      select={handleSelect}
      height={calendarHeight}
      events={reservedDates.map((date) => ({ start: date, allDay: true, backgroundColor: 'red', overlap: false, editable: false }))}
      eventDisplay="background"
      selectOverlap={false}
      longPressDelay={1}
      validRange={{
        start: today,
        end: oneYearFromNow
      }}
      />
    </div>
  )
}