CalendarRange

CalendarRange displays a grid of days in two months and allows users to select a contiguous range of dates.

Basic usage

const Demo = () => {
  const [value, setValue] = useState<DateRange>([
    new Date("2022-02-13"),
    new Date("2022-02-21"),
  ]);

  return <CalendarRange value={value} onClick={setValue} />;
};

With min and max date

When a minimum or maximum date is specified, these dates are grayed out and cannot be selected.

const Demo = () => {
  const [value, setValue] = useState<DateRange>([
    new Date("2022-02-13"),
    new Date("2022-02-21"),
  ]);

  return (
    <CalendarRange
      maxDate={new Date("2022-02-24")}
      minDate={new Date("2022-02-04")}
      value={value}
      onClick={setValue}
    />
  );
};

Using a single calendar

Use the prop numberOfCalendars to set how many calendars should to display. The CalendarRange supports 1 or 2 displayed calendars.

const Demo = () => {
  const [value, setValue] = useState<DateRange>([
    new Date("2022-02-13"),
    new Date("2022-02-21"),
  ]);

  return (
    <CalendarRange value={value} onClick={setValue} numberOfCalendars={1} />
  );
};