Explorer

Calendar

Date picker with single and multiple selection via DayPicker.

Installation

npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/calendar.json

Manual

API Reference

Calendar

Styled DayPicker v10 wrapper. Forwards supported DayPicker props, forwards refs to the root element, and defaults showOutsideDays to true and navLayout to around.

mode'single' | 'multiple'

=undefined

Enables single-day or multiple-day selection. Omit for a non-selecting calendar.

selectedDate | Date[]

=undefined

Controlled selected value for the active selection mode.

onSelectOnSelectHandler<Date | Date[]>

=undefined

Called with the next selection, trigger date, modifiers, and input event.

requiredboolean

=false

Prevents clearing the current selection.

min / maxnumber

=undefined

Minimum and maximum selected dates for multiple selection mode.

defaultMonthDate

=current month

Initial visible month for uncontrolled navigation.

monthDate

=undefined

Controlled visible month.

onMonthChange(month: Date) => void

=undefined

Called when the visible month changes.

startMonth / endMonthDate

=undefined

Earliest and latest month available to navigation. Use these instead of deprecated fromDate/toDate props.

numberOfMonthsnumber

=1

Number of months to render.

pagedNavigationboolean

=false

Moves by numberOfMonths when navigating multi-month calendars.

reverseMonthsboolean

=false

Renders multiple months in reverse order.

captionLayout'label' | 'dropdown' | 'dropdown-months' | 'dropdown-years'

='label'

Controls month/year caption rendering. Dropdown layouts are rendered through the local Select component while preserving DayPicker's month and year navigation contract.

navLayout'around' | 'after'

='around'

Controls navigation button placement. The wrapper defaults to around for balanced visual navigation.

hideNavigationboolean

=false

Hides previous/next navigation controls.

disableNavigationboolean

=false

Disables navigation without hiding the controls.

showOutsideDaysboolean

=true

Shows days from adjacent months in the current grid.

fixedWeeksboolean

=false

Always renders six weeks for each month.

showWeekNumberboolean

=false

Adds a week-number column.

autoFocusboolean

=false

Focuses the selected day or today after mount. Use instead of deprecated initialFocus.

disabledMatcher | Matcher[]

=undefined

Dates that cannot be selected.

hiddenMatcher | Matcher[]

=undefined

Dates removed from the rendered calendar.

modifiersRecord<string, Matcher | Matcher[]>

=undefined

Named date matchers for custom styling and behavior.

localePartial<DayPickerLocale>

=enUS

Locale object for translated month/day formatting.

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

=locale default

Overrides the first day of the week.

ISOWeek / broadcastCalendarboolean

=false

Switches week calculation to ISO week dates or broadcast calendar rules.

numerals'latn' | 'arab' | 'arabext' | ...

='latn'

Numeral system used when formatting dates.

timeZonestring

=undefined

IANA time zone or UTC offset used for calendar math.

noonSafeboolean

=false

Keeps date math at noon in the configured time zone to avoid historical offset drift.

classNamestring

=undefined

Class name applied to the calendar root.

refReact.Ref<HTMLDivElement>

=undefined

Forwarded to the DayPicker root element through the Root slot while preserving DayPicker's internal rootRef.

classNamesPartial<ClassNames>

=undefined

Class names for DayPicker slots and modifiers.

modifiersClassNamesRecord<string, string>

=undefined

Class names for custom modifiers.

stylesPartial<Styles>

=undefined

Inline styles for DayPicker slots and modifiers.

componentsPartial<CustomComponents>

={ Chevron, Root }

Custom renderers for DayPicker slots. The wrapper supplies a Chevron and Root by default; custom Root components receive a composed rootRef.

formatters / labelsPartial<Formatters> | Partial<Labels>

=undefined

Custom date text and ARIA label formatters for localization or product language.

footerReactNode | string

=undefined

Footer content announced as a polite live region.

Calendar data attributes
Attribute	Description
data-slot="calendar"	Applied by the wrapper to the DayPicker root.
data-mode	Selection mode on the root when mode is set.
data-required	Present on the root when required is true.
data-multiple-months	Present on the root when numberOfMonths is greater than 1.
data-week-numbers	Present on the root when showWeekNumber is true.
data-broadcast-calendar	Present on the root when broadcastCalendar is true.
data-nav-layout	Root navigation layout value when navLayout is set.
data-day	ISO date for each rendered day cell.
data-month	Month id on outside-day cells.
data-selected	Present on selected day cells.
data-disabled	Present on disabled day cells.
data-hidden	Present on hidden day cells.
data-outside	Present on days outside the visible month.
data-focused	Present on the keyboard-focused day cell.
data-today	Present on today's date.

Calendar CSS variables
Variable	Description
--cell-size	Calendar cell width and height. Override on className, for example [--cell-size:2.75rem].
--cell-radius	Radius used for day buttons. Override on className when changing density.
--calendar-selection	Selection accent used for selected days. Defaults to chart/sidebar tokens inside the component.
--calendar-selection-foreground	Text color on selected days.

edbn/ui

Explorer

