One day, in the language you pass

// apps/docs/examples/ui/calendar.tsx'use client';
import {useState} from 'react';
import {getDateFnsLocale} from '@workspace/active-format';import {Calendar} from '@workspace/active-ui/components/primitives/calendar';import {  NativeSelect,  NativeSelectOption,} from '@workspace/active-ui/components/primitives/native-select';
// A fixed "today", so every reader sees the same month. An application// passes the day of its own presentation zone (see the page).const TODAY = new Date(2026, 9, 20);
const LANGUAGES = [  ['en', 'English'],  ['nl', 'Dutch'],  ['de', 'German'],  ['ar-EG', 'Arabic (Egypt)'],] as const;
function isoDay(date: Date | undefined): string {  if (!date) return 'none';  const pad = (n: number) => String(n).padStart(2, '0');  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;}
/** * One day picked in a month grid. The calendar takes its words, labels and * week start from the locale you pass, and its "today" from you: change the * language to see both follow. The chosen day is printed as an ISO date. */export default function CalendarExample() {  const [language, setLanguage] = useState('en');  const [day, setDay] = useState<Date | undefined>(new Date(2026, 9, 23));  return (    <div className="flex flex-col items-center gap-4">      <NativeSelect        aria-label="Language"        size="sm"        value={language}        onChange={(event) => setLanguage(event.target.value)}      >        {LANGUAGES.map(([code, name]) => (          <NativeSelectOption key={code} value={code}>            {name}          </NativeSelectOption>        ))}      </NativeSelect>      <Calendar        mode="single"        selected={day}        onSelect={setDay}        defaultMonth={TODAY}        today={TODAY}        locale={getDateFnsLocale(language)}        className="rounded-md border"      />      <p className="text-muted-foreground text-sm">        Chosen: <code>{isoDay(day)}</code>      </p>    </div>  );}