Date-time range
canonStart and end with time, all-day toggle and duration presets.
M4c (owner 28 Sep 2026, approved): all-day renders the canonical DateRangeField (from–to in one field, shared calendar, day count) instead of two DateFields with their own day arithmetic — one shape for a range of days; `.dp-field.range` ends share the field width (width 0 + flex 1), so the term row no longer overflows on 390 px (acrm branch feat/celodenni-rozsah). acrm !4087 (28 Sep 2026, owner): the visible duration next to times uses `fmtDurShort` — „45 m“ · „1 h“ · „1 h 30 m“ (in the context of time „m“ = minutes). Screen readers keep the full „min“ via `fmtDur` (TimeField option aria-label, DateTimeRange hidden live text) so „m“ is not read as metres. Other durations in the app (timeline, Setkání, tasks, reminders) keep „min“.
Used in 3 files · 3 areas · 3× — components/calendar, components/meetings, pages/ZasedackyPage
@acrm/ui <DateTimeRangeField>.dp-stack .dp-termin .dp-timegroup .dp-switches +3SourceStoryLegacy card dates.htmlImport
import { DateTimeRangeField } from '@acrm/ui'
Props
DateTimeRangeField packages/ui/src/components/DateTimeRangeField.tsx
| Name | Type | Default | Description |
|---|---|---|---|
value * | DateTimeRangeValue | — | — |
onChange * | (value: DateTimeRangeValue) => void | — | — |
step | number | 15 | — |
allowAllDay | boolean | true | Přepínač „Celý den" (schůzka ano, zasedačka ne). |
allowOvernight | boolean | false | Smí termín přetéct přes půlnoc? Schůzka ano (konec před začátkem = do rána). Zasedačka ne — tam je to skoro vždycky překlep, tak se to označí za chybu. |
availability | (v: { date: string | null; from: number | null; to: number | null; }) => { free: boolean; text: string; } | null | — | Stavový řádek dostupnosti — vrací {free,text} nebo null. |
today | Date | — | — |
locale | string | DEFAULT_LOCALE_TAG | — |
dayExtras | ReactNode | — | Co patří ke DNI a stojí v řádku dne hned za datem (schůzka: přepínač „Opakovat" a po zapnutí skupina frekvence · do · konec, .dp-recur). Řádek se zalamuje, skupina jako celek. |
belowRows | ReactNode | — | Pod oběma řádky (schůzka: chyba konce opakování .dp-status.busy). |