# Calendar

Date picker component for selecting single dates or date ranges

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
"use client"

import * as React from "react"

import { Calendar } from "@databricks/appkit-ui/react"

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

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

```

## Calendar[​](#calendar-1 "Direct link to Calendar")

Date picker component for selecting single dates or date ranges

**Source:** [`packages/appkit-ui/src/react/ui/calendar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/calendar.tsx)

### Props[​](#props "Direct link to Props")

| Prop                           | Type                                                                                                                                                             | Required | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                           |
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `mode`                         | `enum`                                                                                                                                                           |          | -       | Enable the selection of a single day, multiple days, or a range of days. @see <https://daypicker.dev/docs/selection-modes>                                                                                                                                                                                                                                                                                            |
| `required`                     | `boolean`                                                                                                                                                        |          | -       | Whether the selection is required. @see <https://daypicker.dev/docs/selection-modes>                                                                                                                                                                                                                                                                                                                                  |
| `className`                    | `string`                                                                                                                                                         |          | -       | Class name to add to the root element.                                                                                                                                                                                                                                                                                                                                                                                |
| `classNames`                   | `(Partial<ClassNames> & Partial<DeprecatedUI<string>>)`                                                                                                          |          | -       | Change the class names used by DayPicker.                                                                                                                                                                                                                                                                                                                                                                             |
| `modifiersClassNames`          | `ModifiersClassNames`                                                                                                                                            |          | -       | Change the class name for the day matching the `modifiers`. @see <https://daypicker.dev/guides/custom-modifiers>                                                                                                                                                                                                                                                                                                      |
| `style`                        | `CSSProperties`                                                                                                                                                  |          | -       | Style to apply to the root element.                                                                                                                                                                                                                                                                                                                                                                                   |
| `styles`                       | `(Partial<Styles> & Partial<DeprecatedUI<CSSProperties>>)`                                                                                                       |          | -       | Change the inline styles of the HTML elements. @see <https://daypicker.dev/docs/styling>                                                                                                                                                                                                                                                                                                                              |
| `modifiersStyles`              | `ModifiersStyles`                                                                                                                                                |          | -       | Change the class name for the day matching the modifiers. @see <https://daypicker.dev/guides/custom-modifiers>                                                                                                                                                                                                                                                                                                        |
| `id`                           | `string`                                                                                                                                                         |          | -       | A unique id to add to the root element.                                                                                                                                                                                                                                                                                                                                                                               |
| `defaultMonth`                 | `Date`                                                                                                                                                           |          | -       | The initial month to show in the calendar.                                                                                                                                                                                                                                                                                                                                                                            |
| `month`                        | `Date`                                                                                                                                                           |          | -       | The month displayed in the calendar.                                                                                                                                                                                                                                                                                                                                                                                  |
| `numberOfMonths`               | `number`                                                                                                                                                         |          | -       | The number of displayed months. @defaultValue 1 @see <https://daypicker.dev/docs/customization#multiplemonths>                                                                                                                                                                                                                                                                                                        |
| `startMonth`                   | `Date`                                                                                                                                                           |          | -       | The earliest month to start the month navigation. @since 9.0.0 @see <https://daypicker.dev/docs/navigation#start-and-end-dates>                                                                                                                                                                                                                                                                                       |
| `fromDate`                     | `Date`                                                                                                                                                           |          | -       | @private @deprecated This prop has been removed. Use `hidden=&#123;&#123; before: date &#125;&#125;` instead. @see <https://daypicker.dev/docs/navigation#start-and-end-dates>                                                                                                                                                                                                                                        |
| `fromMonth`                    | `Date`                                                                                                                                                           |          | -       | @private @deprecated This prop has been renamed to `startMonth`. @see <https://daypicker.dev/docs/navigation#start-and-end-dates>                                                                                                                                                                                                                                                                                     |
| `fromYear`                     | `number`                                                                                                                                                         |          | -       | @private @deprecated Use `startMonth` instead. E.g. `startMonth=&#123;new Date(year, 0)&#125;`. @see <https://daypicker.dev/docs/navigation#start-and-end-dates>                                                                                                                                                                                                                                                      |
| `endMonth`                     | `Date`                                                                                                                                                           |          | -       | The latest month to end the month navigation. @since 9.0.0 @see <https://daypicker.dev/docs/navigation#start-and-end-dates>                                                                                                                                                                                                                                                                                           |
| `toDate`                       | `Date`                                                                                                                                                           |          | -       | @private @deprecated This prop has been removed. Use `hidden=&#123;&#123; after: date &#125;&#125;` instead. @see <https://daypicker.dev/docs/navigation#start-and-end-dates>                                                                                                                                                                                                                                         |
| `toMonth`                      | `Date`                                                                                                                                                           |          | -       | @private @deprecated This prop has been renamed to `endMonth`. @see <https://daypicker.dev/docs/navigation#start-and-end-dates>                                                                                                                                                                                                                                                                                       |
| `toYear`                       | `number`                                                                                                                                                         |          | -       | @private @deprecated Use `endMonth` instead. E.g. `endMonth=&#123;new Date(year, 0)&#125;`. @see <https://daypicker.dev/docs/navigation#start-and-end-dates>                                                                                                                                                                                                                                                          |
| `pagedNavigation`              | `boolean`                                                                                                                                                        |          | -       | Paginate the month navigation displaying the `numberOfMonths` at a time. @see <https://daypicker.dev/docs/customization#multiplemonths>                                                                                                                                                                                                                                                                               |
| `reverseMonths`                | `boolean`                                                                                                                                                        |          | -       | Render the months in reversed order (when numberOfMonths is set) to display the most recent month first. @see <https://daypicker.dev/docs/customization#multiplemonths>                                                                                                                                                                                                                                               |
| `hideNavigation`               | `boolean`                                                                                                                                                        |          | -       | Hide the navigation buttons. This prop won't disable the navigation: to disable the navigation, use disableNavigation. @since 9.0.0 @see <https://daypicker.dev/docs/navigation#hidenavigation>                                                                                                                                                                                                                       |
| `disableNavigation`            | `boolean`                                                                                                                                                        |          | -       | Disable the navigation between months. This prop won't hide the navigation: to hide the navigation, use hideNavigation. @see <https://daypicker.dev/docs/navigation#disablenavigation>                                                                                                                                                                                                                                |
| `captionLayout`                | `enum`                                                                                                                                                           |          | `label` | Show dropdowns to navigate between months or years.                                                                                                                                                                                                                                                                                                                                                                   |
| `reverseYears`                 | `boolean`                                                                                                                                                        |          | -       | 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>                                                                                                                                                                                                                    |
| `navLayout`                    | `enum`                                                                                                                                                           |          | -       | Adjust the positioning of the navigation buttons.                                                                                                                                                                                                                                                                                                                                                                     |
| `fixedWeeks`                   | `boolean`                                                                                                                                                        |          | -       | 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>                                                                                                                                                                                                                 |
| `hideWeekdays`                 | `boolean`                                                                                                                                                        |          | -       | Hide the row displaying the weekday row header. @since 9.0.0                                                                                                                                                                                                                                                                                                                                                          |
| `showOutsideDays`              | `boolean`                                                                                                                                                        |          | `true`  | Show the outside days (days falling in the next or the previous month).                                                                                                                                                                                                                                                                                                                                               |
| `showWeekNumber`               | `boolean`                                                                                                                                                        |          | -       | Show the week numbers column. Weeks are numbered according to the local week index. @see <https://daypicker.dev/docs/customization#showweeknumber>                                                                                                                                                                                                                                                                    |
| `animate`                      | `boolean`                                                                                                                                                        |          | -       | Animate navigating between months. @since 9.6.0 @see <https://daypicker.dev/docs/navigation#animate>                                                                                                                                                                                                                                                                                                                  |
| `broadcastCalendar`            | `boolean`                                                                                                                                                        |          | -       | Display the weeks in the month following the broadcast calendar. Setting this prop will ignore weekStartsOn (always Monday) and 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>                                                                                                          |
| `ISOWeek`                      | `boolean`                                                                                                                                                        |          | -       | 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>                                                                                                                                                                          |
| `timeZone`                     | `string`                                                                                                                                                         |          | -       | The time zone (IANA or UTC offset) to use in the calendar (experimental).                                                                                                                                                                                                                                                                                                                                             |
| `components`                   | `Partial<CustomComponents>`                                                                                                                                      |          | -       | Change the components used for rendering the calendar elements. @see <https://daypicker.dev/guides/custom-components>                                                                                                                                                                                                                                                                                                 |
| `footer`                       | `ReactNode`                                                                                                                                                      |          | -       | Add a footer to the calendar, acting as a live region.                                                                                                                                                                                                                                                                                                                                                                |
| `autoFocus`                    | `boolean`                                                                                                                                                        |          | -       | When a selection mode is set, DayPicker will focus the first selected day (if set) or today's date (if not disabled).                                                                                                                                                                                                                                                                                                 |
| `initialFocus`                 | `boolean`                                                                                                                                                        |          | -       | @private @deprecated This prop will be removed. Use autoFocus instead.                                                                                                                                                                                                                                                                                                                                                |
| `disabled`                     | `Matcher \| Matcher[]`                                                                                                                                           |          | -       | 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>                                                                                                                |
| `hidden`                       | `Matcher \| Matcher[]`                                                                                                                                           |          | -       | Apply the `hidden` modifier to the matching days. Will hide them from the calendar. @see <https://daypicker.dev/guides/custom-modifiers#hidden-modifier>                                                                                                                                                                                                                                                              |
| `today`                        | `Date`                                                                                                                                                           |          | -       | 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>                                                                                                                                                                                                                                          |
| `modifiers`                    | `Record<string, Matcher \| Matcher[]>`                                                                                                                           |          | -       | 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>                                                                                                                                                |
| `labels`                       | `Partial<Labels>`                                                                                                                                                |          | -       | 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>                                                                                                                                                                                                                                                |
| `formatters`                   | `Partial<Formatters>`                                                                                                                                            |          | -       | Formatters used to format dates to strings. Use this prop to override the default functions. @see <https://daypicker.dev/docs/translation#custom-formatters>                                                                                                                                                                                                                                                          |
| `dir`                          | `string`                                                                                                                                                         |          | -       | 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>                                                                                                                                                                                                                                                |
| `aria-label`                   | `string`                                                                                                                                                         |          | -       | The aria-label attribute to add to the container element. @since 9.4.1 @see <https://daypicker.dev/guides/accessibility>                                                                                                                                                                                                                                                                                              |
| `aria-labelledby`              | `string`                                                                                                                                                         |          | -       | The aria-labelledby attribute to add to the container element. @since 9.11.0 @see <https://daypicker.dev/guides/accessibility>                                                                                                                                                                                                                                                                                        |
| `role`                         | `enum`                                                                                                                                                           |          | -       | The role attribute to add to the container element. @since 9.4.1 @see <https://daypicker.dev/guides/accessibility>                                                                                                                                                                                                                                                                                                    |
| `nonce`                        | `string`                                                                                                                                                         |          | -       | A cryptographic nonce ("number used once") which can be used by Content Security Policy for the inline `style` attributes.                                                                                                                                                                                                                                                                                            |
| `title`                        | `string`                                                                                                                                                         |          | -       | Add a `title` attribute to the container element.                                                                                                                                                                                                                                                                                                                                                                     |
| `lang`                         | `string`                                                                                                                                                         |          | -       | Add the language tag to the container element.                                                                                                                                                                                                                                                                                                                                                                        |
| `locale`                       | `Partial<DayPickerLocale>`                                                                                                                                       |          | -       | 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 |
| `numerals`                     | `enum`                                                                                                                                                           |          | -       | The numeral system to use when formatting dates.                                                                                                                                                                                                                                                                                                                                                                      |
| `weekStartsOn`                 | `enum`                                                                                                                                                           |          | -       | 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>                                                                                                                                                                                                                                                            |
| `firstWeekContainsDate`        | `enum`                                                                                                                                                           |          | -       | The day of January that is always in the first week of the year. @see <https://daypicker.dev/docs/localization#first-week-contains-date>                                                                                                                                                                                                                                                                              |
| `useAdditionalWeekYearTokens`  | `boolean`                                                                                                                                                        |          | -       | Enable `DD` and `DDDD` for week year tokens when formatting or parsing dates. @see <https://date-fns.org/docs/Unicode-Tokens>                                                                                                                                                                                                                                                                                         |
| `useAdditionalDayOfYearTokens` | `boolean`                                                                                                                                                        |          | -       | Enable `YY` and `YYYY` for day of year tokens when formatting or parsing dates. @see <https://date-fns.org/docs/Unicode-Tokens>                                                                                                                                                                                                                                                                                       |
| `onMonthChange`                | `MonthChangeEventHandler`                                                                                                                                        |          | -       | Event fired when the user navigates between months. @see <https://daypicker.dev/docs/navigation#onmonthchange>                                                                                                                                                                                                                                                                                                        |
| `onNextClick`                  | `MonthChangeEventHandler`                                                                                                                                        |          | -       | Event handler when the next month button is clicked. @see <https://daypicker.dev/docs/navigation>                                                                                                                                                                                                                                                                                                                     |
| `onPrevClick`                  | `MonthChangeEventHandler`                                                                                                                                        |          | -       | Event handler when the previous month button is clicked. @see <https://daypicker.dev/docs/navigation>                                                                                                                                                                                                                                                                                                                 |
| `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>                                                                                                                                                                                                                                         |
| `onDayClick`                   | `DayEventHandler<MouseEvent<Element, MouseEvent>>`                                                                                                               |          | -       | Event handler when a day is clicked.                                                                                                                                                                                                                                                                                                                                                                                  |
| `onDayFocus`                   | `DayEventHandler<FocusEvent<Element, Element>>`                                                                                                                  |          | -       | Event handler when a day is focused.                                                                                                                                                                                                                                                                                                                                                                                  |
| `onDayBlur`                    | `DayEventHandler<FocusEvent<Element, Element>>`                                                                                                                  |          | -       | Event handler when a day is blurred.                                                                                                                                                                                                                                                                                                                                                                                  |
| `onDayKeyDown`                 | `DayEventHandler<KeyboardEvent<Element>>`                                                                                                                        |          | -       | Event handler when a key is pressed on a day.                                                                                                                                                                                                                                                                                                                                                                         |
| `onDayMouseEnter`              | `DayEventHandler<MouseEvent<Element, MouseEvent>>`                                                                                                               |          | -       | Event handler when the mouse enters a day.                                                                                                                                                                                                                                                                                                                                                                            |
| `onDayMouseLeave`              | `DayEventHandler<MouseEvent<Element, MouseEvent>>`                                                                                                               |          | -       | Event handler when the mouse leaves a day.                                                                                                                                                                                                                                                                                                                                                                            |
| `dateLib`                      | `Partial<DateLib>`                                                                                                                                               |          | -       | Replace the default date library with a custom one. Experimental: not guaranteed to be stable (may not respect semver). @since 9.0.0 @experimental                                                                                                                                                                                                                                                                    |
| `onDayKeyUp`                   | `DayEventHandler<KeyboardEvent<Element>>`                                                                                                                        |          | -       | @private @deprecated Use a custom `DayButton` component instead.                                                                                                                                                                                                                                                                                                                                                      |
| `onDayKeyPress`                | `DayEventHandler<KeyboardEvent<Element>>`                                                                                                                        |          | -       | @private @deprecated Use a custom `DayButton` component instead.                                                                                                                                                                                                                                                                                                                                                      |
| `onDayPointerEnter`            | `DayEventHandler<PointerEvent<Element>>`                                                                                                                         |          | -       | @private @deprecated Use a custom `DayButton` component instead.                                                                                                                                                                                                                                                                                                                                                      |
| `onDayPointerLeave`            | `DayEventHandler<PointerEvent<Element>>`                                                                                                                         |          | -       | @private @deprecated Use a custom `DayButton` component instead.                                                                                                                                                                                                                                                                                                                                                      |
| `onDayTouchCancel`             | `DayEventHandler<TouchEvent<Element>>`                                                                                                                           |          | -       | @private @deprecated Use a custom `DayButton` component instead.                                                                                                                                                                                                                                                                                                                                                      |
| `onDayTouchEnd`                | `DayEventHandler<TouchEvent<Element>>`                                                                                                                           |          | -       | @private @deprecated Use a custom `DayButton` component instead.                                                                                                                                                                                                                                                                                                                                                      |
| `onDayTouchMove`               | `DayEventHandler<TouchEvent<Element>>`                                                                                                                           |          | -       | @private @deprecated Use a custom `DayButton` component instead.                                                                                                                                                                                                                                                                                                                                                      |
| `onDayTouchStart`              | `DayEventHandler<TouchEvent<Element>>`                                                                                                                           |          | -       | @private @deprecated Use a custom `DayButton` component instead.                                                                                                                                                                                                                                                                                                                                                      |
| `selected`                     | `Date \| Date[] \| DateRange`                                                                                                                                    |          | -       | The selected date. The selected dates. The selected range.                                                                                                                                                                                                                                                                                                                                                            |
| `onSelect`                     | `OnSelectHandler<Date> \| OnSelectHandler<Date> \| OnSelectHandler<Date[]> \| OnSelectHandler<...> \| OnSelectHandler<...> \| OnSelectHandler<...> \| 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.                                                                                                                                                                                                                                                         |
| `buttonVariant`                | `"link" \| "default" \| "destructive" \| "secondary" \| "outline" \| "ghost" \| null`                                                                            |          | `ghost` | -                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `min`                          | `number`                                                                                                                                                         |          | -       | The minimum number of selectable days. The minimum number of days to include in the range.                                                                                                                                                                                                                                                                                                                            |
| `max`                          | `number`                                                                                                                                                         |          | -       | The maximum number of selectable days. The maximum number of days to include in the range.                                                                                                                                                                                                                                                                                                                            |
| `excludeDisabled`              | `boolean`                                                                                                                                                        |          | -       | When `true`, the range will reset when including a disabled day. @since V9.0.2 @see <https://daypicker.dev/docs/selection-modes#exclude-disabled> @since V9.0.2                                                                                                                                                                                                                                                       |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { Calendar } from '@databricks/appkit-ui';

<Calendar /* props */ />

```

## CalendarDayButton[​](#calendardaybutton "Direct link to CalendarDayButton")

Individual day button within the calendar grid

**Source:** [`packages/appkit-ui/src/react/ui/calendar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/calendar.tsx)

### Props[​](#props-1 "Direct link to Props")

| Prop        | Type          | Required | Default | Description                        |
| ----------- | ------------- | -------- | ------- | ---------------------------------- |
| `day`       | `CalendarDay` | ✓        | -       | The day to render.                 |
| `modifiers` | `Modifiers`   | ✓        | -       | The modifiers to apply to the day. |

### Usage[​](#usage-1 "Direct link to Usage")

```tsx
import { CalendarDayButton } from '@databricks/appkit-ui';

<CalendarDayButton /* props */ />

```