Range Calendar

RangeCalendar selects a date range (from/to) using a two-phase toggle that enhances react-day-pickers default range behavior. The second example prevents clicking days outside the provided availability sets via the disableUnavailableClick prop.

Examples

RangeCalendar – default

<Formik initialValues={{ range: undefined }} onSubmit={() => {}}>
  {({ values }) => (
    <Flex flexDirection="column">
      <RangeCalendar
        name="range"
        availableDays={[dayjs().toDate(), dayjs().add(1, 'day').toDate()]}
        toOnlyDays={[dayjs().add(2, 'day').toDate()]}
      />
      <p>{values.range ? formatRange(values.range) : 'No range selected'}</p>
    </Flex>
  )}
</Formik>

RangeCalendar – disable unavailable days

<Formik initialValues={{ range: undefined }} onSubmit={() => {}}>
  {({ values }) => (
    <Flex flexDirection="column">
      <RangeCalendar
        name="range"
        availableDays={[dayjs().toDate(), dayjs().add(1, 'day').toDate()]}
        toOnlyDays={[dayjs().add(2, 'day').toDate()]}
        disableUnavailableClick
      />
      <p>{values.range ? formatRange(values.range) : 'No range selected'}</p>
    </Flex>
  )}
</Formik>