Github Style Calendar Heatmap In jQuery

Just another jQuery plugin that dynamically renders a calendar heatmap (year view) to visualize time series data (like activities, contribution) similar to Github contribution graph.

Note: This is the upgraded version of the jQuery Contribution Graph plugin that supports multiple activities per day.

See also:

• Github Style Heatmap Graph Plugin With jQuery - Calmosaic
• jQuery Plugin For Github Style Heatmap Calendar - Contribution Graph
• Calendar Heatmap Plugin With jQuery And Moment.js - CalendarHeatmap
• Github Like jQuery Data Visualization Plugin - Glance Year
• Github Inspired Punchcard Graph Plugin For jQuery - punchcard.js

How to use it:

1. Add the Calendar Yearview with Blocks plugin's files to the web page.

<link href="/path/to/css/calendar_yearview_blocks.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/calendar_yearview_blocks.js"></script>

2. Create a container to hold the calendar heatmap.

<div id="example"></div>

3. Add activities to the calendar heatmap.

const mydata = {
      "2020-09-01":  {
        "items": ["banana", "apple"]
      }, 
      "2020-08-05": {
        "items": ["apple"]
      }, 
      "2020-07-01": {
        "items": ["banana"]
      }, 
      "2020-06-03": {
        "items": ["banana", "apple", "orange"]
      }
      // more activities here
}

4. Initialize the plugin to render the activities as blocks in the calendar heatmap.

$('#example').calendar_yearview_blocks({
  data: myData
});

5. Customize the block colors.

$('#example').calendar_yearview_blocks({
  data: myData,
  colors: {
    'default': '#eeeeee', 
    'apple': 'green',
    'banana': 'yellow',
    'orange': 'orange',
    'pear': 'lightgreen'
  }
});

6. Customize/localize the day/month names.

$('#example').calendar_yearview_blocks({
  data: myData,
  month_names: ['jan', 'feb', 'maa', 'apr', 'mei', 'jun', 'jul', 'aug', 'sept', 'okt', 'nov', 'dec'],
  day_names: ['ma', 'wo', 'vr', 'zo']
});

7. Determine whether the week start on Monday. Default: true.

$('#example').calendar_yearview_blocks({
  start_monday: false // start on Sunday
});

8. Determine whether to display the tooltip only when there are activities to be shown. Default: false.

$('#example').calendar_yearview_blocks({
  always_show_tooltip: true
});

9. Determine whether to highlight today's date. Default: false.

$('#example').calendar_yearview_blocks({
  stylize_today: true
});

10. Set the final date.

$('#example').calendar_yearview_blocks({
  final_date: new Date().toISOString().slice(0, 10),
});

11. Customize the styles of the tooltip.

$('#example').calendar_yearview_blocks({
  tooltip_style: 'custom'
});

Changelog:

2021-03-01

• Allow for a custom legend; also allow removal of the default date tooltip.

2021-02-27

• JS Updated

---

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