Last week we had to change a component at work that allows patients to choose their date for an appointment. Now people would be able to book quite some days in advance, so a calendar seemed the most logical approach for that UI.
Creating a calendar from scratch is quite a lot of work, so we decided to look at a few React headless UI libraries as they provide functional components that are tested, accessible and you can make it look how you need.
We chose Adobe’s React Aria as their useCalendar was exactly the kind of component we needed. The documentation unfortunately is not the best I’ve seen, but Devon Govett’s example was perfect to get started (wish it was on the documentation).
The only step left was to tweak and make it type safe. React Aria comes with built-in type declarations but all the examples are in JavaScript, so I turned Devon’s example into TypeScript, in case somebody finds it useful.