Svelte 5 component · machines-ui · Graphs
GraphCalendar
A one-month calendar grid with a weekday header, accent-marked days, and an optional boxed today.
Install
GraphCalendar is a Svelte 5 ASCII calendar chart component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.
pnpm add @fractaldesign/machines-uiImport
import '@fractaldesign/machines-ui/style.css';
import { GraphCalendar } from '@fractaldesign/machines-ui';Usage
<GraphCalendar year={2026} month={8} today={27} marks={[12, 18, 27]} />Props
| Name | Type | Default |
|---|---|---|
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 First day of the week, 0 for Sunday and 1 for Monday. | 1 |
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 How many accent colours the graph uses: `mono` one, `duo` two, `multi` three. Here it only colours `today`, and only when `today` is not also in `marks` (a marked day is always the accent). | — |
corner | string Character drawn at each corner of the frame. | — |
class | string | '' |
Related components
GraphCells One or more labeled cell grids drawn side by side, each 1/0 matrix rendered with the filled or empty glyph.GraphCompare A grid comparing features against columns, where boolean cells become ✓/– and string cells pass through,…GraphCountdown Time left until a date.GraphDiff A change summary that marks rows as added, removed, or unchanged, with an optional footer row.GraphFlow One or more rows of labelled nodes joined by arrows, with an accent path for the live branch and muted nodes…GraphFunnel A proportional funnel showing labeled stages, values, and their relative widths.