Skip to content

PickersRangeCalendarHeader API

API reference docs for the React PickersRangeCalendarHeader component. Learn about the props, CSS, and other APIs of this exported module.

Demos

Import

import { PickersRangeCalendarHeader } from '@mui/x-date-pickers-pro/PickersRangeCalendarHeader';
// or
import { PickersRangeCalendarHeader } from '@mui/x-date-pickers-pro';

Learn about the difference by reading this guide on minimizing bundle size.

Props

NameTypeDefaultDescription
calendars*1
| 2
| 3
-

The number of calendars rendered.

month*object-

Month used for this header.

monthIndex*number-

Index of the month used for this header.

classesobject-

Override or extend the styles applied to the component.

See CSS classes API below for more details.

formatstring`${adapter.formats.month} ${adapter.formats.year}`

Format used to display the date.

labelIdstring-

Id of the calendar text element. It is used to establish an aria-labelledby relationship with the calendar grid element.

slotPropsobject{}

The props used for each component slot.

slotsobject{}

Overridable component slots.

See Slots API below for more details.

sxArray<func
| object
| bool>
| func
| object
-

The system prop that allows defining system overrides as well as additional CSS styles.

See the `sx` page for more details.

The component cannot hold a ref.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class nameRule nameDescription
.MuiPickersRangeCalendarHeader-labellabelStyles applied to the label element.
.MuiPickersRangeCalendarHeader-labelContainerlabelContainerStyles applied to the label container element.
.MuiPickersRangeCalendarHeader-rootrootStyles applied to the root element.
.MuiPickersRangeCalendarHeader-switchViewButtonswitchViewButtonStyles applied to the switch view button element.
.MuiPickersRangeCalendarHeader-switchViewIconswitchViewIconStyles applied to the switch view icon element.

You can override the style of the component using one of these customization options: