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:T1e24,'use client' import { IconList, IconPlus } from '@tabler/icons-react' import { useMemo, useRef } from 'react' import { EventCalendar, type EventCalendarApi, type EventCalendarRenderEventProps, } 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, EventCalendarSlotDraft, } from '@/components/spaceui/event-calendar-types' import { addMinutes, setHours, startOfDay } from 'date-fns' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { Button } from '@/components/ui/button' import { Card, CardContent } from '@/components/ui/card' /** Each service type carries its own Tailwind hue, so the day reads as a * color-coded schedule at a glance. */ const SERVICE = { consultation: { label: 'Consultation', color: 'var(--color-violet-500)' }, followup: { label: 'Follow-up', color: 'var(--color-sky-500)' }, assessment: { label: 'Assessment', color: 'var(--color-amber-500)' }, therapy: { label: 'Therapy', color: 'var(--color-rose-500)' }, } as const type Service = keyof typeof SERVICE const NEW_COLOR = 'var(--color-emerald-500)' interface ApptData { client: string initials: string avatar?: string service?: Service } /** A consultant's day with color-coded appointments and deliberate gaps to * drag into - anchored to today so the day view opens on real appointments. */ function buildAppointments(anchor: Date): CalendarEvent[] { const base = startOfDay(anchor) const at = (hour: number, minute = 0) => addMinutes(setHours(base, hour), minute) const appt = ( id: string, client: string, initials: string, avatar: string, service: Service, startHour: number, startMinute: number, minutes: number, ): CalendarEvent => { const start = at(startHour, startMinute) return { id, title: client, start, end: addMinutes(start, minutes), color: SERVICE[service].color, data: { client, initials, avatar, service }, } } return [ appt( 'a1', 'Dana Whitfield', 'DW', 'https://avatars.spaceui.one/v1?name=orion&variant=lumina', 'consultation', 9, 0, 45, ), appt('a2', 'Marco Reyes', 'MR', 'https://avatars.spaceui.one/v1?name=lyra&variant=shaula', 'followup', 11, 0, 45), appt( 'a3', 'Priya Nair', 'PN', 'https://avatars.spaceui.one/v1?name=vega&variant=singularity', 'assessment', 14, 0, 60, ), appt('a4', 'Leon Fischer', 'LF', 'https://avatars.spaceui.one/v1?name=sirius&variant=triton', 'therapy', 16, 0, 45), ] } /** Richer chip via `renderEvent`: an initials badge, the client name, and - when * the block is tall enough - the service type on a second aligned line. */ function renderChip({ occurrence, segment }: EventCalendarRenderEventProps) { const data = occurrence.event.data if (!data) return undefined const service = data.service ? SERVICE[data.service] : null const minutes = (segment.endMin ?? 0) - (segment.startMin ?? 0) return ( {data.avatar && } {data.initials} {data.client} {service && minutes >= 45 && ( {service.label} )} ) } export default function Demo() { const events = useMemo(() => buildAppointments(new Date()), []) const apiRef = useRef | null>(null) const counter = useRef(0) // Drag across an open span to book it. The calendar reports the drawn slot // but does NOT insert anything - `onSelectSlot` is where the appointment is // actually created, so real apps can open a form or hit an API here instead. const bookSlot = (slot: EventCalendarSlotDraft) => { const api = apiRef.current if (!api) return api.addEvent({ id: `appt-${counter.current++}`, title: 'New appointment', start: slot.start, end: slot.end, color: NEW_COLOR, data: { client: 'New appointment', initials: '+' }, }) } // Refuse a draw that would overlap an existing appointment - no // double-booking. Returning false cancels the create gesture. const canBook = (slot: EventCalendarSlotDraft) => { const api = apiRef.current if (!api) return true return api.findOverlapping({ start: slot.start, end: slot.end }).length === 0 } // Book the first open 45-minute slot in business hours and jump to it - the // toolbar shortcut for the same thing the drag gesture does. const addAppointment = () => { const api = apiRef.current if (!api) return const base = startOfDay(new Date()) for (let minutes = 9 * 60; minutes + 45 <= 18 * 60; minutes += 30) { const start = addMinutes(base, minutes) const end = addMinutes(start, 45) if (api.findOverlapping({ start, end }).length === 0) { api.addEvent({ id: `appt-${counter.current++}`, title: 'New appointment', start, end, color: NEW_COLOR, data: { client: 'New appointment', initials: '+' }, }) api.goTo(start) return } } } return (

{/* the switcher is on: booking lives in the day view, but the week and month give the same appointments a wider context */}

Drag across an open time to book an appointment. Slots that overlap an existing booking are blocked.

) } 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-avatar.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-05/index.tsx","content":"$51","type":"registry:component","target":"components/spaceui/event-calendar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]