4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:T18f4,'use client' import { IconPlus } from '@tabler/icons-react' import { useMemo, useRef } from 'react' import { EventCalendar, type EventCalendarApi } from '@/components/spaceui/event-calendar' import { EventCalendarContent } from '@/components/spaceui/event-calendar-content' import { EventCalendarNav, EventCalendarToolbar } from '@/components/spaceui/event-calendar-nav' import type { CalendarEvent, EventCalendarResource, } from '@/components/spaceui/event-calendar-types' import { addMinutes, setHours, startOfDay } from 'date-fns' import { Button } from '@/components/ui/button' import { Card, CardContent } from '@/components/ui/card' /** Rooms become columns in the resource day view - the time-grid layout tuned * for space/booking scenarios. */ const ROOMS: EventCalendarResource[] = [ { id: 'r101', title: '101 · King', color: 'var(--color-blue-500)' }, { id: 'r102', title: '102 · Queen', color: 'var(--color-emerald-500)' }, { id: 'r204', title: '204 · Twin', color: 'var(--color-violet-500)' }, { id: 'r301', title: 'Suite 301', color: 'var(--color-amber-500)' }, ] /** One source of truth for booking status: drives both the chip color and the * legend, so the two can never drift apart. */ type BookingStatus = 'occupied' | 'checkout' | 'housekeeping' | 'checkin' const STATUS: Record = { occupied: { label: 'Occupied', color: 'var(--color-emerald-500)' }, checkout: { label: 'Check-out', color: 'var(--color-rose-500)' }, housekeeping: { label: 'Housekeeping', color: 'var(--color-cyan-500)' }, checkin: { label: 'Check-in', color: 'var(--color-blue-500)' }, } interface BookingData { status: BookingStatus } /** A hotel's day of room activity - stays, turnovers, housekeeping, and * check-ins - anchored to today so the resource view opens full. */ function buildBookings(anchor: Date): CalendarEvent[] { const base = startOfDay(anchor) // fractional hours (11.5 = 11:30) resolve through minutes so half-hour // turnovers land precisely const at = (hour: number) => addMinutes(base, Math.round(hour * 60)) const booking = ( id: string, title: string, startHour: number, endHour: number, resourceId: string, status: BookingStatus, ): CalendarEvent => ({ id, title, start: at(startHour), end: at(endHour), resourceId, color: STATUS[status].color, data: { status }, }) return [ // 101 - morning stay, turnover, afternoon check-in booking('stay-reed', 'Occupied · Reed', 8, 10, 'r101', 'occupied'), booking('checkout-reed', 'Check-out · Reed', 10, 10.5, 'r101', 'checkout'), booking('clean-101', 'Housekeeping', 10.5, 12, 'r101', 'housekeeping'), booking('checkin-alvarez', 'Check-in · Alvarez', 14, 15, 'r101', 'checkin'), // 102 - long stay with a late-afternoon turnover booking('stay-chen', 'Occupied · Chen', 8, 16, 'r102', 'occupied'), booking('checkout-chen', 'Check-out · Chen', 16, 16.5, 'r102', 'checkout'), booking('clean-102', 'Housekeeping', 16.5, 18, 'r102', 'housekeeping'), // 204 - midday turnover into an evening stay booking('checkout-novak', 'Check-out · Novak', 11, 11.5, 'r204', 'checkout'), booking('clean-204', 'Deep clean', 11.5, 13, 'r204', 'housekeeping'), booking('checkin-ford', 'Check-in · Ford', 15, 16, 'r204', 'checkin'), booking('stay-ford', 'Occupied · Ford', 16, 20, 'r204', 'occupied'), // Suite 301 - early prep, mid-morning check-in, VIP stay booking('clean-301', 'Housekeeping', 8, 9.5, 'r301', 'housekeeping'), booking('checkin-osei', 'Check-in · Osei', 10, 11, 'r301', 'checkin'), booking('stay-osei', 'Occupied · Osei', 11, 20, 'r301', 'occupied'), ] } export default function Demo() { const events = useMemo(() => buildBookings(new Date()), []) const apiRef = useRef(null) const bookingCount = useRef(0) // Add a one-hour booking at noon in the first room and jump to it - a minimal // stand-in for a real "book a room" dialog. const addBooking = () => { const api = apiRef.current if (!api) return const start = setHours(startOfDay(new Date()), 12) const end = addMinutes(start, 60) api.addEvent({ id: `booking-${bookingCount.current++}`, title: 'New booking', start, end, resourceId: 'r101', color: STATUS.checkin.color, data: { status: 'checkin' }, }) api.goTo(start) } return (

{/* resource is the only view here, so the switcher is hidden */}

{/* Status legend - swatch colors are runtime var(--color-*) tokens, so they ride inline styles rather than synthesized utility classes. */}

{Object.values(STATUS).map((status) => ( {status.label} ))}

) } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tabler/icons-react"}]]}]}],["$","li","date-fns",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"date-fns"}]]}]}]]}],["$","$L4f",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/components-spaceui-event-calendar.json","https://www.spaceui.one/r/components-spaceui-event-calendar-content.json","https://www.spaceui.one/r/components-spaceui-event-calendar-nav.json","https://www.spaceui.one/r/components-spaceui-event-calendar-types.json","https://www.spaceui.one/r/primitives-button.json","https://www.spaceui.one/r/primitives-card.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/demo/components/spaceui/event-calendar/c-event-calendar-02/index.tsx","content":"$51","type":"registry:component","target":"components/spaceui/event-calendar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]