/ux
Components/Misc/Calendar

Calendar

Misc

Month-view calendar grid for date selection.

Low-level calendar grid wrapping react-day-picker v8. Use directly when you need full control over the surrounding UI, or use DatePicker / DateRangePicker for the opinionated popover versions.

Usage

import { Calendar } from "nosible-ux"
import { useState } from "react"

export default function Example() {
  const [date, setDate] = useState<Date | undefined>()
  return <Calendar mode="single" selected={date} onSelect={setDate} />
}

Examples

Range selection

SuMoTuWeThFrSa
SuMoTuWeThFrSa

Accessibility

Full keyboard navigation: arrow keys for days, Page Up/Down for months. Selected days have aria-selected. Disabled days have aria-disabled.

Props

Name TypeDefaultDescription
captionLayout
CaptionLayout | undefinedbuttonsChange the layout of the caption: - `buttons`: display prev/right buttons - `dropdown`: display drop-downs to change the month and the year **Note:** the `dropdown` layout is available only when `fromDate`, `fromMonth` or`fromYear` and `toDate`, `toMonth` or `toYear` are set.
className
string | undefined—The CSS class to add to the container element. To change the name of the class instead, use `classNames.root`.
classNames
Partial<StyledElement<string>> | undefined—Change the class names of the HTML elements. Use this prop when you need to change the default class names — for example when using CSS modules.
components
CustomComponents | undefined—Map of components used to create the layout. Look at the [components source](https://github.com/gpbl/react-day-picker/tree/main/src/components) to understand how internal components are built and provide your custom components.
defaultMonth
Date | undefinedThe current monthThe 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 {@link month]] and [[onMonthChange}.
dir
string | undefined—The text direction of the calendar. Use `ltr` for left-to-right (default) or `rtl` for right-to-left.
disabled
Matcher | Matcher[] | undefined—Apply the `disabled` modifier to the matching days.
disableNavigation
boolean | undefinedfalseDisable the navigation between months.
firstWeekContainsDate
1 | 4 | undefined—The day of January, which is always in the first week of the year. Can be either Monday (`1`) or Thursday (`4`).
fixedWeeks
boolean | undefinedfalseDisplay six weeks per months, regardless the month’s number of weeks. To use this prop, {@link showOutsideDays} must be set.
footer
ReactNode—Content to add to the table footer element.
formatters
Partial<Formatters> | undefined—A map of formatters. Use the formatters to override the default formatting functions.
fromDate
Date | undefined—The earliest day to start the month navigation.
fromMonth
Date | undefined—The earliest month to start the month navigation.
fromYear
number | undefined—The earliest year to start the month navigation.
hidden
Matcher | Matcher[] | undefined—Apply the `hidden` modifier to the matching days. Will hide them from the calendar.
hideHead
boolean | undefinedfalseHide the month’s head displaying the weekday names.
id
string | undefined—A unique id to replace the random generated id – used by DayPicker for accessibility.
initialFocus
boolean | undefined—When a selection mode is set, DayPicker will focus the first selected day (if set) or the today's date (if not disabled). Use this prop when you need to focus DayPicker after a user actions, for improved accessibility.
ISOWeek
boolean | undefined—Use ISO week dates instead of the locale setting. Setting this prop will ignore {@link weekStartsOn} and {@link firstWeekContainsDate}.
labels
Partial<Labels> | undefined—Labels creators to override the defaults. Use this prop to customize the ARIA labels attributes.
lang
string | undefined—Add the language tag to the container element.
locale
Locale | undefineden-USThe date-fns locale object used to localize dates.
mode
"single" | "multiple" | "default" | "range" | undefined—
modifiers
DayModifiers | undefined—Add modifiers to the matching days.
modifiersClassNames
ModifiersClassNames | undefined—Change the class name for the day matching the {@link modifiers}.
modifiersStyles
ModifiersStyles | undefined—Change the inline style for the day matching the {@link modifiers}.
month
Date | undefined—The month displayed in the calendar. As opposed to {@link DayPickerBase.defaultMonth}, use this prop with {@link DayPickerBase.onMonthChange} to change the month programmatically.
nonce
string | undefined—A cryptographic nonce ("number used once") which can be used by Content Security Policy for the inline `style` attributes.
numberOfMonths
number | undefined1The number of displayed months.
onDayBlur
DayFocusEventHandler | undefined—Event callback fired when the user blurs from a day.
onDayClick
DayClickEventHandler | undefined—Event callback fired when the user clicks on a day.
onDayFocus
DayFocusEventHandler | undefined—Event callback fired when the user focuses on a day.
onDayKeyDown
DayKeyboardEventHandler | undefined—Event callback fired when the user presses a key on a day.
onDayKeyPress
DayKeyboardEventHandler | undefined—Event callback fired when the user presses a key on a day.
onDayKeyUp
DayKeyboardEventHandler | undefined—Event callback fired when the user presses a key on a day.
onDayMouseEnter
DayMouseEventHandler | undefined—Event callback fired when the user hovers on a day.
onDayMouseLeave
DayMouseEventHandler | undefined—Event callback fired when the user hovers away from a day.
onDayPointerEnter
DayPointerEventHandler | undefined—Event callback fired when the pointer enters a day.
onDayPointerLeave
DayPointerEventHandler | undefined—Event callback fired when the pointer leaves a day.
onDayTouchCancel
DayTouchEventHandler | undefined—Event callback when a day touch event is canceled.
onDayTouchEnd
DayTouchEventHandler | undefined—Event callback when a day touch event ends.
onDayTouchMove
DayTouchEventHandler | undefined—Event callback when a day touch event moves.
onDayTouchStart
DayTouchEventHandler | undefined—Event callback when a day touch event starts.
onMonthChange
MonthChangeEventHandler | undefined—Event fired when the user navigates between months.
onNextClick
MonthChangeEventHandler | undefined—Event callback fired when the next month button is clicked.
onPrevClick
MonthChangeEventHandler | undefined—Event callback fired when the previous month button is clicked.
onWeekNumberClick
WeekNumberClickEventHandler | undefined—Event callback fired when the week number is clicked. Requires `showWeekNumbers` set.
pagedNavigation
boolean | undefinedfalsePaginate the month navigation displaying the {@link numberOfMonths} at time.
reverseMonths
boolean | undefinedfalseRender the months in reversed order (when {@link numberOfMonths} is greater than `1`) to display the most recent month first.
selected
Matcher | Matcher[] | undefined—Apply the `selected` modifier to the matching days. The selected day. The selected days. The selected range of days.
showOutsideDays
boolean | undefinedfalseShow the outside days. An outside day is a day falling in the next or the previous month.
showWeekNumber
boolean | undefinedfalseShow the week numbers column. Weeks are numbered according to the local week index. - to use ISO week numbering, use the {@link ISOWeek} prop. - to change how the week numbers are displayed, use the {@link Formatters} prop.
style
CSSProperties | undefined—Style to apply to the container element.
styles
Partial<Omit<StyledElement<CSSProperties>, InternalModifiersElement>> | undefined—Change the inline styles of the HTML elements.
title
string | undefined—Add a `title` attribute to the container element.
toDate
Date | undefined—The latest day to end the month navigation.
today
Date | undefined—The today’s date. Default is the current date. This Date will get the `today` modifier to style the day.
toMonth
Date | undefined—The latest month to end the month navigation.
toYear
number | undefined—The latest year to end the month navigation.
weekStartsOn
0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined—The index of the first day of the week (0 - Sunday). Overrides the locale's one.
← All ComponentsGetting Started →