Easy Calendar Heatmap Web Component – contributions-calendar.js

Category: Chart & Graph , Javascript | July 6, 2022
Views Total:1,808 views
Official Page:Go to website
Last Update:July 6, 2022


Easy Calendar Heatmap Web Component – contributions-calendar.js


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
// 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;
  .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:

You Might Be Interested In:

Leave a Reply