Calendar

Standalone month-view calendar components. Includes single-date and date-range variants, each with animated month transitions, a spring-animated selection pill, and a scrollable month/year picker. For an input-triggered picker, see Date Picker.

Installation

npx stepwise-ui add calendar

Calendar

Sun

Mon

Tue

Wed

Thu

Fri

Sat

import { Calendar, CalendarRange } from '@/components/stepwise/calendar'

// Single date - uncontrolled
<Calendar defaultSelected={new Date()} />

// Single date - controlled
const [date, setDate] = useState<Date | null>(null)
<Calendar selected={date} onSelect={setDate} />

// Date range - controlled
const [from, setFrom] = useState<Date | null>(null)
const [to,   setTo]   = useState<Date | null>(null)
<CalendarRange
  from={from}
  to={to}
  onRangeChange={(f, t) => { setFrom(f); setTo(t) }}
/>

CalendarRange

First click sets the start, second click sets the end. Hovering previews the would-be range. Clicking an already-selected start clears the selection.

Sun

Mon

Tue

Wed

Thu

Fri

Sat

import { Calendar, CalendarRange } from '@/components/stepwise/calendar'

// Single date - uncontrolled
<Calendar defaultSelected={new Date()} />

// Single date - controlled
const [date, setDate] = useState<Date | null>(null)
<Calendar selected={date} onSelect={setDate} />

// Date range - controlled
const [from, setFrom] = useState<Date | null>(null)
const [to,   setTo]   = useState<Date | null>(null)
<CalendarRange
  from={from}
  to={to}
  onRangeChange={(f, t) => { setFrom(f); setTo(t) }}
/>

Calendar props

PropTypeDescription

defaultSelected

Date

Initial selected date for uncontrolled usage.

selected

Date | null

Controlled selected date. Pass null to clear.

onSelect

(date: Date) => void

Called when the user clicks a date.

className

string

Additional classes on the outermost Surface.

CalendarRange props

PropTypeDescription

from

Date | null

Controlled range start date.

to

Date | null

Controlled range end date.

onRangeChange

(from: Date | null, to: Date | null) => void

Called whenever either endpoint changes.

className

string

Additional classes on the outermost Surface.