heat-calendar
TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

heat-calendar

alt text

alt text

alt text

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.

Package Sidebar

Install

npm i heat-calendar

Weekly Downloads

45

Version

1.0.7

License

MIT

Unpacked Size

59.4 kB

Total Files

71

Last publish

Collaborators

  • konrad007