| 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. |
| monthAppendTo | HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline' | 'inline' | The container to append the month select menu to. Defaults to 'inline'.
If your menu is being cut off you can append it to an element higher up the DOM tree.
Some examples:
monthAppendTo={() => document.body};
monthAppendTo={document.getElementById('target')} |
| 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. |
| ouiaId | number | string | | Value to overwrite the randomly generated data-ouia-component-id. |
| ouiaSafe | boolean | true | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. |
| 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. |
