adobe / adobe/react-spectrum

pageBehaviour with any amount of months

Open
#9,016 5 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### 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` type.

The calendar's `` 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_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.