81 Pro components and page blocks

Get Pro
uibrik

Range Calendar

Pro

Preview

Customize

Range
Two
Monday
Min nights2
Max nights21
USD

Installation

Pro

Range Calendar is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/range-calendar

Usage

import { RangeCalendar } from "@/components/uibrik/range-calendar/range-calendar";​<RangeCalendar  mode="range"  months="2"  weekStartsOn="1"  minNights={2}  maxNights={21}  showPrices  highlightDeals  footer  currency="USD"  defaultValue={null}  locale="en-US"  onApply={(value) => {}}  // value={{ start: "…", end: "…" }}  // onChange={{ start: "…", end: "…" }}  // getDay={(date) => {}}  // min="…"  // max="…"  // defaultMonth="…"  // labels={…}/>

Props

RangeCalendar
mode
Type "range" | "single"
"range"
Pick a stay, or one date.
months
Type "1" | "2"
"2"
Months side by side when there's room. Narrow containers always show one.
weekStartsOn
Type "1" | "0"
"1"
First column of the grid.
minNights
Type number
2
Shortest stay. Shorter picks shake the hint.
maxNights
Type number
21
Longest stay. Later days dim while picking check-out.
showPrices
Type boolean
true
Nightly price under each date.
highlightDeals
Type boolean
true
Pick out the cheapest fifth of the prices in view.
footer
Type boolean
true
Dates, nights, total, Clear and Apply.
currency
Type "USD" | "EUR" | "GBP" | "INR" | "JPY"
"USD"
Currency for prices and the total.
value / onChange
Type { start: string; end: string | null } | null
–
Controlled range, as YYYY-MM-DD. onChange also fires once check-in is picked, with end null.
defaultValue
Type DateRange | null
–
Range on mount when uncontrolled.
getDay
Type (date: string) => { price?: number; disabled?: boolean } | undefined
–
Price and availability per day. A blocked day can still be the check-out.
presets
Type { label: string; range: DateRange }[]
–
Quick ranges shown as chips. Picking one moves the view to it.
min / max
Type string
today / none
Earliest and latest pickable dates.
defaultMonth
Type string
–
Month shown first. Defaults to the value's month, or today's.
onApply
Type (value: DateRange) => void
–
Shows an Apply button once a full range is picked.
locale
Type string
"en-US"
Month, weekday and price formatting.
labels
Type Partial<RangeCalendarLabels>
–
Every piece of text, for translation.
className
Type string
–
Classes for the card.