Calendar

Date picker with single and multiple selection via DayPicker.

Componentsdocsdaypicker.dev/DayPicker

Installation

npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/calendar.json

Manual

API Reference

Calendar

Styled DayPicker v10 wrapper. Forwards supported DayPicker props, forwards refs to the root element, and defaults showOutsideDays to true and navLayout to around.

mode'single' | 'multiple'

=undefined

Enables single-day or multiple-day selection. Omit for a non-selecting calendar.

selectedDate | Date[]

=undefined

Controlled selected value for the active selection mode.

onSelectOnSelectHandler<Date | Date[]>

=undefined

Called with the next selection, trigger date, modifiers, and input event.

requiredboolean

=false

Prevents clearing the current selection.

min / maxnumber

=undefined

Minimum and maximum selected dates for multiple selection mode.

defaultMonthDate

=current month

Initial visible month for uncontrolled navigation.

monthDate

=undefined

Controlled visible month.

onMonthChange(month: Date) => void

=undefined

Called when the visible month changes.

startMonth / endMonthDate

=undefined

Earliest and latest month available to navigation. Use these instead of deprecated fromDate/toDate props.

numberOfMonthsnumber

=1

Number of months to render.

pagedNavigationboolean

=false

Moves by numberOfMonths when navigating multi-month calendars.

reverseMonthsboolean

=false

Renders multiple months in reverse order.

captionLayout'label' | 'dropdown' | 'dropdown-months' | 'dropdown-years'

='label'

Controls month/year caption rendering. Dropdown layouts are rendered through the local Select component while preserving DayPicker's month and year navigation contract.

navLayout'around' | 'after'

='around'

Controls navigation button placement. The wrapper defaults to around for balanced visual navigation.

hideNavigationboolean

=false

Hides previous/next navigation controls.

disableNavigationboolean

=false

Disables navigation without hiding the controls.

showOutsideDaysboolean

=true

Shows days from adjacent months in the current grid.

fixedWeeksboolean

=false

Always renders six weeks for each month.

showWeekNumberboolean

=false

Adds a week-number column.

autoFocusboolean

=false

Focuses the selected day or today after mount. Use instead of deprecated initialFocus.

disabledMatcher | Matcher[]

=undefined

Dates that cannot be selected.

hiddenMatcher | Matcher[]

=undefined

Dates removed from the rendered calendar.

modifiersRecord<string, Matcher | Matcher[]>

=undefined

Named date matchers for custom styling and behavior.

localePartial<DayPickerLocale>

=enUS

Locale object for translated month/day formatting.

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

=locale default

Overrides the first day of the week.

ISOWeek / broadcastCalendarboolean

=false

Switches week calculation to ISO week dates or broadcast calendar rules.

numerals'latn' | 'arab' | 'arabext' | ...

='latn'

Numeral system used when formatting dates.

timeZonestring

=undefined

IANA time zone or UTC offset used for calendar math.

noonSafeboolean

=false

Keeps date math at noon in the configured time zone to avoid historical offset drift.

classNamestring

=undefined

Class name applied to the calendar root.

refReact.Ref<HTMLDivElement>

=undefined

Forwarded to the DayPicker root element through the Root slot while preserving DayPicker's internal rootRef.

classNamesPartial<ClassNames>

=undefined

Class names for DayPicker slots and modifiers.

modifiersClassNamesRecord<string, string>

=undefined

Class names for custom modifiers.

stylesPartial<Styles>

=undefined

Inline styles for DayPicker slots and modifiers.

componentsPartial<CustomComponents>

={ Chevron, Root }

Custom renderers for DayPicker slots. The wrapper supplies a Chevron and Root by default; custom Root components receive a composed rootRef.

formatters / labelsPartial<Formatters> | Partial<Labels>

=undefined

Custom date text and ARIA label formatters for localization or product language.

footerReactNode | string

=undefined

Footer content announced as a polite live region.

Calendar data attributes
Attribute	Description
data-slot="calendar"	Applied by the wrapper to the DayPicker root.
data-mode	Selection mode on the root when mode is set.
data-required	Present on the root when required is true.
data-multiple-months	Present on the root when numberOfMonths is greater than 1.
data-week-numbers	Present on the root when showWeekNumber is true.
data-broadcast-calendar	Present on the root when broadcastCalendar is true.
data-nav-layout	Root navigation layout value when navLayout is set.
data-day	ISO date for each rendered day cell.
data-month	Month id on outside-day cells.
data-selected	Present on selected day cells.
data-disabled	Present on disabled day cells.
data-hidden	Present on hidden day cells.
data-outside	Present on days outside the visible month.
data-focused	Present on the keyboard-focused day cell.
data-today	Present on today's date.

Calendar CSS variables
Variable	Description
--cell-size	Calendar cell width and height. Override on className, for example [--cell-size:2.75rem].
--cell-radius	Radius used for day buttons. Override on className when changing density.
--calendar-selection	Selection accent used for selected days. Defaults to chart/sidebar tokens inside the component.
--calendar-selection-foreground	Text color on selected days.