Range Calendar Playground

Explore the field's visual direction and behavior in one place.

Make it yours.

Change a few decisions and see the same range behavior adapt in real time.

Visual direction

Date format

Months shown

Week starts on

Popover side

Behavior

Date Range

Start date

End date

Active API

<RangeCalendar
  defaultValue={range}
  inputFormat="MM/DD/YYYY"
  numberOfMonths={1}
  weekStartsOn={1}
  popoverSide="bottom"
  fromPlaceholder="Arrival"
  toPlaceholder="Departure"
  popoverAvoidCollisions={false}
  classNames={violetTheme}
>
  Date Range
</RangeCalendar>