# Calendar

Date picker component for selecting single dates or date ranges

## Example

## 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

| 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 = &#123; weekend: &#123; dayOfWeek: [0, 6] &#125;, // Match weekends holiday: [new Date(2023, 11, 25)] // Match Christmas &#125;; &lt;DayPicker modifiers=&#123;modifiers&#125; /&gt; @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 &#123; es &#125; from "react-day-picker/locale"; &lt;DayPicker locale=&#123;es&#125; /&gt; @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

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

```

## 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

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

### Usage

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

```