Interface CalendarFormat

Additional properties that extend from and can be passed to the main component. These properties allow customizing the calendar formatting and aria-labels.

interface CalendarFormat {
    cellAriaLabel?: ((date: Date) => string);
    dayFormat?: ((date: Date) => ReactNode);
    inlineProps?: CalendarMonthInlineProps;
    locale?: string;
    longWeekdayFormat?: ((date: Date) => ReactNode);
    monthFormat?: ((date: Date) => ReactNode);
    nextMonthAriaLabel?: string;
    prevMonthAriaLabel?: string;
    rangeStart?: Date;
    weekdayFormat?: ((date: Date) => ReactNode);
    weekStart?:
        | 0
        | 1
        | 3
        | 5
        | 2
        | 4
        | 6
        | Weekday;
    yearInputAriaLabel?: string;
}

Hierarchy (view full)

Properties

cellAriaLabel? dayFormat? inlineProps? locale? longWeekdayFormat? monthFormat? nextMonthAriaLabel? prevMonthAriaLabel? rangeStart? weekdayFormat? weekStart? yearInputAriaLabel?

Properties

OptionalcellAriaLabel

cellAriaLabel?: ((date: Date) => string)

Accessible label for the date cells.

OptionaldayFormat

dayFormat?: ((date: Date) => ReactNode)

How to format days in buttons in table cells.

OptionalinlineProps

inlineProps?: CalendarMonthInlineProps

Props used to ensure accessibility when displaying the calendar month inline.

Optionallocale

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

OptionallongWeekdayFormat

longWeekdayFormat?: ((date: Date) => ReactNode)

How to format days in header for screen readers.

OptionalmonthFormat

monthFormat?: ((date: Date) => ReactNode)

How to format months in month select.

OptionalnextMonthAriaLabel

nextMonthAriaLabel?: string

Accessible label for the next month button.

OptionalprevMonthAriaLabel

prevMonthAriaLabel?: string

Accessible label for the previous month button.

OptionalrangeStart

rangeStart?: Date

Which date to start range styles from.

OptionalweekdayFormat

weekdayFormat?: ((date: Date) => ReactNode)

How to format week days in header.

OptionalweekStart

weekStart?:
    | 0
    | 1
    | 3
    | 5
    | 2
    | 4
    | 6
    | Weekday

Day of week that starts the week. 0 is Sunday, 6 is Saturday.

OptionalyearInputAriaLabel

yearInputAriaLabel?: string

Accessible label for the year input.

Settings

Member Visibility

On This Page

Properties