Resource booking calendar for rooms, people, and deployment slots.
ResourceCalendar focuses on resource rows and booking cells. It is intentionally lighter than a full scheduling engine and leaves drag/drop for future composition.
Rows represent resources, columns represent upcoming days.
Resource calendar
| Resource | Tue, May 5 | Wed, May 6 | Thu, May 7 | Fri, May 8 | Sat, May 9 |
|---|---|---|---|---|---|
| Room AMain workspace | |||||
| Room BQuiet review room |
<ResourceCalendar
date="2026-05-05T00:00:00"
resources={[
{ id: "room-a", label: "Room A", description: "Main workspace" },
{ id: "room-b", label: "Room B", description: "Quiet review room" }
]}
bookings={[
{ id: "booking-1", resourceId: "room-a", title: "Design review", start: "2026-05-05T10:00:00", end: "2026-05-05T11:00:00", status: "confirmed", meta: "Team" },
{ id: "booking-2", resourceId: "room-b", title: "Release window", start: "2026-05-06T13:00:00", end: "2026-05-06T14:00:00", status: "pending" }
]}
/>import { ResourceCalendar } from "@froggdesign/enter-ui-react";The schedule uses a semantic table with row and column headers. Bookings and empty slots are native buttons.
resources with id, label, description, and meta.bookings with id, resourceId, title, start, end, status, and meta.date and defaultDate.onBookingSelect and onSlotSelect.ResourceCalendar uses .eui-resource-calendar classes and FroggDesign tokens for table headers, booking chips, empty slots, and status tones.