PeriodCalendar

PeriodCalendar composes the shared Calendar component and marks inclusive date ranges supplied by the host application. The app remains responsible for collecting and storing the data.

import { PeriodCalendar, type PeriodDateRange } from "@ovok/native/ui";

const periods: PeriodDateRange[] = [
  { startDate: "2026-05-03", endDate: "2026-05-07" },
];

<PeriodCalendar
  periods={periods}
  selectedDate={selectedDate}
  onDateSelect={setSelectedDate}
  locale="en-GB"
/>

The start and end dates are inclusive. Overlapping and adjacent intervals are merged for display. The shared calendar provides navigation, selection, localization, accessibility, and theme/slot handling. This component does not infer cycle length, predict future periods or fertility windows, persist health data, request platform permissions, or provide medical advice.

Prop	Type	Default	Description
periods	readonly PeriodDateRange[]	required	Host-supplied { startDate, endDate } intervals
periodLabel	string	Period	Complete accessible marker and legend label; supply translated text when needed
labelForPeriodDate	(date: Date) => string	periodLabel	Optional date-specific accessible marker label
showLegend	boolean	true	Show the marker legend
Calendar props	CalendarProps except markers and getMarkerForDate	—	Selection, month, locale, bounds, theme, and slots