How It Works
Use when user wants to change calendar settings (date, skin, colors, typography, effects). Do NOT use add_overlay — this edits a calendar already on the timeline.
SKINS (skin ID → description):
flip-clock — Retro airport flip-clock, dark bg, mechanical card segments, monospace font.
editorial — Clean serif newspaper masthead, light cream bg, thin rules, elegant.
glass-morphism — Frosted glass with radial gradients, modern sans-serif, blur, default skin.
minimal-mono — Ultra-thin monospaced, hairline border, dark bg, transparent digits.
sports-ticker — ESPN-style bold red/orange gradient, yellow month, heavy impact font.
handwritten — Sketch/cursive on warm beige, dashed border, organic feel.
gradient-wave — Purple→pink animated gradient, vivid colors, wave animation effect.
cinematic — Film clapperboard/slate, dark bg, gold accents, diagonal-stripe inspired (Pro).
neon-glow — Cyberpunk magenta/cyan neon glow, bloom effects, dark purple bg (Pro).
hud — Sci-fi HUD with green scanlines, phosphor green digits, monospace (Pro).
PROPS_PATCH KEYS:
date: ISO date string (YYYY-MM-DD), e.g. "2026-03-15".
size: "sm" | "md" | "lg" — digit block size.
monthFormat: "full" (January) | "short" (Jan) | "upper" (JANUARY) | "lower" (january).
skin: skin ID from list above — switches entire visual treatment.
position: "center" | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right".
separator: "none" | "dot" | "slash" | "dash" — character between year/month/day segments.
digitColor: CSS color (#hex or rgba) — digit text color, overrides skin default.
monthColor: CSS color — month text color, overrides skin default.
bgColor: CSS color or gradient — container background, overrides skin default.
borderColor: CSS border — container border, overrides skin default (e.g. "2px solid #ff0000").
digitBg: CSS color or gradient — digit block background, overrides skin default (e.g. "rgba(255,255,255,0.1)", "transparent").
digitBorder: CSS border — digit block border, overrides skin default (e.g. "1px solid rgba(255,255,255,0.2)", "none").
specialEffect: "scanlines" | "glow" | "grain" | "wave" | "flicker" | null — visual effect overlay, overrides skin default. null removes effect.
scale: 50-200 — percentage scale of the calendar.
fontFamily: CSS font-family string (e.g. "'Orbitron', sans-serif").
fontWeight: 300-900 — font weight.
backdropBlur: CSS blur value (e.g. "8px", "0px").
boxShadow: CSS box-shadow string.
borderRadius: CSS radius (e.g. "12px", "0px").
animation: { yearFrames: number, dayFrames: number, easing: "linear" | "outExpo" | "easeInOut" }.
STYLES_PATCH KEYS: opacity (0-1), borderRadius, boxShadow, background, padding, transform.