Calendar month

A calendar month component allows users to select and navigate between days, months, and years.

Examples

Selectable date

Select your favorite date

Selected date: Tue Nov 24 2020 00:00:00 GMT+0000 (Coordinated Universal Time)

Date range

In this example, there are 2 dates selected: a range start date (via the rangeStart prop) and a range end date (via the date prop). Additionally, any dates prior to the range start date are disabled by passing in an array of functions to the validators prop. In this case a single function is passed in, which checks whether a date is greater than or equal to the range start date.

For this example, these dates are static and cannot be updated. For an interactive demo, see our Date picker demos.

Calendar month displaying a range

Props

CalendarMonth

The main calendar month component.
*required
Name	Type	Default	Description
cellAriaLabel	(date: Date) => string		Accessible label for the date cells.
className	string		Additional classes to add to the outer div of the calendar month.
date	Date		Month/year to base other dates around.
dayFormat	(date: Date) => React.ReactNode	(date) => date.getDate()	How to format days in buttons in table cells.
inlineProps	CalendarMonthInlineProps		Props used to ensure accessibility when displaying the calendar month inline.
isDateFocused	boolean	false	Flag to set browser focus on the passed date. *
locale	string	undefined	If using the default formatters which locale to use. Undefined defaults to current locale. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
longWeekdayFormat	(date: Date) => React.ReactNode	(date) => date.toLocaleDateString(locale, { weekday: 'long' })	How to format days in header for screen readers.
monthFormat	(date: Date) => React.ReactNode	(date) => date.toLocaleDateString(locale, { month: 'long' })	How to format months in month select.
nextMonthAriaLabel	string	'Next month'	Accessible label for the next month button.
onChange	(event: React.MouseEvent<HTMLButtonElement, MouseEvent>, date: Date) => void	() => {}	Callback when date is selected.
onMonthChange	( event?: React.MouseEvent \| React.ChangeEvent \| React.FormEvent<HTMLInputElement>, newDate?: Date ) => void	() => {}	Callback when month or year is changed.
prevMonthAriaLabel	string	'Previous month'	Accessible label for the previous month button.
rangeStart	Date		Which date to start range styles from.
validators	((date: Date) => boolean)[]	[() => true]	Functions that returns if a date is valid and selectable.
weekdayFormat	(date: Date) => React.ReactNode	(date) => date.toLocaleDateString(locale, { weekday: 'narrow' })	How to format week days in header.
weekStart	0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| Weekday	0	Day of week that starts the week. 0 is Sunday, 6 is Saturday.
yearInputAriaLabel	string	'Select year'	Accessible label for the year input.

CalendarFormat

Additional properties that extend from and can be passed to the main component. These properties allow customizing the calendar formatting and aria-labels.
*required
Name	Type	Description
cellAriaLabel	(date: Date) => string	Accessible label for the date cells.
dayFormat	(date: Date) => React.ReactNode	How to format days in buttons in table cells.
inlineProps	CalendarMonthInlineProps	Props used to ensure accessibility when displaying the calendar month inline.
locale	string	If using the default formatters which locale to use. Undefined defaults to current locale. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
longWeekdayFormat	(date: Date) => React.ReactNode	How to format days in header for screen readers.
monthFormat	(date: Date) => React.ReactNode	How to format months in month select.
nextMonthAriaLabel	string	Accessible label for the next month button.
prevMonthAriaLabel	string	Accessible label for the previous month button.
rangeStart	Date	Which date to start range styles from.
weekdayFormat	(date: Date) => React.ReactNode	How to format week days in header.
weekStart	0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| Weekday	Day of week that starts the week. 0 is Sunday, 6 is Saturday.
yearInputAriaLabel	string	Accessible label for the year input.

CalendarMonthInlineProps

*required
Name	Type	Description
ariaLabelledby	string	Id of the accessible label of the calendar month. Recommended to map to the title.
component	keyof JSX.IntrinsicElements	Component wrapping the calendar month when used inline. Recommended to be 'article'.
title	React.ReactNode	Title of the calendar rendered above the inline calendar month. Recommended to be a 'title' component.

CSS variables

Expand or collapse column	Selector	Variable	Value

View source on GitHub

S	M	T	W	T	F	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	1	2	3	4	5

S	M	T	W	T	F	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	1	2	3	4	5