Pricing Calendar
Calendar where each date cell shows a price tag. Use for hotel rooms, vehicle rentals, or any per-day inventory with variable pricing.
Default
Two months side by side. Pass pricing-data keyed by ISO date with { rate, available }. Prices at/below good-price-threshold are highlighted.
June - July 2026
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
Sold out dates
Dates with available === 0 are automatically disabled and not selectable.
June - July 2026
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
Single month
Set :number-of-months="1" for a compact single-month layout.
June 2026
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
Loading state
While is-loading is true and pricing-data is empty, each cell shows a skeleton where the price would be.
June 2026
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
API Reference
Props, events, and slots for each sub-component.
PricingCalendar
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValue | DateRange | — | Selected { start, end } range. Built on RangeCalendar. Supports v-model. |
| pricingData | PricingMap | {} | Per-day price map keyed by ISO date (YYYY-MM-DD). |
| numberOfMonths | number | 2 | Months rendered side by side. |
| goodPriceThreshold | number | — | Prices at or below this value get a highlighted style. |
| isLoading | boolean | false | Show a loading state over the cells. |
| minValue | DateValue | — | Earliest selectable date. Forwards to reka-ui RangeCalendarRoot. |
| maxValue | DateValue | — | Latest selectable date. |
| locale | string | "en" | Locale for date and currency formatting. |
Events
| Event | Description |
|---|---|
| update:modelValue | Fires when the range changes. Enables v-model. |
| update:placeholder | Fires when the focused month changes. |
| month-change | Fires when navigating months. Receives the visible-month payload (use to lazy-load prices). |