shadcn/uiでcalendar heatmapを作る

はじめに

Github Contributions CalendarのようなCalendar heatmapを作成したかったのでライブラリを探していたが、良さそうなものが無かったので自作した。

ちなみに、このスクラップを見て良さげなものが無いと思い自作を決めたが、

メンテナンスされていない模様

として言及せれていたCal-heatmapは時たまメンテされているぽいのでアリかもしれないと後から気づいた。

成果物

見た目はこんな感じ

リポジトリ：https://github.com/sp-yduck/shadcn-ui-calendar-heatmap
デモサイト：https://sp-yduck.github.io/shadcn-ui-calendar-heatmap/

作り方

以下の二つのサイトが参考になった。
https://shadcn-calendar-heatmap.vercel.app/
https://zenn.dev/mitate_gengaku/articles/shadcn-ui-create-heat-map

自分のリポジトリはわかりやすいように各ステップごとにコミットを分けたので、実際のコードを見たい人はこちらを参考してください。→　https://github.com/sp-yduck/shadcn-ui-calendar-heatmap/commits/v0.2.1/

おわり

気が向いたらちゃんとライブラリ化したいところ。終わり。