Click a day to open its schedule.
Waiting for action
Open a sub-component to view its docs and settings.
Month calendar with selectable days, labelled timed events, and a day-detail overlay built on the shared Modal component.
| Prop | Type | Default | Description |
|---|---|---|---|
events | CalendarEvent[] | [] | Day markers with optional startTime, endTime, tone, and title. |
maxDayEvents | number | 3 | Maximum events shown in a month cell; extra events collapse to +N more. |
selectedDate | string | — | YYYY-MM-DD. |
onSelectDate | (date) => void | — | Day click handler. |
openDayOnSelect | boolean | true | Open the shared Opus modal with schedule and booking form. |
onBookEvent | (event) => void | — | Called when a fake booking is added in the modal. |
showMonthYearPicker | boolean | true | Show month and year dropdowns in the header. |
month / year | number | — | Controlled visible month. |
| Field | Type | Description |
|---|---|---|
date | string | YYYY-MM-DD day key. |
title | string | Event label. |
startTime | string | Optional HH:mm from time. |
endTime | string | Optional HH:mm to time. |
tone | "accent" | "success" | "warning" | "danger" | Marker colour. |
Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…
