[pickers] Allow reusing Year and Month button in slots

[Kurt2189]

Related page

https://mui.com/x/react-date-pickers/date-calendar/

Kind of issue

Missing information

Issue description

I would like to know if it is possible to mark not only days, but also months and years on a calendar

Context

Dynamic year or month

Search keywords: Dynamic year or month

[LukasTy]

Hello @Kurt2189.
Have you tried using monthButton or yearButton slot to achieve what you are asking? 🤔

[Kurt2189]

I tried, but unfortunately I haven’t achieved any results yet. I would like to pass an array of certain years and in the calendar, if the year matches the value of my array, then somehow indicate it with a checkmark. Sorry if my question seemed stupid.

[LukasTy]

@Kurt2189 Do you mean something like this? 🤔

Applying conditional slotProps looks easy, but if you want to create a custom component, I think that we should expose the YearCalendarButton component we use to make it easier because otherwise, everything needs to be replicated... 🤷

mui-x/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx

Lines 59 to 102 in 5762b1d

	const YearCalendarButton = styled('button', {
	name: 'MuiPickersYear',
	slot: 'YearButton',
	overridesResolver: (_, styles) => [
	styles.yearButton,
	{ [`&.${pickersYearClasses.disabled}`]: styles.disabled },
	{ [`&.${pickersYearClasses.selected}`]: styles.selected },
	],
	})<{ ownerState: PickersYearProps }>(({ theme }) => ({
	color: 'unset',
	backgroundColor: 'transparent',
	border: 0,
	outline: 0,
	...theme.typography.subtitle1,
	margin: '6px 0',
	height: 36,
	width: 72,
	borderRadius: 18,
	cursor: 'pointer',
	'&:focus': {
	backgroundColor: theme.vars
	? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.focusOpacity})`
	: alpha(theme.palette.action.active, theme.palette.action.focusOpacity),
	},
	'&:hover': {
	backgroundColor: theme.vars
	? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})`
	: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
	},
	'&:disabled': {
	cursor: 'auto',
	pointerEvents: 'none',
	},
	[`&.${pickersYearClasses.disabled}`]: {
	color: (theme.vars || theme).palette.text.secondary,
	},
	[`&.${pickersYearClasses.selected}`]: {
	color: (theme.vars || theme).palette.primary.contrastText,
	backgroundColor: (theme.vars || theme).palette.primary.main,
	'&:focus, &:hover': {
	backgroundColor: (theme.vars || theme).palette.primary.dark,
	},
	},
	}));

[Kurt2189]

"Sometimes it may be necessary to display additional info right in the calendar. The following demo shows how to add a badge on some day based on server-side data" but how i can this for month or year picker. I want add badge on month or year.

[LukasTy]

@Kurt2189 To enable the exact same behavior, we would need to publicly expose the mentioned component and a similar component on the MonthCalendar.
I'm adding this issue to the grooming board to check with the team if we agree with such a solution. 😉