Customizing

TokensCopy Anchor Link

Override any --calendar-* token on an element around the calendar, or on :root:

.schedule {
  --calendar-accent: light-dark(#1f5f8b, #7cb7e0);
  --calendar-accent-contrast: light-dark(#ffffff, #0b1a24);
  --calendar-slot-height: 2.5rem;
}

Defaults from default.css, light then dark:

The event fill, border and text, the background fills, --calendar-weekend, --calendar-border-strong and --calendar-focus-ring are unset on purpose. A custom property declared as var(--other) resolves where it is declared, so a default on :root would ignore an override of the token it points to further down.

The size tokens also drive layout in base.css, which falls back to the same defaults when no theme is loaded, except --calendar-day-header-height, which falls back to 2rem.

Nested timeline cells indent by their resource depth. TimelineViewResourceToggle uses the theme's native-button text and focus styles; supply its visible icon or text as children.

RolesCopy Anchor Link

Each kind of thing on the calendar has its own color:

Set --calendar-accent-contrast with the accent, for the numbers on today's marker, and use a light-dark() pair so each mode gets a fitting shade.

Timed events are --calendar-event-color mixed into the surface: 14% for the fill and 30% for the border in light mode, 26% and 45% in dark mode, where a lighter tint would sink into the surface. A stripe in the event color marks where an event starts, so a bar continued from an earlier week has none. All-day and multi-day bars (data-all-day, data-multi-day) are filled with the event color, with --calendar-event-color-contrast text. --calendar-event, --calendar-event-border and --calendar-event-text override the fill, border and text of every event.

The colors are resolved on each event, so a color set on any element around the calendar, or on one event, reaches it. To color events by kind, pass a class to the event part that sets the event color:

.event-focus {
  --calendar-event-color: light-dark(#7a3fd1, #c4a3ff);
  --calendar-event-color-contrast: light-dark(#ffffff, #1d0b3a);
}

Weekends are Saturday and Sunday. Parts carry data-weekday (ISO, 1 is Monday), so restyle it for other weeks:

[data-scope='calendar'][data-weekday] {
  --calendar-weekend: transparent;
}

[data-scope='calendar']:is([data-weekday='5'], [data-weekday='6']) {
  --calendar-weekend: light-dark(#f4f3f0, #201f1d);
}

LinesCopy Anchor Link

Time-grid columns and timeline lanes draw a half-strength line at each slot and a full line on each hour, from the --cal-slots-per-hour and --cal-hour-offset the parts emit, so a visible window starting off the hour keeps its hour lines on the hour. Timeline lanes add a --calendar-border-strong line where each day starts. Header bands sit on the muted surface over a --calendar-border-strong line.

Dark modeCopy Anchor Link

Colors use light-dark(), so they follow the inherited color-scheme. The themes never set it:

:root {
  color-scheme: light dark; /* follow the system */
}

.always-dark {
  color-scheme: dark; /* force a mode on any ancestor */
}

The shadcn/ui, Material UI and FullCalendar themes also follow their library's own dark-mode selector; see themes.

Forced colorsCopy Anchor Link

Under forced-colors: active (Windows High Contrast), the browser drops fills. Events keep their borders, and the default theme redraws what fills carried with system colors:

• Today's marker and the now line use Highlight.
• Slot lines, unavailable hatching and outside-month dates use GrayText.
• Background layers are hatched in GrayText at the opposite angle from unavailable time, and background events are hatched the same way in Highlight, so the three stay apart.

Every theme inherits these rules. For more contrast without forced colors, use the high contrast theme.

Overriding rulesCopy Anchor Link

The themes use cascade layers and zero-specificity selectors. Unlayered CSS always wins over them, without !important. Layered CSS wins only if its layer comes after the calendar's: CSS that declares its own layers after importing a theme beats it, and layers declared earlier lose.

Select parts by their attributes, or pass a class to the part:

[data-scope='calendar'][data-part='time-grid-event'] {
  border-radius: 0;
}

Tailwind is layered too, and needs the theme imported into its components layer.

ScrollingCopy Anchor Link

TimeGridView scrolls, with a sticky header. Give it a height to scroll inside the page instead of showing every hour, or set the view's timeWindow to limit the clock range before rendering:

[data-scope='calendar'][data-part='time-grid-root'] {
  max-block-size: 40rem;
}

Known limitsCopy Anchor Link

• Day-grid and all-day bars default to 22px tall, below a 44px touch target. Raise --calendar-bar-height for touch interfaces.
• The all-day row scrolls with the time grid instead of staying under the sticky header.