Snapshot

src/managers/EventRenderer.ts

@@ -19,7 +19,14 @@ export class EventRenderer {
         this.eventBus.on(EventTypes.EVENTS_LOADED, (event: Event) => {
             const customEvent = event as CustomEvent;
             const { events } = customEvent.detail;
-            this.renderEvents(events);
+            // Store events but don't render yet - wait for grid to be ready
+            this.pendingEvents = events;
+            this.tryRenderEvents();
+        });
+
+        this.eventBus.on(EventTypes.GRID_RENDERED, () => {
+            // Grid is ready, now we can render events
+            this.tryRenderEvents();
         });
 
         this.eventBus.on(EventTypes.VIEW_RENDERED, () => {
@@ -28,6 +35,19 @@ export class EventRenderer {
         });
     }
 
+    private pendingEvents: CalendarEvent[] = [];
+
+    private tryRenderEvents(): void {
+        // Only render if we have both events and grid is ready
+        if (this.pendingEvents.length > 0) {
+            const dayColumns = document.querySelectorAll('swp-day-column');
+            if (dayColumns.length > 0) {
+                this.renderEvents(this.pendingEvents);
+                this.pendingEvents = []; // Clear pending events after rendering
+            }
+        }
+    }
+
     private renderEvents(events: CalendarEvent[]): void {
         console.log(`EventRenderer: Rendering ${events.length} events`);
         
@@ -62,27 +82,53 @@ export class EventRenderer {
     }
 
     private renderDayEvents(dayIndex: number, events: CalendarEvent[]): void {
-        const dayColumns = document.querySelectorAll('swp-day-column');
-        const dayColumn = dayColumns[dayIndex];
-        if (!dayColumn) {
-            console.warn(`EventRenderer: Day column ${dayIndex} not found`);
-            return;
-        }
-
-        const eventsLayer = dayColumn.querySelector('swp-events-layer');
-        if (!eventsLayer) {
-            console.warn(`EventRenderer: Events layer not found for day ${dayIndex}`);
-            return;
-        }
-
         // Sort events by start time
         const sortedEvents = events.sort((a, b) => a.start.localeCompare(b.start));
 
         sortedEvents.forEach(event => {
-            this.renderEvent(event, eventsLayer);
+            // Find the appropriate events container for this event
+            const eventContainer = this.findEventContainer(event, dayIndex);
+            if (eventContainer) {
+                this.renderEvent(event, eventContainer);
+            }
         });
     }
 
+    private findEventContainer(event: CalendarEvent, dayIndex: number): Element | null {
+        // Debug: Log what we're looking for
+        console.log(`EventRenderer: Looking for day ${dayIndex} using POC structure`);
+        
+        // Check what day columns actually exist
+        const dayColumns = document.querySelectorAll('swp-day-column');
+        console.log(`EventRenderer: Found ${dayColumns.length} day columns total`);
+        
+        // Check first few columns to see their attributes
+        for (let i = 0; i < Math.min(3, dayColumns.length); i++) {
+            const column = dayColumns[i] as HTMLElement;
+            console.log(`Column ${i}:`, {
+                dayIndex: column.dataset.dayIndex,
+                date: column.dataset.date,
+                tagName: column.tagName
+            });
+        }
+        
+        // Find the day column that corresponds to the event's day
+        const dayColumn = document.querySelector(`swp-day-column[data-dayIndex="${dayIndex}"]`);
+        if (!dayColumn) {
+            console.warn(`EventRenderer: Day column for day ${dayIndex} not found`);
+            return null;
+        }
+        
+        // Find the events layer within this day column
+        const eventsLayer = dayColumn.querySelector('swp-events-layer');
+        if (!eventsLayer) {
+            console.warn(`EventRenderer: Events layer not found in day column for day ${dayIndex}`);
+            return null;
+        }
+        
+        return eventsLayer;
+    }
+
     private renderEvent(event: CalendarEvent, container: Element): void {
         const eventElement = document.createElement('swp-event');
         eventElement.dataset.eventId = event.id;
@@ -90,8 +136,12 @@ export class EventRenderer {
 
         // Calculate position based on time
         const position = this.calculateEventPosition(event);
+        eventElement.style.position = 'absolute';
         eventElement.style.top = `${position.top}px`;
         eventElement.style.height = `${position.height}px`;
+        eventElement.style.left = '2px';
+        eventElement.style.right = '2px';
+        eventElement.style.zIndex = '10';
 
         // Format time for display
         const startTime = this.formatTime(event.start);