Now and today
Today's highlight, the now indicator and the clock.
The current time sets which day is today and where the now indicator sits. The calendar reads it from a clock:
| Where | Field |
|---|---|
| Day-grid days | isToday, rendered as data-today |
| Time-grid columns | isToday, and now: the fraction of the day for the now indicator |
| Timelines | Day headers' isToday, and the layout's now: the fraction of the range, absent outside it |
| State | state.now, a Temporal.ZonedDateTime in timeZone |
| Navigation | today() goes to today in timeZone |
Clock
Without a clock option, the calendar ticks every minute. Each tick re-derives the state only when the time changed.
Two clocks are built in:
// tick every 15 seconds instead of every minute
export const clock = intervalClock({ every: Temporal.Duration.from({ seconds: 15 }) });fixedClock(instant) never ticks, for tests, stories and screenshots. Any { now, subscribe } object is a clock.
The clock starts when the calendar mounts and stops when it unmounts. Before that, the current time comes from initialNow
if given; see server rendering.
Call ~mount to start the clock; it returns the function that stops it. See
writing an adapter.