wip

src/managers/EventManager.ts

@@ -180,6 +180,33 @@ export class EventManager {
                 allDay: false,
                 syncStatus: 'synced',
                 metadata: { duration: 120 }
+            },
+            // All-day events for demo
+            {
+                id: '15',
+                title: 'Company Holiday',
+                start: '2025-08-04T00:00:00',
+                end: '2025-08-04T23:59:59',
+                type: 'milestone',
+                allDay: true,
+                syncStatus: 'synced',
+                metadata: {
+                    duration: 1440, // Full day in minutes
+                    color: '#4caf50' // Green color
+                }
+            },
+            {
+                id: '16',
+                title: 'Team Building Event',
+                start: '2025-08-06T00:00:00',
+                end: '2025-08-06T23:59:59',
+                type: 'meeting',
+                allDay: true,
+                syncStatus: 'synced',
+                metadata: {
+                    duration: 1440, // Full day in minutes
+                    color: '#2196f3' // Blue color
+                }
             }
         ];
 

src/managers/GridManager.ts

@@ -21,6 +21,7 @@ export class GridManager {
   private container: HTMLElement | null = null;
   private grid: HTMLElement | null = null;
   private currentWeek: Date | null = null;
+  private allDayEvents: any[] = []; // Store all-day events for current week
   
   constructor() {
     this.init();
@@ -76,6 +77,12 @@ export class GridManager {
       this.render();
     });
 
+    // Handle events loaded
+    eventBus.on(EventTypes.EVENTS_LOADED, (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      this.updateAllDayEvents(detail.events);
+    });
+
     // Handle grid clicks
     this.setupGridInteractions();
   }
@@ -255,34 +262,91 @@ export class GridManager {
       weekHeader.appendChild(header);
     });
 
-    // Add all-day events in row 2
+    // Render all-day events in row 2
-    const allDayEventLeft = document.createElement('swp-allday-event');
+    this.renderAllDayEvents(weekHeader);
-    allDayEventLeft.textContent = 'Left Section';
-    allDayEventLeft.style.gridColumn = '1 / 3'; // Span columns 1-2
-    weekHeader.appendChild(allDayEventLeft);
-
-    const allDayEventRight = document.createElement('swp-allday-event');
-    allDayEventRight.textContent = 'Right Section';
-    allDayEventRight.style.gridColumn = '3 / 8'; // Span columns 3-7
-    weekHeader.appendChild(allDayEventRight);
 
     // Update spacer heights based on all-day events
     this.updateSpacerHeights();
   }
 
+  /**
+   * Update all-day events data and re-render if needed
+   */
+  private updateAllDayEvents(events: any[]): void {
+    if (!this.currentWeek) return;
+
+    // Filter all-day events for current week
+    const weekStart = this.currentWeek;
+    const weekEnd = new Date(weekStart);
+    weekEnd.setDate(weekStart.getDate() + 6);
+
+    this.allDayEvents = events.filter(event => {
+      if (!event.allDay) return false;
+      
+      const eventDate = new Date(event.start);
+      return eventDate >= weekStart && eventDate <= weekEnd;
+    });
+
+    console.log('GridManager: Updated all-day events:', this.allDayEvents.length);
+    
+    // Re-render if grid is already rendered
+    if (this.grid && this.grid.children.length > 0) {
+      this.render();
+    }
+  }
+
+  /**
+   * Render all-day events in week header row 2
+   */
+  private renderAllDayEvents(weekHeader: HTMLElement): void {
+    if (!this.currentWeek) return;
+
+    const dates = this.getWeekDates(this.currentWeek);
+    const weekDays = calendarConfig.get('weekDays');
+    const daysToShow = dates.slice(0, weekDays);
+
+    // Group all-day events by date
+    const eventsByDate = new Map<string, any[]>();
+    
+    this.allDayEvents.forEach(event => {
+      const eventDate = new Date(event.start);
+      const dateKey = this.formatDate(eventDate);
+      
+      if (!eventsByDate.has(dateKey)) {
+        eventsByDate.set(dateKey, []);
+      }
+      eventsByDate.get(dateKey)!.push(event);
+    });
+
+    // Render all-day events for each day
+    daysToShow.forEach((date, dayIndex) => {
+      const dateKey = this.formatDate(date);
+      const dayEvents = eventsByDate.get(dateKey) || [];
+      
+      dayEvents.forEach(event => {
+        const allDayEvent = document.createElement('swp-allday-event');
+        allDayEvent.textContent = event.title;
+        allDayEvent.style.gridColumn = `${dayIndex + 1} / ${dayIndex + 2}`; // Single column
+        allDayEvent.style.backgroundColor = event.metadata?.color || '#ff9800';
+        
+        weekHeader.appendChild(allDayEvent);
+      });
+    });
+  }
+
   /**
    * Update spacer heights based on all-day events presence
    */
   private updateSpacerHeights(): void {
-    // TODO: Check for actual all-day events in current week
+    const allDayEventCount = this.allDayEvents.length;
-    // For now, simulate having all-day events with 30px height
+    const eventHeight = 20; // Height per all-day event in pixels
-    const hasAllDayEvents = true; // This should be determined from actual event data
+    const padding = 4; // Top/bottom padding
-    const allDayHeight = hasAllDayEvents ? 30 : 0;
+    const allDayHeight = allDayEventCount > 0 ? (allDayEventCount * eventHeight) + padding : 0;
     
     // Set CSS variable for dynamic spacer height
     document.documentElement.style.setProperty('--all-day-row-height', `${allDayHeight}px`);
     
-    console.log('GridManager: Updated --all-day-row-height to', `${allDayHeight}px`);
+    console.log('GridManager: Updated --all-day-row-height to', `${allDayHeight}px`, 'for', allDayEventCount, 'events');
   }
 
   /**

wwwroot/css/calendar-layout-css.css

@@ -280,10 +280,19 @@ swp-week-header::after {
 /* All-day events in row 2 */
 swp-allday-event {
   grid-row: 2; /* Row 2 only */
-  background: #ff9800; /* Orange background */
+  height: calc(var(--all-day-row-height) - 2px); /* Dynamic height minus margin */
+  background: #ff9800; /* Default orange background */
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
+  color: #fff;
+  font-size: 0.75rem;
+  padding: 2px 4px;
+  margin: 1px;
+  border-radius: 3px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   border-right: 1px solid rgba(0, 0, 0, 0.1);
 }