Skip to content
Get Pro
Calendars

Calendar Heatmap

A year of days as a dot calendar: round or square cells in week columns, quarters set apart by a gap with a hairline that fades at both ends, single-letter day labels, months and quarters above, and future days left as faint empties.

$149 once · every Pro piece

Customize

Levels climb the grey ladder and only the busiest day runs hot; the blackbody heat ramp is opt-in. Start the week on Monday and the weekend rows fade back so the working week leads. Hover a day and it swells on a spring while its neighbours give way, so the gap around it grows; its level lights in the legend, and hovering a legend level isolates every day at that level. Narrow widths scroll horizontally with faded edges, starting at the latest weeks, while the day letters stay pinned. Tab in and the arrows walk the days, a week or a day at a time. Loading is a shimmer wave across the same lattice.

Install

npx shadcn@latest add @obsyde/calendar-heatmap

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { CalendarHeatmap } from '@/components/obsyde/ember/calendar-heatmap/CalendarHeatmap';

export function Example() {
  return (
    <CalendarHeatmap shape="round" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/calendar-heatmap/CalendarHeatmap.tsxcomponent
  • ember/calendar-heatmap/calendar-heatmap.cssstyles
  • ember/calendar-heatmap/CalendarHeatmapDemo.tsxdemo
  • ember/viz-kit/viz-kit.cssshared
  • ember/viz-kit/Tooltip.tsxshared
  • ember/viz-kit/focus.tsshared
  • ember/viz-kit/patterns.tsxshared
  • ember/viz-kit/roll.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/viz-kit/scale.tsshared
  • ember/viz-kit/motion.tsshared
  • ember/viz-kit/chart.tsxshared
  • ember/shared/ember.cssshared
  • ember/viz-kit/touch.tsshared
  • ember/viz-kit/keyboard.tsshared
  • ember/viz-kit/size.tsshared
  • ember/viz-kit/state-messages.tsxshared
  • ember/viz-kit/Legend.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
shapeShape'round' | 'square''round'
weekStartWeek starts'sunday' | 'monday''sunday'
scaleScale'heat' | 'mono''mono'
separatorsSeparators'fade' | 'none''fade'
dayLabelsDay labels'all' | 'alternate''all'
monthsMonthsnumber12
legendLegend'levels' | 'none''levels'
tooltipTooltip'panel' | 'none''panel'
revealReveal'wave' | 'none''wave'
statusStatus'ready' | 'loading' | 'empty''ready'
seedSeednumber11