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	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={{ before: date }}` 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={new Date(year, 0)}`. @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={{ after: date }}` 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={new Date(year, 0)}`. @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 */ />

Example​

Calendar​

Props​

Usage​

CalendarDayButton​

Props​

Usage​

Example

Calendar

Props

Usage

CalendarDayButton

Props

Usage