CodeSandbox project demonstrating Issue #59 in `patientslikeme/react-calendar-heatmap`

index.html

<div id="root"></div>

index.js

import React from "react";
import { render } from "react-dom";
import CalendarHeatmap from "react-calendar-heatmap";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      heatmapData: [
        { date: new Date("2017-06-01") },
        { date: new Date("2017-06-02") }
      ],
      activeYear: 2017
    };
  }

  activatePrevYear() {
    this.setState(prevState => {
      return {
        activeYear: prevState.activeYear - 1
      };
    });
  }

  activateNextYear() {
    this.setState(prevState => {
      return {
        activeYear: prevState.activeYear + 1
      };
    });
  }

  render() {
    const { activeYear, heatmapData } = this.state;

    const startDate = new Date(`${activeYear}-01-01`);

    const endDate = new Date(`${activeYear}-12-31`);

    const heatmapDataListItems = heatmapData.map(item => (
      <li><pre>{item.date.toString()}</pre></li>
    ));

    return (
      <div>
        <h2>Heatmap Data</h2>
        <p>This data is <strong>constant</strong>.</p>
        <ol>{heatmapDataListItems}</ol>

        <h2>Heatmap for the Year {activeYear}</h2>
        <CalendarHeatmap
          values={heatmapData}
          startDate={startDate}
          endDate={endDate}
        />

        <h3>Year Changers</h3>
        <p>Change the year shown on the heatmap.</p>
        <button onClick={this.activatePrevYear.bind(this)}>
          Show previous year
        </button>
        <button onClick={this.activateNextYear.bind(this)}>
          Show next year
        </button>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

META.md

Title

Demo of Issue in react-calendar-heatmap

Description

Issue URL: kevinsqi/react-calendar-heatmap#59

CodeSandbox Project URL

https://codesandbox.io/s/32zxwx5ow1

Dependencies:

NPM packages:

(See package.json in this Gist)

External resources:

https://rawgit.com/patientslikeme/react-calendar-heatmap/master/src/styles.css

package.json

{
  "name": "demo-of-issue-in-react-calendar-heatmap",
  "description": "Issue URL: https://github.com/patientslikeme/react-calendar-heatmap/issues/59",
  "version": "0.0.11",
  "dependencies": {
    "react-dom": "16.0.0",
    "react-calendar-heatmap": "1.6.1",
    "react": "16.0.0"
  },
  "devDependencies": {
    "react-scripts": "1.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}