Custom themes

base.css positions everything: day-grid bars, time-grid columns and lanes, timeline rows and the now line. A custom theme imports it and adds only the look. To try token values first, use the playground: its token editor overrides the color and size tokens of any built-in theme and checks the contrast of the result.

@import '@calendar-tsx/themes/base.css';

@layer calendar.theme {
  :where([data-scope='calendar'][data-part='time-grid-event']) {
    background: var(--brand-event);
    border-radius: 4px;
  }
}

Writing into calendar.theme puts your rules where a built-in theme's go, so compact.css and unlayered overrides still apply on top. Use :where() to keep specificity at zero. The size tokens (--calendar-slot-height, --calendar-bar-height, --calendar-axis-width and the rest) also drive positioning in base.css; see tokens.

Keep inline padding and borders inside a timeline event's box. The core sizes and stacks events from their display duration, so CSS that widens a bar would draw it over its neighbors.

PartsCopy Anchor Link

Every part renders data-scope='calendar' and one data-part. Boolean state attributes are present (data-x="") when true and absent otherwise.

Day gridCopy Anchor Link

Time gridCopy Anchor Link

data-overlap marks an event whose overlap cluster needs more than one lane. data-short marks an event laid out shorter than the view's shortEventMinutes. data-all-day marks an all-day event's bar and data-multi-day one whose event covers more than one date, before clipping; a timed event ending at midnight covers only its start date. data-weekday is the ISO day of the week, 1 (Monday) to 7 (Sunday). data-day-offset is the number of days a slot starts after its date, for labelling after-midnight times in an overnight timeWindow.

TimelineCopy Anchor Link

ListCopy Anchor Link

GeometryCopy Anchor Link

Parts emit their layout as unitless --cal-* custom properties on their own element, which base.css reads. --cal-slot-units is the visible duration in slots and can end in a partial slot, where --cal-slots counts whole slot labels.

For example, base.css places a timed event with:

:where([data-scope='calendar'][data-part='time-grid-event']) {
  position: absolute;
  inset-block-start: calc(var(--cal-start) * 100%);
  block-size: calc(var(--cal-span) * 100% - var(--calendar-event-gap, 4px));
  inset-inline-start: calc(var(--cal-inline-start) * 100%);
  inline-size: calc(var(--cal-inline-size) * 100% - var(--calendar-event-gap, 4px));
  z-index: calc(1 + var(--cal-lane));
}