Today
Today's date as a button that opens the current month, with week numbers and the day marked.
Today shows the current day as a sentence on a button, for the header of a dashboard. The button
opens a Calendar of the month, with week numbers and today
marked. It is an orientation aid: a clicked day is highlighted, but nothing is reported to your
application.
// apps/docs/examples/ui/today.tsx'use client';
import {formatDateOnly} from '@workspace/active-format';import {Today} from '@workspace/active-ui/components/composed/today';
// A fixed "today", so every reader sees the same day. In an application it// comes from the owner's time zone: todayIsoDate(timeZone).const TODAY = '2026-10-20';
/** * Today's date as a button that opens the current month, with week numbers * and the day marked. The sentence and the calendar come from the same * `today` value. */export default function TodayExample() { return ( <Today today={TODAY} formattedDate={formatDateOnly(TODAY, 'full', 'en')} locale="en" /> );}What the composition adds#
One source for the day:
todaysets the marked and opened day; the sentence comes from your own formatting of the same value, so the two cannot name different days.No clock of its own: which day it is depends on the time zone of whoever owns the data, so your application passes it. An invalid
todaythrows while rendering.The calendar in the reader's language through
locale.
Usage#
import {Today} from '@workspace/active-ui/components/composed/today';
const today = todayIsoDate(timeZone);
<Today today={today} formattedDate={formatDateOnly(today, 'full', presentation)} locale="en"/>;What your application provides#
todayfrom the owner's time zone, the formatted sentence, and the language.Of the HTML attributes, only
classandName idare used.
API#
Import from @workspace/
Props
- Type
string
The current day as a sentence, formatted by the caller. Derive it from the same today value (format), so the heading and the calendar cannot name two different days.
- Type
string
The app locale; determines the language of the calendar in the popover.
Deliberately a prop and not `useLocale()` inside, the same rule as for Date: this package reads no provider context for language. Its consumers are server components that already have the locale.
- Type
string
The current calendar day of the surface's owner, as ISO YYYY-.
Required, and not the browser's clock. Which day "today" is follows from the business time zone of whoever owns the surface; a browser in another zone, or a render just past midnight, would otherwise mark a different day than the heading next to it. The caller derives it with today from its own zone. This component reads no clock.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.