[DateRangeCalendar] should we move forward/backward based on `calendars` prop

[MyNameIsTakenOMG]

I have been recently working on a personal project, a dental booking app, which gave me a chance to play with this powerful component -- dataRangeCalendar a bit. But I found something that makes me a little confused, which is when we click the previous or next button, we only move one month at a time, no matter how many months we display on the screen. I understand this may sound not a big deal, but my point is this component dateRangeCalendar allows us to show more months or info to end users, then why do we only do it for the first time? For example, we show 3 months on the screen, and each time we click the previous or next button, we could let our users see 3 new months, which can help them move back and forth much faster to go to the date they are looking for, isn't it a good user experience?

I knew this could be a stupid question because I missed out something. But, I'd very much like to know what you think about it, especially when you are designing this component.

BTW, I made this demo: https://codesandbox.io/p/github/MyNameIsTakenOMG/mui-x-date-calendar-demo/main , hopefully, it could help me explain this issue a little bit clearer for you guys if my description confused you! (my apology, English is my second language😂)

[noraleonte]

Hey! 👋

This is an interesting point 🤔 To make sure I understood correctly, if you have jan, feb, mar displayed and you click next, you would expect the months that show up to be apr, may, jun instead of feb, mar, apr, right? From a UX perspective, I would probably not recommend this unless there is a very clear indicator that a behavior like this improves the experience for a specific use-case, because in general, a jump like this may become confusing for users. For instance, if you have a use-case where you want a user to select a date range within a specific trimester, I can see a value in this. But if a user wants to select a start date in February, and an end date in April, they would never see the calendars of the three months that interest them side by side. They would have to go back and forth between views to be able to visualize their selected range.

I'm interested to hear about your use-case a bit more 🤔

I will bring this up with the team, maybe we can discuss a solution to allow customization of the behavior when the selected month changes 💯

[MyNameIsTakenOMG]

Hi, @noraleonte thank you very much for the response 😊

Yes, that's what I originally meant about a big jump when clicking the next or previous buttons. However, with the help of your explanation, especially the example you mentioned above made me realize why DateRangeCalendar is designed this way, only moving one month at a time or it will miss out on certain months if making a bigger jump 👍

Moreover, thanks to your reply, I now understood what exactly I expect from this component, which is to allow our end users to have the ability to move faster, for example, we can keep the original design ( moving one month at a time ), while adding a fast-forward option, you know, it's kinda like MP3 player ( maybe not accurate, but you got the picture ), and also users can setup how many months should be skipped each time. So in this case, our users get the ability to make a normal step or a larger step by clicking on the next or fast-forward buttons, which are totally based on their own needs. Most importantly, our component will be more flexible.

Lastly, please allow me to talk about my use case briefly. So I'm working on a dental booking app, and I need a component that can render multiple months at a time but only expect users to choose one single date at a time. Unluckily, neither DateCalendar nor DateRangeCalendar could fit my situation very well, so I played with these two components first, trying to get some hints about how to make my own calendar. And during that time, I realized that our DateRangeCalendar component lack the ability to fastly move to a specific date, similar to DateCalendar, or the ability to move fast forward/backward. So this is why I decided to open this issue, wondering if maybe this is an opportunity to make our component more flexible 😄

Once again, thank you for your reply, which really made me learn something new today 👍😁

[LukasTy]

We decided to start by providing a documentation example of achieving something like this by customizing the calendarHeader slot. This change depends on https://github.com/mui/mui-x/issues/10566 being delivered first. With this addition to the docs, we should also add an example of customizing the calendarheader on the DatePicker component as well.

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem, please open a new issue and provide details about your specific problem. If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @MyNameIsTakenOMG? Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.