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