Examples
Each CalendarDay gives a DateOnly and a Value; the calendar runs from the first to the last day, with month and weekday names and a Less–More key.
From and To fix the days shown, FirstDayOfWeek picks the top row, Levels sets the number of shades and Color the theme colour they step up to.
Playground
<CalendarHeatmap
ValueFormat="{0:N0} deployments"
Title="Deployments per day"
Days="@_days" />
@code {
// A year of production deployments: busier mid-week, almost none at weekends.
private static readonly CalendarDay[] _days = Enumerable.Range(0, 364)
.Select(i =>
{
DateOnly date = new DateOnly(2025, 10, 20).AddDays(i);
bool weekend = date.DayOfWeek is DayOfWeek.Saturday or DayOfWeek.Sunday;
int deployments = weekend ? (i % 9 == 0 ? 1 : 0) : (i * 7 + i / 5) % 9;
return new CalendarDay(date, deployments);
})
.ToArray();
}API
<CalendarHeatmap>
DaisyBlazor.ChartsParameters
- AspectRatio double= 6.4
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
- Color string= null
CSS colour of the highest level; lower levels blend it into the page background. Defaults to the theme's primary colour.
- Days IReadOnlyList<
CalendarDay> = []The values by calendar date. Values on the same date are summed; days without a value are drawn empty.
- FirstDayOfWeek DayOfWeek= DayOfWeek.Monday
The weekday in the top row of each week column.
- From DateOnly?= null
The first day shown. Defaults to the earliest date in Days.
- LessLabel string= "Less"
Text before the level key.
- Levels int= 5
Number of shades, including the empty one: positive values split evenly into Levels - 1 shades between 0 and the largest value.
- MoreLabel string= "More"
Text after the level key.
- RowHeight double?= null
Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
- ShowLegend bool= true
Show the Less–More level key under the calendar.
- ShowTitle bool= true
Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
- Title string= null
Optional heading rendered above the chart; it is also the chart's accessible name.
- To DateOnly?= null
The last day shown. Defaults to the latest date in Days.
- ValueFormat string= "{0:#,0.##}"
Format string for values in tooltips, e.g. "{0:N0} deployments".
- Width string= "100%"
CSS width of the chart wrapper.
- Class string= null
Additional CSS classes merged onto the w-full wrapper.
- Style string= null
Inline styles appended after the width on the wrapper.