FeaturedNew
CalendarMonth Grid Calendar
A full month laid out as an accessible table with prev/next navigation, a today ring and a selectable day.
#calendar#month#grid
3 frameworksIntermediate
Loading…
A GitHub-style 53-week by 7-day contribution grid in a horizontal scroll container with a Less-to-More legend.
<!--
A year of activity as a 53-week x 7-day grid. It cannot shrink below 53
columns, so the honest move is a horizontal scroll container rather than a
squeeze that makes every square unreadable. The grid is one role="img" with a
summary label - 371 individually-announced squares would be noise, not
information - and the colour legend is captioned Less -> More.
-->
<figure class="w-full max-w-2xl rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900">
<figcaption class="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100">Activity in 2026</figcaption>
<div class="overflow-x-auto pb-1">
<div class="inline-grid grid-flow-col grid-rows-7 gap-1" role="img" aria-label="Daily activity heatmap for 2026, one square per day">
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></div>
<div class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></div>
</div>
</div>
<div class="mt-3 flex items-center justify-end gap-1 text-xs text-gray-500 dark:text-gray-400">
<span>Less</span>
<span class="h-3 w-3 rounded-sm bg-gray-100 dark:bg-gray-800" aria-hidden="true"></span>
<span class="h-3 w-3 rounded-sm bg-blue-200 dark:bg-blue-900" aria-hidden="true"></span>
<span class="h-3 w-3 rounded-sm bg-blue-300 dark:bg-blue-800" aria-hidden="true"></span>
<span class="h-3 w-3 rounded-sm bg-blue-500 dark:bg-blue-600" aria-hidden="true"></span>
<span class="h-3 w-3 rounded-sm bg-blue-700 dark:bg-blue-400" aria-hidden="true"></span>
<span>More</span>
</div>
</figure>| Prop | Type | Default | Description |
|---|---|---|---|
startDate | string | '2025-12-28' | Start date |
weeks | number | 53 | Weeks |
title | string | 'Activity in 2026' | Heading text for the card. |
levelFor | (index: number) => number | - | Level for |
className | string | - | Additional classes merged onto the root element. |
It cannot shrink below 53 columns, so it scrolls horizontally rather than squeezing squares into mush. Supply your own `levelFor(index)` returning 0-4 to colour each day; the grid is one `role="img"` with a summary label because 371 announced squares would be noise.