[useRangeCalendar]: Min/Max Value and visibleDuration
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
# 🐛 Bug Report
I'm working on a responsive calendar which displays 2 calendar sheets side by side in desktop mode (same structure and behavior as the tailwind example from the documentation) and a mobile version which displays the calendar sheets one below the other. I get the number of sheets in mobile mode by the limits I specify with `minValue` and `maxValue`.
Example:
```ts
```
The important part is that in the example I set the `defaultValue`/`value` rather at the end of my specified limits. Everything works great in desktop mode, but then when I switch to mobile mode, the limits are automatically moved and then only start at the sheet that my desktop mode displayed. This means that I no longer have access to my originally defined interval or respectively then the date Cells are now disabled.
Most likely `minValue`/`maxValue` is not suitable for this, but I didn't find a way to implement this even after reading the doc several times and different approaches.
## 🤔 Expected Behavior
It is possible to set limits for min/max, which allow to set the range of the calendar independent of the `visibleDuration` setting. It should not be possible that calendar sheets before the selected date range are no longer visible or disabled. Also it should not be possible to render calendar sheets which are after the max value.
## 😯 Current Behavior
In the mobile version calendar sheets of the defined calendar range disappear or are added which are outside the min/max limits. See code example in next section.
## 💻 Code Sample
[](https://codesandbox.io/s/quirky-cdn-1ju47e?fontsize=14&hidenavigation=1&theme=dark)
Steps:
1. open Sandbox
2. initially everything is correct in desktop mode (calendar limits are current month for min and in a year for max)
3. click on Switch Mobile/Desktop button (while you have the section of the sheets that show the `defaultValue`)
4. the calendar sheets start now at the month that my desktop mode displayed last and stop 1 year later
## 🔦 Context
A mobile calendar with an option to render multiple calendar sheets but also be able to restrict the start and end of the calendar sheets.
## 💁 Possible Solution
Maybe extend the configuration so that this use case is possible?
Possibly it is not a bug and I am missing something in the application of the hook. In any case I would be very grateful for a tip or support.
## 🌍 Your Environment
| Software | Version(s) |
| ---------------- | ---------- |
| react-spectrum | 3.1.0
| Browser | Chrome
| Operating System | macOS
Contributor guide
Assessment
This issue has not been assessed yet.