# PeriodCalendar

Canonical page: https://docs.ovok.com/native-sdk/guide/components/ui/period-calendar

`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.

```tsx
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 |