search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.16k stars 1.3k forks source link

[pickers] Allow reusing Year and Month button in slots #14066

Open Kurt2189 opened 2 months ago

Kurt2189 commented 2 months ago

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 commented 2 months ago

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

Kurt2189 commented 2 months ago

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 commented 2 months ago

@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... 🤷

https://github.com/mui/mui-x/blob/5762b1d06ece35406ae1b4270bcb32068146cabf/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx#L59-L102

Kurt2189 commented 2 months ago

"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 commented 2 months ago

@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. 😉