Standalone Calendar-component for DatePicker inside Drawer

[johnolos]

Is the feature you're requesting related to a challenge you're experiencing?

Hi, Team Personnel currently are using DatePicker inside a Drawer in a few scenarios. We would like a standalone Calendar to be used in such scenarios. I will share our offending abombinations so far as to highlight want we would like to archive.

How can we solve it?

Export a standalone component Calendar that we can use to interact and fill our DatePicker.

I believe the underlying framework have code examples of how this can be done: https://react-spectrum.adobe.com/react-spectrum/Calendar.html#calendar

[perweum]

Possible solution using a static header with a scrollable calendar. Or just a static calendar without borders.

Link to Figma-examples

[johnolos]

First step is to make the Calendar a standalone component outside DatePicker-component. Just shipping this as a feature is valuable!

[perweum]

It would be nice to move the functionality of the date-range to the standalone calendar component instead of being attached to the date-picker.

The example is taken from google travel which shows how we want the calendar to function.

[HildeSHatt]

Would it be possible to write year in addition to clicking the arrows? When the component are used for date of birth some of us have to click too many times to reach our year... It would also be great if the arrows stays in the same position when selecting month.

Please see enclosed videoes of the above situations.

https://github.com/nsbno/spor/assets/105209479/50c5629a-dd88-4e34-b7a4-3d35db19a5e3

https://github.com/nsbno/spor/assets/105209479/c9533c8b-2493-41ec-847f-898dc3484bd9