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