pageBehaviour with any amount of months

[VadimGouskov]

Provide a general summary of the feature here

Paging is currently restricted by one single month or by visibleDuration (set using the pageBehaviour props).

The request suggests adding the ability to choose the amount of months to navigate the calendar.

🤔 Expected Behavior?

Able to navigate the calendar by an amount of months.

😯 Current Behavior

Changing the current navigation behaviour is only possible by one month (pageBehaviour='single') or whatever the visibleDuration (pageBehaviour='visible') is set to.

💁 Possible Solution

the pageBehaviour prop could be expanded to receive a Pick<Duration, 'years' | 'months'> type.

The calendar's <Button slot="next | previous"> components and state.focusNextPage would then navigate the calendar using the amount of months set by pageBehaviour.

🔦 Context

Our calendar shows 16 months at a time. Aligned to show December of last year, through march of the next year.

This allows for easy selection cross year boundries.

We currently implement this by re-initialising the RangeCalendar using a different key for every year.

We set the visibleDuration to {months: 16} and initialFocussedDate to July of the current year. With the default selectionAlignment being center, this aligns our calendar just right on every initial render.

With the ability to page months at a time, we could use internal paging logic. Currently we can only navigate 1 or 16 months at a time. Thus, we are forced to re-initialise the calendar to move between years.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response