Stacking and Sharecolumn WIP

src/renderers/EventRenderer.ts

@@ -206,13 +206,13 @@ export class DateEventRenderer implements EventRendererStrategy {
     });
   }
   /**
-   * Render events in a grid container (side-by-side)
+   * Render events in a grid container (side-by-side with column sharing)
    */
   private renderGridGroup(gridGroup: GridGroupLayout, eventsLayer: HTMLElement): void {
     const groupElement = document.createElement('swp-event-group');
 
-    // Add grid column class based on event count
-    const colCount = gridGroup.events.length;
+    // Add grid column class based on number of columns (not events)
+    const colCount = gridGroup.columns.length;
     groupElement.classList.add(`cols-${colCount}`);
 
     // Add stack level class for margin-left offset
@@ -231,18 +231,34 @@ export class DateEventRenderer implements EventRendererStrategy {
     };
     this.stackManager.applyStackLinkToElement(groupElement, stackLink);
 
-    // Render each event within the grid
+    // Render each column
     const earliestEvent = gridGroup.events[0];
-    gridGroup.events.forEach(event => {
-      const element = this.renderEventInGrid(event, earliestEvent.start);
-      groupElement.appendChild(element);
+    gridGroup.columns.forEach(columnEvents => {
+      const columnContainer = this.renderGridColumn(columnEvents, earliestEvent.start);
+      groupElement.appendChild(columnContainer);
     });
 
     eventsLayer.appendChild(groupElement);
   }
 
   /**
-   * Render event within a grid container (relative positioning)
+   * Render a single column within a grid group
+   * Column may contain multiple events that don't overlap
+   */
+  private renderGridColumn(columnEvents: CalendarEvent[], containerStart: Date): HTMLElement {
+    const columnContainer = document.createElement('div');
+    columnContainer.style.position = 'relative';
+
+    columnEvents.forEach(event => {
+      const element = this.renderEventInGrid(event, containerStart);
+      columnContainer.appendChild(element);
+    });
+
+    return columnContainer;
+  }
+
+  /**
+   * Render event within a grid container (absolute positioning within column)
    */
   private renderEventInGrid(event: CalendarEvent, containerStart: Date): HTMLElement {
     const element = SwpEventElement.fromCalendarEvent(event);
@@ -250,10 +266,19 @@ export class DateEventRenderer implements EventRendererStrategy {
     // Calculate event height
     const position = this.calculateEventPosition(event);
 
-    // Events in grid are positioned relatively - NO top offset needed
-    // The grid container itself is positioned absolutely with the correct top
-    element.style.position = 'relative';
+    // Calculate relative top offset if event starts after container start
+    // (e.g., if container starts at 07:00 and event starts at 08:15, offset = 75 min)
+    const timeDiffMs = event.start.getTime() - containerStart.getTime();
+    const timeDiffMinutes = timeDiffMs / (1000 * 60);
+    const gridSettings = calendarConfig.getGridSettings();
+    const relativeTop = timeDiffMinutes > 0 ? (timeDiffMinutes / 60) * gridSettings.hourHeight : 0;
+
+    // Events in grid columns are positioned absolutely within their column container
+    element.style.position = 'absolute';
+    element.style.top = `${relativeTop}px`;
     element.style.height = `${position.height - 3}px`;
+    element.style.left = '0';
+    element.style.right = '0';
 
     return element;
   }