Skip to contentSkip to content
🚀 Influence MUI's 2026 roadmap! Take our latest Developer Survey

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

Props of the native component are also available.

NameTypeDefaultDescription
calendars*1
| 2
| 3		-

The number of calendars rendered.

currentMonth*{}-
maxDate*{}-
minDate*{}-
month*{}-

Month used for this header.

monthIndex*number-

Index of the month used for this header.

onMonthChange*func-
Signature:function(date: any) => void
    reduceAnimations*bool-
    timezone*string-
    view*'day'
    | 'month'
    | 'year'    		-
    views*Array<'day'
    | 'month'
    | 'year'>    		-
    classesPartial-

    Override or extend the styles applied to the component.

    See CSS classes API below for more details.

    disabledbool-
    disableFuturebool-
    disablePastbool-
    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.

    onViewChangefunc-
    Signature:function(view: DateView) => void
      slotPropsPickersCalendarHeaderSlotProps{}

      The props used for each component slot.

      slotsPickersCalendarHeaderSlots{}

      Overridable component slots.

      See Slots API below for more details.

      The ref is forwarded to the root element.

      Slots

      Slot nameClass nameDefault componentDescription
      leftArrowIconArrowLeftIcon displayed in the left view switch button.
      nextIconButtonIconButtonButton allowing to switch to the right view.
      previousIconButtonIconButtonButton allowing to switch to the left view.
      rightArrowIconArrowRightIcon displayed in the right view switch button.
      switchViewButtonIconButtonButton displayed to switch between different calendar views.
      switchViewIconArrowDropDownIcon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.

      Source code

      If you did not find the information in this page, consider having a look at the implementation of the component for more detail.