We usually come across the commit calendars in GitHub or gitlab in our daily work.
Commit Calendar is a 2D calendar which provides information regarding the commits a user has done over a period of time (max the past year).
I was intrigued by it and thought if I could create it from scratch in Vanilla JS, so I started working on it.
And now after some considrable efforts, it's finally complete, and here is the demo.
Some of the key features:
-
Commit Info on hover or by keyboard navigation
-
Event delegation
-
Uses CSS grid and CSS variables
-
Keyboard Navigable
- With tabs and arrow keys
- Go to first calendar item by 'home' key and last item by 'end' key
- Retains last selected calendar item if focus is moved away from calendar
-
Responsive for any screen size