ActivityCalendar
Description
ActivityCalendar is a calendar heat map: one square per day, coloured by the day's value in a few levels, with month and weekday labels and a "Less … More" legend. It lays weeks out as columns with months along the top (the year view, the default) or as rows with weekdays along the top (a wall-calendar month), and covers a range from one month to a year or more.
Use it to show how much happened on each day: usage, spend, requests, commits. Every day has a tooltip drawn by the calendar itself, and OnDayClick reports the date and value of the day that was clicked. For a status per day rather than an amount, use Uptime.
Usage
Create the calendar with ActivityCalendar(), give it a range (LastDays, Year, Month or Range) and the data as (DateTime, double) pairs. Calling a setter such as Data(...) on the live component updates it in place.
The last year, with a summary
A month as a wall calendar, with clickable days
Scale(...) picks how values map to colour levels: Linear (the default), Sqrt, Log2, Log10 or Quantile. Use a log scale when a few days are much larger than the rest, and Max(...) to give two calendars shown side by side the same scale. Thresholds(...) and Palette(...) set the level bounds and colours explicitly.
API reference
public enum ActivityCalendarScaleHow an ActivityCalendar turns a day's value into one of its colour levels.
- Namespace
- Tesserae
Values
| Name | Description |
|---|---|
| Linear | The levels split the range from zero to the largest value into equal steps. |
| Sqrt | Equal steps of the square root: small values are spread out more than on Linear. |
| Log2 | Each level covers whole doublings (powers of two), counted down from the largest value. Reads well when the values span a few orders of magnitude and a doubling is the change that matters. |
| Log10 | Each level covers whole orders of magnitude (powers of ten), counted down from the largest value, so the legend reads as round numbers: 1, 10, 100, 1,000. |
| Quantile | Each level holds the same number of active days, whatever their values. |
LinearThe levels split the range from zero to the largest value into equal steps.
SqrtEqual steps of the square root: small values are spread out more than on Linear.
Log2Each level covers whole doublings (powers of two), counted down from the largest value. Reads well when the values span a few orders of magnitude and a doubling is the change that matters.
Log10Each level covers whole orders of magnitude (powers of ten), counted down from the largest value, so the legend reads as round numbers: 1, 10, 100, 1,000.
public enum ActivityCalendarOrientationWhich way an ActivityCalendar lays its weeks out.
- Namespace
- Tesserae
Values
| Name | Description |
|---|---|
| Horizontal | One column per week and one row per weekday, months labelled along the top. The year view. |
| Vertical | One row per week and one column per weekday, like a wall calendar. The month view. |
HorizontalOne column per week and one row per weekday, months labelled along the top. The year view.
public sealed class ActivityCalendarDayOne day of an ActivityCalendar, as handed to the click handler and the tooltip formatter.
- Namespace
- Tesserae
Constructors
| Name | Description |
|---|---|
| ActivityCalendarDay | Initializes a new instance of the ActivityCalendarDay class. |
Properties
| Name | Description |
|---|---|
| Date | The day, at midnight. |
| Value | The day's value, or zero when the data has none. |
| HasValue | Whether the data had a value for this day at all, which tells "nothing recorded" from "zero". |
| Level | The colour level the day is drawn in: 0 for no activity, up to the calendar's level count. |
public double Value { get; }The day's value, or zero when the data has none.
public bool HasValue { get; }Whether the data had a value for this day at all, which tells "nothing recorded" from "zero".
public sealed class ActivityCalendarLabelsThe text an ActivityCalendar draws on its own, so an application can hand in its translations. Every property has an English default; set only the ones that need to change.
- Namespace
- Tesserae
Properties
| Name | Description |
|---|---|
| Less | The legend's low end. |
| More | The legend's high end. |
| NoActivity | The tooltip of a day with nothing recorded, and of the legend's first swatch. |
| On | The joining word of the default tooltip: "12 on May 3, 2026". |
| LongestStreak | The summary's longest-streak caption. |
| AveragePerDay | The summary's daily-average caption. |
| AveragePerWeek | The summary's weekly-average caption. |
| Total | The summary's total caption. |
| Day | The unit of a one-day streak. |
| Days | The unit of any other streak. |
| MonthNames | The month names, January first, used for the month labels. |
| WeekdayNames | The weekday labels, Sunday first, whatever day the calendar starts its weeks on. |
public string NoActivity { get; set; }The tooltip of a day with nothing recorded, and of the legend's first swatch.
public string On { get; set; }The joining word of the default tooltip: "12 on May 3, 2026".
public string LongestStreak { get; set; }The summary's longest-streak caption.
public string AveragePerDay { get; set; }The summary's daily-average caption.
public string AveragePerWeek { get; set; }The summary's weekly-average caption.
public string[] MonthNames { get; set; }The month names, January first, used for the month labels.
public sealed class ActivityCalendar : ComponentBase<ActivityCalendar, HTMLElement>A calendar heat map of daily activity, from a single month up to a year and more: one square per day, coloured by how much happened on it, with month and weekday labels, a "Less … More" legend, an optional summary (longest streak, averages, total) and a tooltip on every day. The tooltip is the calendar's own, not a Tippy instance per day: one element is shared by every calendar on the page and moved to whichever day is under the pointer, through a single listener on the grid. A year is 365 squares, and a popover object per square would cost more than the squares do. Changing the data re-colours the existing squares in place; only a change of range or layout rebuilds them.
- Namespace
- Tesserae
- Inheritance
- ComponentBase<ActivityCalendar, HTMLElement> → ActivityCalendar
Constructors
| Name | Description |
|---|---|
| ActivityCalendar | Initializes a new instance of the ActivityCalendar class. |
Methods
| Name | Description |
|---|---|
| Data | Replaces the data with one value per day. The time of day is ignored, and two entries for the same day are added together, so raw events can be passed in as they are. |
| SetValue | Sets the value of one day, replacing whatever it had. |
| Range | Shows every day from from to to, both included. |
| Year | Shows one calendar year, January 1st to December 31st. |
| Month | Shows one month. Pair it with Vertical for a wall-calendar layout. |
| LastDays | Shows the last days days, ending today (see Today). |
| Today | Overrides what the calendar treats as today: where LastDays ends, and after which days are drawn as still to come and left out of the summary. Defaults to the clock. |
| Horizontal | Lays the weeks out as columns, months along the top. This is the default. |
| Vertical | Lays the weeks out as rows, weekdays along the top, like a wall calendar. |
| Orientation | Sets which way the weeks are laid out. |
| FirstDayOfWeek | Sets the day a week starts on. Defaults to Sunday. |
| CellSize | Sets the largest a day's square grows to, in pixels. The squares shrink below it to fit the width they are given, down to a floor past which the calendar scrolls sideways instead. Defaults to 18. |
| CellGap | Sets the gap between squares, in pixels. Defaults to 3. |
| MonthLabels | Shows or hides the month labels. By default they are shown unless the range is a single month. |
| WeekdayLabels | Shows or hides the weekday labels. Shown by default. |
| ShowDayNumbers | Prints the day of the month inside each square, which wants a larger CellSize. |
| Labels | Replaces the text the calendar draws on its own, for translation. |
| Selected | Marks one day as selected, or clears the mark with null. |
| Scale | Sets how a value maps to a colour level. Defaults to Linear. Hand-set Thresholds take precedence; clear them with Thresholds() to go back to a scale. |
| Levels | Sets how many colour levels an active day can take, besides "no activity". Defaults to 4. Hand-set Thresholds and a Palette both bring their own count, which takes precedence. |
| Thresholds | Sets the levels by hand: a day takes the last level whose lower bound it reaches, so Thresholds(1, 10, 100) makes three levels and ignores Scale and Levels, whichever order they are called in. Any value above zero takes at least the first level. Call it with no bounds to go back to the scale. |
| Max | Pins the value the top level is reached at, for Linear, Sqrt and the log scales — so two calendars side by side colour the same value the same way. Defaults to the largest value in the range. |
| Color | Sets the colour the levels are drawn in: the top level is this colour, the lower ones fade it into the empty square's tone. Defaults to the theme's primary colour. |
| Palette | Sets an explicit colour per level, lowest first, instead of fading one colour. Without Thresholds the number of colours is the number of levels; with them, the thresholds decide and the colours are taken in order, the last one repeated when there are fewer colours than levels. Either can be set first. |
| Title | Shows a title above the calendar, with an optional line of explanation behind an info icon. |
| Commands | Puts components at the right end of the title row, such as a picker of what the calendar shows. |
| Summary | Shows or hides the summary row: longest streak, average per day and per week, and the total. |
| Legend | Shows or hides the "Less … More" legend. Shown by default. |
| FormatValue | Sets how values are written in the tooltips, the legend and the summary. |
| FormatDate | Sets how a day is written in the default tooltip. Defaults to "May 3, 2026". |
| TooltipText | Replaces the tooltip's text. Return null or an empty string to show no tooltip for that day. |
| Tooltip | Replaces the tooltip with a component, built when its day is hovered. Return null to show no tooltip for that day. |
| OnDayClick | Raised when a day is clicked, or chosen with Enter or Space while the calendar has the keyboard focus. Setting a handler also gives the squares a pointer cursor. Days still to come are not clickable. |
| Render | Renders the component's root HTML element. |
| Overload | |
|---|---|
| Data(IEnumerable<(DateTime date, double value)>) | Replaces the data with one value per day. The time of day is ignored, and two entries for the same day are added together, so raw events can be passed in as they are. |
| Data(DateTime[], double[]) | Replaces the data with values[i] on dates[i]. |
Data(IEnumerable<(DateTime date, double value)>)
public ActivityCalendar Data(IEnumerable<(DateTime date, double value)> values)Replaces the data with one value per day. The time of day is ignored, and two entries for the same day are added together, so raw events can be passed in as they are.
Parameters
- values IEnumerable<(DateTime date, double value)>
public ActivityCalendar SetValue(DateTime date, double value)Sets the value of one day, replacing whatever it had.
public ActivityCalendar Range(DateTime from, DateTime to)Shows every day from from to to, both included.
public ActivityCalendar Year(int year)Shows one calendar year, January 1st to December 31st.
public ActivityCalendar Month(int year, int month)Shows one month. Pair it with Vertical for a wall-calendar layout.
public ActivityCalendar LastDays(int days = 365)Shows the last days days, ending today (see Today).
public ActivityCalendar Today(DateTime today)Overrides what the calendar treats as today: where LastDays ends, and after which days are drawn as still to come and left out of the summary. Defaults to the clock.
public ActivityCalendar Horizontal()Lays the weeks out as columns, months along the top. This is the default.
public ActivityCalendar Vertical()Lays the weeks out as rows, weekdays along the top, like a wall calendar.
public ActivityCalendar Orientation(ActivityCalendarOrientation orientation)Sets which way the weeks are laid out.
public ActivityCalendar FirstDayOfWeek(DayOfWeek day)Sets the day a week starts on. Defaults to Sunday.
public ActivityCalendar CellSize(double pixels)Sets the largest a day's square grows to, in pixels. The squares shrink below it to fit the width they are given, down to a floor past which the calendar scrolls sideways instead. Defaults to 18.
public ActivityCalendar CellGap(double pixels)Sets the gap between squares, in pixels. Defaults to 3.
public ActivityCalendar MonthLabels(bool show = true)Shows or hides the month labels. By default they are shown unless the range is a single month.
public ActivityCalendar WeekdayLabels(bool show = true)Shows or hides the weekday labels. Shown by default.
public ActivityCalendar ShowDayNumbers(bool show = true)Prints the day of the month inside each square, which wants a larger CellSize.
public ActivityCalendar Labels(ActivityCalendarLabels labels)Replaces the text the calendar draws on its own, for translation.
public ActivityCalendar Selected(DateTime? date)Marks one day as selected, or clears the mark with null.
public ActivityCalendar Scale(ActivityCalendarScale scale)Sets how a value maps to a colour level. Defaults to Linear. Hand-set Thresholds take precedence; clear them with Thresholds() to go back to a scale.
public ActivityCalendar Levels(int levels)Sets how many colour levels an active day can take, besides "no activity". Defaults to 4. Hand-set Thresholds and a Palette both bring their own count, which takes precedence.
public ActivityCalendar Thresholds(params double[] lowerBounds)Sets the levels by hand: a day takes the last level whose lower bound it reaches, so Thresholds(1, 10, 100) makes three levels and ignores Scale and Levels, whichever order they are called in. Any value above zero takes at least the first level. Call it with no bounds to go back to the scale.
public ActivityCalendar Max(double max)Pins the value the top level is reached at, for Linear, Sqrt and the log scales — so two calendars side by side colour the same value the same way. Defaults to the largest value in the range.
public ActivityCalendar Color(string color)Sets the colour the levels are drawn in: the top level is this colour, the lower ones fade it into the empty square's tone. Defaults to the theme's primary colour.
public ActivityCalendar Palette(params string[] colors)Sets an explicit colour per level, lowest first, instead of fading one colour. Without Thresholds the number of colours is the number of levels; with them, the thresholds decide and the colours are taken in order, the last one repeated when there are fewer colours than levels. Either can be set first.
public ActivityCalendar Title(string title, string info = null)Shows a title above the calendar, with an optional line of explanation behind an info icon.
public ActivityCalendar Commands(params IComponent[] commands)Puts components at the right end of the title row, such as a picker of what the calendar shows.
public ActivityCalendar Summary(bool show = true)Shows or hides the summary row: longest streak, average per day and per week, and the total.
public ActivityCalendar Legend(bool show = true)Shows or hides the "Less … More" legend. Shown by default.
public ActivityCalendar FormatValue(Func<double, string> format)Sets how values are written in the tooltips, the legend and the summary.
public ActivityCalendar FormatDate(Func<DateTime, string> format)Sets how a day is written in the default tooltip. Defaults to "May 3, 2026".
public ActivityCalendar TooltipText(Func<ActivityCalendarDay, string> text)Replaces the tooltip's text. Return null or an empty string to show no tooltip for that day.
public ActivityCalendar Tooltip(Func<ActivityCalendarDay, IComponent> tooltip)Replaces the tooltip with a component, built when its day is hovered. Return null to show no tooltip for that day.
public ActivityCalendar OnDayClick(Action<ActivityCalendarDay> onClick)Raised when a day is clicked, or chosen with Enter or Space while the calendar has the keyboard focus. Setting a handler also gives the squares a pointer cursor. Days still to come are not clickable.