{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-event-calendar-1","type":"registry:block","title":"Event calendar with all views and live settings","description":"Event calendar with all views and live settings","dependencies":["date-fns"],"registryDependencies":["avatar","button","card","@reui/event-calendar","@reui/event-calendar-content","@reui/event-calendar-i18n","@reui/event-calendar-nav","@reui/event-calendar-types","label","popover","select","switch","tabs"],"files":[{"path":"c-event-calendar-1.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useMemo, useRef, useState } from \"react\"\nimport {\n  EventCalendar,\n  type EventCalendarApi,\n  type EventCalendarRenderEventProps,\n} from \"@/components/reui/event-calendar/event-calendar\"\nimport { EventCalendarContent } from \"@/components/reui/event-calendar/event-calendar-content\"\nimport type { EventCalendarI18nOverrides } from \"@/components/reui/event-calendar/event-calendar-i18n\"\nimport {\n  EventCalendarNav,\n  EventCalendarToolbar,\n} from \"@/components/reui/event-calendar/event-calendar-nav\"\nimport type {\n  CalendarEvent,\n  CalendarView,\n  EventCalendarInteractions,\n  EventCalendarResource,\n  EventCalendarViewSettings,\n} from \"@/components/reui/event-calendar/event-calendar-types\"\nimport {\n  addDays,\n  addMinutes,\n  setHours,\n  startOfDay,\n  startOfWeek,\n  type Locale,\n} from \"date-fns\"\nimport { ar, de, es, fr, ja } from \"date-fns/locale\"\n\nimport { Avatar, AvatarFallback } from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Switch } from \"@/components/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/components/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n/** Team members - passing resources unlocks the resource day view, so the\n *  view switcher offers every view the calendar ships. */\nconst TEAM: EventCalendarResource[] = [\n  { id: \"alex\", title: \"Alex\", color: \"var(--color-blue-500)\" },\n  { id: \"mia\", title: \"Mia\", color: \"var(--color-violet-500)\" },\n  { id: \"sam\", title: \"Sam\", color: \"var(--color-emerald-500)\" },\n]\n\n/** Demo events: a balanced current week (timed, multi-day, all-day, two\n *  custom-rendered chips) plus a light scatter in the nearby weeks so the\n *  month view reads naturally without crowding any cell. */\nfunction buildEvents(anchor: Date): CalendarEvent[] {\n  const week = startOfWeek(startOfDay(anchor), { weekStartsOn: 0 })\n  const at = (dayOffset: number, hour: number, minute = 0) =>\n    addMinutes(setHours(addDays(week, dayOffset), hour), minute)\n  const day = (dayOffset: number) => addDays(week, dayOffset)\n\n  return [\n    {\n      id: \"team-sync\",\n      title: \"Team sync\",\n      start: at(1, 9, 0),\n      end: at(1, 9, 30),\n      resourceId: \"alex\",\n    },\n    {\n      id: \"design-review\",\n      title: \"Design review\",\n      start: at(2, 11, 0),\n      end: at(2, 12, 0),\n      resourceId: \"mia\",\n      color: \"var(--color-violet-500)\",\n    },\n    {\n      id: \"product-demo\",\n      title: \"Product demo\",\n      start: at(3, 15, 0),\n      end: at(3, 16, 0),\n      resourceId: \"sam\",\n      color: \"var(--color-emerald-500)\",\n    },\n    {\n      id: \"roadmap-planning\",\n      title: \"Roadmap planning\",\n      start: at(4, 10, 0),\n      end: at(4, 11, 30),\n      resourceId: \"alex\",\n      color: \"var(--color-indigo-500)\",\n    },\n    {\n      id: \"client-call\",\n      title: \"Client call\",\n      start: at(5, 14, 0),\n      end: at(5, 15, 0),\n      resourceId: \"mia\",\n      color: \"var(--color-amber-500)\",\n    },\n    {\n      id: \"team-offsite\",\n      title: \"Team offsite\",\n      start: day(4),\n      end: day(6),\n      allDay: true,\n      color: \"var(--color-rose-500)\",\n    },\n    {\n      id: \"sprint-planning\",\n      title: \"Sprint planning\",\n      start: at(9, 9, 30),\n      end: at(9, 10, 30),\n      resourceId: \"sam\",\n      color: \"var(--color-blue-500)\",\n    },\n    {\n      id: \"quarterly-review\",\n      title: \"Quarterly review\",\n      start: at(17, 13, 0),\n      end: at(17, 14, 30),\n      resourceId: \"alex\",\n      color: \"var(--color-cyan-500)\",\n    },\n  ]\n}\n\n/**\n * Custom chip content for a couple of events - proof that the chip is fully\n * yours to shape via `renderEvent`. Returning undefined for everything else\n * falls back to the built-in dot + title + time.\n */\nfunction renderEventContent({ occurrence }: EventCalendarRenderEventProps) {\n  const { event } = occurrence\n\n  // Attendee avatars (real shadcn Avatar + AvatarFallback) in place of the\n  // leading color dot; a thin ring-1 keeps the overlap crisp at this size.\n  if (event.id === \"design-review\") {\n    return (\n      <>\n        <span className=\"flex shrink-0 -space-x-1\">\n          <Avatar className=\"ring-background size-4 ring-1\">\n            <AvatarFallback className=\"bg-violet-500 text-[8px] font-semibold text-white\">\n              MJ\n            </AvatarFallback>\n          </Avatar>\n          <Avatar className=\"ring-background size-4 ring-1\">\n            <AvatarFallback className=\"bg-sky-500 text-[8px] font-semibold text-white\">\n              AL\n            </AvatarFallback>\n          </Avatar>\n        </span>\n        <span className=\"truncate font-medium\">{event.title}</span>\n      </>\n    )\n  }\n\n  // Title with a trailing status pill. The dot, title and pill share one\n  // flex row so the leading dot stays glued to the label - a stacked\n  // (flex-col) timed-grid chip would otherwise drop the dot onto its own line.\n  if (event.id === \"client-call\") {\n    return (\n      <span className=\"flex w-full min-w-0 items-center gap-1.5\">\n        <span\n          aria-hidden\n          className=\"-me-0.5 size-1.5 shrink-0 rounded-full bg-(--ec-event-color)\"\n        />\n        <span className=\"truncate font-medium\">{event.title}</span>\n        <span className=\"ms-auto shrink-0 rounded bg-(--ec-event-color)/25 px-1 text-[10px] font-semibold\">\n          30m\n        </span>\n      </span>\n    )\n  }\n\n  return undefined\n}\n\n/**\n * i18n presets - each language ships a date-fns `locale` (localizes every\n * formatted date: weekday headers, month title, time gutter) plus an `i18n`\n * override map for the static UI strings the locale can't reach (Today, view\n * names, \"+N more\"). Arabic also flips the whole calendar to right-to-left.\n * English is the built-in default, so it leaves both undefined.\n */\ninterface DemoLocale {\n  id: string\n  /** Native language name, shown in the picker. */\n  label: string\n  locale: Locale | undefined\n  dir: \"ltr\" | \"rtl\"\n  i18n: EventCalendarI18nOverrides | undefined\n}\n\nconst LOCALES: DemoLocale[] = [\n  {\n    id: \"en\",\n    label: \"English\",\n    locale: undefined,\n    dir: \"ltr\",\n    i18n: undefined,\n  },\n  {\n    id: \"de\",\n    label: \"Deutsch\",\n    locale: de,\n    dir: \"ltr\",\n    i18n: {\n      labels: {\n        today: \"Heute\",\n        allDay: \"Ganztägig\",\n        noEvents: \"Keine Termine\",\n        more: (count) => `+${count} weitere`,\n      },\n      viewNames: {\n        month: \"Monat\",\n        week: \"Woche\",\n        day: \"Tag\",\n        days: (count) => `${count} Tage`,\n        agenda: \"Agenda\",\n        resource: \"Zeitraster\",\n      },\n    },\n  },\n  {\n    id: \"fr\",\n    label: \"Français\",\n    locale: fr,\n    dir: \"ltr\",\n    i18n: {\n      labels: {\n        today: \"Aujourd'hui\",\n        allDay: \"Journée entière\",\n        noEvents: \"Aucun événement\",\n        more: (count) => `+${count} autres`,\n      },\n      viewNames: {\n        month: \"Mois\",\n        week: \"Semaine\",\n        day: \"Jour\",\n        days: (count) => `${count} jours`,\n        agenda: \"Agenda\",\n        resource: \"Grille horaire\",\n      },\n    },\n  },\n  {\n    id: \"es\",\n    label: \"Español\",\n    locale: es,\n    dir: \"ltr\",\n    i18n: {\n      labels: {\n        today: \"Hoy\",\n        allDay: \"Todo el día\",\n        noEvents: \"Sin eventos\",\n        more: (count) => `+${count} más`,\n      },\n      viewNames: {\n        month: \"Mes\",\n        week: \"Semana\",\n        day: \"Día\",\n        days: (count) => `${count} días`,\n        agenda: \"Agenda\",\n        resource: \"Cuadrícula\",\n      },\n    },\n  },\n  {\n    id: \"ja\",\n    label: \"日本語\",\n    locale: ja,\n    dir: \"ltr\",\n    i18n: {\n      labels: {\n        today: \"今日\",\n        allDay: \"終日\",\n        noEvents: \"予定なし\",\n        more: (count) => `他${count}件`,\n      },\n      viewNames: {\n        month: \"月\",\n        week: \"週\",\n        day: \"日\",\n        days: (count) => `${count}日間`,\n        agenda: \"予定\",\n        resource: \"タイムグリッド\",\n      },\n    },\n  },\n  {\n    id: \"ar\",\n    label: \"العربية\",\n    locale: ar,\n    dir: \"rtl\",\n    i18n: {\n      labels: {\n        today: \"اليوم\",\n        allDay: \"طوال اليوم\",\n        noEvents: \"لا توجد أحداث\",\n        more: (count) => `+${count} المزيد`,\n      },\n      viewNames: {\n        month: \"شهر\",\n        week: \"أسبوع\",\n        day: \"يوم\",\n        days: (count) => `${count} أيام`,\n        agenda: \"جدول الأعمال\",\n        resource: \"شبكة زمنية\",\n      },\n    },\n  },\n]\n\n/** Display time zones - all event math and rendering happen in the chosen\n *  zone, so switching it visibly shifts every event's clock time. */\nconst TIME_ZONES: Array<{ id: string; label: string; value?: string }> = [\n  { id: \"local\", label: \"Browser\" },\n  { id: \"ny\", label: \"New York\", value: \"America/New_York\" },\n  { id: \"london\", label: \"London\", value: \"Europe/London\" },\n  { id: \"tokyo\", label: \"Tokyo\", value: \"Asia/Tokyo\" },\n  { id: \"kolkata\", label: \"Kolkata\", value: \"Asia/Kolkata\" },\n]\n\n/** Everything the settings panel drives, as one resettable object. */\ninterface DemoSettings {\n  viewSettings: EventCalendarViewSettings\n  interactions: EventCalendarInteractions\n  weekStartsOn: 0 | 1\n  dayStartHour: number\n  dayEndHour: number\n  interval: number\n  snapDuration: number\n  eventTooltip: boolean\n  showDayAddButton: boolean\n  localeId: string\n  timeZoneId: string\n}\n\nconst DEFAULT_SETTINGS: DemoSettings = {\n  viewSettings: {\n    weekends: true,\n    weekNumbers: false,\n    nowIndicator: true,\n    offDays: false,\n  },\n  interactions: { drag: true, resize: true, selectSlot: true },\n  weekStartsOn: 0,\n  dayStartHour: 0,\n  dayEndHour: 24,\n  interval: 60,\n  snapDuration: 15,\n  eventTooltip: false,\n  showDayAddButton: false,\n  localeId: \"en\",\n  timeZoneId: \"local\",\n}\n\nfunction SettingsSwitch({\n  id,\n  label,\n  checked,\n  onCheckedChange,\n}: {\n  id: string\n  label: string\n  checked: boolean\n  onCheckedChange: (checked: boolean) => void\n}) {\n  return (\n    <div className=\"flex items-center justify-between gap-4\">\n      <Label htmlFor={id} className=\"font-normal\">\n        {label}\n      </Label>\n      <Switch id={id} checked={checked} onCheckedChange={onCheckedChange} />\n    </div>\n  )\n}\n\nfunction SettingsSelect({\n  id,\n  label,\n  value,\n  options,\n  onValueChange,\n}: {\n  id: string\n  label: string\n  value: number\n  options: Array<{ value: number; label: string }>\n  onValueChange: (value: number) => void\n}) {\n  return (\n    <div className=\"flex items-center justify-between gap-4\">\n      <Label htmlFor={id} className=\"font-normal\">\n        {label}\n      </Label>\n      <Select\n        value={String(value)}\n        onValueChange={(next) => onValueChange(Number(next))}\n      >\n        <SelectTrigger id={id} size=\"sm\" className=\"w-28\">\n          {/* Base UI's Value renders the raw value string by default; the\n              selected option's label reads better for every control here. */}\n          <SelectValue>\n            {options.find((option) => option.value === value)?.label}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          {options.map((option) => (\n            <SelectItem key={option.value} value={String(option.value)}>\n              {option.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    </div>\n  )\n}\n\n/** String-keyed sibling of SettingsSelect, for the language/time-zone pickers. */\nfunction SettingsTextSelect({\n  id,\n  label,\n  value,\n  options,\n  onValueChange,\n}: {\n  id: string\n  label: string\n  value: string\n  options: Array<{ value: string; label: string }>\n  onValueChange: (value: string) => void\n}) {\n  return (\n    <div className=\"flex items-center justify-between gap-4\">\n      <Label htmlFor={id} className=\"font-normal\">\n        {label}\n      </Label>\n      <Select value={value} onValueChange={onValueChange}>\n        <SelectTrigger id={id} size=\"sm\" className=\"w-36\">\n          {/* Base UI's Value renders the raw value string by default; the\n              selected option's label reads better for every control here. */}\n          <SelectValue>\n            {options.find((option) => option.value === value)?.label}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          {options.map((option) => (\n            <SelectItem key={option.value} value={option.value}>\n              {option.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    </div>\n  )\n}\n\nexport function Pattern() {\n  const events = useMemo(() => buildEvents(new Date()), [])\n  const apiRef = useRef<EventCalendarApi | null>(null)\n  const newEventCount = useRef(0)\n  const [settings, setSettings] = useState<DemoSettings>(DEFAULT_SETTINGS)\n  // Mirror the active view so the settings panel can show the time-grid\n  // internals tab only where those options are visible (week/day/N-days and\n  // the resource time grid - month and agenda render no hour track).\n  const [view, setView] = useState<CalendarView>(\"month\")\n  const isTimeGridView = view !== \"month\" && view !== \"agenda\"\n\n  const activeLocale =\n    LOCALES.find((entry) => entry.id === settings.localeId) ?? LOCALES[0]\n  const activeTimeZone =\n    TIME_ZONES.find((entry) => entry.id === settings.timeZoneId) ??\n    TIME_ZONES[0]\n\n  const patch = (partial: Partial<DemoSettings>) =>\n    setSettings((current) => ({ ...current, ...partial }))\n\n  // Add a one-hour event at noon today and jump to it - a minimal stand-in for\n  // a real \"create event\" dialog.\n  const addEvent = () => {\n    const api = apiRef.current\n    if (!api) return\n    const start = setHours(startOfDay(new Date()), 12)\n    const end = addMinutes(start, 60)\n    api.addEvent({\n      id: `new-event-${newEventCount.current++}`,\n      title: \"New event\",\n      start,\n      end,\n      resourceId: \"alex\",\n      color: \"var(--color-blue-500)\",\n    })\n    api.goTo(start)\n  }\n\n  return (\n    <div className=\"w-full p-4\" dir={activeLocale.dir}>\n      <Card className=\"w-full py-0\">\n        <CardContent className=\"p-0\">\n          <EventCalendar\n            defaultEvents={events}\n            defaultView=\"month\"\n            onViewChange={setView}\n            resources={TEAM}\n            apiRef={apiRef}\n            renderEvent={renderEventContent}\n            locale={activeLocale.locale}\n            i18n={activeLocale.i18n}\n            timeZone={activeTimeZone.value}\n            viewSettings={settings.viewSettings}\n            onViewSettingsChange={(viewSettings) => patch({ viewSettings })}\n            interactions={settings.interactions}\n            onInteractionsChange={(interactions) => patch({ interactions })}\n            weekStartsOn={settings.weekStartsOn}\n            dayStartHour={settings.dayStartHour}\n            dayEndHour={settings.dayEndHour}\n            interval={settings.interval}\n            snapDuration={settings.snapDuration}\n            eventTooltip={settings.eventTooltip}\n            showDayAddButton={settings.showDayAddButton}\n            offDays\n            className=\"h-[640px] w-full\"\n          >\n            <div className=\"flex flex-wrap items-center gap-2 pe-2\">\n              <EventCalendarNav className=\"min-w-0 flex-1\" />\n              <EventCalendarToolbar>\n                <Popover>\n                  <PopoverTrigger\n                    render={<Button variant=\"outline\" size=\"sm\" />}\n                  >\n                    <IconPlaceholder\n                      lucide=\"Settings2Icon\"\n                      tabler=\"IconAdjustmentsHorizontal\"\n                      hugeicons=\"SlidersHorizontalIcon\"\n                      phosphor=\"SlidersHorizontalIcon\"\n                      remixicon=\"RiEqualizer2Line\"\n                      className=\"size-4\"\n                      aria-hidden=\"true\"\n                    />\n                    Settings\n                  </PopoverTrigger>\n                  <PopoverContent align=\"end\" sideOffset={8} className=\"w-80\">\n                    <Tabs defaultValue=\"view\">\n                      <TabsList className=\"w-full\">\n                        <TabsTrigger value=\"view\" className=\"flex-1\">\n                          View\n                        </TabsTrigger>\n                        {/* time-grid internals only exist where an hour track\n                            renders, so the tab follows the active view */}\n                        {isTimeGridView && (\n                          <TabsTrigger value=\"time\" className=\"flex-1\">\n                            Time grid\n                          </TabsTrigger>\n                        )}\n                        <TabsTrigger value=\"behavior\" className=\"flex-1\">\n                          Behavior\n                        </TabsTrigger>\n                        <TabsTrigger value=\"region\" className=\"flex-1\">\n                          Region\n                        </TabsTrigger>\n                      </TabsList>\n                      <TabsContent value=\"view\" className=\"flex flex-col gap-3\">\n                        <SettingsSwitch\n                          id=\"ec-set-weekends\"\n                          label=\"Weekends\"\n                          checked={settings.viewSettings.weekends ?? true}\n                          onCheckedChange={(weekends) =>\n                            patch({\n                              viewSettings: {\n                                ...settings.viewSettings,\n                                weekends,\n                              },\n                            })\n                          }\n                        />\n                        <SettingsSwitch\n                          id=\"ec-set-week-numbers\"\n                          label=\"Week numbers\"\n                          checked={settings.viewSettings.weekNumbers ?? false}\n                          onCheckedChange={(weekNumbers) =>\n                            patch({\n                              viewSettings: {\n                                ...settings.viewSettings,\n                                weekNumbers,\n                              },\n                            })\n                          }\n                        />\n                        <SettingsSwitch\n                          id=\"ec-set-now\"\n                          label=\"Now indicator\"\n                          checked={settings.viewSettings.nowIndicator ?? true}\n                          onCheckedChange={(nowIndicator) =>\n                            patch({\n                              viewSettings: {\n                                ...settings.viewSettings,\n                                nowIndicator,\n                              },\n                            })\n                          }\n                        />\n                        <SettingsSwitch\n                          id=\"ec-set-off-days\"\n                          label=\"Mark off days\"\n                          checked={settings.viewSettings.offDays ?? false}\n                          onCheckedChange={(offDays) =>\n                            patch({\n                              viewSettings: {\n                                ...settings.viewSettings,\n                                offDays,\n                              },\n                            })\n                          }\n                        />\n                        <SettingsSwitch\n                          id=\"ec-set-day-add\"\n                          label=\"Day add button\"\n                          checked={settings.showDayAddButton}\n                          onCheckedChange={(showDayAddButton) =>\n                            patch({ showDayAddButton })\n                          }\n                        />\n                        {/* week start shapes month and week grids alike, so\n                            it lives here rather than in time-grid internals */}\n                        <SettingsSelect\n                          id=\"ec-set-week-start\"\n                          label=\"Week starts\"\n                          value={settings.weekStartsOn}\n                          options={[\n                            { value: 0, label: \"Sunday\" },\n                            { value: 1, label: \"Monday\" },\n                          ]}\n                          onValueChange={(weekStartsOn) =>\n                            patch({ weekStartsOn: weekStartsOn as 0 | 1 })\n                          }\n                        />\n                      </TabsContent>\n                      <TabsContent value=\"time\" className=\"flex flex-col gap-3\">\n                        <SettingsSelect\n                          id=\"ec-set-day-start\"\n                          label=\"Day starts\"\n                          value={settings.dayStartHour}\n                          options={[\n                            { value: 0, label: \"00:00\" },\n                            { value: 6, label: \"06:00\" },\n                            { value: 8, label: \"08:00\" },\n                          ]}\n                          onValueChange={(dayStartHour) =>\n                            patch({ dayStartHour })\n                          }\n                        />\n                        <SettingsSelect\n                          id=\"ec-set-day-end\"\n                          label=\"Day ends\"\n                          value={settings.dayEndHour}\n                          options={[\n                            { value: 18, label: \"18:00\" },\n                            { value: 20, label: \"20:00\" },\n                            { value: 24, label: \"24:00\" },\n                          ]}\n                          onValueChange={(dayEndHour) => patch({ dayEndHour })}\n                        />\n                        <SettingsSelect\n                          id=\"ec-set-interval\"\n                          label=\"Grid interval\"\n                          value={settings.interval}\n                          options={[\n                            { value: 30, label: \"30 min\" },\n                            { value: 60, label: \"60 min\" },\n                          ]}\n                          onValueChange={(interval) => patch({ interval })}\n                        />\n                        <SettingsSelect\n                          id=\"ec-set-snap\"\n                          label=\"Drag snap\"\n                          value={settings.snapDuration}\n                          options={[\n                            { value: 5, label: \"5 min\" },\n                            { value: 15, label: \"15 min\" },\n                            { value: 30, label: \"30 min\" },\n                          ]}\n                          onValueChange={(snapDuration) =>\n                            patch({ snapDuration })\n                          }\n                        />\n                      </TabsContent>\n                      <TabsContent\n                        value=\"behavior\"\n                        className=\"flex flex-col gap-3\"\n                      >\n                        <SettingsSwitch\n                          id=\"ec-set-drag\"\n                          label=\"Drag to move\"\n                          checked={settings.interactions.drag}\n                          onCheckedChange={(drag) =>\n                            patch({\n                              interactions: { ...settings.interactions, drag },\n                            })\n                          }\n                        />\n                        <SettingsSwitch\n                          id=\"ec-set-resize\"\n                          label=\"Drag to resize\"\n                          checked={settings.interactions.resize}\n                          onCheckedChange={(resize) =>\n                            patch({\n                              interactions: {\n                                ...settings.interactions,\n                                resize,\n                              },\n                            })\n                          }\n                        />\n                        <SettingsSwitch\n                          id=\"ec-set-select-slot\"\n                          label=\"Drag to create\"\n                          checked={settings.interactions.selectSlot}\n                          onCheckedChange={(selectSlot) =>\n                            patch({\n                              interactions: {\n                                ...settings.interactions,\n                                selectSlot,\n                              },\n                            })\n                          }\n                        />\n                        <SettingsSwitch\n                          id=\"ec-set-tooltip\"\n                          label=\"Event tooltips\"\n                          checked={settings.eventTooltip}\n                          onCheckedChange={(eventTooltip) =>\n                            patch({ eventTooltip })\n                          }\n                        />\n                      </TabsContent>\n                      <TabsContent\n                        value=\"region\"\n                        className=\"flex flex-col gap-3\"\n                      >\n                        <SettingsTextSelect\n                          id=\"ec-set-language\"\n                          label=\"Language\"\n                          value={settings.localeId}\n                          options={LOCALES.map((entry) => ({\n                            value: entry.id,\n                            label: entry.label,\n                          }))}\n                          onValueChange={(localeId) => patch({ localeId })}\n                        />\n                        <SettingsTextSelect\n                          id=\"ec-set-timezone\"\n                          label=\"Time zone\"\n                          value={settings.timeZoneId}\n                          options={TIME_ZONES.map((entry) => ({\n                            value: entry.id,\n                            label: entry.label,\n                          }))}\n                          onValueChange={(timeZoneId) => patch({ timeZoneId })}\n                        />\n                        <p className=\"text-muted-foreground text-xs leading-relaxed\">\n                          Language switches the date-fns locale and every UI\n                          label. Time zone shifts all event times. Arabic also\n                          flips the calendar to right-to-left.\n                        </p>\n                      </TabsContent>\n                    </Tabs>\n                    <Button\n                      variant=\"outline\"\n                      size=\"sm\"\n                      className=\"mt-4 w-full\"\n                      onClick={() => setSettings(DEFAULT_SETTINGS)}\n                    >\n                      Reset to defaults\n                    </Button>\n                  </PopoverContent>\n                </Popover>\n                <Button size=\"sm\" onClick={addEvent}>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                    aria-hidden=\"true\"\n                  />\n                  New event\n                </Button>\n              </EventCalendarToolbar>\n            </div>\n            <EventCalendarContent />\n          </EventCalendar>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}","target":"components/examples/c-event-calendar-1.tsx"}],"meta":{"order":1,"gridSize":1,"label":"All Views"}}