Calendar

Date picker for month, year, and day selection.

Sunday, June 7th, 2026

Jump months and pick a day from one compact grid.

Installation

npx shadcn@latest add @iconiq/calendar

12 props

shadcn-style animated monthly calendar with controlled/uncontrolled month state, day selection, and direct month/year picking.

selectedDate

Controlled selected day. When provided, the highlighted day is always derived from this prop.

defaultSelectedDate

Initial selected day for uncontrolled usage when selected is not provided.

onSelect(date: Date) => void

Called when the user picks any interactive day, including visible outside-month days.

monthDate

Controlled visible month. Prev/next, outside-day, and month/year picker navigation requests flow through onMonthChange.

defaultMonthDate

Initial visible month for uncontrolled usage when month is not provided.

onMonthChange(month: Date) => void

Called whenever the user navigates with prev/next, an outside day, or the month/year picker.

disabled(date: Date) => boolean

Marks dates as non-interactive. Disabled days keep the same visuals but cannot be selected.

localeLocale

Optional date-fns locale used for month labels, weekday headers, selected-date copy, and spoken date labels.

size"sm" | "md" | "lg"

Controls the overall calendar scale, including the card width, spacing, nav controls, weekday row, and day cell sizing. Defaults to sm.

weekStartsOn0 | 1 | 2 | 3 | 4 | 5 | 6

Overrides the first day of the week for both the weekday header and rendered month grid.

minYearnumber

Optional lower bound for selectable years in the year picker.

maxYearnumber

Optional upper bound for selectable years in the year picker.

Notes

Controlled mode: pass selected/month and respond to onSelect/onMonthChange.

Uncontrolled mode: omit selected/month and optionally seed with defaultSelected/defaultMonth.

The month and year labels open overlay pickers, so users can jump without losing the existing date-grid motion.

When no defaults are provided, the visible month starts from today and selection stays empty until the user picks a date.