Chakra-ui Calendar

This is a single-file ui components that you can copy into your /src/components/ui folder and use it as a snippet downloaded by the @chakra-ui/cli.

The file is found here BUT I strongly recommend to look into it before copying.
The Calendar is powered by momentjs so you have to install the dependency in order to use it.
If you want to use your own preferred date library you have to edit the file.

Once copied in your project, the file could be splitted in at least three parts (based on your project structure):

• The component itself: containing only the react Calendar Component
• The types: Including CalendarProps, CalendarView and IntRange
• The utils functions: Including groupBy (a masterpiece on its own found here) and convert

Live demo

Live demo can be found at https://chakra-ui-calendar.vercel.app/.
Take a look to see how it works!

Localization

The component was initially branched from one of my project in Italian.
The order in the weekdays initially was with Monday first and to do so I had to use isoWeek instead of week when creating the firstMonday and lastSunday variables (that's why are called in taht way even though in the live demo the first day that you see is a Sunday and the last a Saturady).
If you plan to change the locale (UNDER CONSTRUCTION!!)