heat-calendar

heat-calendar is zero dependencies implementation of heatmap-calendar for React

Setup

Install the npm module with npm, yarn or pnpm:

npm i heat-calendar

yarn add heat-calendar

pnpm i heat-calendar

Usage

Import the component:

import { HeatCalendar } from 'heat-calendar';

To show a basic heatmap pass the data collection as data and dataKey name of the selected attribute in your collection. Check the demo for more examples

function App() {
  return (
    <div>
      <HeatCalendar
        data={[["2023-01-01", { key: 1, key2: 1 }], ["2023-01-02", { key: 2, key2: 1}], ....]}
        dataKey="key"
      />
    </div>
  );
}

Storybook

Check the demo!

Features

Available modes:

• weeks
• days of the year
• days of the month

Customizable elements:

• legend
• horizontal labels
• vertical labels
• nodes

License

heat-calendar is licensed under a MIT License.