Improves all-day event layout calculation

Refactors all-day event rendering to use a layout engine
for overlap detection and positioning, ensuring events
are placed in available rows and columns.

Removes deprecated method and adds unit tests.

package.json

@@ -7,13 +7,20 @@
     "build": "node build.js",
     "build-simple": "esbuild src/**/*.ts --outdir=js --format=esm --sourcemap=inline --target=es2020",
     "watch": "esbuild src/**/*.ts --outdir=js --format=esm --sourcemap=inline --target=es2020 --watch",
-    "clean": "powershell -Command \"if (Test-Path js) { Remove-Item -Recurse -Force js }\""
+    "clean": "powershell -Command \"if (Test-Path js) { Remove-Item -Recurse -Force js }\"",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:ui": "vitest --ui"
   },
   "devDependencies": {
+    "@vitest/ui": "^3.2.4",
     "esbuild": "^0.19.0",
-    "typescript": "^5.0.0"
+    "jsdom": "^27.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^3.2.4"
   },
   "dependencies": {
+    "@rollup/rollup-win32-x64-msvc": "^4.52.2",
     "fuse.js": "^7.1.0"
   }
 }

src/elements/SwpEventElement.ts

@@ -283,80 +283,49 @@ export class SwpAllDayEventElement extends BaseEventElement {
   }
 
   /**
-   * Factory method to create from CalendarEvent and target date
+   * Factory method to create from CalendarEvent and layout (provided by AllDayManager)
    */
