4e: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"] 4f: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"] 50:T1c6a,'use client' import { IconPalette, IconCode, IconSpeakerphone, IconCompass, IconFlag, IconPlus } from '@tabler/icons-react' import { useMemo, useRef, type ReactNode } 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 } from '@/components/spaceui/event-calendar-types' import { addDays, startOfDay, startOfWeek } from 'date-fns' import { Button } from '@/components/ui/button' import { Card, CardContent } from '@/components/ui/card' type Category = 'design' | 'engineering' | 'marketing' | 'product' /** One source of truth per track: the bar color, its legend label, and the * leading icon. IconPlaceholder props stay static string literals here (a rule * the `shadcn add` transform relies on) - the map just picks which prebuilt * element to render. */ const CATEGORY: Record = { design: { label: 'Design', color: 'var(--color-violet-500)', icon: , }, engineering: { label: 'Engineering', color: 'var(--color-sky-500)', icon: , }, marketing: { label: 'Marketing', color: 'var(--color-orange-500)', icon: , }, product: { label: 'Product', color: 'var(--color-teal-500)', icon: , }, } interface EventData { category: Category } /** A month of cross-functional work: multi-day project bars you can drag to * reschedule and resize by the edge to span more or fewer days. Anchored to * the current week so the month opens full. */ function buildEvents(anchor: Date): CalendarEvent[] { const week = startOfWeek(startOfDay(anchor), { weekStartsOn: 1 }) const day = (offset: number) => addDays(week, offset) const span = ( id: string, title: string, startOffset: number, endOffset: number, category: Category, ): CalendarEvent => ({ id, title, // all-day, end-exclusive: [startOffset, endOffset) covers whole days start: day(startOffset), end: day(endOffset), allDay: true, color: CATEGORY[category].color, data: { category }, }) return [ span('onboarding', 'Onboarding revamp', -2, 1, 'product'), span('design-sprint', 'Design sprint', 1, 4, 'design'), span('api-migration', 'API migration', 2, 6, 'engineering'), span('user-research', 'User research', 3, 5, 'product'), span('brand-refresh', 'Brand refresh', 8, 10, 'design'), span('launch', 'Launch campaign', 9, 13, 'marketing'), span('roadmap', 'Roadmap review', 15, 16, 'engineering'), ] } /** Fully custom chip via `renderEvent`: a compact single-row bar with an inline * category icon (no container) and the title. The icon and title share one * `flex items-center` row so the bar stays slim at any span. */ function renderChip({ occurrence }: EventCalendarRenderEventProps) { const category = occurrence.event.data?.category if (!category) return undefined return ( {CATEGORY[category].icon} {occurrence.event.title} ) } /** Hover tooltip: the title and its track. */ function renderTooltip({ occurrence }: { occurrence: { event: CalendarEvent } }) { const category = occurrence.event.data?.category if (!category) return undefined return (

{occurrence.event.title}

{CATEGORY[category].label}

) } export default function Demo() { const events = useMemo(() => buildEvents(new Date()), []) const apiRef = useRef | null>(null) const counter = useRef(0) // Add a multi-day design project starting today and jump to it - a minimal // stand-in for a real "new project" flow. const addProject = () => { const api = apiRef.current if (!api) return const start = startOfDay(new Date()) api.addEvent({ id: `project-${counter.current++}`, title: 'New project', start, end: addDays(start, 3), allDay: true, color: CATEGORY.design.color, data: { category: 'design' }, }) api.goTo(start) } // Add a single-day product milestone today. const addMilestone = () => { const api = apiRef.current if (!api) return const start = startOfDay(new Date()) api.addEvent({ id: `milestone-${counter.current++}`, title: 'Milestone', start, end: addDays(start, 1), allDay: true, color: CATEGORY.product.color, data: { category: 'product' }, }) api.goTo(start) } return (

{/* Track legend - runtime var(--color-*) swatches ride inline styles rather than synthesized utility classes. */}

{(Object.keys(CATEGORY) as Category[]).map((key) => ( {CATEGORY[key].label} ))}

) } 4d:["$","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"}]]}]}]]}],["$","$L4e",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]}],["$","$L4f",null,{"files":[{"path":"src/registry/demo/components/spaceui/event-calendar/c-event-calendar-04/index.tsx","content":"$50","type":"registry:component","target":"components/spaceui/event-calendar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]