@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/base/event-calendar/MonthView.vue

@@ -0,0 +1,272 @@
+<script setup lang="ts">
+import type { CalendarEvent, MonthViewDay } from './types';
+import DayEventsOverflowPopup from './DayEventsOverflowPopup.vue';
+import LocationDisplay from './LocationDisplay.vue';
+import { useColorManager } from './composables/useColorManager';
+import { useDragAndDropSystem } from './composables/useDragAndDrop';
+import { useEventStatus } from './composables/useEventStatus';
+import { useMultiDayLayout, type LayoutEvent } from './composables/useMultiDayLayout';
+
+const props = defineProps<{
+	days: MonthViewDay[];
+	disableDrag?: boolean;
+	isAddEvent?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(e: 'openAddModal', date: Date, isAllDaySlot?: boolean, allDayTargetDate?: Date): void;
+	(e: 'openEditModal' | 'eventUpdate', event: CalendarEvent): void;
+}>();
+
+// --- Overflow Popup State ---
+const MAX_VISIBLE_EVENTS_IN_MONTH_CELL = 2; // Configurable
+const overflowPopupOpenForDateKey = ref<string | null>(null);
+const overflowPopupTargetRef = ref<HTMLElement | null>(null);
+
+// Initialize enhanced drag and drop system
+const { createDragConfig } = useDragAndDropSystem();
+
+const getDndConfigForDayCell = (dayDate: Date) =>
+	createDragConfig(
+		`month-${formatDateTime(dayDate, 'yyyy-MM-dd')}`,
+		'day-cell',
+		formatDateTime(dayDate, 'yyyy-MM-dd'),
+		(updatedEvent: CalendarEvent) => emit('eventUpdate', updatedEvent),
+		60 // pixelsPerHour not really used in month view, but required for interface
+	);
+
+// Note: Now using direct props data instead of drag-and-drop managed events for better reliability
+
+// Drag handlers for events
+const handleEventDragStart = (event: CalendarEvent, dragEvent: DragEvent) => {
+	if (props.disableDrag || !dragEvent.dataTransfer) return;
+
+	dragEvent.dataTransfer.setData('application/json', JSON.stringify(event));
+	dragEvent.dataTransfer.effectAllowed = 'move';
+
+	document.body.classList.add('dragging-event');
+};
+
+const handleEventDragEnd = (_event: CalendarEvent, _dragEvent: DragEvent) => {
+	document.body.classList.remove('dragging-event');
+};
+
+// Drop zone handlers
+const handleDragEnter = (dragEvent: DragEvent, dayKey: string) => {
+	if (dragEvent.currentTarget instanceof HTMLElement) {
+		dragEvent.currentTarget.classList.add('drop-zone-active');
+	}
+};
+
+const handleDragLeave = (dragEvent: DragEvent, dayKey: string) => {
+	if (dragEvent.currentTarget instanceof HTMLElement) {
+		dragEvent.currentTarget.classList.remove('drop-zone-active');
+	}
+};
+
+const handleDrop = (dragEvent: DragEvent, dayKey: string, dayDate: Date) => {
+	dragEvent.preventDefault();
+
+	if (props.disableDrag) return;
+
+	if (dragEvent.currentTarget instanceof HTMLElement) {
+		dragEvent.currentTarget.classList.remove('drop-zone-active');
+	}
+
+	const draggedData = dragEvent.dataTransfer?.getData('application/json');
+	if (!draggedData) return;
+
+	try {
+		const droppedEvent: CalendarEvent = JSON.parse(draggedData);
+		const config = getDndConfigForDayCell(dayDate);
+		config.handleDrop(droppedEvent);
+	} catch (error) {
+		console.error('❌ Error handling drop:', error);
+	}
+};
+
+const toggleOverflowPopup = (dayKey: string, event: MouseEvent) => {
+	if (overflowPopupOpenForDateKey.value === dayKey) {
+		overflowPopupOpenForDateKey.value = null;
+		overflowPopupTargetRef.value = null;
+	} else {
+		overflowPopupOpenForDateKey.value = dayKey;
+		overflowPopupTargetRef.value = event.currentTarget as HTMLElement;
+	}
+};
+
+const handleOverflowEventEdit = (event: CalendarEvent) => {
+	emit('openEditModal', event);
+	overflowPopupOpenForDateKey.value = null; // Close popup
+};
+
+// Initialize color manager for getting color classes
+const eventsComputed = computed(() => {
+	const allEvents: CalendarEvent[] = [];
+	props.days.forEach((day) => {
+		allEvents.push(...day.events);
+	});
+	return allEvents;
+});
+const { getColorClasses } = useColorManager(eventsComputed);
+
+// Initialize event status manager
+const { getEventStatusClasses, getEventStatusIndicator, getEventStatusTooltip } = useEventStatus(eventsComputed);
+
+// Initialize multi-day layout system
+const daysComputed = computed(() => props.days);
+const { processEventsWithLayout, getEventPosition } = useMultiDayLayout(daysComputed);
+
+// Multi-day event helper functions
+const isMultiDayEvent = (event: CalendarEvent): boolean => {
+	const startDate = new Date(event.startDate);
+	const endDate = new Date(event.endDate);
+	const startDay = startOfDay(startDate);
+	const endDay = startOfDay(endDate);
+
+	// Check if the event spans more than one day
+	return !isSameDay(startDay, endDay);
+};
+
+const isEventStart = (event: CalendarEvent, date: Date): boolean => {
+	const eventStart = startOfDay(new Date(event.startDate));
+	const currentDay = startOfDay(date);
+	return isSameDay(eventStart, currentDay);
+};
+
+const isEventEnd = (event: CalendarEvent, date: Date): boolean => {
+	const eventEnd = startOfDay(new Date(event.endDate));
+	const currentDay = startOfDay(date);
+	// For events ending at midnight, consider them ending on the previous day
+	const effectiveEnd = new Date(event.endDate).getHours() === 0 && new Date(event.endDate).getMinutes() === 0 ? subDays(eventEnd, 1) : eventEnd;
+
+	return isSameDay(effectiveEnd, currentDay);
+};
+
+const getMultiDayEventClasses = (event: CalendarEvent, date: Date): string => {
+	if (!isMultiDayEvent(event)) {
+		return 'rounded';
+	}
+
+	const isStart = isEventStart(event, date);
+	const isEnd = isEventEnd(event, date);
+
+	if (isStart && isEnd) {
+		return 'rounded';
+	} else if (isStart) {
+		return 'rounded-l rounded-r-none';
+	} else if (isEnd) {
+		return 'rounded-r rounded-l-none';
+	} else {
+		return 'rounded-none';
+	}
+};
+
+// Cleanup on unmount
+onUnmounted(() => {
+	overflowPopupOpenForDateKey.value = null;
+	overflowPopupTargetRef.value = null;
+});
+</script>
+
+<template>
+	<ScrollArea orientation="both" class="border-border-base min-w-140 rounded-lg border">
+		<!-- Header Row -->
+		<div class="bg-muted/50 grid grid-cols-7">
+			<div v-for="dayHeader in ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']" :key="dayHeader" class="border-border-base flex h-10 items-center justify-center border-r p-2 text-center text-sm font-medium last:border-r-0">
+				{{ dayHeader }}
+			</div>
+		</div>
+
+		<!-- Calendar Grid -->
+		<div class="grid grid-cols-7" style="grid-template-rows: repeat(6, minmax(140px, 1fr))">
+			<div
+				v-for="day in processEventsWithLayout"
+				:key="day.date.toISOString()"
+				:data-date-key="formatDateTime(day.date, 'yyyy-MM-dd')"
+				data-type="day-cell"
+				:class="['border-border-base group relative flex flex-col border-r border-b p-2 nth-[7n]:border-r-0', day.isCurrentMonth ? 'bg-background' : 'bg-background', { 'bg-blue-50 dark:bg-blue-900/30': day.isToday }]"
+				@dragover.prevent
+				@dragenter="handleDragEnter($event, formatDateTime(day.date, 'yyyy-MM-dd'))"
+				@dragleave="handleDragLeave($event, formatDateTime(day.date, 'yyyy-MM-dd'))"
+				@drop="handleDrop($event, formatDateTime(day.date, 'yyyy-MM-dd'), day.date)"
+			>
+				<!-- Day Number -->
+				<div class="mb-2 flex shrink-0 items-start justify-between">
+					<span :class="['text-sm font-medium', { 'font-bold text-blue-600 dark:text-blue-400': day.isToday }]">{{ formatDateTime(day.date, 'd') }}</span>
+
+					<DynectButton
+						v-if="props.isAddEvent"
+						color="secondary"
+						size="sm"
+						class="text-primary hover:text-primary-foreground hover:bg-primary dark:hover:text-primary h-7 w-7 cursor-pointer rounded-full p-0 opacity-0 shadow-sm group-hover:opacity-100 hover:shadow-md"
+						:title="`Add event on ${formatDateTime(day.date, 'MMM d')}`"
+						@click="emit('openAddModal', day.date, true, day.date)"
+					>
+						<Icon name="lucide:plus" />
+					</DynectButton>
+				</div>
+
+				<!-- Events Container -->
+				<div class="relative min-h-0 flex-1 overflow-hidden">
+					<!-- Events positioned by lane -->
+					<div class="relative min-h-11">
+						<div
+							v-for="(eventItem, index) in day.events.slice(0, MAX_VISIBLE_EVENTS_IN_MONTH_CELL)"
+							:key="eventItem.id"
+							:style="{
+								position: 'absolute',
+								top: `${(eventItem as LayoutEvent).layoutLane * 22}px`,
+								left: '0',
+								right: '0',
+								height: '20px',
+								zIndex: 10 + index,
+							}"
+							:class="[
+								'event-content flex items-center border-2 px-1.5 py-0.5 text-xs select-none hover:shadow-md',
+								props.disableDrag ? 'cursor-pointer' : 'cursor-move',
+								getMultiDayEventClasses(eventItem, day.date),
+								getEventStatusClasses(eventItem),
+								eventItem.color ? getColorClasses(eventItem.color) : 'border-gray-400 bg-gray-200 text-gray-800 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-100',
+							]"
+							:draggable="!props.disableDrag"
+							:data-event-id="eventItem.id"
+							:title="getEventStatusTooltip(eventItem)"
+							@click="emit('openEditModal', eventItem)"
+							@dragstart="handleEventDragStart(eventItem, $event)"
+							@dragend="handleEventDragEnd(eventItem, $event)"
+						>
+							<div class="flex w-full min-w-0 items-center gap-1">
+								<!-- Status indicator -->
+								<span v-if="getEventStatusIndicator(eventItem) && isEventStart(eventItem, day.date)" class="shrink-0 text-xs opacity-75">
+									{{ getEventStatusIndicator(eventItem) }}
+								</span>
+								<span class="flex-1 truncate text-xs leading-tight font-medium">{{ eventItem.title }}</span>
+								<LocationDisplay v-if="eventItem.location && isEventStart(eventItem, day.date)" :location="eventItem.location" :compact="true" :show-tooltip="true" :icon-size="6" />
+							</div>
+						</div>
+					</div>
+
+					<!-- +More button positioned below the events -->
+					<div v-if="day.events.length > MAX_VISIBLE_EVENTS_IN_MONTH_CELL" :style="{ paddingTop: `${Math.max(MAX_VISIBLE_EVENTS_IN_MONTH_CELL * 22 - 22, 0)}px` }" class="mt-1">
+						<Popover
+							:open="overflowPopupOpenForDateKey === formatDateTime(day.date, 'yyyy-MM-dd')"
+							@update:open="
+								(isOpen) => {
+									if (!isOpen) overflowPopupOpenForDateKey = null;
+								}
+							"
+						>
+							<PopoverTrigger as-child>
+								<DynectButton color="ghost" size="sm" class="text-text-body hover:bg-muted/50 bg-background/80 h-auto w-full justify-start px-1 py-1 text-xs" @click.stop="toggleOverflowPopup(formatDateTime(day.date, 'yyyy-MM-dd'), $event)">
+									+ {{ day.events.length - MAX_VISIBLE_EVENTS_IN_MONTH_CELL }} more
+								</DynectButton>
+							</PopoverTrigger>
+							<DayEventsOverflowPopup v-if="overflowPopupOpenForDateKey === formatDateTime(day.date, 'yyyy-MM-dd')" :events="day.events.slice(MAX_VISIBLE_EVENTS_IN_MONTH_CELL)" :date="day.date" @edit-event="handleOverflowEventEdit" @close="overflowPopupOpenForDateKey = null" />
+						</Popover>
+					</div>
+				</div>
+			</div>
+		</div>
+	</ScrollArea>
+</template>

