Press "Enter" to skip to content

jQuery Plugin to Show Calendar Year View With Blocks | Github Heatmap

JQuery plugin to show the calendar year view with blocks (GitHub Contribution Style). This plugin that dynamically displays a calendar heat map to visualize time series data.

How to make use of it:

1. Add the Calendar Yearview with Blocks plugin’s information 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 actions 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 actions as blocks within 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 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 or not the week begins on Monday.

$('#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.

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

9. Determine whether or not to focus on at the moment’s date.

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

Github Style Calendar Heatmap, calendar year view blocks Plugin/Github


See Demo And Download

Official Website(SaeX): Click Here

This superior jQuery/javascript plugin is developed by SaeX. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.