[pickers] Allow to override the header of the DateCalendar

[keemor]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I would like to format month label to remove year

Expected

Examples 🌈

I created an example of using StaticDatePicker & PickersDay:
https://codesandbox.io/s/year-view-business-days-sk5h3z?file=/demo.tsx

Maybe it could be added as a demo here:
https://mui.com/x/api/date-pickers/static-date-picker/
https://mui.com/x/api/date-pickers/pickers-day/

Motivation 🔦

The purpose is to have a year view and be able to mark holidays during a given year for example for a financial institution.

Order ID 💳 (optional)

No response

[alexfauquette]

Thanks for the proposal.

I think it takes part of a larger issue which is about being able to customize calendar header. We should be able to provide a slot for it, and to modify the format to replace month and year by only month for example.

By the way, I'm wondering if it would not be easier to create your how calendar view. with rounded buttons. It would save you all the complexity of checking if days are disabled, the transition between months, and other internal logic since you only use days has toggle buttons. And it would avoid the following bug in your demo:

Focus on a day, and press the key down multiple times. you will be able to switch months

Another idea could be to export the calendar as a pure component

[keemor]

Hi @alexfauquette,

Thanks for pointing out the bug.

Unfortunately I don't understand your proposition with "calendar view with rounded buttons".

Could point me to the components you're referring to?

Thanks,

[alexfauquette]

I thought that you could create your own calendar from scratch because the only interaction you need is the click on days, they do not interact all together

[keemor]

@alexfauquette I'm looking forward for customized calendar header feature :)

I figured out a way to disable pageUp / pageDown after focus:

//Disable pageUp / pageDown navigation inside given month
shouldDisableDate={(date) => !dayjs(calendarView).isSame(dayjs(date), "month")

Another thing I noticed is that I cannot set sx property for StaticDatePicker

https://codesandbox.io/s/year-view-business-days-sk5h3z?file=/demo.tsx

That's why I used styled-component:

const CustomizedStaticDatePicker = styled(
  (props: StaticDatePickerProps<any, any>) => <StaticDatePicker {...props} />
)`
  .MuiPickersCalendarHeader-labelContainer {
    cursor: default;
  }
`;

I looked into source and found, so maybe sx should work?

  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
    PropTypes.func,
    PropTypes.object,
  ]),

Any toughs on this one?

[alexfauquette]

Instead of shouldDisableDate you can use shouldDiableMonth will save you some computation (one test on the previous month instead of one test per day of the previous month)

---

About styled I just let you notice that you do not need to rewrite props => <Component {...props} /> the following works

const CustomizedStaticDatePicker = styled(StaticDatePicker)`
  .MuiPickersCalendarHeader-labelContainer {
    cursor: default;
  }
`;

---

About the sx props, it's working. It looks like a CodeSandbox problem. The sx prop is propagated to the root element, it's part of the props type, and when I copy your code on my computer, it does not display any Typescript error, and the style is applied

[keemor]

I tried shouldDisableMonth, but it doesn't run:
https://codesandbox.io/s/year-view-business-days-sk5h3z?file=/demo.tsx:3876-4022

 shouldDisableMonth={(date) => {
      //Does not run
      console.info(date);
      return true;
}}

---

Regarding sx prop I have the latest "@mui/x-date-pickers": "^5.0.6", and I did:

npm un -D @mui/x-date-pickers
npm i -D @mui/x-date-pickers

and I still see on my localhost:

[LukasTy]

Another thing I noticed is that I cannot set sx property for StaticDatePicker

https://codesandbox.io/s/year-view-business-days-sk5h3z?file=/demo.tsx

All the sx props were added only in next branch (current v6 alpha release) with #5944.
You can see that on master branch such prop type does not exist.
It would not be quite time consuming to cherry-pick only the non-breaking changes in the mentioned PR—that's why it did not end up being back-ported to master as a "critical" bug-fix.

[alexfauquette]

My bad, I thought you were on the v6

[enckao]

Hi everyone !

I'm using DatePicker from MUI X and I have a special use case where I only need to set periods of time (and range picker is not what we need) with a picker for the begin date and another one for the end date. In this use case, the year is fully abstract and in order to not confuse the user, I need to hide the year in the popover of the DateCalendar.

I know @flaviendelangle has added a new slot for accessing CalendarHeader, but currently I didn't find a way to access the label prop inside the CalendarHeader. The only thing I can do is replace CalendarHeader by a custom component or just hide the year in CSS.

Is it possible to access it or is it planned in the future ?
Thanks for your help

[LukasTy]

Hello @enckao
For now, we have only added the option to override the whole header component. There is currently no option to change only the label behavior on it.
Your best bet, and one that isn't the prettiest in this case, would be to copy the PickersCalendarHeader component into your code base, change it however you want, and pass it as a calendarHeader slot. 🤔

The way we create the label is by calling utils.format(month, 'monthAndYear') and month (currentMonth) is a prop that you do receive as a prop to the calendarHeader slot. 😉

[enckao]

I'll give it a try, thanks a lot for the advice !
Have a great day !