Easy Calendar Heatmap Web Component – contributions-calendar.js

Preview:

Description:

contributions-calendar.js is a JavaScript library that helps you create a Github-style calendar heatmap (aka contributions calendar) to visualize time series data.

How to use it:

1. Download and import the contributions-calendar.js library.

<script defer src="contributions-calendar.js"></script>

2. Add the <contributions-calendar /> component to the page.

<contributions-calendar id="calendar"></contributions-calendar>

3. To use this calendar heatmap you need contributions (array of UTC timestamps defined in JSON), start date (UTC timestamp) and number of weeks to show:

// data.json
[
  "2019-01-07T00:32:00.649Z",
  "2019-01-08T22:40:47.498Z",
  "2019-01-10T03:03:24.247Z",
  "2019-01-10T03:03:24.247Z",
  "2019-01-10T17:48:06.481Z",
  "2019-01-10T18:16:27.341Z",
  "2019-01-11T06:59:39.077Z",
  "2019-01-11T06:59:52.386Z",
]

// contribution calendar instance passed as an event detail once DOM is ready
const contributions_calendar = event.detail;
let startDate = '2019-01-06T00:00:00.000Z';
let numberOfWeeks = 52;
fetch('data.json')
  .then(response => response.json())
  .then(contributions => {
      contributions_calendar.init(contributions, startDate, numberOfWeeks);
      // or alternatively do initialization via
      // contributions_calendar.setContributions(contributions);
      // contributions_calendar.setStartDate(startDate);
      // contributions_calendar.setNumberOfWeeks(numberOfWeeks);
      // contributions_calendar.draw();
  });

4. You can style the contributions calendar using CSS variables.

:root {
  --contributions-calendar-day-tile-default-background: #ebedf0;
  --contributions-calendar-day-tile-margin: 1px;
  --contributions-calendar-day-tile-height: 1rem;
  --contributions-calendar-day-tile-width: 1rem;
}
contributions-calendar#calendar {
  --contributions-calendar-day-tile-one-quarter-background: #c6e48b;
  --contributions-calendar-day-tile-two-quarters-background: #7bc96f;
  --contributions-calendar-day-tile-three-quarters-background: #239a3b;
  --contributions-calendar-day-tile-four-quarters-background: #239a8c;
}

See Also:

• jQuery Plugin For github Style Heatmap Calendar – Contribution Graph
• Github Style Calendar Heatmap In jQuery
• Github Style Heatmap Graph Plugin With jQuery – Calmosaic
• Github Style Contribution Graph In JavaScript – Heatmap.js