Positions all-day events in the correct row

Ensures that all-day events are placed in the first available row within their column to avoid overlapping.

It achieves this by querying existing all-day events, determining occupied rows based on their grid-row-start style, and then assigning the new event to the next available row.

src/elements/SwpEventElement.ts

@@ -190,6 +190,13 @@ export class SwpAllDayEventElement extends BaseEventElement {
     this.element.style.gridColumn = this.columnIndex.toString();
   }
 
+  /**
+   * Set grid row for this all-day event
+   */
+  public setGridRow(row: number): void {
+    this.element.style.gridRow = row.toString();
+  }
+
   /**
    * Factory method to create from CalendarEvent and target date
    */
@@ -203,6 +210,29 @@ export class SwpAllDayEventElement extends BaseEventElement {
       }
     });
 
-    return new SwpAllDayEventElement(event, columnIndex);
+    // Find occupied rows in this column using computedStyle
+    const existingEvents = document.querySelectorAll('swp-allday-event');
+    const occupiedRows = new Set<number>();
+    
+    existingEvents.forEach(existingEvent => {
+      const style = getComputedStyle(existingEvent);
+      const eventCol = parseInt(style.gridColumnStart);
+      
+      if (eventCol === columnIndex) {
+        const eventRow = parseInt(style.gridRowStart) || 1;
+        occupiedRows.add(eventRow);
+      }
+    });
+    
+    // Find first available row
+    let targetRow = 1;
+    while (occupiedRows.has(targetRow)) {
+      targetRow++;
+    }
+    
+    // Create element with both column and row
+    const element = new SwpAllDayEventElement(event, columnIndex);
+    element.setGridRow(targetRow);
+    return element;
   }
 }