Calendar

Calendar lets users pick dates from a monthly grid. Use it inside Popover for date inputs or standalone when the calendar itself is the primary control.

Code

(() => {
  function CalendarPrimary() {
    const [date, setDate] = React.useState<Date | undefined>(new Date());

    return (
      <Calendar
        className="tw:rounded-md tw:border tw:border-border"
        mode="single"
        selected={date}
        onSelect={setDate}
      />
    );
  }

  return <CalendarPrimary />;
})();

API

Calendar

Name	Type/Description
animate	boolean | undefined Animate navigating between months. @since 9.6.0 @see https://daypicker.dev/docs/navigation#animate
aria-label	string | undefined The aria-label attribute to add to the container element. @since 9.4.1 @see https://daypicker.dev/guides/accessibility
aria-labelledby	string | undefined The aria-labelledby attribute to add to the container element. @since 9.11.0 @see https://daypicker.dev/guides/accessibility
autoFocus	boolean | undefined When a selection mode is set, DayPicker will focus the first selected day (if set) or today's date (if not disabled). Use this prop when you need to focus DayPicker after a user action, for improved accessibility. @see https://daypicker.dev/guides/accessibility#autofocus
broadcastCalendar	boolean | undefined Display the weeks in the month following the broadcast calendar. Setting this prop will ignore {@link weekStartsOn} (always Monday) and {@link showOutsideDays} will default to true. @since 9.4.0 @see https://daypicker.dev/docs/localization#broadcast-calendar @see https://en.wikipedia.org/wiki/Broadcast_calendar
buttonVariant = "ghost"	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined
captionLayout = "label"	"label" | "dropdown" | "dropdown-months" | "dropdown-years" | undefined Show dropdowns to navigate between months or years. - `label`: Displays the month and year as a label. Default value. - `dropdown`: Displays dropdowns for both month and year navigation. - `dropdown-months`: Displays a dropdown only for the month navigation. - `dropdown-years`: Displays a dropdown only for the year navigation. **Note:** By default, showing the dropdown will set the {@link startMonth} to 100 years ago and {@link endMonth} to the end of the current year. You can override this behavior by explicitly setting `startMonth` and `endMonth`. @see https://daypicker.dev/docs/customization#caption-layouts
className	string | undefined Class name to add to the root element.
classNames	(Partial<ClassNames> & Partial<DeprecatedUI<string>>) | undefined Change the class names used by DayPicker. Use this prop when you need to change the default class names — for example, when importing the style via CSS modules or when using a CSS framework. @see https://daypicker.dev/docs/styling
components	Partial<CustomComponents> | undefined Change the components used for rendering the calendar elements. @see https://daypicker.dev/guides/custom-components
dateLib	Partial<DateLib> | undefined Replace the default date library with a custom one. Experimental: not guaranteed to be stable (may not respect semver). @since 9.0.0 @experimental
defaultMonth	Date | undefined The initial month to show in the calendar. Use this prop to let DayPicker control the current month. If you need to set the month programmatically, use {@link month} and {@link onMonthChange}. @defaultValue The current month @see https://daypicker.dev/docs/navigation
dir	string | undefined The text direction of the calendar. Use `ltr` for left-to-right (default) or `rtl` for right-to-left. @see https://daypicker.dev/docs/translation#rtl-text-direction
disabled	Matcher | Matcher[] | undefined Apply the `disabled` modifier to the matching days. Disabled days cannot be selected when in a selection mode is set. @see https://daypicker.dev/docs/selection-modes#disabled @see https://daypicker.dev/docs/selection-modes#disabled @see https://daypicker.dev/docs/selection-modes#disabled
disableNavigation	boolean | undefined Disable the navigation between months. This prop won't hide the navigation: to hide the navigation, use {@link hideNavigation}. @see https://daypicker.dev/docs/navigation#disablenavigation
endMonth	Date | undefined The latest month to end the month navigation. @since 9.0.0 @see https://daypicker.dev/docs/navigation#start-and-end-dates
excludeDisabled	boolean | undefined When `true`, the range will reset when including a disabled day. @since 9.0.2 @see https://daypicker.dev/docs/selection-modes#exclude-disabled @since 9.0.2
firstWeekContainsDate	1 | 4 | undefined The day of January that is always in the first week of the year. @see https://daypicker.dev/docs/localization#first-week-contains-date
fixedWeeks	boolean | undefined Display always 6 weeks per each month, regardless of the month’s number of weeks. Weeks will be filled with the days from the next month. @see https://daypicker.dev/docs/customization#fixed-weeks
footer	ReactNode Add a footer to the calendar, acting as a live region. Use this prop to communicate the calendar's status to screen readers. Prefer strings over complex UI elements. @see https://daypicker.dev/guides/accessibility#footer
formatters	Partial<Formatters> | undefined Formatters used to format dates to strings. Use this prop to override the default functions. @see https://daypicker.dev/docs/translation#custom-formatters
fromDate	Date | undefined @private @deprecated This prop has been removed. Use `hidden={{ before: date }}` instead. @see https://daypicker.dev/docs/navigation#start-and-end-dates
fromMonth	Date | undefined @private @deprecated This prop has been renamed to `startMonth`. @see https://daypicker.dev/docs/navigation#start-and-end-dates
fromYear	number | undefined @private @deprecated Use `startMonth` instead. E.g. `startMonth={new Date(year, 0)}`. @see https://daypicker.dev/docs/navigation#start-and-end-dates
hidden	Matcher | Matcher[] | undefined Apply the `hidden` modifier to the matching days. Will hide them from the calendar. @see https://daypicker.dev/guides/custom-modifiers#hidden-modifier
hideNavigation	boolean | undefined Hide the navigation buttons. This prop won't disable the navigation: to disable the navigation, use {@link disableNavigation}. @since 9.0.0 @see https://daypicker.dev/docs/navigation#hidenavigation
hideWeekdays	boolean | undefined Hide the row displaying the weekday row header. @since 9.0.0
id	string | undefined A unique id to add to the root element.
initialFocus	boolean | undefined @private @deprecated This prop will be removed. Use {@link autoFocus } instead.
ISOWeek	boolean | undefined Use ISO week dates instead of the locale setting. Setting this prop will ignore `weekStartsOn` and `firstWeekContainsDate`. @see https://daypicker.dev/docs/localization#iso-week-dates @see https://en.wikipedia.org/wiki/ISO_week_date
labels	Partial<Labels> | undefined Labels creators to override the defaults. Use this prop to customize the aria-label attributes in DayPicker. @see https://daypicker.dev/docs/translation#aria-labels
lang	string | undefined Add the language tag to the container element. When omitted, DayPicker uses the active locale code (`locale.code`). Set this prop to override the language tag.
locale	Partial<DayPickerLocale> | undefined The locale object used to localize dates. Pass a locale from `react-day-picker/locale` to localize the calendar. @example import { es } from "react-day-picker/locale"; <DayPicker locale={es} /> @defaultValue enUS - The English locale default of `date-fns`. @see https://daypicker.dev/docs/localization @see https://github.com/date-fns/date-fns/tree/main/src/locale for a list of the supported locales
max	number | undefined The maximum number of selectable days. The maximum number of days to include in the range.
min	number | undefined The minimum number of selectable days. The minimum number of days to include in the range.
mode	"single" | "multiple" | "range" | undefined Enable the selection of a single day, multiple days, or a range of days. @see https://daypicker.dev/docs/selection-modes
modifiers	Record<string, Matcher | Matcher[] | undefined> | undefined Add modifiers to the matching days. @example const modifiers = { weekend: { dayOfWeek: [0, 6] }, // Match weekends holiday: [new Date(2023, 11, 25)] // Match Christmas }; <DayPicker modifiers={modifiers} /> @see https://daypicker.dev/guides/custom-modifiers
modifiersClassNames	ModifiersClassNames | undefined Change the class name for the day matching the `modifiers`. @see https://daypicker.dev/guides/custom-modifiers
modifiersStyles	ModifiersStyles | undefined Change the class name for the day matching the {@link modifiers}. @see https://daypicker.dev/guides/custom-modifiers
month	Date | undefined The month displayed in the calendar. As opposed to `defaultMonth`, use this prop with `onMonthChange` to change the month programmatically. @see https://daypicker.dev/docs/navigation
navLayout	"around" | "after" | undefined Adjust the positioning of the navigation buttons. - `around`: Displays the buttons on either side of the caption. - `after`: Displays the buttons after the caption. This ensures the tab order matches the visual order. If not set, the buttons default to being displayed after the caption, but the tab order may not align with the visual order. @since 9.7.0 @see https://daypicker.dev/docs/customization#navigation-layouts
nonce	string | undefined A cryptographic nonce ("number used once") which can be used by Content Security Policy for the inline `style` attributes.
noonSafe	boolean | undefined Keep calendar math at noon in the configured {@link timeZone} to avoid historical second-level offsets drifting dates across midnight. This prop sets the time of the dates to noon (12:00). @since 9.13.0 @experimental @see https://daypicker.dev/localization/setting-time-zone#noonsafe
numberOfMonths	number | undefined The number of displayed months. @defaultValue 1 @see https://daypicker.dev/docs/customization#multiplemonths
numerals	Numerals | undefined The numeral system to use when formatting dates. - `latn`: Latin (Western Arabic) - `arab`: Arabic-Indic - `arabext`: Eastern Arabic-Indic (Persian) - `deva`: Devanagari - `beng`: Bengali - `guru`: Gurmukhi - `gujr`: Gujarati - `orya`: Oriya - `tamldec`: Tamil - `telu`: Telugu - `knda`: Kannada - `mlym`: Malayalam @defaultValue `latn` Latin (Western Arabic) @see https://daypicker.dev/docs/translation#numeral-systems
onDayBlur	DayEventHandler<FocusEvent<Element, Element>> | undefined Event handler when a day is blurred.
onDayClick	DayEventHandler<MouseEvent<Element, MouseEvent>> | undefined Event handler when a day is clicked.
onDayFocus	DayEventHandler<FocusEvent<Element, Element>> | undefined Event handler when a day is focused.
onDayKeyDown	DayEventHandler<KeyboardEvent<Element>> | undefined Event handler when a key is pressed on a day.
onDayKeyPress	DayEventHandler<KeyboardEvent<Element>> | undefined @private @deprecated Use a custom `DayButton` component instead.
onDayKeyUp	DayEventHandler<KeyboardEvent<Element>> | undefined @private @deprecated Use a custom `DayButton` component instead.
onDayMouseEnter	DayEventHandler<MouseEvent<Element, MouseEvent>> | undefined Event handler when the mouse enters a day.
onDayMouseLeave	DayEventHandler<MouseEvent<Element, MouseEvent>> | undefined Event handler when the mouse leaves a day.
onDayPointerEnter	DayEventHandler<PointerEvent<Element>> | undefined @private @deprecated Use a custom `DayButton` component instead.
onDayPointerLeave	DayEventHandler<PointerEvent<Element>> | undefined @private @deprecated Use a custom `DayButton` component instead.
onDayTouchCancel	DayEventHandler<TouchEvent<Element>> | undefined @private @deprecated Use a custom `DayButton` component instead.
onDayTouchEnd	DayEventHandler<TouchEvent<Element>> | undefined @private @deprecated Use a custom `DayButton` component instead.
onDayTouchMove	DayEventHandler<TouchEvent<Element>> | undefined @private @deprecated Use a custom `DayButton` component instead.
onDayTouchStart	DayEventHandler<TouchEvent<Element>> | undefined @private @deprecated Use a custom `DayButton` component instead.
onMonthChange	MonthChangeEventHandler | undefined Event fired when the user navigates between months. @see https://daypicker.dev/docs/navigation#onmonthchange
onNextClick	MonthChangeEventHandler | undefined Event handler when the next month button is clicked. @see https://daypicker.dev/docs/navigation
onPrevClick	MonthChangeEventHandler | undefined Event handler when the previous month button is clicked. @see https://daypicker.dev/docs/navigation
onSelect	OnSelectHandler<Date | undefined> | OnSelectHandler<Date> | OnSelectHandler<Date[] | undefined> | OnSelectHandler<Date[]> | OnSelectHandler<DateRange | undefined> | OnSelectHandler<DateRange> | undefined Event handler when a day is selected. Event handler when days are selected. Event handler when the selection changes. Event handler when a range is selected.
onWeekNumberClick	any Event handler when a week number is clicked. @private @deprecated Use a custom `WeekNumber` component instead. @see https://daypicker.dev/docs/customization#showweeknumber
pagedNavigation	boolean | undefined Paginate the month navigation displaying the `numberOfMonths` at a time. @see https://daypicker.dev/docs/customization#multiplemonths
required	boolean | undefined Whether the selection is required. @see https://daypicker.dev/docs/selection-modes
resetOnSelect	boolean | undefined When `true`, clicking a day starts a new range if there is no current start date or if a range is already complete. In those cases, the clicked day becomes the start of the new range. When `required` is `false`, clicking the same day of a single-day range clears the selection. When `true`, clicking a day starts a new range if there is no current start date or if a range is already complete. In those cases, the clicked day becomes the start of the new range. @since 9.14 @see https://daypicker.dev/selections/range-mode#reset-selection @since 9.14 @see https://daypicker.dev/selections/range-mode#reset-selection
reverseMonths	boolean | undefined Render the months in reversed order (when {@link numberOfMonths} is set) to display the most recent month first. @see https://daypicker.dev/docs/customization#multiplemonths
reverseYears	boolean | undefined Reverse the order of years in the dropdown when using `captionLayout="dropdown"` or `captionLayout="dropdown-years"`. @since 9.9.0 @see https://daypicker.dev/docs/customization#caption-layouts
role	"dialog" | "application" | undefined The role attribute to add to the container element. @since 9.4.1 @see https://daypicker.dev/guides/accessibility
selected	Date | Date[] | DateRange | undefined The selected date. The selected dates. The selected range.
showOutsideDays = true	boolean | undefined Show the outside days (days falling in the next or the previous month). **Note:** when a {@link broadcastCalendar} is set, this prop defaults to true. @see https://daypicker.dev/docs/customization#outside-days
showWeekNumber	boolean | undefined Show the week numbers column. Weeks are numbered according to the local week index. @see https://daypicker.dev/docs/customization#showweeknumber
startMonth	Date | undefined The earliest month to start the month navigation. @since 9.0.0 @see https://daypicker.dev/docs/navigation#start-and-end-dates
style	CSSProperties | undefined Style to apply to the root element.
styles	(Partial<Styles> & Partial<DeprecatedUI<CSSProperties>>) | undefined Change the inline styles of the HTML elements. @see https://daypicker.dev/docs/styling
timeZone	string | undefined The time zone (IANA or UTC offset) to use in the calendar (experimental). See [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) for the possible values. @since 9.1.1 @see https://daypicker.dev/localization/setting-time-zone
title	string | undefined Add a `title` attribute to the container element.
toDate	Date | undefined @private @deprecated This prop has been removed. Use `hidden={{ after: date }}` instead. @see https://daypicker.dev/docs/navigation#start-and-end-dates
today	Date | undefined The today’s date. Default is the current date. This date will get the `today` modifier to style the day. @see https://daypicker.dev/guides/custom-modifiers#today-modifier
toMonth	Date | undefined @private @deprecated This prop has been renamed to `endMonth`. @see https://daypicker.dev/docs/navigation#start-and-end-dates
toYear	number | undefined @private @deprecated Use `endMonth` instead. E.g. `endMonth={new Date(year, 0)}`. @see https://daypicker.dev/docs/navigation#start-and-end-dates
useAdditionalDayOfYearTokens	boolean | undefined Enable `YY` and `YYYY` for day of year tokens when formatting or parsing dates. @see https://date-fns.org/docs/Unicode-Tokens
useAdditionalWeekYearTokens	boolean | undefined Enable `DD` and `DDDD` for week year tokens when formatting or parsing dates. @see https://date-fns.org/docs/Unicode-Tokens
weekStartsOn	0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined The index of the first day of the week (0 - Sunday). Overrides the locale's default. @see https://daypicker.dev/docs/localization#first-date-of-the-week

CalendarDayButton

Name	Type/Description
day	CalendarDay The day to render.
locale	Partial<DayPickerLocale> | undefined
modifiers	Modifiers The modifiers to apply to the day.