Making react-custom-calendar-heatmap log

 

This document is in progress.

---

React Custom Calendar Heatmap

Intro

This is react-custom-calendar-heatmap guideline.

🔗 npm: https://www.npmjs.com/package/react-custom-calendar-heatmap

🔗 repository: a-honey/react-custom-calendar-heatmap (github.com)

🔗 examples: (This is just example site using mock data.)

Background

Our team designer requested this calendar heatmap.

However, react-calendar-heatmap, one of the popular calendar heatmap libraries, doesn't allow changing the SVG elements. Due to the three-day hackathon, I gave up on making the design exactly the same.

 

Besides the SVG element issue, there was a more serious problem: the library hadn't been updated for two years. So, I tried to create a custom calendar heatmap library using React after the hackathon.

Key Features

• You can chage your calender heatmap elements.
• You can select showing value when hovering.
• You can select main color and depth level.

Props(In progress)

Name	Type	isRequired	Description
startDate
endDate
values
gap	number	false

Code Examples(In progress)

<CustomCalendarHeatmap>
  <CustomCalendarHeatmap.MonthLabel />
  <CustomCalendr.WeekLabel />
  <CustomCalendarHeatmap.Content />
</CustomCalendarHeatmap>

Plans

It will be changed or add more compoenent. Currently, this is about only calendar. But i could be just custom heat map. 

Please look forward to it :D

Resources and References

react-calendar-heatmap - npm (npmjs.com)