DateRangeCalendar API
API reference docs for the React DateRangeCalendar component. Learn about the props, CSS, and other APIs of this exported module.
Component demos
Import
import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';
// or
import { DateRangeCalendar } from '@mui/x-date-pickers-pro';Props of the native component are also available.
If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered.
Type:bool
Formats the day of week displayed in the calendar header.
Type:func
Default:(_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
function(date: TDate) => stringdateThe date of the day of week provided by the adapter.
Returns: The name to display.
The initial position in the edited date range. Used when the component is not controlled.
Type:'end'
| 'start'
Default:'start'
If true, after selecting start date calendar will not automatically switch to the month of end date.
Type:bool
If true, disable values after the current date for date components, time for time components and both for date time components.
Type:bool
If true, disable values before the current date for date components, time for time components and both for date time components.
Type:bool
The day view will show as many weeks as needed after the end of the current month to match this value. Put it to 6 to have a fixed number of weeks in Gregorian calendars
Type:number
Default:undefined
If true, calls renderLoading instead of rendering the day calendar. Can be used to preload information and show it in calendar.
Type:bool
Callback fired when the value changes.
Type:func
function(value: DateRange, selectionState: PickerSelectionState | undefined) => void valueThe new value.selectionStateIndicates if the date range selection is complete.
Callback fired on month change.
Type:func
function(month: TDate) => voidmonthThe new month.
Callback fired when the range position changes.
Type:func
function(rangePosition: RangePosition) => voidrangePositionThe new range position.
The position in the currently edited date range. Used when the component position is controlled.
Type:'end'
| 'start'
If true, disable heavy animations.
Type:bool
Default:`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
The date used to generate the new value when both value and defaultValue are empty.
Type:any
Default:The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.
Component rendered on the "day" view when props.loading is true.
Type:func
Default:() => "..."
function() => React.ReactNodeReturns: The node to render when loading.
Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
Type:func
function(day: TDate, position: string) => booleandayThe date to test.positionThe date to test, 'start' or 'end'.
Returns: Returns true if the date should be disabled.
If true, days outside the current month are rendered:
- if fixedWeekNumber is defined, renders days to have the weeks requested.
- if fixedWeekNumber is not defined, renders day to fill the first and last week of the current month.
- ignored if calendars equals more than 1 on range pickers.
Type:bool
The system prop that allows defining system overrides as well as additional CSS styles.
See the `sx` page for more details.
Type:Array<func
| object
| bool>
| func
| object
Choose which timezone to use for the value. Example: "default", "system", "UTC", "America/New_York". If you pass values from other timezones to some props, they will be converted to this timezone before being used.
See the timezones documentation for more details.
Type:string
Default:The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
ref is forwarded to the root element.The following class names are useful for styling with CSS (the state classes are marked).
To learn more, visit the component customization page.
Styles applied to the container of a month.
Rule name:monthContainer
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.
Custom component for calendar header. Check the PickersCalendarHeader component.
Default: PickersCalendarHeader
Custom component for day in range pickers. Check the DateRangePickersDay component.
Default: DateRangePickersDay