Calendar
A one-month calendar grid with a weekday header, accent-marked days, and an optional boxed today.
Install
pnpm add @fractaldesign/machines-uiimport '@fractaldesign/machines-ui/style.css';
import { GraphCalendar } from '@fractaldesign/machines-ui';Preview
August 2026, today 27, marked 12, 18, 27
<GraphCalendar year={2026} month={8} today={27} marks={[12, 18, 27]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. |
| year* | number | — | Four-digit year of the month to draw. |
| month* | number | — | Month number, 1 for January through 12 for December. |
| weekStartsOn | 0 | 1 | 1 | First day of the week, 0 for Sunday and 1 for Monday. |
| marks | CalendarMark[] | number[] | — | Days to accent; each is a day number or a `{ day, accent }` object. |
| today | number | — | Day number to draw boxed as today. |
| palette | GraphPalette 'mono''duo''multi' | — | How many accent colours the graph uses: `mono` one, `duo` two, `multi` three. |
| corner | string | — | Character drawn at each corner of the frame. |
| class | string | '' |
API
- class forwarded to the outer element
- motion reveals on scroll into view
Types
| Name | Kind | Description |
|---|---|---|
| CalendarMark | interface | One month grid: weekday header, marked-day accent, optional today. |
Theming
CSS custom properties this component reads.
- --graph-accent
- --graph-accent-2
- --text-primary
- --text-secondary
Related
Built from
src/lib/components/graphs/GraphCalendar.svelte