Calendar

Overview

Calendar styling is distributed across header controls, content sizing, and the day, month, and year views. Most customization should start at the theme level.

Public CSS Variables

The current implementation exposes more sizing and layout behavior than stable --calendar-* hooks. Treat theme tokens and documented size props as the primary styling surface.

Part-Level Variables

Content

CalendarContent derives min-width from spacing tokens per size.

Navigation Buttons

Navigation buttons rely on transition tokens and shared button styling patterns.

Views

CalendarDays, CalendarMonths, and CalendarYears animate view changes through shared transition tokens.

State And Variant Interaction

• compact changes density expectations
• size changes the content width and view spacing
• custom day templates affect perceived density more than root styling does

Examples

Theme-first calendar tuning

.brand-theme {
  --surface-primary: var(--color-orange-0);
  --focus-color: var(--color-orange-accent-400);
}

Dense embedded calendar

compact shrinks the root to its content, and size and variant on the root reach every part through context. Shorter formats (format='short' on the month label and months, format='narrow' on the weekdays) keep the header and the month view inside the narrow width.

import {
  Calendar,
  CalendarContent,
  CalendarDay,
  CalendarDays,
  CalendarHeader,
  CalendarMonth,
  CalendarMonthLabel,
  CalendarMonths,
  CalendarNextButton,
  CalendarPrevButton,
  CalendarViewButton,

Do Not Override

• do not invent undocumented --calendar-* variables as if they were public API
• do not restyle custom date cells in a way that hides focus or disabled state