Description
Provide a general summary of the issue here
I am creating custom month picker in calendar.
the problem is that i try to use single pageBehavior with not single month visibleDuration
When i set focused date month that is less than start in visible range, it becomes end one in range (timeframe moves to left)
When i set focused date month that is bigger than end in visible range, it becomes start one in range (timeframe moves to right)
the code i use is
const state = useCalendarState({
visibleDuration: { months: 2 },
pageBehavior: "single",
createCalendar,
});
const setMonth = useCallback((month) => {
state.setFocusedDate(state.focusedDate.set({ month }));
}, []);
demo video:
Screen.Recording.2025-05-12.at.18.20.08.mp4
🤔 Expected Behavior?
state.focusedDate.set({month: month}) always set start month of focused range
😯 Current Behavior
state.focusedDate.set({month: month}) behavior depends on the current focus range
💁 Possible Solution
There might be some bug in this settings combination:
visibleMonths: 2 conflicts with pageBehavior: "single"
#7005 implementation would be a nice solution by the way
🔦 Context
No response
🖥️ Steps to Reproduce
https://codesandbox.io/p/sandbox/winter-dawn-k4phr9
try to change month first on 1 and then on 2 and back and forth
next try to change month first on 2 and then on 1 and back and forth
or try to change form 10 to 2 , and from 10 to 1
Version
@react-stately/calendar 3.8.0, @internationalized/date: 3.8.0
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
macOs 14.4.1 (23E224)
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response