simple-react-heatcalendar v1.0.1

Simple React HeatCalendar

This package provides a simple and customizable calendar component for React applications. It allows you to customize color throughout the component and pass values to fill color on select dates. Most heat maps display the full year. This allows you to display a month at a time. It also is responsive for mobile.

Benefits

• Functional Calendar that allows you to move by year and months
• Day of the week are accurate
• Pass the value prop to change color of specific dates
• Change color of everything on the calendar with props

Examples of the component

Installation

npm install simple-react-heatCalendar

import the component after install

import {Calendar} from 'simple-react-heatcalendar'

const value = [
    {
      day: "2024-12-31",
    },
    {
      day: "2024-12-30",
    },
    {
      day: "2024-12-28",
    },
  ];

<Calendar 
    topLabelColor={'green'}
    fontLabelColor={"yellow"}
    borderColor={'green'}
    borderWidth={.25}
    buttonSize={32}
    calendarGap={4}
    calendarPadding={20}
    roundedCalendar={12}
    labelBackground={'black'} 
    calendarBackground={'black'}
    calendarDayColor={'blue'}
    calendarBorder={true}
    removeLabelDays={false}
    removeDates={false}
    selectedColor={'red'} 
    value={value}
    dateColor={'purple'}
/>

Props that can be passed to the component