Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Calendar

Date picker component for selecting single dates or date ranges

## Example​

    "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​

Date picker component for selecting single dates or date ranges

Source: `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 = { 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​

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

    <Calendar /* props */ />

## CalendarDayButton​

Individual day button within the calendar grid

Source: `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​

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

    <CalendarDayButton /* props */ />