Heat Calendar

Component 50

About

A GitHub-style activity calendar that visualizes weekly intensity values as a single-hue grid, with a legend, hover/click tooltips, and range selection with totals.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Heat Calendar to your project and fits it to your theme.

Code

How Heat Calendar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  HeatCalendar,
  HeatCalendarGrid,
  HeatCalendarLegend,
  HeatCalendarTooltip,
} from "@/components/ui/heat-calendar";

/** Deterministic demo field so every render agrees; weekends run quieter. */
function demoLevel(week: number, day: number) {
  const s = Math.sin(week * 12.9898 + day * 78.233) * 43758.5453;
  const r = s - Math.floor(s);
  return day >= 5 ? Math.max(0, r - 0.55) * 1.4 : r;
}

const values = Array.from({ length: 16 }, (_, w) =>
  Array.from({ length: 7 }, (_, d) => demoLevel(w, d)),
);

export default function HeatCalendarDemo() {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <HeatCalendar unit="commits" weeks={16} maxCount={14} values={values}>
        <HeatCalendarGrid>
          <HeatCalendarTooltip />
        </HeatCalendarGrid>
        <HeatCalendarLegend />
      </HeatCalendar>
    </div>
  );
}