package/src/runtime/components/base/event-calendar/WeekView.vue

@@ -0,0 +1,329 @@
+<script setup lang="ts">
+import type { CalendarEvent, DayColumnData, TimeSlot } from './types';
+import { useCalendarUtils } from './composables/useCalendarUtils';
+import LocationDisplay from './LocationDisplay.vue';
+import EventResizeHandle from './EventResizeHandle.vue';
+import { useColorManager } from './composables/useColorManager';
+import { useDragAndDropSystem } from './composables/useDragAndDrop';
+import { useEventStatus } from './composables/useEventStatus';
+
+const props = defineProps<{
+	weekDaysData: DayColumnData[];
+	pixelsPerHour?: number;
+	disableDrag?: boolean;
+	isAddEvent?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(e: 'openAddModal', date: Date, isAllDaySlot?: boolean, allDayTargetDate?: Date): void;
+	(e: 'openEditModal' | 'eventUpdate', event: CalendarEvent): void;
+}>();
+
+const { getEventStyle, generateTimeSlots, getDropTime } = useCalendarUtils();
+
+// Initialize color manager
+const allEventsComputed = computed(() => {
+	const allEvents: CalendarEvent[] = [];
+	props.weekDaysData.forEach((day) => {
+		allEvents.push(...day.allDayEvents, ...day.timedEventsRaw);
+	});
+	return allEvents;
+});
+
+const { getColorClasses } = useColorManager(allEventsComputed);
+
+// Initialize event status manager
+const { getEventStatusClasses, getEventStatusIndicator, getEventStatusTooltip } = useEventStatus(allEventsComputed);
+
+// Initialize enhanced drag and drop system
+const { createDragConfig, formatEventDuration, calculateEventHeight } = useDragAndDropSystem();
+
+// Resize event handlers
+const handleResizeStart = (_event: CalendarEvent) => {};
+
+const handleResize = throttle((event: CalendarEvent) => {
+	// Update the event immediately for visual feedback
+	emit('eventUpdate', event);
+}, 16); // ~60fps
+
+const handleResizeEnd = debounce((event: CalendarEvent) => {
+	// Final update
+	emit('eventUpdate', event);
+}, 100);
+
+// Drag handlers for events
+const handleEventDragStart = (event: CalendarEvent, dragEvent: DragEvent) => {
+	if (props.disableDrag || !dragEvent.dataTransfer) return;
+
+	dragState.value.draggedEventId = event.id;
+
+	dragEvent.dataTransfer.setData('application/json', JSON.stringify(event));
+	dragEvent.dataTransfer.effectAllowed = 'move';
+
+	document.body.classList.add('dragging-event');
+};
+
+const handleEventDragEnd = (_event: CalendarEvent, _dragEvent: DragEvent) => {
+	dragState.value.isDragging = false;
+	dragState.value.draggedEventId = null;
+	document.body.classList.remove('dragging-event');
+};
+
+// Drop zone handlers
+const handleDragEnter = (dragEvent: DragEvent, dateKey: string, zoneType: string) => {
+	if (dragEvent.currentTarget instanceof HTMLElement) {
+		dragEvent.currentTarget.classList.add('drop-zone-active');
+	}
+	dragState.value.currentDropZone = `${zoneType}-${dateKey}`;
+};
+
+const handleDragLeave = (dragEvent: DragEvent, dateKey: string, zoneType: string) => {
+	if (dragEvent.currentTarget instanceof HTMLElement) {
+		dragEvent.currentTarget.classList.remove('drop-zone-active');
+	}
+	dragState.value.currentDropZone = null;
+};
+
+const handleDrop = (dragEvent: DragEvent, dateKey: string, zoneType: string) => {
+	dragEvent.preventDefault();
+
+	if (props.disableDrag) return;
+
+	if (dragEvent.currentTarget instanceof HTMLElement) {
+		dragEvent.currentTarget.classList.remove('drop-zone-active');
+	}
+
+	const draggedData = dragEvent.dataTransfer?.getData('application/json');
+	if (!draggedData) return;
+
+	try {
+		const droppedEvent: CalendarEvent = JSON.parse(draggedData);
+		const config = getDndConfigForWeekZone(dateKey, zoneType as 'allDay' | 'timed');
+		config.handleDrop(droppedEvent, dragEvent, dragEvent.currentTarget as HTMLElement);
+	} catch (error) {
+		console.error('❌ Error handling drop:', error);
+	}
+};
+
+// Refs for scroll synchronization
+const headerScrollContainer = ref<HTMLElement>();
+const bodyScrollContainer = ref<HTMLElement>();
+
+// Enhanced drag state for visual feedback
+const dragState = ref({
+	isDragging: false,
+	draggedEventId: null as string | null | undefined,
+	validDropZones: [] as string[],
+	currentDropZone: null as string | null,
+	dragPreview: null as { x: number; y: number; event: CalendarEvent } | null,
+});
+
+const timeSlotsForView = computed<TimeSlot[]>(() => {
+	const firstDay = props.weekDaysData[0];
+	if (firstDay) {
+		return generateTimeSlots(firstDay.date);
+	}
+	return [];
+});
+
+const halfHourSlotsForView = computed(() => {
+	return timeSlotsForView.value.flatMap((slot) => {
+		const halfHourTime = new Date(slot.time.getTime() + 30 * 60 * 1000);
+		return [
+			{ ...slot, isHalfHour: false },
+			{
+				time: halfHourTime,
+				label: formatDateTime(halfHourTime, 'HH:mm a'),
+				dateTimeStr: formatDateTime(halfHourTime, "yyyy-MM-dd'T'HH:mm:ss"),
+				isHalfHour: true,
+			},
+		];
+	});
+});
+
+const halfHourRowHeight = computed(() => (props.pixelsPerHour || 60) / 2);
+
+// Process raw timed events to include style for positioning
+const processedWeekDaysData = computed(() => {
+	return props.weekDaysData.map((day) => ({
+		...day,
+		dayLabel: typeof day.dayLabel === 'string' ? day.dayLabel.split(' ') : day.dayLabel,
+		timedEventsStyled: day.timedEventsRaw.map((event) => ({
+			...event,
+			style: getEventStyle(event, day.date, props.pixelsPerHour),
+		})),
+	}));
+});
+
+const getDndConfigForWeekZone = (dateKey: string, zoneType: 'allDay' | 'timed') => createDragConfig(`week-${zoneType}-${dateKey}`, zoneType === 'allDay' ? 'all-day' : 'timed', dateKey, (updatedEvent: CalendarEvent) => emit('eventUpdate', updatedEvent), props.pixelsPerHour || 60);
+
+onMounted(() => {
+	// Set up scroll synchronization
+	const syncScroll = (source: HTMLElement, target: HTMLElement) => {
+		target.scrollLeft = source.scrollLeft;
+	};
+
+	if (headerScrollContainer.value && bodyScrollContainer.value) {
+		const headerEl = headerScrollContainer.value;
+		const bodyEl = bodyScrollContainer.value;
+
+		// Sync header scroll with body
+		headerEl.addEventListener('scroll', () => syncScroll(headerEl, bodyEl));
+		// Sync body scroll with header
+		bodyEl.addEventListener('scroll', () => syncScroll(bodyEl, headerEl));
+	}
+});
+</script>
+
+<template>
+	<div class="flex h-full flex-col">
+		<!-- All Day Events Header -->
+		<div class="border-border-base bg-background sticky top-0 z-20 flex overflow-hidden border-b">
+			<div class="border-border-base text-text-body flex w-16 shrink-0 items-center justify-center border-r p-2 text-xs">All-day</div>
+			<div ref="headerScrollContainer" class="flex min-w-0 flex-1 overflow-x-auto">
+				<div v-for="day in processedWeekDaysData" :key="`allday-header-${day.dateKey}`" :class="['border-border-base group relative min-h-15 min-w-32 flex-1 border-r p-1 lg:min-w-0', { 'bg-blue-50 dark:bg-blue-900/30': day.isToday }]">
+					<div class="mb-1 text-center" :class="{ 'font-bold text-blue-600 dark:text-blue-400': day.isToday }">
+						<h1 class="text-text-body text-sm leading-5 font-normal">{{ day?.dayLabel?.[0] }}</h1>
+						<p class="text-text-heading text-lg leading-7 font-normal">{{ day?.dayLabel?.[1] }}</p>
+					</div>
+					<div
+						:data-date-key="day.dateKey"
+						data-type="allDay"
+						:class="[
+							'min-h-7.5 space-y-0.5',
+							{
+								'bg-blue-100/50 ring-2 ring-blue-300 dark:bg-blue-800/30 dark:ring-blue-600': dragState.isDragging && dragState.currentDropZone === `allDay-${day.dateKey}`,
+								'bg-green-50/30 dark:bg-green-900/20': dragState.isDragging && dragState.validDropZones.includes(`allday-${day.dateKey}`),
+							},
+						]"
+						@dragover.prevent
+						@dragenter="handleDragEnter($event, day.dateKey, 'allDay')"
+						@dragleave="handleDragLeave($event, day.dateKey, 'allDay')"
+						@drop="handleDrop($event, day.dateKey, 'allDay')"
+					>
+						<div
+							v-for="event in day.allDayEvents"
+							:key="event.id"
+							:class="[
+								'event-content mb-0.5 rounded border p-1 text-xs select-none hover:shadow-sm',
+								props.disableDrag ? 'cursor-pointer' : 'cursor-move',
+								getEventStatusClasses(event),
+								event.color ? getColorClasses(event.color) : 'border-gray-400 bg-gray-200 text-gray-800 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-100',
+							]"
+							:draggable="!props.disableDrag"
+							:title="getEventStatusTooltip(event)"
+							@dragstart="handleEventDragStart(event, $event)"
+							@dragend="handleEventDragEnd(event, $event)"
+							@click.stop="emit('openEditModal', event)"
+						>
+							<div class="drag-handle space-y-0.5">
+								<div class="flex min-w-0 items-center gap-1">
+									<span v-if="getEventStatusIndicator(event)" class="shrink-0 text-xs opacity-75">
+										{{ getEventStatusIndicator(event) }}
+									</span>
+									<span class="flex-1 truncate font-medium">{{ event.title }}</span>
+									<LocationDisplay v-if="event.location" :location="event.location" :compact="true" :show-tooltip="true" :icon-size="10" />
+								</div>
+								<div v-if="formatEventDuration(event)" class="event-duration text-opacity-75">
+									{{ formatEventDuration(event) }}
+								</div>
+							</div>
+						</div>
+					</div>
+					<DynectButton
+						v-if="props.isAddEvent"
+						color="secondary"
+						size="xs"
+						:icon-only="true"
+						class="text-primary hover:text-primary-foreground hover:bg-primary dark:hover:text-primary absolute top-1 right-1 cursor-pointer rounded-full opacity-0 shadow-sm duration-200 group-hover:opacity-100 hover:shadow-md"
+						:title="`Add event on ${day.dayLabel?.join(' ')}`"
+						@click="emit('openAddModal', day.date, true, day.date)"
+					>
+						<Icon name="lucide:plus" />
+					</DynectButton>
+				</div>
+			</div>
+		</div>
+
+		<!-- Timed Events Grid -->
+		<ScrollArea class="grow">
+			<div class="flex">
+				<div class="border-border-base text-text-body w-16 shrink-0 border-r text-xs">
+					<div v-for="(slot, slotIndex) in halfHourSlotsForView" :key="slot.time.toISOString()" :style="{ height: `${halfHourRowHeight}px` }" class="border-border-base relative box-border border-b pt-1 text-center">
+						<span :class="['relative block leading-none', slotIndex === 0 ? 'top-0' : '-top-1.5']">{{ slot.isHalfHour ? '' : slot.label }}</span>
+					</div>
+				</div>
+				<div ref="bodyScrollContainer" class="flex min-w-0 flex-1 overflow-x-auto">
+					<TooltipProvider>
+						<div
+							v-for="day in processedWeekDaysData"
+							:key="`timedcol-${day.dateKey}`"
+							:data-date-key="day.dateKey"
+							data-type="timed"
+							:class="[
+								'border-border-base relative min-w-32 flex-1 border-r lg:min-w-0',
+								{
+									'bg-blue-50/50 dark:bg-blue-900/20': day.isToday,
+									'bg-blue-100/50 ring-2 ring-blue-300 dark:bg-blue-800/30 dark:ring-blue-600': dragState.isDragging && dragState.currentDropZone === `timed-${day.dateKey}`,
+									'bg-green-50/30 dark:bg-green-900/20': dragState.isDragging && dragState.validDropZones.includes(`timed-${day.dateKey}`) && dragState.currentDropZone !== `timed-${day.dateKey}`,
+								},
+							]"
+							@dragover.prevent
+							@dragenter="handleDragEnter($event, day.dateKey, 'timed')"
+							@dragleave="handleDragLeave($event, day.dateKey, 'timed')"
+							@drop="handleDrop($event, day.dateKey, 'timed')"
+						>
+							<div v-for="slot in halfHourSlotsForView" :key="slot.time.toISOString()" :data-slot-time="slot.dateTimeStr" :style="{ height: `${halfHourRowHeight}px` }" class="border-border-base dark:border-border-base relative box-border border-b border-dashed" />
+
+							<div
+								v-for="(styledEvent, index) in day.timedEventsStyled"
+								:key="styledEvent.id"
+								:style="{
+									...styledEvent.style,
+									height: `${calculateEventHeight(styledEvent, props.pixelsPerHour || 60)}px`,
+									zIndex: `${5 + index}`,
+								}"
+								:class="[
+									'event-content absolute overflow-hidden rounded border p-1 text-xs duration-200 select-none hover:z-50 hover:shadow-md',
+									props.disableDrag ? 'cursor-pointer' : 'cursor-move',
+									getEventStatusClasses(styledEvent),
+									styledEvent.color ? getColorClasses(styledEvent.color) : 'border-gray-400 bg-gray-200 text-gray-800 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-100',
+								]"
+								:draggable="!props.disableDrag"
+								@dragstart="handleEventDragStart(styledEvent, $event)"
+								@dragend="handleEventDragEnd(styledEvent, $event)"
+								@click.stop="emit('openEditModal', styledEvent)"
+							>
+								<!-- Resize handles -->
+								<EventResizeHandle :event="styledEvent" position="top" :enabled="!styledEvent.allDay && !props.disableDrag" :pixels-per-hour="pixelsPerHour || 60" @resize-start="handleResizeStart" @resize="handleResize" @resize-end="handleResizeEnd" />
+								<EventResizeHandle :event="styledEvent" position="left" :enabled="!props.disableDrag" :pixels-per-hour="pixelsPerHour || 60" @resize-start="handleResizeStart" @resize="handleResize" @resize-end="handleResizeEnd" />
+								<EventResizeHandle :event="styledEvent" position="right" :enabled="!props.disableDrag" :pixels-per-hour="pixelsPerHour || 60" @resize-start="handleResizeStart" @resize="handleResize" @resize-end="handleResizeEnd" />
+
+								<div class="drag-handle space-y-0.5">
+									<div class="flex min-w-0 items-center gap-1">
+										<span v-if="getEventStatusIndicator(styledEvent)" class="shrink-0 text-xs opacity-75">
+											{{ getEventStatusIndicator(styledEvent) }}
+										</span>
+										<Tooltip>
+											<TooltipTrigger as-child>
+												<span class="flex-1 truncate font-semibold">{{ styledEvent.title }}</span>
+											</TooltipTrigger>
+											<TooltipContent>{{ styledEvent.title }}</TooltipContent>
+										</Tooltip>
+									</div>
+									<div class="text-xs opacity-80">{{ formatDateTime(new Date(styledEvent.startDate), 'p') }} - {{ formatDateTime(new Date(styledEvent.endDate), 'p') }}</div>
+									<div v-if="formatEventDuration(styledEvent)" class="event-duration">
+										{{ formatEventDuration(styledEvent) }}
+									</div>
+									<LocationDisplay v-if="styledEvent.location" :location="styledEvent.location" :compact="true" :show-tooltip="true" :icon-size="10" />
+								</div>
+
+								<EventResizeHandle :event="styledEvent" position="bottom" :enabled="!styledEvent.allDay && !props.disableDrag" :pixels-per-hour="pixelsPerHour || 60" @resize-start="handleResizeStart" @resize="handleResize" @resize-end="handleResizeEnd" />
+							</div>
+						</div>
+					</TooltipProvider>
+				</div>
+			</div>
+		</ScrollArea>
+	</div>
+</template>