Skip to content

Data display

Calendar heatmap

Activity per day over recent weeks, in the data scale.

import { CalendarHeatmap } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Applications sent
2026-04-20: 0 applications2026-04-21: 0 applications2026-04-22: 0 applications2026-04-23: 0 applications2026-04-24: 0 applications2026-04-25: 0 applications2026-04-26: 4 applications2026-04-27: 5 applications2026-04-28: 6 applications2026-04-29: 7 applications2026-04-30: 0 applications2026-05-01: 0 applications2026-05-02: 0 applications2026-05-03: 0 applications2026-05-04: 0 applications2026-05-05: 0 applications2026-05-06: 0 applications2026-05-07: 4 applications2026-05-08: 5 applications2026-05-09: 6 applications2026-05-10: 7 applications2026-05-11: 0 applications2026-05-12: 0 applications2026-05-13: 0 applications2026-05-14: 0 applications2026-05-15: 0 applications2026-05-16: 0 applications2026-05-17: 0 applications2026-05-18: 4 applications2026-05-19: 5 applications2026-05-20: 6 applications2026-05-21: 7 applications2026-05-22: 0 applications2026-05-23: 0 applications2026-05-24: 0 applications2026-05-25: 0 applications2026-05-26: 0 applications2026-05-27: 0 applications2026-05-28: 0 applications2026-05-29: 4 applications2026-05-30: 5 applications2026-05-31: 6 applications2026-06-01: 7 applications2026-06-02: 0 applications2026-06-03: 0 applications2026-06-04: 0 applications2026-06-05: 0 applications2026-06-06: 0 applications2026-06-07: 0 applications2026-06-08: 0 applications2026-06-09: 4 applications2026-06-10: 5 applications2026-06-11: 6 applications2026-06-12: 7 applications2026-06-13: 0 applications2026-06-14: 0 applications2026-06-15: 0 applications2026-06-16: 0 applications2026-06-17: 0 applications2026-06-18: 0 applications2026-06-19: 0 applications2026-06-20: 4 applications2026-06-21: 5 applications2026-06-22: 6 applications2026-06-23: 7 applications2026-06-24: 0 applications2026-06-25: 0 applications2026-06-26: 0 applications2026-06-27: 0 applications2026-06-28: 0 applications2026-06-29: 0 applications2026-06-30: 0 applications2026-07-01: 4 applications2026-07-02: 5 applications2026-07-03: 6 applications2026-07-04: 7 applications2026-07-05: 0 applications2026-07-06: 0 applications2026-07-07: 0 applications2026-07-08: 0 applications2026-07-09: 0 applications2026-07-10: 0 applications2026-07-11: 0 applications2026-07-12: 4 applications2026-07-13: 5 applications2026-07-14: 6 applications2026-07-15: 7 applications2026-07-16: 0 applications2026-07-17: 0 applications2026-07-18: 0 applications2026-07-19: 0 applications2026-07-20: 0 applications2026-07-21: 0 applications2026-07-22: 0 applications2026-07-23: 4 applications2026-07-24: 5 applications2026-07-25: 6 applications2026-07-26: 7 applications2026-07-27: 0 applications2026-07-28: 0 applications2026-07-29: 0 applications2026-07-30: 0 applications2026-07-31: 0 applications2026-08-01: 0 applications2026-08-02: 0 applications2026-08-03: 4 applications2026-08-04: 5 applications2026-08-05: 6 applications2026-08-06: 7 applications2026-08-07: 0 applications2026-08-08: 0 applications2026-08-09: 0 applications2026-08-10: 0 applications2026-08-11: 0 applications2026-08-12: 0 applications2026-08-13: 0 applications2026-08-14: 4 applications2026-08-15: 5 applications2026-08-16: 6 applications2026-08-17: 7 applications2026-08-18: 0 applications2026-08-19: 0 applications2026-08-20: 0 applications2026-08-21: 0 applications2026-08-22: 0 applications2026-08-23: 0 applications2026-08-24: 0 applications2026-08-25: 4 applications2026-08-26: 5 applications2026-08-27: 6 applications2026-08-28: 7 applications2026-08-29: 0 applications2026-08-30: 0 applications2026-08-31: 0 applications2026-09-01: 0 applications2026-09-02: 0 applications2026-09-03: 0 applications2026-09-04: 0 applications2026-09-05: 4 applications2026-09-06: 5 applications2026-09-07: 6 applications2026-09-08: 7 applications2026-09-09: 0 applications2026-09-10: 0 applications2026-09-11: 0 applications2026-09-12: 0 applications2026-09-13: 0 applications2026-09-14: 0 applications2026-09-15: 0 applications2026-09-16: 4 applications2026-09-17: 5 applications2026-09-18: 6 applications2026-09-19: 7 applications2026-09-20: 0 applications2026-09-21: 0 applications2026-09-22: 0 applications2026-09-23: 0 applications2026-09-24: 1 applications2026-09-25: 2 applications2026-09-26: 3 applications2026-09-27: 4 applications2026-09-28: 5 applications2026-09-29: 6 applications2026-09-30: 7 applications2026-10-01: 0 applications2026-10-02: 0 applications2026-10-03: 0 applications2026-10-04: 0 applications2026-10-05: 1 applications2026-10-06: 2 applications2026-10-07: 3 applications2026-10-08: 4 applications2026-10-09: 5 applications2026-10-10: 6 applications2026-10-11: 7 applications2026-10-12: 0 applications2026-10-13: 0 applications2026-10-14: 0 applications2026-10-15: 0 applications2026-10-16: 1 applications2026-10-17: 2 applications2026-10-18: 3 applications2026-10-19: 4 applications2026-10-20: 5 applications2026-10-21: 6 applications2026-10-22: 7 applications2026-10-23: 0 applications
Show data
DateCount
2026-04-264 applications
2026-04-275 applications
2026-04-286 applications
2026-04-297 applications
2026-05-074 applications
2026-05-085 applications
2026-05-096 applications
2026-05-107 applications
2026-05-184 applications
2026-05-195 applications
2026-05-206 applications
2026-05-217 applications
2026-05-294 applications
2026-05-305 applications
2026-05-316 applications
2026-06-017 applications
2026-06-094 applications
2026-06-105 applications
2026-06-116 applications
2026-06-127 applications
2026-06-204 applications
2026-06-215 applications
2026-06-226 applications
2026-06-237 applications
2026-07-014 applications
2026-07-025 applications
2026-07-036 applications
2026-07-047 applications
2026-07-124 applications
2026-07-135 applications
2026-07-146 applications
2026-07-157 applications
2026-07-234 applications
2026-07-245 applications
2026-07-256 applications
2026-07-267 applications
2026-08-034 applications
2026-08-045 applications
2026-08-056 applications
2026-08-067 applications
2026-08-144 applications
2026-08-155 applications
2026-08-166 applications
2026-08-177 applications
2026-08-254 applications
2026-08-265 applications
2026-08-276 applications
2026-08-287 applications
2026-09-054 applications
2026-09-065 applications
2026-09-076 applications
2026-09-087 applications
2026-09-164 applications
2026-09-175 applications
2026-09-186 applications
2026-09-197 applications
2026-09-241 applications
2026-09-252 applications
2026-09-263 applications
2026-09-274 applications
2026-09-285 applications
2026-09-296 applications
2026-09-307 applications
2026-10-051 applications
2026-10-062 applications
2026-10-073 applications
2026-10-084 applications
2026-10-095 applications
2026-10-106 applications
2026-10-117 applications
2026-10-161 applications
2026-10-172 applications
2026-10-183 applications
2026-10-194 applications
2026-10-205 applications
2026-10-216 applications
2026-10-227 applications
calendar-heatmap/applications.tsx
import { CalendarHeatmap } from '@jsonresume/ui';

// Deterministic sample data: a busier stretch in the last month.
const end = new Date('2026-10-23T00:00:00Z');
const data: Record<string, number> = {};
for (let i = 0; i < 182; i++) {
  const d = new Date(end);
  d.setUTCDate(d.getUTCDate() - i);
  const n = (i * 7919) % 11;
  if (n > 6 || (i < 30 && n > 3)) data[d.toISOString().slice(0, 10)] = n - 3;
}

export default function CalendarHeatmapApplications() {
  return (
    <CalendarHeatmap
      label="Applications sent"
      data={data}
      end={end}
      formatCount={(n) => `${n} applications`}
    />
  );
}

Accessibility

  • Summarised as one image label; active days are listed in "Show data".

Props

<CalendarHeatmap>

Also accepts the attributes of the element CalendarHeatmap renders.
PropTypeDefaultDescription
data requiredRecord<string, number>–Counts per day, keyed YYYY-MM-DD.
label requiredstring–
endDatenew Date()Last day shown (defaults to today); the map covers weeks weeks ending here.
formatCount((n: number) => string)(n) => `${n}`e.g. (n) => ${n} applications
weeksnumber26