react-github-contribution-calendar

A React component for GitHub like calendar

It's responsive! drag here! ↘

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'
  ];

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

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'
  ];

  ReactDOM.render(<Calendar
    values={values} until={until}
    weekNames={weekNames} monthNames={monthNames}/>, elem);