-  public static fromCalendarEvent(event: CalendarEvent, targetDate?: string): SwpAllDayEventElement {
+  public static fromCalendarEventWithLayout(
-    // Calculate column span based on event start and end dates
+    event: CalendarEvent,
-    const { startColumn, endColumn, columnSpan } = this.calculateColumnSpan(event);
+    layout: { startColumn: number; endColumn: number; row: number; columnSpan: number }
+  ): SwpAllDayEventElement {
+    // Create element with provided layout
+    const element = new SwpAllDayEventElement(event, layout.startColumn);
     
-    // For backwards compatibility, use targetDate if provided, otherwise use calculated start column
+    // Set complete grid-area instead of individual properties
-    const finalStartColumn = targetDate ? this.getColumnIndexForDate(targetDate) : startColumn;
+    const gridArea = `${layout.row} / ${layout.startColumn} / ${layout.row + 1} / ${layout.endColumn + 1}`;
-    const finalEndColumn = targetDate ? finalStartColumn : endColumn;
+    element.element.style.gridArea = gridArea;
-    const finalColumnSpan = targetDate ? 1 : columnSpan;
     
-    // Find occupied rows in the spanned columns using computedStyle
+    console.log('✅ SwpAllDayEventElement: Created all-day event with AllDayLayoutEngine', {
-    const existingEvents = document.querySelectorAll('swp-allday-container swp-event');
-    const occupiedRows = new Set<number>();
-    
-    console.log('🔍 SwpAllDayEventElement: Checking grid row for new event', {
-      targetDate,
-      finalStartColumn,
-      finalEndColumn,
-      existingEventsCount: existingEvents.length
-    });
-    
-    existingEvents.forEach(existingEvent => {
-      const style = getComputedStyle(existingEvent);
-      const eventStartCol = parseInt(style.gridColumnStart);
-      const eventEndCol = parseInt(style.gridColumnEnd);
-      const eventRow = parseInt(style.gridRowStart) || 1;
-      const eventId = (existingEvent as HTMLElement).dataset.eventId;
-      
-      console.log('📊 SwpAllDayEventElement: Checking existing event', {
-        eventId,
-        eventStartCol,
-        eventEndCol,
-        eventRow,
-        newEventColumn: finalStartColumn
-      });
-      
-      // FIXED: Only check events in the same column (not overlap detection)
-      if (eventStartCol === finalStartColumn) {
-        console.log('✅ SwpAllDayEventElement: Same column - adding occupied row', eventRow);
-        occupiedRows.add(eventRow);
-      } else {
-        console.log('⏭️ SwpAllDayEventElement: Different column - skipping');
-      }
-    });
-    
-    // Find first available row
-    let targetRow = 1;
-    while (occupiedRows.has(targetRow)) {
-      targetRow++;
-    }
-    
-    console.log('🎯 SwpAllDayEventElement: Final row assignment', {
-      targetDate,
-      finalStartColumn,
-      occupiedRows: Array.from(occupiedRows).sort(),
-      assignedRow: targetRow
-    });
-    
-    // Create element with calculated column span
-    const element = new SwpAllDayEventElement(event, finalStartColumn);
-    element.setGridRow(targetRow);
-    element.setColumnSpan(finalStartColumn, finalEndColumn);
-    
-    console.log('✅ SwpAllDayEventElement: Created all-day event', {
       eventId: event.id,
       title: event.title,
-      column: finalStartColumn,
+      gridArea: gridArea,
-      row: targetRow
+      layout: layout
     });
     
     return element;
   }
 
+  /**
+   * Factory method to create from CalendarEvent and target date (DEPRECATED - use AllDayManager.calculateAllDayEventLayout)
+   * @deprecated Use AllDayManager.calculateAllDayEventLayout() and fromCalendarEventWithLayout() instead
+   */
+  public static fromCalendarEvent(event: CalendarEvent, targetDate?: string): SwpAllDayEventElement {
+    console.warn('⚠️ SwpAllDayEventElement.fromCalendarEvent is deprecated. Use AllDayManager.calculateAllDayEventLayout() instead.');
+    
+    // Fallback to simple column calculation without overlap detection
+    const { startColumn, endColumn } = this.calculateColumnSpan(event);
+    const finalStartColumn = targetDate ? this.getColumnIndexForDate(targetDate) : startColumn;
+    const finalEndColumn = targetDate ? finalStartColumn : endColumn;
+    
+    // Create element with row 1 (no overlap detection)
+    const element = new SwpAllDayEventElement(event, finalStartColumn);
+    element.setGridRow(1);
+    element.setColumnSpan(finalStartColumn, finalEndColumn);
+    
+    return element;
+  }
+
   /**
    * Calculate column span based on event start and end dates
    */

src/managers/AllDayManager.ts

@@ -3,6 +3,7 @@
 import { eventBus } from '../core/EventBus';
 import { ALL_DAY_CONSTANTS } from '../core/CalendarConfig';
 import { AllDayEventRenderer } from '../renderers/AllDayEventRenderer';
+import { AllDayLayoutEngine } from '../utils/AllDayLayoutEngine';
 import { CalendarEvent } from '../types/CalendarTypes';
 import {
   DragMouseEnterHeaderEventPayload,
@@ -14,10 +15,11 @@ import { DragOffset, MousePosition } from '../types/DragDropTypes';
 
 /**
  * AllDayManager - Handles all-day row height animations and management
- * Separated from HeaderManager for clean responsibility separation
+ * Uses AllDayLayoutEngine for all overlap detection and layout calculation
  */
 export class AllDayManager {
   private allDayEventRenderer: AllDayEventRenderer;
+  private layoutEngine: AllDayLayoutEngine | null = null;
 
   constructor() {
     this.allDayEventRenderer = new AllDayEventRenderer();
@@ -28,8 +30,6 @@ export class AllDayManager {
    * Setup event listeners for drag conversions
    */
   private setupEventListeners(): void {
-
-
     eventBus.on('drag:mouseenter-header', (event) => {
       const { targetDate, mousePosition, originalElement, cloneElement } = (event as CustomEvent<DragMouseEnterHeaderEventPayload>).detail;
 
@@ -58,7 +58,6 @@ export class AllDayManager {
       }
 
       this.checkAndAnimateAllDayHeight();
-
     });
 
     // Listen for drag operations on all-day events
@@ -101,7 +100,6 @@ export class AllDayManager {
       });
       const dragClone = document.querySelector(`swp-allday-container swp-event[data-event-id="clone-${eventId}"]`);
 
-
       console.log('🎯 AllDayManager: Ending drag for all-day event', { eventId });
       this.handleDragEnd(draggedElement, dragClone as HTMLElement, { column: finalPosition.column || '', y: 0 });
     });
@@ -126,7 +124,6 @@ export class AllDayManager {
     });
   }
 
-
   private getAllDayContainer(): HTMLElement | null {
     return document.querySelector('swp-calendar-header swp-allday-container');
   }
@@ -149,7 +146,9 @@ export class AllDayManager {
   } {
     const root = document.documentElement;
     const targetHeight = targetRows * ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT;
-    const currentHeight = parseInt(getComputedStyle(root).getPropertyValue('--all-day-row-height') || '0');
+    // Read CSS variable directly from style property or default to 0
+    const currentHeightStr = root.style.getPropertyValue('--all-day-row-height') || '0px';
+    const currentHeight = parseInt(currentHeightStr) || 0;
     const heightDifference = targetHeight - currentHeight;
 
     return { targetHeight, currentHeight, heightDifference };
@@ -182,7 +181,7 @@ export class AllDayManager {
       let highestRow = 0;
 
       (Array.from(allDayEvents) as HTMLElement[]).forEach((event: HTMLElement) => {
-        const gridRow = parseInt(getComputedStyle(event).gridRowStart) || 1;
+        const gridRow = parseInt(event.style.gridRow) || 1;
         highestRow = Math.max(highestRow, gridRow);
       });
 
@@ -235,8 +234,10 @@ export class AllDayManager {
     // Add spacer animation if spacer exists, but don't use fill: 'forwards'
     if (headerSpacer) {
       const root = document.documentElement;
-      const currentSpacerHeight = parseInt(getComputedStyle(root).getPropertyValue('--header-height')) + currentHeight;
+      const headerHeightStr = root.style.getPropertyValue('--header-height');
-      const targetSpacerHeight = parseInt(getComputedStyle(root).getPropertyValue('--header-height')) + targetHeight;
+      const headerHeight = parseInt(headerHeightStr);
+      const currentSpacerHeight = headerHeight + currentHeight;
+      const targetSpacerHeight = headerHeight + targetHeight;
 
       animations.push(
         headerSpacer.animate([
@@ -258,11 +259,64 @@ export class AllDayManager {
     });
   }
 
+  /**
+   * Calculate layout for ALL all-day events using AllDayLayoutEngine
+   * This is the correct method that processes all events together for proper overlap detection
+   */
+  public calculateAllDayEventsLayout(events: CalendarEvent[], weekDates: string[]): Map<string, {
+    startColumn: number;
+    endColumn: number;
+    row: number;
+    columnSpan: number;
+    gridArea: string;
+  }> {
+    console.log('🔍 AllDayManager: calculateAllDayEventsLayout - Processing all events together', {
+      eventCount: events.length,
+      events: events.map(e => ({ id: e.id, title: e.title, start: e.start.toISOString().split('T')[0], end: e.end.toISOString().split('T')[0] })),
+      weekDates
+    });
+    
+    // Initialize layout engine with provided week dates
+    this.layoutEngine = new AllDayLayoutEngine(weekDates);
+    
+    // Calculate layout for all events together - AllDayLayoutEngine handles CalendarEvents directly
+    const layouts = this.layoutEngine.calculateLayout(events);
+    
+    // Convert to expected return format
+    const result = new Map<string, {
+      startColumn: number;
+      endColumn: number;
+      row: number;
+      columnSpan: number;
+      gridArea: string;
+    }>();
+    
+    layouts.forEach((layout, eventId) => {
+      result.set(eventId, {
+        startColumn: layout.startColumn,
+        endColumn: layout.endColumn,
+        row: layout.row,
+        columnSpan: layout.columnSpan,
+        gridArea: layout.gridArea
+      });
+      
+      console.log('✅ AllDayManager: Calculated layout for event', {
+        eventId,
+        title: events.find(e => e.id === eventId)?.title,
+        gridArea: layout.gridArea,
+        layout: layout
+      });
+    });
+    
+    return result;
+  }
+
+
   /**
    * Handle conversion of timed event to all-day event using CSS styling
    */
   private handleConvertToAllDay(targetDate: string, cloneElement: HTMLElement): void {
-    console.log('🔄 AllDayManager: Converting to all-day using CSS approach', {
+    console.log('🔄 AllDayManager: Converting to all-day using AllDayLayoutEngine', {
       eventId: cloneElement.dataset.eventId,
       targetDate
     });
@@ -282,72 +336,52 @@ export class AllDayManager {
       }
     }
 
-    // Calculate position BEFORE adding to container (to avoid counting clone as existing event)
+    // Create mock event for layout calculation
-    const columnIndex = this.getColumnIndexForDate(targetDate);
+    const mockEvent: CalendarEvent = {
-    const availableRow = this.findAvailableRow(targetDate);
+      id: cloneElement.dataset.eventId || '',
+      title: cloneElement.dataset.title || '',
+      start: new Date(targetDate),
+      end: new Date(targetDate),
+      type: 'work',
+      allDay: true,
+      syncStatus: 'synced'
+    };
+
+    // Get existing all-day events from EventManager
+    const existingEvents = this.getExistingAllDayEvents();
+    
+    // Add the new drag event to the array
+    const allEvents = [...existingEvents, mockEvent];
+    
+    // Get actual visible dates from DOM headers (same as EventRendererManager does)
+    const weekDates = this.getVisibleDatesFromDOM();
+    
+    // Calculate layout for all events including the new one
+    const layouts = this.calculateAllDayEventsLayout(allEvents, weekDates);
+    const layout = layouts.get(mockEvent.id);
+    
+    if (!layout) {
+      console.error('AllDayManager: No layout found for drag event', mockEvent.id);
+      return;
+    }
 
     // Set all properties BEFORE adding to DOM
     cloneElement.classList.add('all-day-style');
-    cloneElement.style.gridColumn = columnIndex.toString();
+    cloneElement.style.gridColumn = layout.startColumn.toString();
-    cloneElement.style.gridRow = availableRow.toString();
+    cloneElement.style.gridRow = layout.row.toString();
     cloneElement.dataset.allDayDate = targetDate;
     cloneElement.style.display = '';
 
     // NOW add to container (after all positioning is calculated)
     allDayContainer.appendChild(cloneElement);
 
-    console.log('✅ AllDayManager: Converted to all-day style', {
+    console.log('✅ AllDayManager: Converted to all-day style using AllDayLayoutEngine', {
       eventId: cloneElement.dataset.eventId,
-      gridColumn: columnIndex,
+      gridColumn: layout.startColumn,
-      gridRow: availableRow
+      gridRow: layout.row
     });
   }
 
-  /**
-   * Get column index for a specific date
-   */
-  private getColumnIndexForDate(targetDate: string): number {
-    const dayHeaders = document.querySelectorAll('swp-day-header');
-    let columnIndex = 1;
-    dayHeaders.forEach((header, index) => {
-      if ((header as HTMLElement).dataset.date === targetDate) {
-        columnIndex = index + 1;
-      }
-    });
-    return columnIndex;
-  }
-
-  /**
-   * Find available row for all-day event in specific date column
-   */
-  private findAvailableRow(targetDate: string): number {
-    const container = this.getAllDayContainer();
-    if (!container) return 1;
-
-    const columnIndex = this.getColumnIndexForDate(targetDate);
-    const existingEvents = container.querySelectorAll('swp-event');
-    const occupiedRows = new Set<number>();
-
-    existingEvents.forEach(event => {
-      const style = getComputedStyle(event);
-      const eventStartCol = parseInt(style.gridColumnStart);
-      const eventRow = parseInt(style.gridRowStart) || 1;
-
-      // Only check events in the same column
-      if (eventStartCol === columnIndex) {
-        occupiedRows.add(eventRow);
-      }
-    });
-
-    // Find first available row
-    let targetRow = 1;
-    while (occupiedRows.has(targetRow)) {
-      targetRow++;
-    }
-
-    return targetRow;
-  }
-
   /**
    * Handle conversion from all-day back to timed event
    */
@@ -366,9 +400,6 @@ export class AllDayManager {
     // Remove all-day date attribute
     delete cloneElement.dataset.allDayDate;
 
-    // Move back to appropriate day column (will be handled by drag logic)
-    // The drag system will position it correctly
-
     console.log('✅ AllDayManager: Converted from all-day back to timed');
   }
 
@@ -436,7 +467,6 @@ export class AllDayManager {
    * Handle drag end for all-day events
    */
   private handleDragEnd(originalElement: HTMLElement, dragClone: HTMLElement, finalPosition: { column: string; y: number }): void {
-
     // Normalize clone
     const cloneId = dragClone.dataset.eventId;
     if (cloneId?.startsWith('clone-')) {
@@ -449,11 +479,59 @@ export class AllDayManager {
     dragClone.style.cursor = '';
     dragClone.style.opacity = '';
 
-
-
     console.log('✅ AllDayManager: Completed drag operation for all-day event', {
       eventId: dragClone.dataset.eventId,
       finalColumn: dragClone.style.gridColumn
     });
   }
+
+  /**
+   * Get existing all-day events from DOM
+   * Since we don't have direct access to EventManager, we'll get events from the current DOM
+   */
+  private getExistingAllDayEvents(): CalendarEvent[] {
+    const allDayContainer = this.getAllDayContainer();
+    if (!allDayContainer) {
+      return [];
+    }
+
+    const existingElements = allDayContainer.querySelectorAll('swp-event');
+    const events: CalendarEvent[] = [];
+
+    existingElements.forEach(element => {
+      const htmlElement = element as HTMLElement;
+      const eventId = htmlElement.dataset.eventId;
+      const title = htmlElement.dataset.title || htmlElement.textContent || '';
+      const allDayDate = htmlElement.dataset.allDayDate;
+
+      if (eventId && allDayDate) {
+        events.push({
+          id: eventId,
+          title: title,
+          start: new Date(allDayDate),
+          end: new Date(allDayDate),
+          type: 'work',
+          allDay: true,
+          syncStatus: 'synced'
+        });
+      }
+    });
+
+    return events;
+  }
+
+  private getVisibleDatesFromDOM(): string[] {
+    const dayHeaders = document.querySelectorAll('swp-calendar-header swp-day-header');
+        const weekDates: string[] = [];
+        
+        dayHeaders.forEach(header => {
+            const dateAttr = header.getAttribute('data-date');
+            if (dateAttr) {
+                weekDates.push(dateAttr);
+            }
+        });
+    
+    return weekDates;
+  }
+
 }

src/renderers/AllDayEventRenderer.ts

@@ -4,6 +4,7 @@ import { SwpAllDayEventElement } from '../elements/SwpEventElement';
 /**
  * AllDayEventRenderer - Simple rendering of all-day events
  * Handles adding and removing all-day events from the header container
+ * NOTE: Layout calculation is now handled by AllDayManager
  */
 export class AllDayEventRenderer {
   private container: HTMLElement | null = null;
@@ -34,19 +35,23 @@ export class AllDayEventRenderer {
   // REMOVED: createGhostColumns() method - no longer needed!
 
   /**
-   * Render an all-day event using factory pattern
+   * Render an all-day event with pre-calculated layout
    */
-  public renderAllDayEvent(event: CalendarEvent, targetDate?: string): HTMLElement | null {
+  public renderAllDayEventWithLayout(
+    event: CalendarEvent,
+    layout: { startColumn: number; endColumn: number; row: number; columnSpan: number }
+  ): HTMLElement | null {
     const container = this.getContainer();
     if (!container) return null;
 
-    const allDayElement = SwpAllDayEventElement.fromCalendarEvent(event, targetDate);
+    const allDayElement = SwpAllDayEventElement.fromCalendarEventWithLayout(event, layout);
     const element = allDayElement.getElement();
     
     container.appendChild(element);
     return element;
   }
 
+
   /**
    * Remove an all-day event by ID
    */

src/renderers/EventRendererManager.ts

@@ -4,6 +4,7 @@ import { CoreEvents } from '../constants/CoreEvents';
 import { calendarConfig } from '../core/CalendarConfig';
 import { CalendarTypeFactory } from '../factories/CalendarTypeFactory';
 import { EventManager } from '../managers/EventManager';
+import { AllDayManager } from '../managers/AllDayManager';
 import { EventRendererStrategy } from './EventRenderer';
 import { SwpEventElement } from '../elements/SwpEventElement';
 import { AllDayEventRenderer } from './AllDayEventRenderer';
@@ -17,7 +18,7 @@ export class EventRenderingService {
     private eventManager: EventManager;
     private strategy: EventRendererStrategy;
     private allDayEventRenderer: AllDayEventRenderer;
-    
+    private allDayManager: AllDayManager;
 
     private dragMouseLeaveHeaderListener: ((event: Event) => void) | null = null;
 
@@ -29,8 +30,9 @@ export class EventRenderingService {
         const calendarType = calendarConfig.getCalendarMode();
         this.strategy = CalendarTypeFactory.getEventRenderer(calendarType);
         
-        // Initialize all-day event renderer
+        // Initialize all-day event renderer and manager
         this.allDayEventRenderer = new AllDayEventRenderer();
+        this.allDayManager = new AllDayManager();
 
         this.setupEventListeners();
     }
@@ -349,13 +351,35 @@ export class EventRenderingService {
         // Clear existing all-day events first
         this.clearAllDayEvents();
 
-        // Render each all-day event
+        // Get actual visible dates from DOM headers instead of generating them
+        const weekDates = this.getVisibleDatesFromDOM();
+        
+        console.log('🔍 EventRenderingService: Using visible dates from DOM', {
+            weekDates,
+            count: weekDates.length
+        });
+        
+        // Calculate layout for ALL all-day events together using AllDayLayoutEngine
+        const layouts = this.allDayManager.calculateAllDayEventsLayout(allDayEvents, weekDates);
+        
+        // Render each all-day event with pre-calculated layout
         allDayEvents.forEach(event => {
-            const renderedElement = this.allDayEventRenderer.renderAllDayEvent(event);
+            const layout = layouts.get(event.id);
+            if (!layout) {
+                console.warn('❌ EventRenderingService: No layout found for all-day event', {
+                    id: event.id,
+                    title: event.title
+                });
+                return;
+            }
+            
+            // Render with pre-calculated layout
+            const renderedElement = this.allDayEventRenderer.renderAllDayEventWithLayout(event, layout);
             if (renderedElement) {
-                console.log('✅ EventRenderingService: Rendered all-day event', {
+                console.log('✅ EventRenderingService: Rendered all-day event with AllDayLayoutEngine', {
                     id: event.id,
                     title: event.title,
+                    gridArea: layout.gridArea,
                     element: renderedElement.tagName
                 });
             } else {
@@ -392,6 +416,26 @@ export class EventRenderingService {
         this.clearEvents(container);
     }
 
+    /**
+     * Get visible dates from DOM headers - only the dates that are actually displayed
+     */
+    private getVisibleDatesFromDOM(): string[] {
+       
+        const dayHeaders = document.querySelectorAll('swp-calendar-header swp-day-header');
+        const weekDates: string[] = [];
+        
+        dayHeaders.forEach(header => {
+            const dateAttr = header.getAttribute('data-date');
+            if (dateAttr) {
+                weekDates.push(dateAttr);
+            }
+        });
+        
+        
+        return weekDates;
+    }
+
+
     public destroy(): void {
         this.clearEvents();
     }

src/utils/AllDayLayoutEngine.ts

@@ -0,0 +1,166 @@
+/**
+ * AllDayLayoutEngine - Pure data-driven layout calculation for all-day events
+ */
+
+import { CalendarEvent } from '../types/CalendarTypes';
+
+export interface EventLayout {
+  id: string;
+  gridArea: string; // "row-start / col-start / row-end / col-end"
+  startColumn: number;
+  endColumn: number;
+  row: number;
+  columnSpan: number;
+}
+
+export class AllDayLayoutEngine {
+  private weekDates: string[];
+
+  constructor(weekDates: string[]) {
+    this.weekDates = weekDates;
+  }
+
+  /**
+   * Calculate layout for all events with proper overlap detection
+   */
+  public calculateLayout(events: CalendarEvent[]): Map<string, EventLayout> {
+    const layouts = new Map<string, EventLayout>();
+    
+    // Sort by event duration (longest first), then by start date
+    const sortedEvents = [...events].sort((a, b) => {
+      const durationA = this.calculateEventDuration(a);
+      const durationB = this.calculateEventDuration(b);
+      
+      // Primary sort: longest duration first
+      if (durationA !== durationB) {
+        return durationB - durationA;
+      }
+      
+      // Secondary sort: earliest start date first
+      const startA = a.start.toISOString().split('T')[0];
+      const startB = b.start.toISOString().split('T')[0];
+      return startA.localeCompare(startB);
+    });
+    
+    sortedEvents.forEach(event => {
+      const layout = this.calculateEventLayout(event, layouts);
+      layouts.set(event.id, layout);
+    });
+    
+    return layouts;
+  }
+
+  /**
+   * Calculate event duration in days
+   */
+  private calculateEventDuration(event: CalendarEvent): number {
+    const startDate = event.start;
+    const endDate = event.end;
+    const diffTime = endDate.getTime() - startDate.getTime();
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1; // +1 because same day = 1 day
+    return diffDays;
+  }
+
+  /**
+   * Calculate layout for single event considering existing events
+   */
+  private calculateEventLayout(event: CalendarEvent, existingLayouts: Map<string, EventLayout>): EventLayout {
+    // Calculate column span
+    const { startColumn, endColumn, columnSpan } = this.calculateColumnSpan(event);
+    
+    // Find available row using overlap detection
+    const availableRow = this.findAvailableRow(startColumn, endColumn, existingLayouts);
+    
+    // Generate grid-area string: "row-start / col-start / row-end / col-end"
+    const gridArea = `${availableRow} / ${startColumn} / ${availableRow + 1} / ${endColumn + 1}`;
+    
+    return {
+      id: event.id,
+      gridArea,
+      startColumn,
+      endColumn,
+      row: availableRow,
+      columnSpan
+    };
+  }
+
+  /**
+   * Calculate column span based on event start and end dates
+   */
+  private calculateColumnSpan(event: CalendarEvent): { startColumn: number; endColumn: number; columnSpan: number } {
+    // Convert CalendarEvent dates to YYYY-MM-DD format
+    const startDate = event.start.toISOString().split('T')[0];
+    const endDate = event.end.toISOString().split('T')[0];
+    // Find start and end column indices (1-based)
+    let startColumn = -1;
+    let endColumn = -1;
+    
+    this.weekDates.forEach((dateStr, index) => {
+      if (dateStr === startDate) {
+        startColumn = index + 1;
+      }
+      if (dateStr === endDate) {
+        endColumn = index + 1;
+      }
+    });
+    
+    // Handle events that start before or end after the week
+    if (startColumn === -1) {
+      startColumn = 1; // Event starts before this week
+    }
+    if (endColumn === -1) {
+      endColumn = this.weekDates.length; // Event ends after this week
+    }
+    
+    // Ensure end column is at least start column
+    if (endColumn < startColumn) {
+      endColumn = startColumn;
+    }
+    
+    const columnSpan = endColumn - startColumn + 1;
+    
+    return { startColumn, endColumn, columnSpan };
+  }
+
+  /**
+   * Find available row using overlap detection
+   */
+  private findAvailableRow(
+    newStartColumn: number, 
+    newEndColumn: number, 
+    existingLayouts: Map<string, EventLayout>
+  ): number {
+    const occupiedRows = new Set<number>();
+    
+    // Check all existing events for overlaps
+    existingLayouts.forEach(layout => {
+      const overlaps = this.columnsOverlap(
+        newStartColumn, newEndColumn,
+        layout.startColumn, layout.endColumn
+      );
+      
+      if (overlaps) {
+        occupiedRows.add(layout.row);
+      }
+    });
+    
+    // Find first available row
+    let targetRow = 1;
+    while (occupiedRows.has(targetRow)) {
+      targetRow++;
+    }
+    
+    return targetRow;
+  }
+
+  /**
+   * Check if two column ranges overlap
+   */
+  private columnsOverlap(
+    startA: number, endA: number, 
+    startB: number, endB: number
+  ): boolean {
+    // Two ranges overlap if one doesn't end before the other starts
+    return !(endA < startB || endB < startA);
+  }
+}

test/managers/AllDayLayoutEngine.test.ts

@@ -0,0 +1,138 @@
+import { describe, it, expect } from 'vitest';
+import { AllDayLayoutEngine } from '../../src/utils/AllDayLayoutEngine';
+import { CalendarEvent } from '../../src/types/CalendarTypes';
+
+describe('AllDay Layout Engine - Pure Data Tests', () => {
+  const weekDates = [
+    '2025-09-22', '2025-09-23', '2025-09-24', '2025-09-25',
+    '2025-09-26', '2025-09-27', '2025-09-28'
+  ];
+  const layoutEngine = new AllDayLayoutEngine(weekDates);
+  
+  // Test data: events med start/end datoer og forventet grid-area
+  const testCases = [
+    {
+      name: 'Single day events - no overlap',
+      events: [
+        { id: '1', title: 'Event 1', start: new Date('2025-09-22'), end: new Date('2025-09-22'), type: 'work', allDay: true, syncStatus: 'synced' } as CalendarEvent,
+        { id: '2', title: 'Event 2', start: new Date('2025-09-24'), end: new Date('2025-09-24'), type: 'work', allDay: true, syncStatus: 'synced' } as CalendarEvent
+      ],
+      expected: [
+        { id: '1', gridArea: '1 / 1 / 2 / 2' }, // row 1, column 1 (Sept 22)
+        { id: '2', gridArea: '1 / 3 / 2 / 4' }  // row 1, column 3 (Sept 24)
+      ]
+    },
+    
+    {
+      name: 'Overlapping multi-day events - Autumn Equinox vs Teknisk Workshop',
+      events: [
+        { id: 'autumn', title: 'Autumn Equinox', start: new Date('2025-09-22'), end: new Date('2025-09-23'), type: 'work', allDay: true, syncStatus: 'synced' } as CalendarEvent,
+        { id: 'workshop', title: 'Teknisk Workshop', start: new Date('2025-09-23'), end: new Date('2025-09-26'), type: 'work', allDay: true, syncStatus: 'synced' } as CalendarEvent
+      ],
+      expected: [
+        { id: 'autumn', gridArea: '2 / 1 / 3 / 3' },   // row 2, columns 1-2 (2 dage, processed second)
+        { id: 'workshop', gridArea: '1 / 2 / 2 / 6' }  // row 1, columns 2-5 (4 dage, processed first)
+      ]
+    },
+    
+    {
+      name: 'Multiple events same column',
+      events: [
+        { id: '1', title: 'Event 1', start: new Date('2025-09-23'), end: new Date('2025-09-23'), type: 'work', allDay: true, syncStatus: 'synced' } as CalendarEvent,
+        { id: '2', title: 'Event 2', start: new Date('2025-09-23'), end: new Date('2025-09-23'), type: 'work', allDay: true, syncStatus: 'synced' } as CalendarEvent,
+        { id: '3', title: 'Event 3', start: new Date('2025-09-23'), end: new Date('2025-09-23'), type: 'work', allDay: true, syncStatus: 'synced' } as CalendarEvent
+      ],
+      expected: [
+        { id: '1', gridArea: '1 / 2 / 2 / 3' }, // row 1, column 2 (Sept 23)
+        { id: '2', gridArea: '2 / 2 / 3 / 3' }, // row 2, column 2 (Sept 23)
+        { id: '3', gridArea: '3 / 2 / 4 / 3' }  // row 3, column 2 (Sept 23)
+      ]
+    },
+    
+    {
+      name: 'Partial overlaps',
+      events: [
+        { id: '1', title: 'Event 1', start: new Date('2025-09-22'), end: new Date('2025-09-23'), type: 'work', allDay: true, syncStatus: 'synced' } as CalendarEvent,
+        { id: '2', title: 'Event 2', start: new Date('2025-09-23'), end: new Date('2025-09-24'), type: 'work', allDay: true, syncStatus: 'synced' } as CalendarEvent,
+        { id: '3', title: 'Event 3', start: new Date('2025-09-25'), end: new Date('2025-09-26'), type: 'work', allDay: true, syncStatus: 'synced' } as CalendarEvent
+      ],
+      expected: [
+        { id: '1', gridArea: '1 / 1 / 2 / 3' }, // row 1, columns 1-2 (Sept 22-23)
+        { id: '2', gridArea: '2 / 2 / 3 / 4' }, // row 2, columns 2-3 (Sept 23-24, overlap på column 2)
+        { id: '3', gridArea: '1 / 4 / 2 / 6' }  // row 1, columns 4-5 (Sept 25-26, no overlap)
+      ]
+    },
+    
+    {
+      name: 'Complex overlapping pattern',
+      events: [
+        { id: '1', title: 'Long Event', start: new Date('2025-09-22'), end: new Date('2025-09-25'), type: 'work', allDay: true, syncStatus: 'synced' } as CalendarEvent,
+        { id: '2', title: 'Short Event', start: new Date('2025-09-23'), end: new Date('2025-09-24'), type: 'work', allDay: true, syncStatus: 'synced' } as CalendarEvent,
+        { id: '3', title: 'Another Event', start: new Date('2025-09-24'), end: new Date('2025-09-26'), type: 'work', allDay: true, syncStatus: 'synced' } as CalendarEvent
+      ],
+      expected: [
+        { id: '1', gridArea: '1 / 1 / 2 / 5' }, // row 1, columns 1-4 (4 dage, processed first)
+        { id: '2', gridArea: '3 / 2 / 4 / 4' }, // row 3, columns 2-3 (2 dage, processed last)
+        { id: '3', gridArea: '2 / 3 / 3 / 6' }  // row 2, columns 3-5 (3 dage, processed second)
+      ]
+    },
+    
+    {
+      name: 'Real-world bug scenario - Multiple overlapping events (Sept 21-28)',
+      events: [
+        { id: '112', title: 'Autumn Equinox', start: new Date('2025-09-22'), end: new Date('2025-09-23'), type: 'work', allDay: true, syncStatus: 'synced' } as CalendarEvent,
+        { id: '122', title: 'Multi-Day Conference', start: new Date('2025-09-21'), end: new Date('2025-09-24'), type: 'work', allDay: true, syncStatus: 'synced' } as CalendarEvent,
+        { id: '123', title: 'Project Sprint', start: new Date('2025-09-22'), end: new Date('2025-09-25'), type: 'work', allDay: true, syncStatus: 'synced' } as CalendarEvent,
+        { id: '143', title: 'Weekend Hackathon', start: new Date('2025-09-26'), end: new Date('2025-09-28'), type: 'work', allDay: true, syncStatus: 'synced' } as CalendarEvent,
+        { id: '161', title: 'Teknisk Workshop', start: new Date('2025-09-23'), end: new Date('2025-09-26'), type: 'work', allDay: true, syncStatus: 'synced' } as CalendarEvent
+      ],
+      expected: [
+        { id: '112', gridArea: '4 / 1 / 5 / 3' },   // Autumn Equinox: row 4, columns 1-2 (2 dage, processed last)
+        { id: '122', gridArea: '1 / 1 / 2 / 4' },   // Multi-Day Conference: row 1, columns 1-3 (4 dage, starts 21/9, processed first)
+        { id: '123', gridArea: '2 / 1 / 3 / 5' },   // Project Sprint: row 2, columns 1-4 (4 dage, starts 22/9, processed second)
+        { id: '143', gridArea: '1 / 5 / 2 / 8' },   // Weekend Hackathon: row 1, columns 5-7 (3 dage, no overlap, reuse row 1)
+        { id: '161', gridArea: '3 / 2 / 4 / 6' }    // Teknisk Workshop: row 3, columns 2-5 (4 dage, starts 23/9, processed third)
+      ]
+    }
+  ];
+
+  testCases.forEach(testCase => {
+    it(testCase.name, () => {
+      // Calculate actual layouts using AllDayLayoutEngine
+      const layouts = layoutEngine.calculateLayout(testCase.events);
+      
+      // Verify we got layouts for all events
+      expect(layouts.size).toBe(testCase.events.length);
+      
+      // Check each expected result
+      testCase.expected.forEach(expected => {
+        const actualLayout = layouts.get(expected.id);
+        expect(actualLayout).toBeDefined();
+        expect(actualLayout!.gridArea).toBe(expected.gridArea);
+      });
+    });
+  });
+  
+  it('Grid-area format validation', () => {
+    // Test at grid-area format er korrekt
+    const gridArea = '2 / 3 / 3 / 5'; // row 2, columns 3-4
+    const parts = gridArea.split(' / ');
+    
+    const rowStart = parseInt(parts[0]); // 2
+    const colStart = parseInt(parts[1]); // 3  
+    const rowEnd = parseInt(parts[2]);   // 3
+    const colEnd = parseInt(parts[3]);   // 5
+    
+    expect(rowStart).toBe(2);
+    expect(colStart).toBe(3);
+    expect(rowEnd).toBe(3);
+    expect(colEnd).toBe(5);
+    
+    // Verify spans
+    const rowSpan = rowEnd - rowStart; // 1 row
+    const colSpan = colEnd - colStart; // 2 columns
+    
+    expect(rowSpan).toBe(1);
+    expect(colSpan).toBe(2);
+  });
+});

test/managers/AllDayManager.test.ts

@@ -0,0 +1,134 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { AllDayManager } from '../../src/managers/AllDayManager';
+import { setupMockDOM, createMockEvent } from '../helpers/dom-helpers';
+
+describe('AllDayManager - Layout Calculation', () => {
+  let allDayManager: AllDayManager;
+
+  beforeEach(() => {
+    setupMockDOM();
+    allDayManager = new AllDayManager();
+  });
+
+  describe('Overlap Detection Scenarios', () => {
+    it('Scenario 1: Non-overlapping single-day events', () => {
+      // Event 1: Sept 22 (column 1)
+      const event1 = createMockEvent('1', 'Event 1', '2024-09-22', '2024-09-22');
+      const layout1 = allDayManager.calculateAllDayEventLayout(event1);
+      
+      expect(layout1.startColumn).toBe(1);
+      expect(layout1.row).toBe(1);
+      
+      // Event 2: Sept 24 (column 3) - different column, should be row 1
+      const event2 = createMockEvent('2', 'Event 2', '2024-09-24', '2024-09-24');
+      const layout2 = allDayManager.calculateAllDayEventLayout(event2);
+      
+      expect(layout2.startColumn).toBe(3);
+      expect(layout2.row).toBe(1);
+    });
+
+    it('Scenario 2: Overlapping multi-day events - Autumn Equinox vs Teknisk Workshop', () => {
+      // Autumn Equinox: Sept 22-23 (columns 1-2)
+      const autumnEvent = createMockEvent('autumn', 'Autumn Equinox', '2024-09-22', '2024-09-23');
+      const autumnLayout = allDayManager.calculateAllDayEventLayout(autumnEvent);
+      
+      expect(autumnLayout.startColumn).toBe(1);
+      expect(autumnLayout.endColumn).toBe(2);
+      expect(autumnLayout.row).toBe(1);
+      
+      // Teknisk Workshop: Sept 23-26 (columns 2-5) - overlaps on Sept 23
+      const workshopEvent = createMockEvent('workshop', 'Teknisk Workshop', '2024-09-23', '2024-09-26');
+      const workshopLayout = allDayManager.calculateAllDayEventLayout(workshopEvent);
+      
+      expect(workshopLayout.startColumn).toBe(2);
+      expect(workshopLayout.endColumn).toBe(5);
+      expect(workshopLayout.row).toBe(2); // Should be row 2 due to overlap
+    });
+
+    it('Scenario 3: Multiple events in same column', () => {
+      // Event 1: Sept 23 only
+      const event1 = createMockEvent('1', 'Event 1', '2024-09-23', '2024-09-23');
+      const layout1 = allDayManager.calculateAllDayEventLayout(event1);
+      
+      expect(layout1.startColumn).toBe(2);
+      expect(layout1.row).toBe(1);
+      
+      // Event 2: Sept 23 only - same column, should be row 2
+      const event2 = createMockEvent('2', 'Event 2', '2024-09-23', '2024-09-23');
+      const layout2 = allDayManager.calculateAllDayEventLayout(event2);
+      
+      expect(layout2.startColumn).toBe(2);
+      expect(layout2.row).toBe(2);
+      
+      // Event 3: Sept 23 only - same column, should be row 3
+      const event3 = createMockEvent('3', 'Event 3', '2024-09-23', '2024-09-23');
+      const layout3 = allDayManager.calculateAllDayEventLayout(event3);
+      
+      expect(layout3.startColumn).toBe(2);
+      expect(layout3.row).toBe(3);
+    });
+
+    it('Scenario 4: Partial overlaps', () => {
+      // Event 1: Sept 22-23 (columns 1-2)
+      const event1 = createMockEvent('1', 'Event 1', '2024-09-22', '2024-09-23');
+      const layout1 = allDayManager.calculateAllDayEventLayout(event1);
+      
+      expect(layout1.startColumn).toBe(1);
+      expect(layout1.endColumn).toBe(2);
+      expect(layout1.row).toBe(1);
+      
+      // Event 2: Sept 23-24 (columns 2-3) - overlaps on Sept 23
+      const event2 = createMockEvent('2', 'Event 2', '2024-09-23', '2024-09-24');
+      const layout2 = allDayManager.calculateAllDayEventLayout(event2);
+      
+      expect(layout2.startColumn).toBe(2);
+      expect(layout2.endColumn).toBe(3);
+      expect(layout2.row).toBe(2); // Should be row 2 due to overlap
+      
+      // Event 3: Sept 25-26 (columns 4-5) - no overlap, should be row 1
+      const event3 = createMockEvent('3', 'Event 3', '2024-09-25', '2024-09-26');
+      const layout3 = allDayManager.calculateAllDayEventLayout(event3);
+      
+      expect(layout3.startColumn).toBe(4);
+      expect(layout3.endColumn).toBe(5);
+      expect(layout3.row).toBe(1); // No overlap, back to row 1
+    });
+
+    it('Scenario 5: Complex overlapping pattern', () => {
+      // Event 1: Sept 22-25 (columns 1-4) - spans most of week
+      const event1 = createMockEvent('1', 'Long Event', '2024-09-22', '2024-09-25');
+      const layout1 = allDayManager.calculateAllDayEventLayout(event1);
+      
+      expect(layout1.startColumn).toBe(1);
+      expect(layout1.endColumn).toBe(4);
+      expect(layout1.row).toBe(1);
+      
+      // Event 2: Sept 23-24 (columns 2-3) - overlaps with Event 1
+      const event2 = createMockEvent('2', 'Short Event', '2024-09-23', '2024-09-24');
+      const layout2 = allDayManager.calculateAllDayEventLayout(event2);
+      
+      expect(layout2.startColumn).toBe(2);
+      expect(layout2.endColumn).toBe(3);
+      expect(layout2.row).toBe(2);
+      
+      // Event 3: Sept 24-26 (columns 3-5) - overlaps with both
+      const event3 = createMockEvent('3', 'Another Event', '2024-09-24', '2024-09-26');
+      const layout3 = allDayManager.calculateAllDayEventLayout(event3);
+      
+      expect(layout3.startColumn).toBe(3);
+      expect(layout3.endColumn).toBe(5);
+      expect(layout3.row).toBe(3); // Should be row 3 due to overlaps with both
+    });
+
+    it('Scenario 6: Drag-drop target date override', () => {
+      // Multi-day event dragged to specific date should use single column
+      const event = createMockEvent('drag', 'Dragged Event', '2024-09-22', '2024-09-25');
+      const layout = allDayManager.calculateAllDayEventLayout(event, '2024-09-24');
+      
+      expect(layout.startColumn).toBe(3); // Sept 24 is column 3
+      expect(layout.endColumn).toBe(3);   // Single column when targetDate specified
+      expect(layout.columnSpan).toBe(1);
+      expect(layout.row).toBe(1);
+    });
+  });
+});

test/setup.ts

@@ -0,0 +1,13 @@
+import { beforeEach } from 'vitest';
+
+// Global test setup
+beforeEach(() => {
+  // Clear DOM before each test
+  document.body.innerHTML = '';
+  document.head.innerHTML = '';
+  
+  // Reset any global state
+  if (typeof window !== 'undefined') {
+    // Clear any event listeners or global variables if needed
+  }
+});

vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./test/setup.ts'],
+    globals: true,
+  },
+});