CalendarHeatmap - GitHub-Style Contribution Calendar

1,182

Total Contributions

289

Active Days

4.1

Average Per Day

Best Day

Key Features

📅

Calendar Grid

52 weeks × 7 days grid with Sunday-Saturday layout, matching GitHub's design

🎨

Color Levels

5 discrete intensity levels with customizable color schemes

💬

Tooltips

Hover tooltips showing date and contribution count

⌨️

Keyboard Nav

Arrow key navigation with Enter/Space for selection

📱

Responsive

SVG-based rendering scales perfectly on all screen sizes

♿

Accessible

Full ARIA labels, keyboard support, and screen reader compatibility

Basic Calendar

Default GitHub-style calendar showing past 365 days of activity. Hover over cells to see details, click to select.

Less

<script>
  import CalendarHeatmap from '$lib/components/CalendarHeatmap.svelte';

  let activityData = [
    { date: '2024-01-15', value: 12 },
    { date: '2024-01-16', value: 8 },
    // ... more data
  ];
</script>

<CalendarHeatmap
  data={activityData}
  onCellClick={(date, value) => console.log(date, value)}
/>

Color Schemes

Customize the color palette to match your application's theme. Choose from preset schemes or define your own.

Less

<CalendarHeatmap
  data={activityData}
  colorLow="#f0f9ff"
  colorHigh="#0369a1"
/>

Compact Version

Smaller cells without labels for embedding in tight spaces. Perfect for dashboards and summary views.

<CalendarHeatmap
  data={activityData}
  cellSize={8}
  cellGap={2}
  showWeekLabels={false}
  showMonthLabels={false}
  showLegend={false}
/>

Custom Date Range

Display a specific date range instead of the default 365 days. Use the filter to select different time periods.

Less

<script>
  const daysAgo = 90;
  const startDate = new Date();
  startDate.setDate(startDate.getDate() - daysAgo);
</script>

<CalendarHeatmap
  data={activityData}
  startDate={startDate}
  endDate={new Date()}
/>

Props Reference

Prop	Type	Default	Description
`data`	`CalendarDataPoint[]`	required	Array of { date: string, value: number } objects
`startDate`	`Date`	365 days ago	First date to display in calendar
`endDate`	`Date`	today	Last date to display in calendar
`colorLow`	`string`	`'#ebedf0'`	Colour for lowest activity (level 0)
`colorHigh`	`string`	`'#216e39'`	Colour for highest activity (level 4)
`cellSize`	`number`	`12`	Size of each calendar cell in pixels
`cellGap`	`number`	`3`	Gap between cells in pixels
`showWeekLabels`	`boolean`	`true`	Show weekday labels (Mon/Wed/Fri)
`showMonthLabels`	`boolean`	`true`	Show month labels at top
`showLegend`	`boolean`	`true`	Show colour legend below calendar
`levels`	`number`	`5`	Number of discrete colour levels
`tooltipFormatter`	`function`	-	Custom tooltip formatter: `(date, value) => string`
`onCellClick`	`function`	-	Click handler: `(date, value) => void`
`class`	`string`	`''`	Additional CSS classes

Use Cases

🎯 Habit Tracking

Visualize daily habits like exercise, meditation, or reading streaks

💻 Developer Activity

Display GitHub-style contribution graphs for project dashboards

📊 Business Metrics

Track daily sales, user signups, or other key performance indicators

🏃 Fitness Logging

Monitor workout frequency and intensity over time

🌡️ Environmental Data

Visualize temperature, pollution levels, or weather patterns

⏰ Time Tracking

Display project hours, task completion, or productivity patterns

Implementation Details

Zero Dependencies

Built with pure Svelte 5 and native web technologies. No external charting libraries required.

Performance

O(1) data lookups using Map. Handles 365+ cells with smooth rendering and interactions.

Accessibility

Full keyboard navigation, ARIA labels, focus management, and screen reader support included.

Responsive

SVG viewBox scaling ensures perfect rendering on all screen sizes and devices.