caliper uidocs
DemoSign inGet Pro

Returns calendar

Free

A month calendar coloured by daily return, with a compounded total.

Installs components/ui/returns-calendar.tsxDepends on d3-shapeMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/returns-calendar.json
Daily returns, September 2026

September 2026

+0.62% month · 15 of 30 days up
MonTueWedThuFriSatSunWeek
1−1.50%
2+1.25%
3+0.75%
4+0.25%
5−0.25%
6−0.75%
−0.27%
7−1.25%
8+1.50%
9+1.00%
10+0.50%
110.00%
12−0.50%
13−1.00%
+0.22%
14−1.50%
15+1.25%
16+0.75%
17+0.25%
18−0.25%
19−0.75%
20−1.25%
−1.52%
21+1.50%
22+1.00%
23+0.50%
240.00%
25−0.50%
26−1.00%
27−1.50%
−0.03%
28+1.25%
29+0.75%
30+0.25%
+2.26%

Daily returns, September 2026
DateReturn
2026-09-01−1.50%
2026-09-02+1.25%
2026-09-03+0.75%
2026-09-04+0.25%
2026-09-05−0.25%
2026-09-06−0.75%
2026-09-07−1.25%
2026-09-08+1.50%
2026-09-09+1.00%
2026-09-10+0.50%
2026-09-110.00%
2026-09-12−0.50%
2026-09-13−1.00%
2026-09-14−1.50%
2026-09-15+1.25%
2026-09-16+0.75%
2026-09-17+0.25%
2026-09-18−0.25%
2026-09-19−0.75%
2026-09-20−1.25%
2026-09-21+1.50%
2026-09-22+1.00%
2026-09-23+0.50%
2026-09-240.00%
2026-09-25−0.50%
2026-09-26−1.00%
2026-09-27−1.50%
2026-09-28+1.25%
2026-09-29+0.75%
2026-09-30+0.25%

When to use #

Use it for

  • Daily performance for a portfolio or a metric.
  • Spotting streaks and bad days in a month.

Skip it when

  • Values are not signed changes.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/returns-calendar.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above. It is built from ReturnsCalendar, compound and signedPercent.

example.tsx
import { ReturnsCalendar } from "@/components/ui/returns-calendar"

const returns = Array.from({ length: 30 }, (_, index) => ({
  date: `2026-09-${String(index + 1).padStart(2, "0")}`,
  value: Math.round((((index * 37) % 13) - 6) * 25) / 100,
}));

export function MonthlyReturns() {
  return (
    <div className="w-full max-w-md">
      <ReturnsCalendar label="Daily returns, September 2026" data={returns} month="2026-09" />
    </div>
  );
}

API reference #

ReturnsCalendar

component
PropTypeDefaultDescription
label *string—
data *readonly DailyReturn[]—Daily returns as percentages. Days without a value show a dash.
monthstring—Visible month as YYYY-MM. Omit for uncontrolled; defaults to the latest month.
onMonthChange((month: string) => void)—
weekStart0 | 11
formatValue((value: number) => string)signedPercent
loadingboolean—
errorstring—
classNamestring—

compound

component

No props of its own; it accepts the native props of its root element.

signedPercent

component

No props of its own; it accepts the native props of its root element.

Accessibility #

It exposes grid, row, columnheader, gridcell and status semantics, with aria-label, aria-busy, aria-live, aria-hidden and aria-selected kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
HomeJumps to the first item or the minimum.
EndJumps to the last item or the maximum.
PageDownMoves by a larger step, or to the next page.
PageUpMoves by a larger step, or to the previous page.
EnterActivates the focused control.
SpaceActivates the focused control.
EscapeCloses or cancels, then returns focus to where it came from.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.