ResourceCalendar

ResourceCalendar focuses on resource rows and booking cells. It is intentionally lighter than a full scheduling engine and leaves drag/drop for future composition.

#Default usage

<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

import { ResourceCalendar } from "@froggdesign/enter-ui-react";

#Accessibility

The schedule uses a semantic table with row and column headers. Bookings and empty slots are native buttons.

#API

• resources with id, label, description, and meta.
• bookings with id, resourceId, title, start, end, status, and meta.
• date and defaultDate.
• onBookingSelect and onSlotSelect.

#Styling

ResourceCalendar uses .eui-resource-calendar classes and FroggDesign tokens for table headers, booking chips, empty slots, and status tones.