Github-like calendar heatmap – Cal-Heatmap

Cal-Heatmap is a JavaScript module to create calendar heatmap to visualize time series data.

Cal-Heatmap – a Github-like calendar heatmap in JavaScript!

Cal-Heatmap is a javascript module to create calendar heatmap to visualize time series data, a la github contribution graph. Hover over the time slots to show details for each of the days on demand. Inspired by Github’s commit calendar graph.

This module will help you to create a calendar, like the contribution calendar appearing on each github user’s page, but with navigation and more controls on the data formatting.

Calendar Heatmap in JavaScript!
Calendar Heatmap in JavaScript!

Usage

HTML

<div id="cal-heatmap"></div>

JS

var cal = new CalHeatMap();
cal.init({});

By default, calling init() with an empty object will initialize a blank calendar of 12 hours, with 60 minutes each, starting from the current hour.

License: MIT

Homepage

https://cal-heatmap.com

GitHub

https://github.com/wa0x6e/cal-heatmap

See also

jQuery date & time input picker: pickadate.js

Modern jQuery date picker plugin – DateSelect

Work with date and time in JavaScript? Try moment.js!

JavaScript algorithms implemented

Date and Time operations in JavaScript – date-fns

Enjoy!