[pickers] Allow controlling the currently displayed year and month in the calendar components

[KilianB]

Summary

Currently the referenceDate can be used to define which month of the DateCalendar is initially displayed, but changes to it do not reflect in the current month displayed in the date calendar. I am trying to replace the next and previous Buttons with my own implementation.

 <DateCalendar
    minDate={dayjs()}
    views={["day"]}
    referenceDate={referenceDateRight}
    slots={{
      nextIconButton: () => <></>,
      previousIconButton: () => <></>,
    }}
  />

I explicitly do not want to set the value or the default value of the component, but just control which month and date is displayed to the user

Examples

Motivation

As shown in the example the goal is to have multiple date pickers next to each other. In order to synch those I need to control the displayed month.
This can somehow we achieved by making the key dependent on the reference value, but this means that we are remounting the entire component every time we are changing the month.

The same motivation could previously be found here: https://stackoverflow.com/questions/76998078/how-can-i-have-two-calendars-in-the-datepicker-component-of-mui

Search keywords: reference date controlled date calendar

[noraleonte]

Hey there 👋 I am not sure the reference date will be of much help once the value is changed. referenceDate is used to determine what month to render initially. And as for rendering two calendars in a DatePicker I'm not sure how to correctly handle that off the top of my head 🤔 I will look into a solution - but seems cumbersome to achieve on the user's side
As far as I know, there's no current plan to support multiple calendars in a simple picker, but I will bring it up in the next team discussion.

[LukasTy]

This sounds close to #7379 and #4549.
Could we treat it as a duplicate? 🤔

[noraleonte]

@LukasTy Feels like the main problem here is displaying multiple calendars 🤔

[LukasTy]

If that's the case - ok.
I don't think there are many problems creating multiple DateCalendar components.
I felt like the main issue is programmatically controlling updates of their current month. 🤔

[KilianB]

As @noraleonte has said there are no current plans to support multiple calendars, so the main point of the issue is controlling the reference date as this would allow for the user to build it themselves. Getting the calendars to sync and show dates properly selected is just a matter of a few lines of code.

Multiple calendars are just an example. Having an external year picker or list of the website where the selection can be externally adjusted with different inputs or gestures could also be a scenario where controlling which month or year to display would be helpful.