Archive Calendar

Every day of an archive as month grids — answers "was there one on the day I remember" at a glance.

Every day of an archive, drawn as month grids. A daily publication browsed as a list of dates answers "what is the newest" and nothing else; the two questions a reader actually has — "was there an issue on the day I remember" and "how far back does this go" — are a scan in a list and a glance in a grid.

An unbroken run of filled cells is also the claim a daily publication is making, and a gap is the honest way to admit a day that failed. Upstreamed from YunNEWS.

Import

tsx

1import { ArchiveCalendar } from "@yuhuanowo/yunui/patterns";

Basic

dates are the days that have something (YYYY-MM-DD, any order); href maps a date to its destination. maxMonths is a ceiling, not a count — the range comes from the data, so a three-week-old archive draws one month rather than six mostly-empty ones.

2026-08

1 2 3

5 6 7 8 9

12 13

2026-07

28 29 30 31

Localizing

Every string is a prop, and the defaults are deliberately neutral (S M T W T F S, 2026-08). Pass your own to localize:

tsx

1<ArchiveCalendar
2  dates={dates}
3  href={(d) => `/issues/${d}`}
4  weekdays={["日","一","二","三","四","五","六"]}
5  formatMonth={(y, m) => `${y} 年 ${m} 月`}
6  formatCount={(n) => `${n} 期`}
7  formatDayLabel={(d) => `${d} 的日報`}
8/>

Props

Prop	Type	Default	Description
className	string	—
dates*	string[]	—	Dates that have an issue, as YYYY-MM-DD. Order does not matter.
formatCount	((count: number) => string)	—	Label the per-month count, e.g. `(n) => `${n} issues``. Omit to hide it.
formatDayLabel	((date: string) => string)	(date) => date	Accessible label for a filled day.
formatMonth	((year: number, month: number) => string)	(year, month) => `${year}-${String(month).padStart(2, "0")}`	Format a month heading.
href*	(date: string) => string	—	Where a date links to.
maxMonths	number	24	Most months to draw. A ceiling, not a count: the range comes from the data, so an archive three weeks old draws one month rather than six, five of them empty.
weekdays	readonly string[]	["S", "M", "T", "W", "T", "F", "S"] as const	Weekday initials, Sunday first.