Calendar Heatmap Plugin With jQuery And Moment.js - CalendarHeatmap

Calendar Heatmap Plugin With jQuery And Moment.js - CalendarHeatmap

CalendarHeatmap.js is a jQuery plugin used to generate a dynamic, interactive, configurable calendar heatmap for representing time series data. Hover over the time slots to show details for each of the days on demand. Inspired by Github’s commit calendar graph.


$ npm install calendarheatmap --save
# Bower
$ bower install calendarheatmap --save

How to use it:

1. Include the necessary jQuery JavaScript library and Moment.js on the web page.

<script src="" 
<script src=""></script>

2. Include the minified version of the jQuery CalendarHeatmap.js plugin after jQuery and moment.js.

<link rel="stylesheet" href="jquery.CalendarHeatmap.css">
<script src="jquery.CalendarHeatmap.min.js"></script>

3. Create a placeholder element for the generated calendar heatmap.

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

4. Prepare the data you want to present in the calendar heatmap.

var data = [
    {count: 2, date: "2017-09-23"},
    {count: 1, date: "2017-10-23"},
    {count: 4, date: "2017-11-11"},
    {count: 5, date: "2017-11-13"},
    {count: 3, date: "2017-11-21"},

5. Visualize the data in the calendar heatmap.

$("#heatmap-demo").CalendarHeatmap(data, {
  // options here

6. All default options to customize the calendar heatmap.

$("#heatmap-demo").CalendarHeatmap(data, {
  // title of the calendar heatmap
  title: null,
  // the number of months to display
  months: 12,
  // last month
  lastMonth: moment().month() + 1,
  // last year
  lastYear: moment().year(),
  // color gradients
  coloring: null,
  // custom labels
  labels: {
      days: false,
      months: true,
      custom: {
          weekDayLabels: null,
          monthLabels: null
  // custom legend
  legend: {
      show: true,
      align: "right",
      minLabel: "Less",
      maxLabel: "More"
  // custom tooltips
  // requires Bootstrap
  tooltips: {
      show: false,
      options: {}

This awesome jQuery plugin is developed by SeBassTian23. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 22.11.2017
  • Source