Calendar with Composite primitives

[cloud-walker]

Hi guys!

I'm in a search for the optimal (not too opinionated like the react-aria one) solution for a (range)date picker, and I'm wondering if the focus management part would be possible with the Composite primitives, if you have any suggestions, they would be welcome 🙂

Here my current experiment: https://codesandbox.io/p/sandbox/admiring-dubinsky-vj3g1i?file=%5Cproject%5Chome%5Ccloud-walker%5Cworkspace%5Csrc%5CApp.tsx

[diegohaz]

Yes, you can use Composite to build a Calendar component. Your component using CompositeRow is more accurate.

The elements must have the roles grid, row, and gridcell .

We'll eventually have our own Calendar component, built on top of Composite. I drafted an API a while ago: https://gist.github.com/diegohaz/deb541a7009112526c00bb35f612f691. But it is currently possible to construct this in userland.

[cloud-walker]

The problem that I've faced in my experiment, is that navigating the days of the calendar (with arrow keys), has some events not handled, like: arrow down on last row of one of the calendar, should maybe change the month instead of focusing the same column on the row of the other calendar?

How should I approach such custom logics?

[diegohaz]

I would add an onKeyDown prop to that cell. If the conditions meet, call event.preventDefault() to avoid the default action. Then update a state to render items for the next month and focus on the appropriate cell.

[diegohaz]

You can try to always render the previous and next months as well and move them into the viewport when they get focused.

[cloud-walker]

Ok! When I have the time and brain power, I'll try to do a POC, and post it here eventually 🙂

[xvalentino]

@diegohaz Is there a timeline for a Calendar component? Or any more details aside from the API that could be used when opening a PR?

[ibrahimbutt]

@diegohaz also interested in this.