Month, week, and day calendar layout for admin scheduling.
CalendarView is a calendar layout, not a picker. It is designed for compact scheduling previews, release windows, and admin calendars.
Switch between month, week, and day views.
Month
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 26 No events | 27 No events | 28 No events | 29 No events | 30 No events | 1 No events | 2 No events |
| 3 No events | 4 No events | 5 | 6 No events | 7 | 8 No events | 9 No events |
| 10 No events | 11 No events | 12 No events | 13 No events | 14 No events | 15 No events | 16 No events |
| 17 No events | 18 No events | 19 No events | 20 No events | 21 No events | 22 No events | 23 No events |
| 24 No events | 25 No events | 26 No events | 27 No events | 28 No events | 29 No events | 30 No events |
| 31 No events | 1 No events | 2 No events | 3 No events | 4 No events | 5 No events | 6 No events |
<CalendarView
defaultDate="2026-05-05T00:00:00"
events={[
{ id: "release", title: "Release window", start: "2026-05-05T09:00:00", end: "2026-05-05T10:00:00", tone: "success", meta: "v0.5.0" },
{ id: "review", title: "Design review", start: "2026-05-07T13:00:00", end: "2026-05-07T14:00:00", tone: "info" }
]}
/>import { CalendarView } from "@froggdesign/enter-ui-react";Calendar days render in semantic tables. Events are buttons so they can be reached and opened by keyboard.
date, defaultDate, onDateChange.view, defaultView, onViewChange.events with id, title, start, end, tone, and meta.onEventSelect for opening event details.CalendarView uses .eui-calendar-view classes and FroggDesign tokens for controls, calendar grids, event buttons, and current-day states.