Calendar

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

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. Use this prop when you need to change the default class names — for example, when importing the style via CSS modules or when using a CSS framework. @see https://daypicker.dev/docs/styling
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. Use this prop to let DayPicker control the current month. If you need to set the month programmatically, use month and onMonthChange. @defaultValue The current month @see https://daypicker.dev/docs/navigation
month	Date		-	The month displayed in the calendar. As opposed to defaultMonth, use this prop with onMonthChange to change the month programmatically. @see https://daypicker.dev/docs/navigation
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. - label: Displays the month and year as a label. Default value. - dropdown: Displays dropdowns for both month and year navigation. - dropdown-months: Displays a dropdown only for the month navigation. - dropdown-years: Displays a dropdown only for the year navigation. Note: By default, showing the dropdown will set the startMonth to 100 years ago and endMonth to the end of the current year. You can override this behavior by explicitly setting startMonth and endMonth. @see https://daypicker.dev/docs/customization#caption-layouts
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. - around: Displays the buttons on either side of the caption. - after: Displays the buttons after the caption. This ensures the tab order matches the visual order. If not set, the buttons default to being displayed after the caption, but the tab order may not align with the visual order. @since 9.7.0 @see https://daypicker.dev/docs/customization#navigation-layouts
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). Note: when a broadcastCalendar is set, this prop defaults to true. @see https://daypicker.dev/docs/customization#outside-days
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). See Wikipedia for the possible values. @since 9.1.1 @see https://daypicker.dev/docs/time-zone
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. Use this prop to communicate the calendar's status to screen readers. Prefer strings over complex UI elements. @see https://daypicker.dev/guides/accessibility#footer
autoFocus	boolean		-	When a selection mode is set, DayPicker will focus the first selected day (if set) or today's date (if not disabled). Use this prop when you need to focus DayPicker after a user action, for improved accessibility. @see https://daypicker.dev/guides/accessibility#autofocus
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. - latn: Latin (Western Arabic) - arab: Arabic-Indic - arabext: Eastern Arabic-Indic (Persian) - deva: Devanagari - beng: Bengali - guru: Gurmukhi - gujr: Gujarati - orya: Oriya - tamldec: Tamil - telu: Telugu - knda: Kannada - mlym: Malayalam @defaultValue latn Latin (Western Arabic) @see https://daypicker.dev/docs/translation#numeral-systems
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

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 */ />