Maps per-day numeric data onto heatmap-style PhoenixLiveCalendar.DayMarkers — the GitHub-contributions look for the month and year views.

Give it a map (or list of pairs) of Date => value and it returns one marker per active day, carrying an intensity class from the palette as the marker color (which the month grid renders as the whole cell background and the year view as the mini-cell tint):

markers = Heatmap.markers(%{~D[2026-04-01] => 12, ~D[2026-04-02] => 95})

<.live_component
  module={PhoenixLiveCalendar.CalendarComponent}
  id="history"
  day_markers={markers}
/>

Options

• :palette — intensity classes low → high, either a list or a preset: :success (default, green ramp), :heat (warning → error), :cool (info ramp), :mono (base-content greys). Custom classes must be COMPLETE Tailwind class names the host app already uses or safelists — interpolated names get purged
• :style — :fill (default): the class becomes the marker color, so the whole cell tints. :dot: the cell keeps its normal background and the views render a small intensity dot instead — much quieter next to event content
• :scale — :linear (bucket by value / max, default) or :quantile (bucket by rank, so outliers don't wash out the rest)
• :max — explicit ceiling for the linear scale (default: the data's max)
• :label — value -> String.t() for the marker label (used by tooltips and, when show_label: true, the corner chip). Pass nil for no label
• :show_label — render the corner label chip (default false; heatmap days usually want just the tint)
• :id_prefix — marker id prefix (default "heatmap")

Days with a zero, negative, or non-numeric value get no marker — no activity means no tint. The raw value is kept in marker.extra.value.