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:T6681,'use client' import { IconAdjustmentsHorizontal, IconPlus } from '@tabler/icons-react' import { useMemo, useRef, useState } from 'react' import { EventCalendar, type EventCalendarApi, type EventCalendarRenderEventProps, } from '@/components/spaceui/event-calendar' import { EventCalendarContent } from '@/components/spaceui/event-calendar-content' import type { EventCalendarI18nOverrides } from '@/components/spaceui/event-calendar-i18n' import { EventCalendarNav, EventCalendarToolbar } from '@/components/spaceui/event-calendar-nav' import type { CalendarEvent, CalendarView, EventCalendarInteractions, EventCalendarResource, EventCalendarViewSettings, } from '@/components/spaceui/event-calendar-types' import { addDays, addMinutes, setHours, startOfDay, startOfWeek, type Locale } from 'date-fns' import { ar, de, es, fr, ja } from 'date-fns/locale' import { Avatar, AvatarFallback } from '@/components/ui/avatar' import { Button } from '@/components/ui/button' import { Card, CardContent } from '@/components/ui/card' import { Label } from '@/components/ui/label' import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Switch } from '@/components/ui/switch' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' /** Team members - passing resources unlocks the resource day view, so the * view switcher offers every view the calendar ships. */ const TEAM: EventCalendarResource[] = [ { id: 'alex', title: 'Alex', color: 'var(--color-blue-500)' }, { id: 'mia', title: 'Mia', color: 'var(--color-violet-500)' }, { id: 'sam', title: 'Sam', color: 'var(--color-emerald-500)' }, ] /** Demo events: a balanced current week (timed, multi-day, all-day, two * custom-rendered chips) plus a light scatter in the nearby weeks so the * month view reads naturally without crowding any cell. */ function buildEvents(anchor: Date): CalendarEvent[] { const week = startOfWeek(startOfDay(anchor), { weekStartsOn: 0 }) const at = (dayOffset: number, hour: number, minute = 0) => addMinutes(setHours(addDays(week, dayOffset), hour), minute) const day = (dayOffset: number) => addDays(week, dayOffset) return [ { id: 'team-sync', title: 'Team sync', start: at(1, 9, 0), end: at(1, 9, 30), resourceId: 'alex', }, { id: 'design-review', title: 'Design review', start: at(2, 11, 0), end: at(2, 12, 0), resourceId: 'mia', color: 'var(--color-violet-500)', }, { id: 'product-demo', title: 'Product demo', start: at(3, 15, 0), end: at(3, 16, 0), resourceId: 'sam', color: 'var(--color-emerald-500)', }, { id: 'roadmap-planning', title: 'Roadmap planning', start: at(4, 10, 0), end: at(4, 11, 30), resourceId: 'alex', color: 'var(--color-indigo-500)', }, { id: 'client-call', title: 'Client call', start: at(5, 14, 0), end: at(5, 15, 0), resourceId: 'mia', color: 'var(--color-amber-500)', }, { id: 'team-offsite', title: 'Team offsite', start: day(4), end: day(6), allDay: true, color: 'var(--color-rose-500)', }, { id: 'sprint-planning', title: 'Sprint planning', start: at(9, 9, 30), end: at(9, 10, 30), resourceId: 'sam', color: 'var(--color-blue-500)', }, { id: 'quarterly-review', title: 'Quarterly review', start: at(17, 13, 0), end: at(17, 14, 30), resourceId: 'alex', color: 'var(--color-cyan-500)', }, ] } /** * Custom chip content for a couple of events - proof that the chip is fully * yours to shape via `renderEvent`. Returning undefined for everything else * falls back to the built-in dot + title + time. */ function renderEventContent({ occurrence }: EventCalendarRenderEventProps) { const { event } = occurrence // Attendee avatars (real shadcn Avatar + AvatarFallback) in place of the // leading color dot; a thin ring-1 keeps the overlap crisp at this size. if (event.id === 'design-review') { return ( <> MJ AL {event.title} ) } // Title with a trailing status pill. The dot, title and pill share one // flex row so the leading dot stays glued to the label - a stacked // (flex-col) timed-grid chip would otherwise drop the dot onto its own line. if (event.id === 'client-call') { return ( {event.title} 30m ) } return undefined } /** * i18n presets - each language ships a date-fns `locale` (localizes every * formatted date: weekday headers, month title, time gutter) plus an `i18n` * override map for the static UI strings the locale can't reach (Today, view * names, "+N more"). Arabic also flips the whole calendar to right-to-left. * English is the built-in default, so it leaves both undefined. */ interface DemoLocale { id: string /** Native language name, shown in the picker. */ label: string locale: Locale | undefined dir: 'ltr' | 'rtl' i18n: EventCalendarI18nOverrides | undefined } const LOCALES: DemoLocale[] = [ { id: 'en', label: 'English', locale: undefined, dir: 'ltr', i18n: undefined, }, { id: 'de', label: 'Deutsch', locale: de, dir: 'ltr', i18n: { labels: { today: 'Heute', allDay: 'Ganztägig', noEvents: 'Keine Termine', more: (count) => `+${count} weitere`, }, viewNames: { month: 'Monat', week: 'Woche', day: 'Tag', days: (count) => `${count} Tage`, agenda: 'Agenda', resource: 'Zeitraster', }, }, }, { id: 'fr', label: 'Français', locale: fr, dir: 'ltr', i18n: { labels: { today: "Aujourd'hui", allDay: 'Journée entière', noEvents: 'Aucun événement', more: (count) => `+${count} autres`, }, viewNames: { month: 'Mois', week: 'Semaine', day: 'Jour', days: (count) => `${count} jours`, agenda: 'Agenda', resource: 'Grille horaire', }, }, }, { id: 'es', label: 'Español', locale: es, dir: 'ltr', i18n: { labels: { today: 'Hoy', allDay: 'Todo el día', noEvents: 'Sin eventos', more: (count) => `+${count} más`, }, viewNames: { month: 'Mes', week: 'Semana', day: 'Día', days: (count) => `${count} días`, agenda: 'Agenda', resource: 'Cuadrícula', }, }, }, { id: 'ja', label: '日本語', locale: ja, dir: 'ltr', i18n: { labels: { today: '今日', allDay: '終日', noEvents: '予定なし', more: (count) => `他${count}件`, }, viewNames: { month: '月', week: '週', day: '日', days: (count) => `${count}日間`, agenda: '予定', resource: 'タイムグリッド', }, }, }, { id: 'ar', label: 'العربية', locale: ar, dir: 'rtl', i18n: { labels: { today: 'اليوم', allDay: 'طوال اليوم', noEvents: 'لا توجد أحداث', more: (count) => `+${count} المزيد`, }, viewNames: { month: 'شهر', week: 'أسبوع', day: 'يوم', days: (count) => `${count} أيام`, agenda: 'جدول الأعمال', resource: 'شبكة زمنية', }, }, }, ] /** Display time zones - all event math and rendering happen in the chosen * zone, so switching it visibly shifts every event's clock time. */ const TIME_ZONES: Array<{ id: string; label: string; value?: string }> = [ { id: 'local', label: 'Browser' }, { id: 'ny', label: 'New York', value: 'America/New_York' }, { id: 'london', label: 'London', value: 'Europe/London' }, { id: 'tokyo', label: 'Tokyo', value: 'Asia/Tokyo' }, { id: 'kolkata', label: 'Kolkata', value: 'Asia/Kolkata' }, ] /** Everything the settings panel drives, as one resettable object. */ interface DemoSettings { viewSettings: EventCalendarViewSettings interactions: EventCalendarInteractions weekStartsOn: 0 | 1 dayStartHour: number dayEndHour: number interval: number snapDuration: number eventTooltip: boolean showDayAddButton: boolean localeId: string timeZoneId: string } const DEFAULT_SETTINGS: DemoSettings = { viewSettings: { weekends: true, weekNumbers: false, nowIndicator: true, offDays: false, }, interactions: { drag: true, resize: true, selectSlot: true }, weekStartsOn: 0, dayStartHour: 0, dayEndHour: 24, interval: 60, snapDuration: 15, eventTooltip: false, showDayAddButton: false, localeId: 'en', timeZoneId: 'local', } function SettingsSwitch({ id, label, checked, onCheckedChange, }: { id: string label: string checked: boolean onCheckedChange: (checked: boolean) => void }) { return (

{label}

) } function SettingsSelect({ id, label, value, options, onValueChange, }: { id: string label: string value: number options: Array<{ value: number; label: string }> onValueChange: (value: number) => void }) { return (

{label}

) } /** String-keyed sibling of SettingsSelect, for the language/time-zone pickers. */ function SettingsTextSelect({ id, label, value, options, onValueChange, }: { id: string label: string value: string options: Array<{ value: string; label: string }> onValueChange: (value: string) => void }) { return (

{label}

) } export default function Demo() { const events = useMemo(() => buildEvents(new Date()), []) const apiRef = useRef(null) const newEventCount = useRef(0) const [settings, setSettings] = useState(DEFAULT_SETTINGS) // Mirror the active view so the settings panel can show the time-grid // internals tab only where those options are visible (week/day/N-days and // the resource time grid - month and agenda render no hour track). const [view, setView] = useState('month') const isTimeGridView = view !== 'month' && view !== 'agenda' const activeLocale = LOCALES.find((entry) => entry.id === settings.localeId) ?? LOCALES[0] const activeTimeZone = TIME_ZONES.find((entry) => entry.id === settings.timeZoneId) ?? TIME_ZONES[0] const patch = (partial: Partial) => setSettings((current) => ({ ...current, ...partial })) // Add a one-hour event at noon today and jump to it - a minimal stand-in for // a real "create event" dialog. const addEvent = () => { const api = apiRef.current if (!api) return const start = setHours(startOfDay(new Date()), 12) const end = addMinutes(start, 60) api.addEvent({ id: `new-event-${newEventCount.current++}`, title: 'New event', start, end, resourceId: 'alex', color: 'var(--color-blue-500)', }) api.goTo(start) } return (

patch({ viewSettings })} interactions={settings.interactions} onInteractionsChange={(interactions) => patch({ interactions })} weekStartsOn={settings.weekStartsOn} dayStartHour={settings.dayStartHour} dayEndHour={settings.dayEndHour} interval={settings.interval} snapDuration={settings.snapDuration} eventTooltip={settings.eventTooltip} showDayAddButton={settings.showDayAddButton} offDays className="h-[640px] w-full" >

}> View {/* time-grid internals only exist where an hour track renders, so the tab follows the active view */} {isTimeGridView && ( Time grid )} Behavior Region patch({ viewSettings: { ...settings.viewSettings, weekends, }, }) } /> patch({ viewSettings: { ...settings.viewSettings, weekNumbers, }, }) } /> patch({ viewSettings: { ...settings.viewSettings, nowIndicator, }, }) } /> patch({ viewSettings: { ...settings.viewSettings, offDays, }, }) } /> patch({ showDayAddButton })} /> {/* week start shapes month and week grids alike, so it lives here rather than in time-grid internals */} patch({ weekStartsOn: weekStartsOn as 0 | 1 })} /> patch({ dayStartHour })} /> patch({ dayEndHour })} /> patch({ interval })} /> patch({ snapDuration })} /> patch({ interactions: { ...settings.interactions, drag }, }) } /> patch({ interactions: { ...settings.interactions, resize, }, }) } /> patch({ interactions: { ...settings.interactions, selectSlot, }, }) } /> ({ value: entry.id, label: entry.label, }))} onValueChange={(localeId) => patch({ localeId })} /> ({ value: entry.id, label: entry.label, }))} onValueChange={(timeZoneId) => patch({ timeZoneId })} />

Language switches the date-fns locale and every UI label. Time zone shifts all event times. Arabic also flips the calendar to right-to-left.

) } 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-i18n.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","https://www.spaceui.one/r/primitives-label.json","https://www.spaceui.one/r/primitives-popover.json","https://www.spaceui.one/r/primitives-select.json","https://www.spaceui.one/r/primitives-switch.json","https://www.spaceui.one/r/primitives-tabs.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/demo/components/spaceui/event-calendar/c-event-calendar-01/index.tsx","content":"$51","type":"registry:component","target":"components/spaceui/event-calendar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]