nuxt-ui-elements-pro 0.1.0

package/dist/runtime/components/EventCalendar.vue

@@ -0,0 +1,646 @@
+<script>
+import theme from "#build/ui-elements-pro/event-calendar";
+import { toCalendarDate } from "@internationalized/date";
+import { computed, ref, onMounted, onBeforeUnmount } from "vue";
+import { tv } from "../utils/tv";
+import { hasTimeComponent, layoutTimedEvents } from "../utils/event-calendar";
+import { useEventCalendarDragDrop } from "../composables/useEventCalendarDragDrop";
+import {
+  today,
+  startOf,
+  add,
+  subtract,
+  format,
+  isSameMonth,
+  isToday as checkIsToday,
+  isWeekend as checkIsWeekend,
+  asCalendarDate,
+  asCalendarDateTime,
+  getLocalTimeZone,
+  getWeekStartLocale
+} from "#std/date";
+</script>
+
+<script setup>
+const {
+  events = [],
+  view = "month",
+  locale = "en-US",
+  weekStartsOn = 0,
+  editable = true,
+  color = "primary",
+  monthOptions: monthOpts,
+  weekOptions: weekOpts,
+  dayOptions: dayOpts,
+  ui: propUi,
+  ...props
+} = defineProps({
+  events: { type: Array, required: false },
+  modelValue: { type: null, required: false },
+  view: { type: String, required: false },
+  locale: { type: String, required: false },
+  weekStartsOn: { type: Number, required: false },
+  editable: { type: Boolean, required: false },
+  color: { type: null, required: false },
+  monthOptions: { type: Object, required: false },
+  weekOptions: { type: Object, required: false },
+  dayOptions: { type: Object, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue", "update:view", "dateClick", "eventClick", "eventDrop"]);
+defineSlots();
+const monthConfig = computed(() => ({
+  maxEvents: monthOpts?.maxEvents ?? 3,
+  fixedWeeks: monthOpts?.fixedWeeks ?? true
+}));
+const weekConfig = computed(() => ({
+  startHour: weekOpts?.startHour ?? 7,
+  endHour: weekOpts?.endHour ?? 22,
+  slotDuration: weekOpts?.slotDuration ?? 30
+}));
+const dayConfig = computed(() => ({
+  startHour: dayOpts?.startHour ?? 7,
+  endHour: dayOpts?.endHour ?? 22,
+  slotDuration: dayOpts?.slotDuration ?? 30
+}));
+const ui = computed(
+  () => tv({
+    extend: tv(theme)
+  })({
+    color
+  })
+);
+const displayDate = computed(() => {
+  if (props.modelValue) {
+    return asCalendarDate(props.modelValue);
+  }
+  return today();
+});
+const weekLocale = computed(() => getWeekStartLocale(weekStartsOn));
+function goToPrev() {
+  let target;
+  if (view === "month") {
+    target = startOf(subtract(displayDate.value, 1, "month"), "month");
+  } else if (view === "week") {
+    target = asCalendarDate(subtract(displayDate.value, 1, "week"));
+  } else {
+    target = asCalendarDate(subtract(displayDate.value, 1, "day"));
+  }
+  emit("update:modelValue", target);
+}
+function goToNext() {
+  let target;
+  if (view === "month") {
+    target = startOf(add(displayDate.value, 1, "month"), "month");
+  } else if (view === "week") {
+    target = asCalendarDate(add(displayDate.value, 1, "week"));
+  } else {
+    target = asCalendarDate(add(displayDate.value, 1, "day"));
+  }
+  emit("update:modelValue", target);
+}
+function goToToday() {
+  emit("update:modelValue", today());
+}
+function setView(v) {
+  emit("update:view", v);
+}
+const headerTitle = computed(() => {
+  if (view === "month") {
+    return format(displayDate.value, "MMMM YYYY", locale);
+  }
+  if (view === "week") {
+    const weekStart = startOf(displayDate.value, "week", weekLocale.value);
+    const weekEnd = asCalendarDate(add(weekStart, 6, "day"));
+    if (weekStart.month === weekEnd.month) {
+      return `${format(weekStart, "MMM D", locale)} \u2013 ${format(weekEnd, "D, YYYY", locale)}`;
+    }
+    return `${format(weekStart, "MMM D", locale)} \u2013 ${format(weekEnd, "MMM D, YYYY", locale)}`;
+  }
+  return format(displayDate.value, "dddd, MMMM D, YYYY", locale);
+});
+function parseDateInput(input) {
+  if (typeof input === "object" && "calendar" in input) {
+    return input;
+  }
+  if (input instanceof Date) {
+    const iso = input.toISOString();
+    if (iso.endsWith("T00:00:00.000Z")) {
+      return asCalendarDate(input);
+    }
+    return asCalendarDateTime(input);
+  }
+  if (typeof input === "string") {
+    if (input.includes("T") || input.includes(" ")) {
+      try {
+        return asCalendarDateTime(input);
+      } catch {
+        return asCalendarDate(input);
+      }
+    }
+    return asCalendarDate(input);
+  }
+  return today();
+}
+const normalizedEvents = computed(() => {
+  return events.map((event) => {
+    const start = parseDateInput(event.start);
+    const end = event.end ? parseDateInput(event.end) : start;
+    const allDay = event.allDay ?? !hasTimeComponent(start);
+    return {
+      id: event.id,
+      title: event.title,
+      start,
+      end,
+      color: event.color ?? "primary",
+      allDay,
+      draggable: event.draggable ?? true,
+      original: event
+    };
+  });
+});
+const eventsByDate = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const event of normalizedEvents.value) {
+    const startDate = toCalendarDate(event.start);
+    const endDate = toCalendarDate(event.end);
+    let current = startDate;
+    while (current.compare(endDate) <= 0) {
+      const key = current.toString();
+      const existing = map.get(key) ?? [];
+      existing.push(event);
+      map.set(key, existing);
+      current = asCalendarDate(add(current, 1, "day"));
+    }
+  }
+  return map;
+});
+function getEventsForDate(date) {
+  return eventsByDate.value.get(date.toString()) ?? [];
+}
+const weekdayLabels = computed(() => {
+  const labels = [];
+  const refSunday = asCalendarDate("2025-01-05");
+  for (let i = 0; i < 7; i++) {
+    const day = asCalendarDate(add(refSunday, i + weekStartsOn, "day"));
+    labels.push(format(day, "ddd", locale));
+  }
+  return labels;
+});
+const monthWeeks = computed(() => {
+  const monthStart = startOf(displayDate.value, "month");
+  const gridStart = startOf(monthStart, "week", weekLocale.value);
+  const rowCount = monthConfig.value.fixedWeeks ? 6 : 5;
+  const result = [];
+  let current = gridStart;
+  for (let week = 0; week < rowCount; week++) {
+    const days = [];
+    for (let day = 0; day < 7; day++) {
+      const date = asCalendarDate(current);
+      days.push({
+        date,
+        isCurrentMonth: isSameMonth(date, monthStart),
+        isToday: checkIsToday(date, getLocalTimeZone()),
+        isWeekend: checkIsWeekend(date, weekLocale.value),
+        events: getEventsForDate(date)
+      });
+      current = asCalendarDate(add(current, 1, "day"));
+    }
+    result.push({ days });
+  }
+  return result;
+});
+const weekDays = computed(() => {
+  const weekStart = startOf(displayDate.value, "week", weekLocale.value);
+  const days = [];
+  for (let i = 0; i < 7; i++) {
+    const date = asCalendarDate(add(weekStart, i, "day"));
+    days.push({
+      date,
+      isCurrentMonth: true,
+      isToday: checkIsToday(date, getLocalTimeZone()),
+      isWeekend: checkIsWeekend(date, weekLocale.value),
+      events: getEventsForDate(date)
+    });
+  }
+  return days;
+});
+const dayViewDate = computed(() => {
+  const date = asCalendarDate(displayDate.value);
+  return {
+    date,
+    isCurrentMonth: true,
+    isToday: checkIsToday(date, getLocalTimeZone()),
+    isWeekend: checkIsWeekend(date, weekLocale.value),
+    events: getEventsForDate(date)
+  };
+});
+function generateTimeSlots(startHour, endHour, slotDuration) {
+  const slots = [];
+  const totalMinutes = (endHour - startHour) * 60;
+  for (let m = 0; m < totalMinutes; m += slotDuration) {
+    const hour = startHour + Math.floor(m / 60);
+    const minute = m % 60;
+    const h12 = hour % 12 || 12;
+    const ampm = hour >= 12 ? "pm" : "am";
+    const label = minute === 0 ? `${h12}${ampm}` : "";
+    slots.push({ hour, minute, label });
+  }
+  return slots;
+}
+const weekTimeSlots = computed(
+  () => generateTimeSlots(weekConfig.value.startHour, weekConfig.value.endHour, weekConfig.value.slotDuration)
+);
+const dayTimeSlots = computed(
+  () => generateTimeSlots(dayConfig.value.startHour, dayConfig.value.endHour, dayConfig.value.slotDuration)
+);
+const SLOT_HEIGHT = 48;
+const timeGridDays = computed(() => {
+  if (view !== "week" && view !== "day") return [];
+  const days = view === "week" ? weekDays.value : [dayViewDate.value];
+  const config = view === "week" ? weekConfig.value : dayConfig.value;
+  return days.map((day) => ({
+    ...day,
+    dateKey: day.date.toString(),
+    allDayEvents: day.events.filter((e) => e.allDay || !hasTimeComponent(e.start)),
+    timedEvents: layoutTimedEvents(getEventsForDate(day.date), config, SLOT_HEIGHT)
+  }));
+});
+const timeGridSlots = computed(() => {
+  if (view === "week") return weekTimeSlots.value;
+  if (view === "day") return dayTimeSlots.value;
+  return [];
+});
+function formatTime(d) {
+  if (!hasTimeComponent(d)) return "";
+  const dt = d;
+  const h12 = dt.hour % 12 || 12;
+  const ampm = dt.hour >= 12 ? "pm" : "am";
+  const min = dt.minute > 0 ? `:${String(dt.minute).padStart(2, "0")}` : "";
+  return `${h12}${min}${ampm}`;
+}
+function getEventStyle(event, bgOpacity = 10) {
+  const c = event.color;
+  const cssVar = c === "neutral" ? "var(--ui-bg-inverted)" : `var(--ui-${c})`;
+  return {
+    "--event-color": cssVar,
+    backgroundColor: `color-mix(in oklch, ${cssVar} ${bgOpacity}%, transparent)`
+  };
+}
+function isEventStart(event, date) {
+  const startDate = toCalendarDate(event.start);
+  return date.compare(startDate) === 0;
+}
+function handleDateClick(day) {
+  emit("dateClick", day.date);
+}
+function handleEventClick(event, e) {
+  e.stopPropagation();
+  emit("eventClick", event.original);
+}
+const expandedDay = ref(null);
+function openExpandDay(dateKey, e) {
+  e.stopPropagation();
+  expandedDay.value = dateKey;
+}
+function closeExpandDay() {
+  expandedDay.value = null;
+}
+function isExpanded(dateKey) {
+  return expandedDay.value === dateKey;
+}
+onMounted(() => {
+  document.addEventListener("click", closeExpandDay);
+});
+onBeforeUnmount(() => {
+  document.removeEventListener("click", closeExpandDay);
+});
+const {
+  draggedEventId,
+  dropTargetKey,
+  dragSnapSlot,
+  onDragStart,
+  onDragEnd,
+  onDragOver,
+  onDragLeave,
+  onTimeGridDragOver,
+  onSlotDragOver,
+  onDropMonthCell,
+  onDropTimeGrid
+} = useEventCalendarDragDrop({
+  editable: () => editable,
+  normalizedEvents,
+  onEventDrop: (payload) => emit("eventDrop", payload)
+});
+</script>
+
+<template>
+  <div data-slot="root" :class="ui.root({ class: propUi?.root })">
+    <!-- Header -->
+    <slot
+      name="header"
+      :title="headerTitle"
+      :prev="goToPrev"
+      :next="goToNext"
+      :today="goToToday"
+      :current-date="displayDate"
+      :view="view"
+      :set-view="setView">
+      <div data-slot="header" :class="ui.header({ class: propUi?.header })">
+        <span data-slot="headerTitle" :class="ui.headerTitle({ class: propUi?.headerTitle })">
+          {{ headerTitle }}
+        </span>
+
+        <div data-slot="headerActions" :class="ui.headerActions({ class: propUi?.headerActions })">
+          <!-- View switcher -->
+          <div data-slot="viewSwitcher" :class="ui.viewSwitcher({ class: propUi?.viewSwitcher })">
+            <UButton
+              v-for="v in ['month', 'week', 'day']"
+              :key="v"
+              :label="v"
+              size="xs"
+              :color="view === v ? color : 'neutral'"
+              :variant="view === v ? 'subtle' : 'ghost'"
+              class="capitalize"
+              @click="setView(v)" />
+          </div>
+
+          <UButton icon="i-lucide-chevron-left" color="neutral" variant="ghost" size="xs" square @click="goToPrev" />
+          <UButton label="Today" color="neutral" variant="ghost" size="xs" @click="goToToday" />
+          <UButton icon="i-lucide-chevron-right" color="neutral" variant="ghost" size="xs" square @click="goToNext" />
+        </div>
+      </div>
+    </slot>
+
+    <!-- ── Month View ──────────────────────────────────────────────── -->
+    <template v-if="view === 'month'">
+      <!-- Weekday headers -->
+      <div data-slot="weekdayRow" :class="ui.weekdayRow({ class: propUi?.weekdayRow })">
+        <div
+          v-for="(day, index) in weekdayLabels"
+          :key="day"
+          data-slot="weekdayCell"
+          :class="ui.weekdayCell({ class: propUi?.weekdayCell })">
+          <slot name="day-header" :day="day" :index="index">
+            {{ day }}
+          </slot>
+        </div>
+      </div>
+
+      <!-- Month grid -->
+      <div data-slot="monthBody" :class="ui.monthBody({ class: propUi?.monthBody })">
+        <template v-for="week in monthWeeks" :key="week.days[0].date.toString()">
+          <div
+            v-for="day in week.days"
+            :key="day.date.toString()"
+            data-slot="dayCell"
+            :class="[
+  ui.dayCell({ class: propUi?.dayCell }),
+  !day.isCurrentMonth && ui.dayCellOutside({ class: propUi?.dayCellOutside }),
+  dropTargetKey === `month-${day.date.toString()}` && ui.dropTarget({ class: propUi?.dropTarget }),
+  isExpanded(day.date.toString()) && 'relative z-10'
+]"
+            @click="handleDateClick(day)"
+            @dragover="onDragOver(`month-${day.date.toString()}`, $event)"
+            @dragleave="onDragLeave"
+            @drop="onDropMonthCell(day.date, $event)">
+            <slot name="day" :day="day">
+              <!-- Day number -->
+              <div
+                data-slot="dayNumber"
+                :class="[
+  !day.isToday && ui.dayNumber({ class: propUi?.dayNumber }),
+  day.isToday && ui.dayNumberToday({ class: propUi?.dayNumberToday }),
+  !day.isCurrentMonth && !day.isToday && ui.dayNumberOutside({ class: propUi?.dayNumberOutside })
+]">
+                {{ day.date.day }}
+              </div>
+
+              <!-- Event chips -->
+              <div data-slot="eventList" :class="ui.eventList({ class: propUi?.eventList })">
+                <template v-for="(event, idx) in day.events" :key="event.id">
+                  <div
+                    v-if="idx < monthConfig.maxEvents"
+                    data-slot="eventChip"
+                    :draggable="editable && event.draggable && isEventStart(event, day.date)"
+                    :class="[ui.eventChip({ class: propUi?.eventChip }), !isEventStart(event, day.date) && 'border-l-0!']"
+                    :style="getEventStyle(event)"
+                    @click="handleEventClick(event, $event)"
+                    @dragstart="onDragStart(event, $event)"
+                    @dragend="onDragEnd">
+                    <slot name="event" :event="event.original" :view="view">
+                      <template v-if="isEventStart(event, day.date)">
+                        <span v-if="!event.allDay" data-slot="eventTime" :class="ui.eventTime({ class: propUi?.eventTime })">{{
+                          formatTime(event.start)
+                        }}</span>
+                        {{ event.title }}
+                      </template>
+                      <span v-else class="opacity-0">{{ event.title }}</span>
+                    </slot>
+                  </div>
+                </template>
+
+                <!-- "+N more" trigger -->
+                <div
+                  v-if="day.events.length > monthConfig.maxEvents"
+                  data-slot="moreEvents"
+                  :class="ui.moreEvents({ class: propUi?.moreEvents })"
+                  @click="openExpandDay(day.date.toString(), $event)">
+                  <slot
+                    name="more-events"
+                    :events="day.events.slice(monthConfig.maxEvents).map((e) => e.original)"
+                    :count="day.events.length - monthConfig.maxEvents"
+                    :day="day">
+                    +{{ day.events.length - monthConfig.maxEvents }} more
+                  </slot>
+                </div>
+              </div>
+
+              <!-- Expanded overlay with ALL events -->
+              <div
+                v-if="isExpanded(day.date.toString()) && day.events.length > monthConfig.maxEvents"
+                data-slot="expandedOverlay"
+                :class="ui.expandedOverlay({ class: propUi?.expandedOverlay })"
+                @click.stop>
+                <div
+                  data-slot="dayNumber"
+                  :class="[
+  !day.isToday && ui.dayNumber({ class: propUi?.dayNumber }),
+  day.isToday && ui.dayNumberToday({ class: propUi?.dayNumberToday })
+]">
+                  {{ day.date.day }}
+                </div>
+                <div data-slot="eventList" :class="ui.eventList({ class: propUi?.eventList })">
+                  <div
+                    v-for="event in day.events"
+                    :key="`expanded-${event.id}`"
+                    data-slot="eventChip"
+                    :draggable="editable && event.draggable"
+                    :class="ui.eventChip({ class: propUi?.eventChip })"
+                    :style="getEventStyle(event)"
+                    @click="handleEventClick(event, $event)"
+                    @dragstart="onDragStart(event, $event)"
+                    @dragend="onDragEnd">
+                    <slot name="event" :event="event.original" :view="view">
+                      <span v-if="!event.allDay" data-slot="eventTime" :class="ui.eventTime({ class: propUi?.eventTime })">{{
+                        formatTime(event.start)
+                      }}</span
+                      >{{ event.title }}
+                    </slot>
+                  </div>
+                </div>
+              </div>
+            </slot>
+          </div>
+        </template>
+      </div>
+    </template>
+
+    <!-- ── Week / Day View (unified) ───────────────────────────────── -->
+    <template v-else-if="view === 'week' || view === 'day'">
+      <!-- Column headers -->
+      <div data-slot="columnHeaders" :class="ui.columnHeaders({ class: propUi?.columnHeaders })">
+        <div data-slot="timeGutterSpacer" :class="ui.timeGutterSpacer({ class: propUi?.timeGutterSpacer })" />
+        <div
+          v-for="day in timeGridDays"
+          :key="day.dateKey"
+          data-slot="dayColumnHeader"
+          :class="ui.dayColumnHeader({ class: propUi?.dayColumnHeader })">
+          <div :class="ui.dayColumnHeaderLabel({ class: propUi?.dayColumnHeaderLabel })">
+            {{ format(day.date, timeGridDays.length === 1 ? "dddd" : "ddd", locale) }}
+          </div>
+          <div
+            :class="[
+  day.isToday ? ui.dayColumnHeaderToday({ class: propUi?.dayColumnHeaderToday }) : ui.dayColumnHeaderNumber({ class: propUi?.dayColumnHeaderNumber })
+]">
+            {{ day.date.day }}
+          </div>
+        </div>
+      </div>
+
+      <!-- All-day events row -->
+      <div data-slot="allDayRow" :class="ui.allDayRow({ class: propUi?.allDayRow })">
+        <div data-slot="allDayLabel" :class="ui.allDayLabel({ class: propUi?.allDayLabel })">all-day</div>
+        <div
+          v-for="day in timeGridDays"
+          :key="`allday-${day.dateKey}`"
+          data-slot="allDayCell"
+          :class="[
+  ui.allDayCell({ class: propUi?.allDayCell }),
+  dropTargetKey === `allday-${day.dateKey}` && ui.dropTarget({ class: propUi?.dropTarget })
+]"
+          @dragover="onDragOver(`allday-${day.dateKey}`, $event)"
+          @dragleave="onDragLeave"
+          @drop="onDropMonthCell(day.date, $event)">
+          <!-- Day view exposes the all-day slot; week view renders chips directly -->
+          <template v-if="timeGridDays.length === 1">
+            <slot name="all-day" :events="day.allDayEvents.map((e) => e.original)" :date="day.date">
+              <div
+                v-for="event in day.allDayEvents"
+                :key="event.id"
+                :draggable="editable && event.draggable"
+                :class="[ui.eventChip({ class: propUi?.eventChip }), 'w-full']"
+                :style="getEventStyle(event)"
+                @click="handleEventClick(event, $event)"
+                @dragstart="onDragStart(event, $event)"
+                @dragend="onDragEnd">
+                <slot name="event" :event="event.original" :view="view">
+                  {{ event.title }}
+                </slot>
+              </div>
+            </slot>
+          </template>
+          <template v-else>
+            <div
+              v-for="event in day.allDayEvents"
+              :key="event.id"
+              :draggable="editable && event.draggable"
+              :class="[ui.eventChip({ class: propUi?.eventChip }), 'w-full']"
+              :style="getEventStyle(event)"
+              @click="handleEventClick(event, $event)"
+              @dragstart="onDragStart(event, $event)"
+              @dragend="onDragEnd">
+              <slot name="event" :event="event.original" :view="view">
+                {{ event.title }}
+              </slot>
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <!-- Time grid -->
+      <div data-slot="timeGrid" :class="ui.timeGrid({ class: propUi?.timeGrid })">
+        <!-- Time gutter -->
+        <div data-slot="timeGutter" :class="ui.timeGutter({ class: propUi?.timeGutter })">
+          <div
+            v-for="slot in timeGridSlots"
+            :key="`gutter-${slot.hour}-${slot.minute}`"
+            data-slot="timeGutterSlot"
+            :class="ui.timeGutterSlot({ class: propUi?.timeGutterSlot })"
+            :style="{ height: `${SLOT_HEIGHT}px` }">
+            <div v-if="slot.label" data-slot="timeLabel" :class="ui.timeLabel({ class: propUi?.timeLabel })">
+              <slot name="time-label" :hour="slot.hour" :label="slot.label">
+                {{ slot.label }}
+              </slot>
+            </div>
+          </div>
+        </div>
+
+        <!-- Day columns -->
+        <div
+          v-for="day in timeGridDays"
+          :key="`col-${day.dateKey}`"
+          data-slot="dayColumn"
+          :class="ui.dayColumn({ class: propUi?.dayColumn })"
+          @dragover="onTimeGridDragOver(`time-${day.dateKey}`, $event)"
+          @dragleave="onDragLeave"
+          @drop="onDropTimeGrid(day.date, $event)">
+          <!-- Time slot rows (grid lines + drag targets) -->
+          <div
+            v-for="slot in timeGridSlots"
+            :key="`row-${slot.hour}-${slot.minute}`"
+            data-slot="timeSlotRow"
+            :class="[
+  ui.timeSlotRow({ class: propUi?.timeSlotRow }),
+  dragSnapSlot === `time-${day.dateKey}-${slot.hour}-${slot.minute}` && ui.dragSnapSlot({ class: propUi?.dragSnapSlot })
+]"
+            :style="{ height: `${SLOT_HEIGHT}px` }"
+            @click="handleDateClick(day)"
+            @dragover="onSlotDragOver(`time-${day.dateKey}-${slot.hour}-${slot.minute}`, $event)" />
+
+          <!-- Timed events (absolutely positioned) -->
+          <div
+            v-for="event in day.timedEvents"
+            :key="`ev-${event.id}`"
+            data-slot="timeEvent"
+            :draggable="editable && event.draggable"
+            :class="[
+  ui.timeEvent({ class: propUi?.timeEvent }),
+  draggedEventId != null && draggedEventId !== event.id && 'pointer-events-none'
+]"
+            :style="{
+  ...getEventStyle(event, 15),
+  top: `${event.topPx}px`,
+  height: `${event.heightPx}px`,
+  minHeight: '20px',
+  left: `calc(${event.column / event.totalColumns * 100}% + 2px)`,
+  width: `calc(${1 / event.totalColumns * 100}% - 4px)`
+}"
+            @click="handleEventClick(event, $event)"
+            @dragstart="onDragStart(event, $event)"
+            @dragend="onDragEnd">
+            <slot name="event" :event="event.original" :view="view">
+              <div data-slot="timeEventTitle" :class="ui.timeEventTitle({ class: propUi?.timeEventTitle })">
+                {{ event.title }}
+              </div>
+              <div data-slot="timeEventTime" :class="ui.timeEventTime({ class: propUi?.timeEventTime })">
+                {{ formatTime(event.start) }}
+                <template v-if="timeGridDays.length === 1"> – {{ formatTime(event.end) }}</template>
+              </div>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>