Mini-Kalender (Tagesstreifen) — UI-Kit-Galerie

Beispiele

14 Tage mit Terminen, heute markiert (Tag klicken wählt aus)

August 2026

Eigenschaften

Prop	Typ	Default	Builder-Label
start *	string	—	Erster Tag (TT.MM.JJJJ)
days	number	14	Sichtbare Tage
selected	string	""	Ausgewählter Tag
today	string	""	Heute markieren
marks	array	[]	Markierungen

* Pflicht-Prop

Events & Slots

Events: ⚡ select — im Surface per on: {<event>: {action, params}} verdrahtbar.

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

Token	Default
`--mini-calendar-action-on-primary`	`var(--color-action-on-primary)`
`--mini-calendar-action-primary`	`var(--color-action-primary)`
`--mini-calendar-border-default`	`var(--color-border-default)`
`--mini-calendar-radius-control`	`var(--radius-control)`
`--mini-calendar-radius-full`	`var(--radius-full)`
`--mini-calendar-radius-surface`	`var(--radius-surface)`
`--mini-calendar-status-danger`	`var(--color-status-danger)`
`--mini-calendar-status-success`	`var(--color-status-success)`
`--mini-calendar-status-warning`	`var(--color-status-warning)`
`--mini-calendar-surface-default`	`var(--color-surface-default)`
`--mini-calendar-surface-sunken`	`var(--color-surface-sunken)`
`--mini-calendar-text-default`	`var(--color-text-default)`
`--mini-calendar-text-muted`	`var(--color-text-muted)`

Genutzte Design-Tokens

border.hairlinecolor.action.on-primarycolor.action.primarycolor.border.defaultcolor.status.dangercolor.status.successcolor.status.warningcolor.surface.defaultcolor.surface.sunkencolor.text.defaultcolor.text.mutedfont.family.defaultradius.controlradius.fullradius.surfacesize.1size.10size.2size.3size.4size.6text.mdtext.smtext.xsweight.mediumweight.semibold