[pickers] Customize MonthCalendar and YearCalendar slots

[andrejremic]

Order ID or Support key 💳 (optional)

#52617

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

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

We use this functionality to mark days with missing data, but we would like to mark also on "month" and "year" view.
What would be best way to do it?

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[LukasTy]

Hello, thank you for creating this issue.
We do not expose any of the year or month calendar slots, hence, it's not that trivial to override only parts of it.
Currently I see two options:

• Try working around with styles and applying custom styling to the certain nth-element, like in this example.
• Override the whole viewRenderer with your custom DateCalendar view renderer. But it would be a massive chore to override it for just those small mentioned portions. 🙈

Let me know if using custom styles would help you.
I'm moving this issue to our board and in the process for grooming as we can definitely improve in this regard and expose more portions as slots. 👍

[jansepke]

this might now be a duplicate of #10874 (which has more upvotes) but to answer @LukasTy question: using custom styles are not enough because we want to have different styles for the current year, selected year and hovered year. this is not really possible with the currently available selectors.

So adding more classes or adding slots for YearPicker would really help 👍

[LukasTy]

@jansepke thank you for investigating and taking the time to reply.
It looks like those issues are essentially duplicates.
I'm closing this one in favor of the more upvoted one and bumping its priority for grooming to high. 😉

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@andrejremic: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.