MiniCalendar
A month grid for a rail that shows which days have posts.
When to use
Section titled “When to use”In a SidebarCard in the rail, as an index of when posts went up. It is not a date picker.
On a page
Section titled “On a page”<MiniCalendar counts={{ "2026-05-18": 1, "2026-06-16": 1 }} weekStart="sun" navigable selectable />counts has the posts per day, keyed by date. The grid shows the reader’s current month and marks their today, in their own time zone; the build cannot know either, so the browser draws the grid again. navigable adds Previous and Next month. selectable makes the marked days buttons that send a ds-select event with the date, or null when the day is pressed again.
Anatomy
Section titled “Anatomy”The month and year, the arrows, a row of weekday letters, then square cells that are fractions of the column, so the grid fits a 200px or a 300px rail.
Variants
Section titled “Variants”| Prop | Values |
|---|---|
weekStart |
mon (default) or sun |
year, month |
A fixed month instead of the current one |
emphasis |
strong (default) or soft: today becomes an outlined chip and marked days lose their fill |
tone |
cream (default) or dark, where today is a cream chip with night type |
States
Section titled “States”| Day | Looks |
|---|---|
| With posts | A wash of ink at 8% and ink text, which shows on the canvas and on a card alike |
| Today | Ink with canvas text: a dark chip in the light theme, a cream one in the dark theme |
| Selected | A coral ring |
| Other | Muted |
Accessibility
Section titled “Accessibility”A marked day carries a hidden note, “1 post”, for screen readers, and today is marked as the current date. The month’s name is a live region, so moving between months is announced. The weekday letters are hidden from screen readers, which read each day’s number.
MiniCalendar.astro. Ported from the handoff. counts is keyed by date instead of the day of one month, so the grid can move between months; navigable, selectable and the ds-select event take the place of onPrev, onNext and onSelect.