Function RangeCalendarView

packages/emcn/src/components/calendar/calendar.tsx:349–469

({
  startDate,
  endDate,
  showTime = false,
  onRangeChange,
  onCancel,
  onClear,
  className,
}: CalendarRangeProps)

}

function RangeCalendarView({
  startDate,
  endDate,
  showTime = false,
  onRangeChange,
  onCancel,
  onClear,
  className,
}: CalendarRangeProps) {
  const seededStart = useMemo(() => parseDateValue(startDate), [startDate])
  const { today, view, goToPrevMonth, goToNextMonth, cells } = useCalendarView(seededStart)

  const [rangeStart, setRangeStart] = useState<Date | null>(seededStart)
  const [rangeEnd, setRangeEnd] = useState<Date | null>(() => parseDateValue(endDate))
  const [selectingEnd, setSelectingEnd] = useState(false)
  const [startTime, setStartTime] = useState(() => extractTime(startDate, DEFAULT_RANGE_START_TIME))
  const [endTime, setEndTime] = useState(() => extractTime(endDate, DEFAULT_RANGE_END_TIME))

  const pickDay = (day: number) => {
    const date = new Date(view.year, view.month, day)
    if (!selectingEnd || !rangeStart) {
      setRangeStart(date)
      setRangeEnd(null)
      setSelectingEnd(true)
      return
    }
    if (date < rangeStart) {
      setRangeEnd(rangeStart)
      setRangeStart(date)
    } else {
      setRangeEnd(date)
    }
    setSelectingEnd(false)
  }

  const clear = () => {
    setRangeStart(null)
    setRangeEnd(null)
    setSelectingEnd(false)
    onClear?.()
  }

  const apply = () => {
    if (!rangeStart) return
    const bounds = buildRangeBounds(rangeStart, rangeEnd ?? rangeStart, {
      showTime,
      startTime,
      endTime,
    })
    onRangeChange(bounds.start, bounds.end)
  }

  return (
    <div className={cn('flex w-[256px] flex-col p-2', className)}>
      <CalendarHeader
        month={view.month}
        year={view.year}
        onPrev={goToPrevMonth}