{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "monarch-event-calendar",
  "title": "EventCalendar (Monarch)",
  "description": "A standard event calendar in the Monarch theme-flavor",
  "dependencies": [
    "@fullcalendar/react@^7.1.0",
    "lucide-react",
    "temporal-polyfill@^1.0.1"
  ],
  "registryDependencies": [
    "button",
    "tabs"
  ],
  "type": "registry:block",
  "files": [
    {
      "type": "registry:block",
      "path": "registry/blocks/event-calendar-demo.tsx",
      "content": "import { EventCalendar } from '@/registry/components/event-calendar'\n\nexport function EventCalendarDemo() {\n  return (\n    <EventCalendar\n      className='max-w-300 my-10 mx-auto'\n      editable\n      selectable\n      nowIndicator\n      navLinks\n      timeZone='UTC'\n      events='https://fullcalendar.io/api/demo-feeds/events.json'\n      addButton={{\n        text: 'Add Event',\n        click() {\n          alert('add event...')\n        }\n      }}\n    />\n  )\n}\n"
    },
    {
      "type": "registry:component",
      "path": "registry/components/event-calendar.tsx",
      "content": "import { type CalendarOptions, useCalendarController } from '@fullcalendar/react'\nimport dayGridPlugin from '@fullcalendar/react/daygrid'\nimport interactionPlugin from '@fullcalendar/react/interaction'\nimport listPlugin from '@fullcalendar/react/list'\nimport multiMonthPlugin from '@fullcalendar/react/multimonth'\nimport timeGridPlugin from '@fullcalendar/react/timegrid'\nimport { EventCalendarToolbar } from '@/registry/components/event-calendar-toolbar'\nimport { EventCalendarViews } from '@/registry/ui/event-calendar-views'\nimport { EventCalendarCloseIcon } from '@/registry/components/event-calendar-icons'\nimport { cn } from '@/lib/utils'\n\nconst plugins = [\n  dayGridPlugin,\n  timeGridPlugin,\n  listPlugin,\n  interactionPlugin,\n  multiMonthPlugin,\n]\nconst defaultAvailableViews = [\n  'dayGridMonth',\n  'timeGridWeek',\n  'timeGridDay',\n  'listWeek',\n  'multiMonthYear',\n]\nconst navLinkDayClick = 'timeGridDay'\nconst navLinkWeekClick = 'timeGridWeek'\n\nexport interface EventCalendarProps extends Omit<CalendarOptions, 'class' | 'className' | 'headerToolbar' | 'footerToolbar'> {\n  className?: string\n  availableViews?: string[]\n  addButton?: {\n    isPrimary?: boolean\n    text?: string\n    hint?: string\n    click?: (ev: MouseEvent) => void\n  }\n}\n\nexport function EventCalendar({\n  availableViews = defaultAvailableViews,\n  addButton,\n  className,\n  height,\n  contentHeight,\n  direction,\n  plugins: userPlugins = [],\n  ...restOptions\n}: EventCalendarProps) {\n  const controller = useCalendarController()\n\n  const hasBorderX = !(restOptions.borderlessX ?? restOptions.borderless)\n  const hasBorderTop = !(restOptions.borderlessTop ?? restOptions.borderless)\n  const hasBorderBottom = !(restOptions.borderlessBottom ?? restOptions.borderless)\n  const isHeightAuto = height === 'auto' || contentHeight === 'auto'\n\n  return (\n    <div\n      className={cn(\n        className,\n        'flex flex-col bg-background',\n        hasBorderX && 'border-x',\n        hasBorderTop && 'border-t',\n        hasBorderBottom && 'border-b',\n        (hasBorderTop && hasBorderX) && 'rounded-t-lg',\n        (hasBorderBottom && hasBorderX) && 'rounded-b-lg',\n        !isHeightAuto && 'overflow-hidden',\n      )}\n      style={{ height }}\n      dir={direction === 'rtl' ? 'rtl' : undefined}\n    >\n      <EventCalendarToolbar\n        className='p-4'\n        controller={controller}\n        availableViews={availableViews}\n        addButton={addButton}\n      />\n      <div className='grow min-h-0'>\n        <EventCalendarViews\n          controller={controller}\n          height={isHeightAuto ? 'auto' : height !== undefined ? '100%' : contentHeight}\n          initialView={availableViews[0]}\n          navLinkDayClick={navLinkDayClick}\n          navLinkWeekClick={navLinkWeekClick}\n          plugins={[...plugins, ...userPlugins]}\n          popoverCloseContent={() => (\n            <EventCalendarCloseIcon />\n          )}\n          {...restOptions}\n        />\n      </div>\n    </div>\n  )\n}\n"
    },
    {
      "type": "registry:component",
      "path": "registry/components/event-calendar-toolbar.tsx",
      "content": "import { CalendarController } from '@fullcalendar/react'\nimport { EventCalendarNextIcon, EventCalendarPrevIcon } from '@/registry/components/event-calendar-icons'\nimport { Button } from '@/components/ui/button'\nimport { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'\nimport { cn } from '@/lib/utils'\n\nexport interface EventCalendarToolbarProps {\n  className?: string\n  controller: CalendarController\n  availableViews: string[]\n  addButton?: {\n    isPrimary?: boolean\n    text?: string\n    hint?: string\n    click?: (ev: MouseEvent) => void\n  }\n}\n\nexport function EventCalendarToolbar({\n  className,\n  controller,\n  availableViews,\n  addButton,\n}: EventCalendarToolbarProps) {\n  const buttons = controller.getButtonState()\n\n  return (\n    <div className={cn('flex items-center justify-between flex-wrap gap-3', className)}>\n      <div className='flex items-center shrink-0 gap-3'>\n        {addButton && (\n          <Button\n            onClick={addButton.click as any}\n            aria-label={addButton.hint}\n          >{addButton.text}</Button>\n        )}\n        <Button\n          onClick={() => controller.today()}\n          aria-label={buttons.today.hint}\n          variant='outline'\n        >{buttons.today.text}</Button>\n        <div className='flex items-center'>\n          <Button\n            onClick={() => controller.prev()}\n            disabled={buttons.prev.isDisabled}\n            aria-label={buttons.prev.hint}\n            variant='ghost'\n            size='icon'\n          >\n            <EventCalendarPrevIcon />\n          </Button>\n          <Button\n            onClick={() => controller.next()}\n            disabled={buttons.next.isDisabled}\n            aria-label={buttons.next.hint}\n            variant='ghost'\n            size='icon'\n          >\n            <EventCalendarNextIcon />\n          </Button>\n        </div>\n        <div className='text-xl'>{controller.view?.title}</div>\n      </div>\n      <Tabs value={controller.view?.type ?? availableViews[0]}>\n        <TabsList>\n          {availableViews.map((availableView) => (\n            <TabsTrigger\n              key={availableView}\n              value={availableView}\n              onClick={() => controller.changeView(availableView)}\n              aria-label={buttons[availableView]?.hint}\n            >{buttons[availableView]?.text}</TabsTrigger>\n          ))}\n        </TabsList>\n      </Tabs>\n    </div>\n  )\n}\n"
    },
    {
      "type": "registry:component",
      "path": "registry/components/event-calendar-icons.tsx",
      "content": "import { ChevronDownIcon, XIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\nimport { cn } from '@/lib/utils'\n\nexport function EventCalendarPrevIcon() {\n  return (\n    <ChevronLeftIcon className='[[dir=rtl]_&]:rotate-180' />\n  )\n}\n\nexport function EventCalendarNextIcon() {\n  return (\n    <ChevronRightIcon className='[[dir=rtl]_&]:rotate-180' />\n  )\n}\n\nconst hoverIconClassName = 'text-muted-foreground group-hover:text-foreground group-focus-visible:text-foreground'\n\nexport function EventCalendarCloseIcon() {\n  return (\n    <XIcon className={`size-5 ${hoverIconClassName}`} />\n  )\n}\n\nexport function EventCalendarExpanderIcon(props: { isExpanded: boolean }) {\n  return (\n    <ChevronDownIcon\n      className={cn(\n        `size-4 m-px ${hoverIconClassName}`,\n        !props.isExpanded && '-rotate-90 [[dir=rtl]_&]:rotate-90'\n      )}\n    />\n  )\n}\n"
    },
    {
      "type": "registry:ui",
      "path": "registry/ui/event-calendar-views.tsx",
      "content": "import FullCalendar, { type CalendarOptions, type DayCellInfo } from '@fullcalendar/react'\nimport '@fullcalendar/react/skeleton.css'\nimport { cn } from '@/lib/utils'\n\nconst xxsTextClass = 'text-[0.6875rem]/[1.090909]'\n\nconst blockPointerResizerClass = 'absolute hidden group-hover:block'\nconst rowPointerResizerClass = `${blockPointerResizerClass} inset-y-0 w-2`\nconst columnPointerResizerClass = `${blockPointerResizerClass} inset-x-0 h-2`\n\nconst blockTouchResizerClass = 'absolute size-2 border border-(--fc-event-color) bg-background rounded-full'\nconst rowTouchResizerClass = `${blockTouchResizerClass} top-1/2 -mt-1`\nconst columnTouchResizerClass = `${blockTouchResizerClass} left-1/2 -ml-1`\n\nconst tallDayCellBottomClass = 'min-h-4'\nconst getShortDayCellBottomClass = (info: DayCellInfo) => cn(\n  !info.isNarrow && 'min-h-px'\n)\n\nconst dayRowCommonClasses: CalendarOptions = {\n\n  /* Day Row > List-Item Event\n  ----------------------------------------------------------------------------------------------- */\n\n  listItemEventClass: (info) => cn(\n    'mb-px p-px rounded-sm',\n    info.isNarrow ? 'mx-px' : 'mx-0.5',\n  ),\n  listItemEventBeforeClass: (info) => cn(\n    'border-4',\n    info.isNarrow ? 'ms-0.5' : 'ms-1',\n  ),\n  listItemEventInnerClass: (info) => (\n    info.isNarrow\n      ? `py-px ${xxsTextClass}`\n      : 'py-0.5 text-xs'\n  ),\n  listItemEventTimeClass: (info) => cn(\n    info.isNarrow ? 'ps-0.5' : 'ps-1',\n    'whitespace-nowrap overflow-hidden shrink-1',\n  ),\n  listItemEventTitleClass: (info) => cn(\n    info.isNarrow ? 'px-0.5' : 'px-1',\n    'font-bold whitespace-nowrap overflow-hidden shrink-100',\n  ),\n\n  /* Day Row > Row Event\n  ----------------------------------------------------------------------------------------------- */\n\n  rowEventClass: (info) => cn(\n    info.isStart && 'ms-px',\n    info.isEnd && 'me-px',\n  ),\n  rowEventInnerClass: (info) => cn(info.isNarrow ? 'py-px' : 'py-0.5'),\n\n  /* Day Row > More-Link\n  ----------------------------------------------------------------------------------------------- */\n\n  rowMoreLinkClass: (info) => cn(\n    'mb-px border rounded-sm hover:bg-foreground/5',\n    info.isNarrow\n      ? 'mx-px border-primary'\n      : 'mx-0.5 border-transparent',\n  ),\n  rowMoreLinkInnerClass: (info) => (\n    info.isNarrow\n      ? `px-0.5 py-px ${xxsTextClass}`\n      : 'px-1 py-0.5 text-xs'\n  ),\n}\n\nexport type EventCalendarViewProps =\n  CalendarOptions &\n  Required<Pick<CalendarOptions, 'popoverCloseContent'>> // ensure callers define icons\n\nexport function EventCalendarViews({\n  views: userViews,\n  ...restOptions\n}: EventCalendarViewProps) {\n  return (\n    <FullCalendar\n\n      /* Abstract Event\n      ----------------------------------------------------------------------------------------- */\n\n      eventShortHeight={50}\n      eventColor='var(--primary)'\n      eventContrastColor='var(--primary-foreground)'\n      eventClass={(info) => cn(\n        info.isSelected\n          ? ['outline-3', info.isDragging ? 'shadow-lg' : 'shadow-md']\n          : 'focus-visible:outline-3',\n        'outline-ring/50',\n      )}\n\n      /* Background Event\n      ----------------------------------------------------------------------------------------- */\n\n      backgroundEventColor='var(--chart-3)'\n      backgroundEventClass='not-print:bg-[color-mix(in_oklab,var(--fc-event-color)_10%,transparent)] print:border-1 print:border-(--fc-event-color)'\n      backgroundEventTitleClass={(info) => cn(\n        'opacity-50 italic',\n        info.isNarrow\n          ? `px-1 py-1.5 ${xxsTextClass}`\n          : 'px-2 py-2.5 text-xs',\n      )}\n\n      /* List-Item Event\n      ----------------------------------------------------------------------------------------- */\n\n      listItemEventClass={(info) => cn(\n        'items-center',\n        info.isSelected\n          ? 'bg-foreground/5'\n          : 'hover:bg-foreground/5',\n      )}\n      listItemEventBeforeClass='rounded-full border-(--fc-event-color)'\n      listItemEventInnerClass='flex flex-row items-center'\n\n      /* Block Event\n      ----------------------------------------------------------------------------------------- */\n\n      blockEventClass={(info) => cn(\n        'group relative border-transparent print:border-(--fc-event-color) bg-(--fc-event-color) hover:bg-[color-mix(in_oklab,var(--fc-event-color)_92%,var(--fc-event-contrast-color))] print:bg-white',\n        info.isInteractive && 'active:bg-[color-mix(in_oklab,var(--fc-event-color)_85%,var(--fc-event-contrast-color))]',\n        (!info.isSelected && info.isDragging) && 'opacity-75',\n      )}\n      blockEventInnerClass='text-(--fc-event-contrast-color) print:text-black'\n      blockEventTimeClass='whitespace-nowrap overflow-hidden'\n      blockEventTitleClass='whitespace-nowrap overflow-hidden'\n\n      /* Row Event\n      ----------------------------------------------------------------------------------------- */\n\n      rowEventClass={(info) => cn(\n        'mb-px border-y',\n        info.isStart ? 'border-s rounded-s-sm' : (!info.isNarrow && 'ms-2'),\n        info.isEnd ? 'border-e rounded-e-sm' : (!info.isNarrow && 'me-2'),\n      )}\n      rowEventBeforeClass={(info) => (\n        info.isStartResizable\n          ? cn(\n              info.isSelected ? rowTouchResizerClass : rowPointerResizerClass,\n              '-start-1',\n            )\n          : (!info.isStart && !info.isNarrow) ? 'absolute -start-2 w-2 -top-px -bottom-px' : ''\n      )}\n      rowEventBeforeContent={(info) => (\n        (!info.isStart && !info.isNarrow) ? filledRightTriangle(\n          'size-full rotate-180 [[dir=rtl]_&]:rotate-0 text-(--fc-event-color)',\n        ) : <></> // HACK for React vdom\n      )}\n      rowEventAfterClass={(info) => (\n        info.isEndResizable\n          ? cn(\n              info.isSelected ? rowTouchResizerClass : rowPointerResizerClass,\n              '-end-1',\n            )\n          : (!info.isEnd && !info.isNarrow) ? 'absolute -end-2 w-2 -top-px -bottom-px' : ''\n      )}\n      rowEventAfterContent={(info) => (\n        (!info.isEnd && !info.isNarrow) ? filledRightTriangle(\n          'size-full [[dir=rtl]_&]:rotate-180 text-(--fc-event-color)',\n        ) : <></> // HACK for React vdom\n      )}\n      rowEventInnerClass={(info) => cn(\n        'flex flex-row items-center',\n        info.isNarrow ? xxsTextClass : 'text-xs',\n      )}\n      rowEventTimeClass={(info) => cn(\n        'font-bold shrink-1',\n        info.isNarrow ? 'ps-0.5' : 'ps-1',\n      )}\n      rowEventTitleClass={(info) => cn(\n        'shrink-100',\n        info.isNarrow ? 'px-0.5' : 'px-1',\n      )}\n\n      /* Column Event\n      ----------------------------------------------------------------------------------------- */\n\n      columnEventTitleSticky={false}\n      columnEventClass={(info) => cn(\n        'border-x ring ring-background',\n        info.isStart && 'border-t rounded-t-sm',\n        info.isEnd && 'mb-px border-b rounded-b-sm',\n      )}\n      columnEventBeforeClass={(info) => cn(\n        info.isStartResizable && [\n          info.isSelected ? columnTouchResizerClass : columnPointerResizerClass,\n          '-top-1',\n        ]\n      )}\n      columnEventAfterClass={(info) => cn(\n        info.isEndResizable && [\n          info.isSelected ? columnTouchResizerClass : columnPointerResizerClass,\n          '-bottom-1',\n        ]\n      )}\n      columnEventInnerClass={(info) => cn(\n        'flex',\n        info.isShort\n          ? 'flex-row items-center p-1 gap-1'\n          : ['flex-col', info.isNarrow ? 'px-1 py-0.5' : 'px-2 py-1'],\n        (info.isShort || info.isNarrow) ? xxsTextClass : 'text-xs',\n      )}\n      columnEventTimeClass={(info) => cn(\n        'order-1 shrink-100',\n        !info.isShort && (info.isNarrow ? 'pb-0.5' : 'pb-1'),\n      )}\n      columnEventTitleClass={(info) => cn(\n        'shrink-1',\n        !info.isShort && (info.isNarrow ? 'py-0.5' : 'py-1'),\n      )}\n\n      /* More-Link\n      ----------------------------------------------------------------------------------------- */\n\n      moreLinkClass=\"focus-visible:outline-3 outline-ring/50\"\n      moreLinkInnerClass='whitespace-nowrap overflow-hidden'\n      columnMoreLinkClass=\"mb-px border border-transparent print:border-black rounded-sm bg-[color-mix(in_oklab,var(--foreground)_10%,var(--background))] hover:bg-[color-mix(in_oklab,var(--foreground)_13%,var(--background))] print:bg-white ring ring-background\"\n      columnMoreLinkInnerClass={(info) => (\n        info.isNarrow\n          ? `p-0.5 ${xxsTextClass}`\n          : 'p-1 text-xs'\n      )}\n\n      /* Day Header\n      ----------------------------------------------------------------------------------------- */\n\n      dayHeaderAlign='center'\n      dayHeaderClass={(info) => cn(\n        'justify-center',\n        info.isMajor && 'border border-foreground/20',\n        (info.isDisabled && !info.inPopover) && 'bg-foreground/3',\n      )}\n      dayHeaderInnerClass='group mt-2 mx-2 flex flex-col items-center outline-none'\n      dayHeaderContent={(info) => (\n        <>\n          {info.weekdayText && (\n            <div className=\"text-xs uppercase text-muted-foreground\">{info.weekdayText}</div>\n          )}\n          {info.dayNumberText && (\n            <div\n              className={cn(\n                'm-0.5 rounded-full flex flex-row items-center justify-center',\n                info.isNarrow\n                  ? 'size-7 text-base'\n                  : 'size-8 text-lg',\n                info.isToday\n                  ? [\n                      'bg-chart-1/50',\n                      info.hasNavLink && 'group-hover:bg-chart-1/60',\n                    ]\n                  : (info.hasNavLink && 'group-hover:bg-foreground/5'),\n                info.hasNavLink && 'group-focus-visible:outline-3 outline-ring/50',\n              )}\n            >{info.dayNumberText}</div>\n          )}\n        </>\n      )}\n\n      /* Day Cell\n      ----------------------------------------------------------------------------------------- */\n\n      dayCellClass={(info) => cn(\n        'border',\n        info.isMajor && 'border-foreground/20',\n        info.isDisabled && 'bg-foreground/3',\n      )}\n      dayCellTopClass={(info) => cn(\n        'flex flex-row',\n        info.isNarrow\n          ? 'justify-end min-h-px'\n          : 'justify-center min-h-0.5',\n      )}\n      dayCellTopInnerClass={(info) => cn(\n        'flex flex-row items-center justify-center whitespace-nowrap rounded-full',\n        info.isNarrow\n          ? `m-px h-5 ${xxsTextClass}`\n          : 'm-1.5 h-6 text-sm',\n        info.text === info.dayNumberText\n          ? (info.isNarrow ? 'w-5' : 'w-6')\n          : (info.isNarrow ? 'px-1' : 'px-2'),\n        info.isToday\n          ? [\n              'bg-chart-1/50',\n              info.hasNavLink && 'hover:bg-chart-1/60 focus-visible:outline-3 outline-ring/50',\n            ]\n          : (info.hasNavLink && 'hover:bg-foreground/5'),\n        info.isOther && 'text-muted-foreground',\n        info.monthText && 'font-bold',\n      )}\n      dayCellInnerClass={(info) => cn(info.inPopover && 'p-2')}\n\n      /* Popover\n      ----------------------------------------------------------------------------------------- */\n\n      popoverFormat={{ day: 'numeric', weekday: 'short' }}\n      popoverClass='border rounded-md overflow-hidden shadow-lg m-1 bg-popover text-popover-foreground min-w-60'\n      popoverCloseClass=\"group absolute top-2 end-2 size-8 rounded-full items-center justify-center hover:bg-foreground/5 focus-visible:outline-3 outline-ring/50\"\n\n      /* Lane\n      ----------------------------------------------------------------------------------------- */\n\n      dayLaneClass={(info) => cn(\n        'border',\n        info.isMajor && 'border-foreground/20',\n        info.isDisabled && 'bg-foreground/3',\n      )}\n      dayLaneInnerClass={(info) => (\n        info.isStack\n          ? 'm-1'\n          : info.isNarrow ? 'mx-px' : 'ms-0.5 me-[2.5%]'\n      )}\n      slotLaneClass={(info) => cn(\n        'border',\n        info.isMinor && 'border-dotted',\n      )}\n\n      /* List Day\n      ----------------------------------------------------------------------------------------- */\n\n      listDayFormat={{ day: 'numeric' }}\n      listDayAltFormat={{ month: 'short', weekday: 'short', forceCommas: true }}\n      listDayClass={(info) => cn(\n        !info.isLast && 'border-b',\n        'flex flex-row items-start',\n      )}\n      listDayHeaderClass='p-2 shrink-0 w-1/3 max-w-44 min-h-9 flex flex-row items-center gap-2'\n      listDayHeaderInnerClass={(info) => cn(\n        !info.level\n          ? [\n              'h-9 rounded-full flex flex-row items-center text-lg',\n              info.text === info.dayNumberText\n                ? 'w-9 justify-center'\n                : 'px-3',\n              info.isToday\n                ? [\n                    'bg-chart-1/50',\n                    info.hasNavLink && 'hover:bg-chart-1/60 focus-visible:outline-3 outline-ring/50',\n                  ]\n                : (info.hasNavLink && 'hover:bg-foreground/5')\n            ]\n          : [\n              'text-xs uppercase',\n              info.hasNavLink && 'hover:underline',\n            ]\n      )}\n      listDayBodyClass='grow min-w-0 py-2 gap-1'\n\n      /* Single Month (in Multi-Month)\n      ----------------------------------------------------------------------------------------- */\n\n      singleMonthClass={(info) => cn(\n        info.multiMonthColumns > 1 && 'm-4',\n        (info.multiMonthColumns === 1 && !info.isLast) && 'border-b',\n      )}\n      singleMonthHeaderClass={(info) => cn(\n        info.multiMonthColumns > 1\n          ? 'pb-2'\n          : 'py-1 border-b bg-background',\n        'items-center',\n      )}\n      singleMonthHeaderInnerClass={(info) => cn(\n        'px-3 py-1 rounded-full text-base font-bold',\n        info.hasNavLink && 'hover:bg-foreground/5',\n      )}\n\n      /* Misc Table\n      ----------------------------------------------------------------------------------------- */\n\n      tableHeaderClass='bg-background'\n      fillerClass={(info) => cn(\n        'opacity-50 border',\n        info.inTableHeader && 'border-transparent',\n      )}\n      dayNarrowWidth={100}\n      dayHeaderRowClass='border'\n      dayRowClass='border'\n\n      /* Misc Content\n      ----------------------------------------------------------------------------------------- */\n\n      navLinkClass=\"focus-visible:outline-3 outline-ring/50\"\n      inlineWeekNumberClass={(info) => cn(\n        'absolute flex flex-row items-center whitespace-nowrap bg-foreground/10',\n        info.isNarrow\n          ? `top-0.5 start-0 my-px h-4 pe-1 rounded-e-full ${xxsTextClass}`\n          : 'top-1.5 start-1 h-6 px-2 rounded-full text-sm',\n        info.hasNavLink && 'hover:bg-foreground/20 focus-visible:outline-3 outline-ring/50',\n      )}\n      nonBusinessHoursClass='bg-foreground/3'\n      highlightClass='bg-chart-1/20'\n      nowIndicatorLineClass='-m-px border-1 border-destructive'\n      nowIndicatorDotClass=\"-m-[6px] border-6 border-destructive size-0 rounded-full ring-2 ring-background\"\n\n      /* View-Specific Options\n      ----------------------------------------------------------------------------------------- */\n\n      views={{\n        ...userViews,\n        dayGrid: {\n          ...dayRowCommonClasses,\n          dayCellBottomClass: getShortDayCellBottomClass,\n          ...userViews?.dayGrid,\n        },\n        multiMonth: {\n          ...dayRowCommonClasses,\n          dayCellBottomClass: getShortDayCellBottomClass,\n          tableBodyClass: (info) => cn(\n            info.multiMonthColumns > 1 && 'border rounded-sm overflow-hidden',\n          ),\n          dayHeaderInnerClass: (info) => cn(!info.inPopover && 'mb-2'),\n          dayHeaderDividerClass: (info) => cn(\n            info.multiMonthColumns === 1 && 'border-b',\n          ),\n          ...userViews?.multiMonth,\n        },\n        timeGrid: {\n          ...dayRowCommonClasses,\n          dayCellBottomClass: tallDayCellBottomClass,\n\n          /* TimeGrid > Week Number Header\n          ------------------------------------------------------------------------------------- */\n\n          weekNumberHeaderClass: 'items-center justify-end',\n          weekNumberHeaderInnerClass: (info) => cn(\n            'ms-1 my-2 flex flex-row items-center rounded-full bg-foreground/10',\n            info.options.dayMinWidth !== undefined && 'me-1',\n            info.isNarrow\n              ? 'h-5 px-1.5 text-xs'\n              : 'h-6 px-2 text-sm',\n            info.hasNavLink && 'hover:bg-foreground/20 focus-visible:outline-3 outline-ring/50',\n          ),\n\n          /* TimeGrid > All-Day Header\n          ------------------------------------------------------------------------------------- */\n\n          allDayHeaderClass: 'items-center justify-end',\n          allDayHeaderInnerClass: (info) => cn(\n            'm-2 text-end',\n            info.isNarrow ? xxsTextClass : 'text-sm',\n          ),\n          allDayDividerClass: 'border-b',\n\n          /* TimeGrid > Slot Header\n          ------------------------------------------------------------------------------------- */\n\n          slotHeaderClass: (info) => cn(\n            'w-2 self-end justify-end',\n            'border',\n            info.isMinor && 'border-dotted',\n          ),\n          slotHeaderInnerClass: (info) => cn(\n            'relative ms-2 me-3 my-2',\n            info.isNarrow\n              ? `-top-4 ${xxsTextClass}`\n              : '-top-5 text-sm',\n            info.isFirst && 'hidden',\n          ),\n          slotHeaderDividerClass: (info) => cn(\n            'border-e',\n            (info.inTableHeader && info.options.dayMinWidth === undefined) && 'border-transparent',\n          ),\n\n          ...userViews?.timeGrid,\n        },\n        list: {\n\n          /* List-View > List-Item Event\n          ------------------------------------------------------------------------------------- */\n\n          listItemEventClass: 'group p-2 rounded-s-full gap-2',\n          listItemEventBeforeClass: 'mx-2 border-5',\n          listItemEventInnerClass: 'gap-2 text-sm',\n          listItemEventTimeClass: 'shrink-0 w-1/2 max-w-40 whitespace-nowrap overflow-hidden text-ellipsis',\n          listItemEventTitleClass: (info) => cn(\n            'grow min-w-0 whitespace-nowrap overflow-hidden',\n            info.event.url && 'group-hover:underline',\n          ),\n\n          /* No-Events Screen\n          ------------------------------------------------------------------------------------- */\n\n          noEventsClass: 'grow flex flex-col items-center justify-center',\n          noEventsInnerClass: 'py-15',\n\n          ...userViews?.list,\n        },\n      }}\n\n      {...restOptions}\n    />\n  )\n}\n\n/* SVGs\n------------------------------------------------------------------------------------------------- */\n\nfunction filledRightTriangle(className?: string) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 800 2200\"\n      preserveAspectRatio=\"none\"\n      className={className}\n     >\n      <polygon points=\"0,0 66,0 800,1100 66,2200 0,2200\" fill=\"currentColor\" />\n    </svg>\n  )\n}\n"
    }
  ]
}