ngx-heatmap-calendar v1.0.1
Ngx Heatmap Calendar
This is a simple heatmap calendar component for Angular 17+.
Installation
npm install ngx-heatmap-calendar!WARNING Be careful with the dates: if you use the dates in this way,
new Date('2024-01-01')the result is one day before because of your timezone. but if yo set the date like thisnew Date(2024,0,1)the reslt is2024-01-01T00:00:00.000because the timezone is not considered and the day is correct. This library uses the date format set by your browser, and assumes that you are passing the correct day with the times in00:00:00, so it can correctly match with the array of dates You can control by yourself the date format and the time, or you can use a library likedate-fnsordayjsto handle the dates.
Inputs
| Input | Type | Required | Description |
|---|---|---|---|
| startDate | Date | Yes | Start date for the calendar |
| endDate | Date | Yes | End date for the calendar |
| dates | HeatMapDate[] | No | Dates to be displayed on the calendar |
| showMonthLabel | boolean | No | Show the month label on the calendar |
| showDayLabel | boolean | No | Show the day label on the calendar |
| rectSize | number | No | Size of the rectangle on the calendar |
| gap | number | No | Gap between the rectangles on the calendar |
| classForValue | Function | No | Function to return a class for the value |
Outputs
| Output | Type | Description |
|---|---|---|
| onClickCell | EventEmitter<HeatMapDate> | Emits when a cell is clicked |
| onMouseEnterCell | EventEmitter<HeatMapDate> | Emits when the mouse enters a cell |
| onMouseLeaveCell | EventEmitter<HeatMapDate> | Emits when the mouse leaves a cell |
Examples
Basic usage:
The ngx-heatmap-calendar needs a start and end date to display the calendar.
With these inputs, the calendar will display each day with the time in 00:00:00.
startDate = new Date(2024, 0, 1);
endDate = new Date(2024, 11, 31);
<ngx-heatmap-calendar
[startDate]="startDate"
[endDate]="endDate"
/>With dates:
startDate = new Date(2024, 0, 1);
endDate = new Date(2024, 11, 31);
dates: HeatMapDate[] = [
{ date: new Date(2024,0,1), value: 1 },
{ date: new Date(2024,0,2), value: 2 },
{ date: new Date(2024,0,4), value: 1 },
{ date: new Date(2024,0,5), value: 1 },
{ date: new Date(2024,0,8), value: 2 },
]
<ngx-heatmap-calendar
[dates]="dates"
[startDate]="startDate"
[endDate]="endDate"
/>With custom class for value:
startDate = new Date(2024, 0, 1);
endDate = new Date(2024, 11, 31);
callBackCssClass = ({ value }: HeatMapDate) => {
if (value === 1) {
return 'fill-value-1';
}
if (value === 2) {
return 'fill-value-2';
}
return 'fill-empty';
};
dates: HeatMapDate[] = [
{ date: new Date(2024,0,1), value: 1 },
{ date: new Date(2024,0,2), value: 2 },
{ date: new Date(2024,0,4), value: 1 },
{ date: new Date(2024,0,5), value: 1 },
{ date: new Date(2024,0,8), value: 2 },
]
<ngx-heatmap-calendar
[dates]="dates"
[startDate]="startDate"
[endDate]="endDate"
[classForValue]="callBackCssClass"
/>