cal-heatmapの使い方


cal-heatmapというものでGitHubの草を再現できます。


$ brower install cal-heatmap
$ ls */{d3,cal-heatmap}


書き方は大体わかると思います。jsとcssを読み込みます。そして、exampleを参考に設定ですね。私は1日単位のものを使いました。

http://cal-heatmap.com/#examples

コードが載っていると思います。jsonのサンプルは、http://cal-heatmap.com/datas-years.jsonを叩いて取得してください。

dataでurlやpathを記述し、itemSelectordiv要素ですね。

このブログはjsonで書いているため、あまりコードは書きたくないのだけどこんな感じで。


cal.init({
itemSelector: "#example-b",
data: "https://cal-heatmap.com/datas-years.json",
data: "/path/to/datas-years.json",


#example-bの部分はHTMLの指定に従います。サンプルで指定した場合、HTMLはdiv class=example-bですね。その部分に表が置かれます。

あと、そのままではモバイルではみ出すのでoverflow: auto;しておくことですね。

gitlabはこのcal-heatmapを使ってると思われ、date-hrefに参照が書いてあるので、情報はそちらから取得。


$ curl -sL gitlab.com/u/syui/calendar


gitlabのようにtooltipを表示したければオプションを付けます。tooltip: true