Author: | bohdaq |
---|---|
Views Total: | 1,306 views |
Official Page: | Go to website |
Last Update: | July 6, 2022 |
License: | MIT |
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