Updates calendar week info and event rendering

Refactors how the calendar week information is updated to use the actual rendered column dates, ensuring accuracy after workweek changes. It also adjusts event rendering to target the swp-calendar-container element, preventing rendering issues. The change also addresses a styling issue that was preventing the scroll bar from appearing in the correct location.

src/managers/CalendarManager.ts

@@ -269,12 +269,20 @@ export class CalendarManager {
             const customEvent = event as CustomEvent;
             console.log('CalendarManager: Workweek changed to', customEvent.detail.workWeekId);
             this.handleWorkweekChange();
+            
+            // Also update week info display since workweek affects date range display
+            this.updateWeekInfoForWorkweekChange();
         });
 
         // Lyt efter reset requests
         this.eventBus.on(EventTypes.RESET_REQUESTED, () => {
             this.reset();
         });
+
+        // Update week info when grid is rendered with actual column dates
+        this.eventBus.on(EventTypes.GRID_RENDERED, () => {
+            this.updateWeekInfoFromRenderedColumns();
+        });
     }
 
     /**
@@ -410,11 +418,115 @@ export class CalendarManager {
         // Get current period data to determine date range
         const periodData = this.calculateCurrentPeriod();
         
-        // Trigger event rendering for the current date range
+        // Find the grid container to render events in
-        this.eventRenderer.renderEventsForDateRange(
+        const container = document.querySelector('swp-calendar-container');
-            periodData.startDate, 
+        if (!container) {
-            periodData.endDate
+            console.warn('CalendarManager: No container found for event re-rendering');
-        );
+            return;
+        }
+        
+        // Trigger event rendering for the current date range using correct method
+        this.eventRenderer.renderEvents({
+            container: container as HTMLElement,
+            startDate: new Date(periodData.startDate), 
+            endDate: new Date(periodData.endDate)
+        });
+    }
+
+    /**
+     * Update week info display after workweek changes
+     */
+    private updateWeekInfoForWorkweekChange(): void {
+        // Don't do anything here - let GRID_RENDERED event handle it
+        console.log('CalendarManager: Workweek changed - week info will update after grid renders');
+    }
+
+    /**
+     * Update week info based on actual rendered columns
+     */
+    private updateWeekInfoFromRenderedColumns(): void {
+        console.log('CalendarManager: Updating week info from rendered columns');
+        
+        // Get actual dates from rendered columns
+        const columns = document.querySelectorAll('swp-day-column');
+        if (columns.length === 0) {
+            console.warn('CalendarManager: No columns found for week info update');
+            return;
+        }
+        
+        // Get first and last column dates
+        const firstColumn = columns[0] as HTMLElement;
+        const lastColumn = columns[columns.length - 1] as HTMLElement;
+        
+        const firstDateStr = firstColumn.dataset.date;
+        const lastDateStr = lastColumn.dataset.date;
+        
+        if (!firstDateStr || !lastDateStr) {
+            console.warn('CalendarManager: Column dates not found');
+            return;
+        }
+        
+        // Parse dates
+        const firstDate = new Date(firstDateStr);
+        const lastDate = new Date(lastDateStr);
+        
+        // Calculate week number from first date
+        const weekNumber = this.getWeekNumber(firstDate);
+        
+        // Format date range
+        const dateRange = this.formatDateRange(firstDate, lastDate);
+        
+        console.log('CalendarManager: Week info from columns:', {
+            firstDate: firstDateStr,
+            lastDate: lastDateStr,
+            weekNumber,
+            dateRange
+        });
+        
+        // Emit week info update
+        this.eventBus.emit(EventTypes.WEEK_INFO_UPDATED, {
+            weekNumber,
+            dateRange,
+            weekStart: firstDate,
+            weekEnd: lastDate
+        });
+    }
+
+    /**
+     * Helper method to get week number
+     */
+    private getWeekNumber(date: Date): number {
+        const start = new Date(date.getFullYear(), 0, 1);
+        const days = Math.floor((date.getTime() - start.getTime()) / (24 * 60 * 60 * 1000));
+        return Math.ceil((days + start.getDay() + 1) / 7);
+    }
+
+    /**
+     * Helper method to get week start (Sunday)
+     */
+    private getWeekStart(date: Date): Date {
+        const weekStart = new Date(date);
+        weekStart.setDate(date.getDate() - date.getDay());
+        return weekStart;
+    }
+
+    /**
+     * Helper method to format date range
+     */
+    private formatDateRange(start: Date, end: Date): string {
+        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        
+        const startMonth = months[start.getMonth()];
+        const endMonth = months[end.getMonth()];
+        const startDay = start.getDate();
+        const endDay = end.getDate();
+        const year = start.getFullYear();
+        
+        if (startMonth === endMonth) {
+            return `${startMonth} ${startDay} - ${endDay}, ${year}`;
+        } else {
+            return `${startMonth} ${startDay} - ${endMonth} ${endDay}, ${year}`;
+        }
     }
 
 }

wwwroot/css/calendar-layout-css.css

@@ -151,11 +151,37 @@ swp-calendar-header {
   top: 0;
   z-index: 3; /* Lower than header-spacer so it slides under during horizontal scroll */
   height: calc(var(--header-height) + var(--all-day-row-height)); /* Same calculation as spacers */
+  
+  /* Force scrollbar to appear for alignment */
+  overflow-y: scroll;
+  overflow-x: hidden;
+  
+  /* Ensure there's scrollable content by adding min-height slightly larger than container */
+  min-height: calc(var(--header-height) + var(--all-day-row-height) + 1px);
+  
+  /* Firefox - hide scrollbar but keep space */
+  scrollbar-width: auto; /* Normal width to match content scrollbar */
+  scrollbar-color: transparent transparent;
+}
+
+/* WebKit browsers (Chrome, Safari, Edge) - hide scrollbar but keep space */
+swp-calendar-header::-webkit-scrollbar {
+  width: 17px; /* Match system default scrollbar width */
+  background: transparent;
+}
+
+swp-calendar-header::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+
+swp-calendar-header::-webkit-scrollbar-track {
+  background: transparent;
 }
 
 
 swp-day-header {
   padding: 12px;
+  pointer-events: auto; /* Ensure header clicks work despite parent scrollbar */
   text-align: center;
   border-right: 1px solid var(--color-grid-line);
   border-bottom: 1px solid var(--color-grid-line);