CalendarPicker API

API documentation for the React CalendarPicker component. Learn about the available props and the CSS API.

Import

import CalendarPicker from '@mui/lab/CalendarPicker';
// or
import { CalendarPicker } from '@mui/lab';

The name MuiCalendarPicker can be used when providing default props or style overrides in the theme.

Name	Type	Default	Description
onChange^*	func		Callback fired on date change
defaultCalendarMonth	any		Default calendar month displayed when `value={null}`.
loading	bool	false	If `true` renders `LoadingComponent` in calendar instead of calendar view. Can be used to preload information and show it in calendar.
maxDate	any		Max selectable date. @DateIOType
minDate	any		Min selectable date. @DateIOType
onMonthChange	func		Callback firing on month change. @DateIOType
onViewChange	func		Callback fired on view change.
openTo	'day' \| 'month' \| 'year'	'day'	Initially open view.
reduceAnimations	bool	typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)	Disable heavy animations.
renderLoading	func	() => <span data-mui-test="loading-progress">...</span>	Component displaying when passed `loading` true.
shouldDisableDate	func		Disable specific date. @DateIOType
shouldDisableYear	func		Disable specific years dynamically. Works like `shouldDisableDate` but for year selection view @DateIOType.
view	'day' \| 'month' \| 'year'		Controlled open view.
views	Array<'day' \| 'month' \| 'year'>	['year', 'day']	Views for calendar picker.

The ref is forwarded to the root element.

Rule name	Global class	Description
root	.MuiCalendarPicker-root	Styles applied to the root element.
viewTransitionContainer	.MuiCalendarPicker-viewTransitionContainer	Styles applied to the transition group element.

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 styleOverrides property in a custom theme.