DateRangePicker: Two independent RangeCalendars with cross-calendar selection

[vintagefuture]

Hello,

I'm in the process of re-creating with React Aria an old daterangepicker for my application.

The old daterangepicker is https://github.com/skratchdot/react-bootstrap-daterangepicker

I'm struggling a bit to re-create the "cross-calendar selection" functionality, which is critical for my use case.

I think of it as two strapped togethern, which share the same state, with the exception of the visibleRange, and with independent next/prev buttons.

I've experimented quite a lot with useRangeCalendar and useRangeCalendarState, following the example at https://react-spectrum.adobe.com/react-aria/useRangeCalendar.html

However, I think I'm missing a key insight for decoupling the states I need.

I also tried approaching it in the opposite way, by having two separate states, and manually syncing the necessary states like value, anchorDate, isDragging, etc. but that seems to be even more complicated.

Any heads up would be very, very appreciated!

Thanks!

[keving2301]

Following... I have the same exact problem as you on my current project. I had to modify my design because I couldn't get React Aria hooks to allow me to have non-consecutive months dual calendar picker. For example I couldn't have Jan on the left and Apr on the right. The months had to be back to back according to their multi-month example on the docs. Wondering if there is a way