🛠️ Options

You can customize the Calendar Heatmap by providing the following options:

Option	Type	Default	Description
type	HeatMapCalendarType	must provide with config	WEEKLY|MONTHLY|YEARLY
startDate	DateTime	must provide with config	The start date of the calendar.
cellSize	Number (as px)	optional (15)	Day cell size (also you can configure with overWritedDayStyle option)
colors	IHeatmapColor[]	optional	Heatmap colors for each level range.
hideEmptyDays	Boolean	optional (false)	Empty days (only start and end end month) for filler days.
overWritedDayStyle	Object	optional	Style each day with inline style object.
heatmapLegend	IHeatmapLegend	optional	Configure display, direction and tooltipFormatter of heatmap calendar legend.
locale	String	optional ("en")	Specify the locale for the calendar (weekday and month names).
i18n	ILocale	optional	Custom locale for the calendar texts (min, max, less, more, etc.).
tippyProps	Props (from tippy)	optional	Tippy.js props for the tooltip.
tooltip	IHeatmapTooltip	optional	Configure the tooltip for the heatmap (unit, display state, date format and custom formatter).
onClick	(day: IHeatmapDay) => void	optional	Handle click event for each day.