Calendar
An accessible calendar for selecting one date or a range, with month navigation and optional week numbers.
Installation
Import from the Reflow workspace package.
Playground
Open demoimport { Calendar } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Calendar label="Choose travel dates" mode="range" numberOfMonths={2} defaultMonth="2026-11-01" />
</>
)
}Single
import { Calendar } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Calendar defaultMonth="2026-11-01" defaultValue="2026-11-12" />
</>
)
}Range
import { Calendar } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Calendar mode="range" numberOfMonths={2} defaultMonth="2026-11-01" />
</>
)
}Stacked months
import { Calendar } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Calendar mode="range" numberOfMonths={2} orientation="vertical" defaultMonth="2026-11-01" />
</>
)
}Weekday availability
import { Calendar } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Calendar defaultMonth="2026-11-01" isDateDisabled={(date) => [0, 6].includes(new Date(date).getUTCDay())} />
</>
)
}Cell size
import { Calendar } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
const nightlyRate = (date: string) => 99 + (Number(date.slice(-2)) * 7 % 10) * 10
let color = '#6B97FF'
const setColor = (value: string) => { color = value; handle.update() }
return () => (
<>
<Calendar cellSize={56} defaultMonth="2026-11-01" dayDetail={(date) => {
const rate = nightlyRate(date)
return <span style={{ color: rate <= 119 ? 'var(--rf-success)' : undefined }}>${rate}</span>
}} />
</>
)
}Week numbers
import { Calendar } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Calendar showWeekNumbers weekStartsOn={1} defaultMonth="2026-11-01" />
</>
)
}API Reference
Public props for the Reflow implementation. Native controls also accept their standard HTML attributes and Remix event mixes.
Calendar
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | Calendar | Accessible name or visible label for the control. |
mode | "single" | "range" | single | Select one date or a date range. |
value | DateValue | — | Current value when controlled by the parent. |
defaultValue | DateValue | null | Initial value for an uncontrolled component. |
onValueChange | ((value: DateValue) => void) | — | Called when the selected value changes. |
min | string | — | Minimum allowed value. |
max | string | — | Maximum allowed value. |
isDateDisabled | ((date: string) => boolean) | — | Determines whether a date is unavailable. |
defaultMonth | string | — | Initially displayed month as a local ISO date. |
today | string | — | Pin today to a YYYY-MM-DD date shared by server and client. Otherwise the initial render uses UTC and switches to the visitor’s local day after hydration. |
name | string | — | Name used when the control participates in a form. |
weekStartsOn | 0 | 1 | 0 | First weekday. Zero is Sunday and one is Monday. |
showWeekNumbers | boolean | false | Displays ISO week numbers. |
numberOfMonths | 2 | 1 | 1 | Number of calendar months shown together. |
orientation | "horizontal" | "vertical" | horizontal | Layout direction. |
booked | readonly string[] | — | Dates marked as unavailable. |
available | readonly string[] | — | Explicit set of selectable dates. |
minNights | number | — | Minimum nights in a selected date range. |
maxNights | number | — | Maximum nights in a selected date range. |
dayDetail | ((date: string) => RemixNode) | — | Additional content inside a date cell. |
cellSize | number | — | Date-cell dimension in pixels. |
DateRange
| Prop | Type | Default | Description |
|---|---|---|---|
start* | string | — | First date in the range. |
end | string | — | Last date in the range. |