Skip to content

Customize page size for a calendar showing multiple months #3284

@Manduro

Description

@Manduro

🙋 Feature Request

I would like to have a calendar showing two months, that goes forward only one month when pressing the next button.

🤔 Expected Behavior

The behavior of previous/next buttons does not implicitly change when changing visibleDuration, but can be customized in a different way.

😯 Current Behavior

When using a calendar with a custom visibleDuration (for example 2 months), the behavior of the previous and next buttons also changes. Pressing next suddenly goes forward two months instead of one. This behavior is a bit implicit and not customizable.

💁 Possible Solution

Breaking change: The behavior of previous/next buttons DOES NOT change when changing visibleDuration. It can instead be customized using a new prop like pageSize of type Duration.

OR

Non-breaking change: The behavior of previous/next buttons DOES change when changing visibleDuration as is already the case. It can be customized using a new prop like pageSize of type Duration.

💻 Examples

https://airbnb.com has a calendar range picker when selecting a date. Clicking next only goed forward one month, not two.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    ✅ Done

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions