rch

react-calendar-heatmap

An svg calendar heatmap inspired by github's contribution graph

Showing:

Popularity

Downloads/wk

14.3K

GitHub Stars

914

Maintenance

Last Commit

2yrs ago

Contributors

21

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Readme

React Calendar Heatmap

A calendar heatmap component built on SVG, inspired by github's commit calendar graph. The component expands to size of container and is super configurable. Try it out on CodeSandbox.

npm version Build Status bundle size

react-calendar-heatmap screenshot

Setup

Install the npm module with yarn or npm:

yarn add react-calendar-heatmap

Usage

Import the component:

import CalendarHeatmap from 'react-calendar-heatmap';

Import styles. You can directly import from the module, which requires a CSS loader:

import 'react-calendar-heatmap/dist/styles.css';

A CSS loader is included by default in create-react-app. If you don't have a CSS loader, you can simply copy the stylesheet into a file in your project and import it instead.

To show a basic heatmap from January 1st to April 1st:

<CalendarHeatmap
  startDate={new Date('2016-01-01')}
  endDate={new Date('2016-04-01')}
  values={[
    { date: '2016-01-01', count: 12 },
    { date: '2016-01-22', count: 122 },
    { date: '2016-01-30', count: 38 },
    // ...and so on
  ]}
/>

Props

NameTypeDescription
valuesRequired, Array of ObjectRequired array of objects which each have a date property, which can be a Date object, parseable string, or millisecond timestamp. Example: [{ date: '2016-01-01', count: 6 }]
startDateString, Number, or DateStart of date range.
endDateString, Number, or DateEnd of date range - a Date object, parseable string, or millisecond timestamp.
showMonthLabelsBooleanToggle for removing month labels.
showWeekdayLabelsBooleanToggle for removing weekday labels.
showOutOfRangeDaysBooleanToggle display of extra days in week that are past endDate and before beginning of range.
horizontalBooleanWhether to orient horizontally or vertically. Can be used in combination with numDays/endDate to show just the current month.
gutterSizeNumberSize of gutters relative to squares.
onClickFunctionCallback to invoke when a square is clicked, e.g. (value) => alert(value)
onMouseOverFunctionCallback to invoke when mouse pointer is over a square, e.g. (event, value) => console.log(event, value)
onMouseLeaveFunctionCallback to invoke when mouse pointer leaves a square, e.g. (event, value) => console.log(event, value)
titleForValueFunctionFunction to determine each square's title attribute, for generating 3rd party hover tooltips (may also need to configure tooltipDataAttrs). Example: (value) => Date is ${value.date}`
tooltipDataAttrsObject or FunctionSet data attributes for all squares, for generating 3rd party hover tooltips. Either an object like { 'data-tooltip': 'tooltip' } or a function like (value) => { return { 'data-tooltip': 'Tooltip: ' + value } }
classForValueFunctionCallback for determining CSS class to apply to each value, e.g. (value) => (value.count > 0 ? 'blue' : 'white').
monthLabelsArray of StringAn array with 12 strings representing the text from January to December, e.g. ['01', '02', ..., '12']
weekdayLabelsArray of StringAn array with 7 strings representing the text from Sunday to Saturday
transformDayElementFunctionA function to further transform generated svg element for a single day. Can be used to attach event handlers, add tooltips and more. Example: (element, value, index) => React.cloneElement(element, { title: value.date }).

Configuring colors

To use the color scale shown in the live demo based on the github contribution graph, you can set the classForValue prop, a function that determines which CSS class to apply to each value:

<CalendarHeatmap
  values={[
    { date: '2016-01-01', count: 1 },
    { date: '2016-01-03', count: 4 },
    { date: '2016-01-06', count: 2 },
    // ...and so on
  ]}
  classForValue={(value) => {
    if (!value) {
      return 'color-empty';
    }
    return `color-scale-${value.count}`;
  }}
/>

Then you use CSS to set colors for each class:

.react-calendar-heatmap .color-scale-1 { fill: #d6e685; }
.react-calendar-heatmap .color-scale-2 { fill: #8cc665; }
.react-calendar-heatmap .color-scale-3 { fill: #44a340; }
.react-calendar-heatmap .color-scale-4 { fill: #1e6823; }

Contributing

Take a look at CONTRIBUTING.md to see how to develop on react-calendar-heatmap.

License

react-calendar-heatmap is Copyright © 2016 PatientsLikeMe, Inc. and is released under an MIT License. See COPYING for details.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

rc
react-calendarUltimate calendar for your React app.
User Rating
4.5/ 5
17
Top Feedback
20Great Documentation
20Easy to Use
12Highly Customizable
GitHub Stars
2K
Weekly Downloads
245K
rbc
react-big-calendargcal/outlook like calendar component
User Rating
4.3/ 5
10
Top Feedback
13Great Documentation
3Easy to Use
2Performant
GitHub Stars
5K
Weekly Downloads
158K
reaviz📊 Data visualization library for React
User Rating
4.7/ 5
3
Top Feedback
4Easy to Use
3Great Documentation
3Highly Customizable
GitHub Stars
507
Weekly Downloads
2K
@fullcalendar/reactAn official React component for FullCalendar
User Rating
4.3/ 5
3
Top Feedback
2Great Documentation
2Performant
1Easy to Use
GitHub Stars
1K
Weekly Downloads
100K
rmc
react-modern-calendar-datepickerA modern, beautiful, customizable date picker for React
User Rating
5.0/ 5
1
Top Feedback
1Great Documentation
1Easy to Use
1Bleeding Edge
GitHub Stars
738
Weekly Downloads
14K
react-calendar-timelineA modern and responsive react timeline component.
User Rating
3.4/ 5
5
Top Feedback
3Abandoned
2Poor Documentation
GitHub Stars
1K
Weekly Downloads
21K
See 39 Alternatives

Tutorials

No tutorials found
Add a tutorial