react-github-contribution-calendar

getting started

Install

          
  $ npm install react-github-contribution-calendar

Load styles

          
  <link rel="stylesheet" href="node_modules/react-github-contribution-calendar/default.css" type="text/css" />

Render

          
  import React from 'react';
  import ReactDOM from 'react-dom';
  import Calendar from 'react-github-contribution-calendar';

  var values = {
    '2016-06-23': 1,
    '2016-06-26': 2,
    '2016-06-27': 3,
    '2016-06-28': 4,
    '2016-06-29': 4
  }
  var until = '2016-06-30';

  var elem = document.getElementById('app');
  ReactDOM.render(<Calendar values={values} until={until} />, elem);

customizing

Change panel colors

            
  var values = {}
  var until = '2016-06-30';
  var values = {
    '2016-06-23': 1,
    '2016-06-26': 2,
    '2016-06-27': 3,
    '2016-06-28': 4,
    '2016-06-29': 4
  };
  var panelColors = [
    '#EEEEEE',
    '#F78A23',
    '#F87D09',
    '#AC5808',
    '#7B3F06'
  ];
            
            
  <Calendar
    values={values} until={until}
    weekNames={weekNames} monthNames={monthNames}/>

Change label texts

            
  var values = {}
  var until = '2016-12-30';
  var weekNames = ['s', 'm', 't', 'w', 't', 'f', 's'];
  var monthNames = [
    '1', '2', '3', '4', '5', '6',
    '7', '8', '9', '10', '11', '12'
  ];
            
            
  <Calendar
    values={values} until={until}
    weekNames={weekNames} monthNames={monthNames}/>

Change styles by overwriting SVG attributes

            
  var values = {}
  var until = '2016-12-30';
  var panelAttributes = { 'rx': 6, 'ry': 6 };
  var weekLabelAttributes = {
    'rotate': 20
  };
  var monthLabelAttributes = {
    'style': {
      'text-decoration': 'underline',
      'font-size': 10,
      'alignment-baseline': 'central',
      'fill': '#AAA'
    }
  };
            
            
  <Calendar
    values={values}
    until={until}
    panelAttributes={panelAttributes}
    weekLabelAttributes={weekLabelAttributes}
    monthLabelAttributes={monthLabelAttributes}
  />