Refactors week header to calendar header

Renames 'week header' to 'calendar header' for better representation
of the component's purpose, which includes more than just week-based
calendar views.

Updates related methods and references in GridManager and
ScrollManager to reflect the change.

Fixes incorrect calculation of the column width.

src/managers/GridManager.ts

@@ -154,8 +154,8 @@ export class GridManager {
       this.createWeekContainer();
     } else {
       console.log('GridManager: Re-render - updating existing structure');
-      // Just update the week header for all-day events
+      // Just update the calendar header for all-day events
-      this.updateWeekHeader();
+      this.updateCalendarHeader();
     }
     
     console.log('GridManager: Grid rendered successfully with POC structure');
@@ -203,10 +203,10 @@ export class GridManager {
 
     const weekContainer = document.createElement('swp-grid-container');
     
-    // Create week header using Strategy Pattern
+    // Create calendar header using Strategy Pattern
-    const weekHeader = document.createElement('swp-calendar-header');
+    const calendarHeader = document.createElement('swp-calendar-header');
-    this.renderWeekHeaders(weekHeader);
+    this.renderCalendarHeader(calendarHeader);
-    weekContainer.appendChild(weekHeader);
+    weekContainer.appendChild(calendarHeader);
     
     // Create scrollable content
     const scrollableContent = document.createElement('swp-scrollable-content');
@@ -216,10 +216,10 @@ export class GridManager {
     const gridLines = document.createElement('swp-grid-lines');
     timeGrid.appendChild(gridLines);
     
-    // Create day columns using Strategy Pattern
+    // Create column container using Strategy Pattern
-    const dayColumns = document.createElement('swp-day-columns');
+    const columnContainer = document.createElement('swp-day-columns');
-    this.renderDayColumns(dayColumns);
+    this.renderColumnContainer(columnContainer);
-    timeGrid.appendChild(dayColumns);
+    timeGrid.appendChild(columnContainer);
     
     scrollableContent.appendChild(timeGrid);
     weekContainer.appendChild(scrollableContent);
@@ -228,9 +228,9 @@ export class GridManager {
   }
 
   /**
-   * Render week headers using Strategy Pattern
+   * Render calendar header using Strategy Pattern
    */
-  private renderWeekHeaders(weekHeader: HTMLElement): void {
+  private renderCalendarHeader(calendarHeader: HTMLElement): void {
     if (!this.currentWeek) return;
 
     const calendarType = calendarConfig.getCalendarType();
@@ -243,19 +243,19 @@ export class GridManager {
       resourceData: this.resourceData
     };
 
-    headerRenderer.render(weekHeader, context);
+    headerRenderer.render(calendarHeader, context);
 
     // Update spacer heights based on all-day events
     this.updateSpacerHeights();
   }
 
   /**
-   * Render day columns using Strategy Pattern
+   * Render column container using Strategy Pattern
    */
-  private renderDayColumns(dayColumns: HTMLElement): void {
+  private renderColumnContainer(columnContainer: HTMLElement): void {
     if (!this.currentWeek) return;
 
-    console.log('GridManager: renderDayColumns called');
+    console.log('GridManager: renderColumnContainer called');
     const calendarType = calendarConfig.getCalendarType();
     const columnRenderer = CalendarTypeFactory.getColumnRenderer(calendarType);
     
@@ -265,23 +265,23 @@ export class GridManager {
       resourceData: this.resourceData
     };
 
-    columnRenderer.render(dayColumns, context);
+    columnRenderer.render(columnContainer, context);
   }
 
   /**
-   * Update only the week header (for all-day events) without rebuilding entire grid
+   * Update only the calendar header (for all-day events) without rebuilding entire grid
    */
-  private updateWeekHeader(): void {
+  private updateCalendarHeader(): void {
     if (!this.grid || !this.currentWeek) return;
 
-    const weekHeader = this.grid.querySelector('swp-calendar-header');
+    const calendarHeader = this.grid.querySelector('swp-calendar-header');
-    if (!weekHeader) return;
+    if (!calendarHeader) return;
 
     // Clear existing content
-    weekHeader.innerHTML = '';
+    calendarHeader.innerHTML = '';
 
     // Re-render headers using Strategy Pattern
-    this.renderWeekHeaders(weekHeader as HTMLElement);
+    this.renderCalendarHeader(calendarHeader as HTMLElement);
   }
 
   /**
@@ -304,9 +304,9 @@ export class GridManager {
 
     console.log('GridManager: Updated all-day events:', this.allDayEvents.length);
     
-    // Update only the week header if grid is already rendered
+    // Update only the calendar header if grid is already rendered
     if (this.grid && this.grid.children.length > 0) {
-      this.updateWeekHeader();
+      this.updateCalendarHeader();
     }
   }
 

src/managers/ScrollManager.ts

@@ -11,7 +11,7 @@ export class ScrollManager {
   private scrollableContent: HTMLElement | null = null;
   private calendarContainer: HTMLElement | null = null;
   private timeAxis: HTMLElement | null = null;
-  private weekHeader: HTMLElement | null = null;
+  private calendarHeader: HTMLElement | null = null;
   private resizeObserver: ResizeObserver | null = null;
 
   constructor() {
@@ -57,7 +57,7 @@ export class ScrollManager {
     }
 
     // Setup horizontal scrolling synchronization
-    if (this.scrollableContent && this.weekHeader) {
+    if (this.scrollableContent && this.calendarHeader) {
       this.setupHorizontalScrollSynchronization();
     }
   }
@@ -108,13 +108,13 @@ export class ScrollManager {
     this.scrollableContent = document.querySelector('swp-scrollable-content');
     this.calendarContainer = document.querySelector('swp-calendar-container');
     this.timeAxis = document.querySelector('swp-time-axis');
-    this.weekHeader = document.querySelector('swp-calendar-header');
+    this.calendarHeader = document.querySelector('swp-calendar-header');
     
     console.log('ScrollManager: Found elements:', {
       scrollableContent: !!this.scrollableContent,
       calendarContainer: !!this.calendarContainer,
       timeAxis: !!this.timeAxis,
-      weekHeader: !!this.weekHeader
+      calendarHeader: !!this.calendarHeader
     });
   }
 
@@ -172,9 +172,9 @@ export class ScrollManager {
     const navigation = document.querySelector('swp-calendar-nav');
     const navHeight = navigation ? navigation.getBoundingClientRect().height : 0;
     
-    // Find week header height
+    // Find calendar header height
-    const weekHeader = document.querySelector('swp-calendar-header');
+    const calendarHeaderElement = document.querySelector('swp-calendar-header');
-    const headerHeight = weekHeader ? weekHeader.getBoundingClientRect().height : 80;
+    const headerHeight = calendarHeaderElement ? calendarHeaderElement.getBoundingClientRect().height : 80;
     
     // Calculate available height for scrollable content
     const availableHeight = containerRect.height - headerHeight;
@@ -241,33 +241,33 @@ export class ScrollManager {
   }
 
   /**
-   * Setup horizontal scroll synchronization between scrollable content and week header
+   * Setup horizontal scroll synchronization between scrollable content and calendar header
    */
   private setupHorizontalScrollSynchronization(): void {
-    if (!this.scrollableContent || !this.weekHeader) return;
+    if (!this.scrollableContent || !this.calendarHeader) return;
 
     console.log('ScrollManager: Setting up horizontal scroll synchronization');
 
     // Listen to horizontal scroll events
     this.scrollableContent.addEventListener('scroll', () => {
-      this.syncWeekHeaderPosition();
+      this.syncCalendarHeaderPosition();
     });
   }
 
   /**
-   * Synchronize week header position with scrollable content horizontal scroll
+   * Synchronize calendar header position with scrollable content horizontal scroll
    */
-  private syncWeekHeaderPosition(): void {
+  private syncCalendarHeaderPosition(): void {
-    if (!this.scrollableContent || !this.weekHeader) return;
+    if (!this.scrollableContent || !this.calendarHeader) return;
 
     const scrollLeft = this.scrollableContent.scrollLeft;
     
     // Use transform for smooth performance
-    this.weekHeader.style.transform = `translateX(-${scrollLeft}px)`;
+    this.calendarHeader.style.transform = `translateX(-${scrollLeft}px)`;
     
     // Debug logging (can be removed later)
     if (scrollLeft % 100 === 0) { // Only log every 100px to avoid spam
-      console.log(`ScrollManager: Synced week-header to scrollLeft: ${scrollLeft}px`);
+      console.log(`ScrollManager: Synced calendar-header to scrollLeft: ${scrollLeft}px`);
     }
   }
 

src/renderers/ColumnRenderer.ts

@@ -7,7 +7,7 @@ import { ResourceCalendarData } from '../types/CalendarTypes';
  * Interface for column rendering strategies
  */
 export interface ColumnRenderer {
-  render(dayColumns: HTMLElement, context: ColumnRenderContext): void;
+  render(columnContainer: HTMLElement, context: ColumnRenderContext): void;
 }
 
 /**
@@ -23,7 +23,7 @@ export interface ColumnRenderContext {
  * Date-based column renderer (original functionality)
  */
 export class DateColumnRenderer implements ColumnRenderer {
-  render(dayColumns: HTMLElement, context: ColumnRenderContext): void {
+  render(columnContainer: HTMLElement, context: ColumnRenderContext): void {
     const { currentWeek, config } = context;
     
     const dates = this.getWeekDates(currentWeek);
@@ -39,7 +39,7 @@ export class DateColumnRenderer implements ColumnRenderer {
       const eventsLayer = document.createElement('swp-events-layer');
       column.appendChild(eventsLayer);
       
-      dayColumns.appendChild(column);
+      columnContainer.appendChild(column);
     });
   }
 
@@ -62,7 +62,7 @@ export class DateColumnRenderer implements ColumnRenderer {
  * Resource-based column renderer
  */
 export class ResourceColumnRenderer implements ColumnRenderer {
-  render(dayColumns: HTMLElement, context: ColumnRenderContext): void {
+  render(columnContainer: HTMLElement, context: ColumnRenderContext): void {
     const { resourceData } = context;
     
     if (!resourceData) {
@@ -81,7 +81,7 @@ export class ResourceColumnRenderer implements ColumnRenderer {
       const eventsLayer = document.createElement('swp-events-layer');
       column.appendChild(eventsLayer);
       
-      dayColumns.appendChild(column);
+      columnContainer.appendChild(column);
     });
   }
 }

src/renderers/HeaderRenderer.ts

@@ -7,7 +7,7 @@ import { ResourceCalendarData } from '../types/CalendarTypes';
  * Interface for header rendering strategies
  */
 export interface HeaderRenderer {
-  render(weekHeader: HTMLElement, context: HeaderRenderContext): void;
+  render(calendarHeader: HTMLElement, context: HeaderRenderContext): void;
 }
 
 /**
@@ -24,7 +24,7 @@ export interface HeaderRenderContext {
  * Date-based header renderer (original functionality)
  */
 export class DateHeaderRenderer implements HeaderRenderer {
-  render(weekHeader: HTMLElement, context: HeaderRenderContext): void {
+  render(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
     const { currentWeek, config, allDayEvents = [] } = context;
     
     const dates = this.getWeekDates(currentWeek);
@@ -43,14 +43,14 @@ export class DateHeaderRenderer implements HeaderRenderer {
       `;
       (header as any).dataset.date = this.formatDate(date);
       
-      weekHeader.appendChild(header);
+      calendarHeader.appendChild(header);
     });
 
     // Render all-day events in row 2
-    this.renderAllDayEvents(weekHeader, context);
+    this.renderAllDayEvents(calendarHeader, context);
   }
 
-  private renderAllDayEvents(weekHeader: HTMLElement, context: HeaderRenderContext): void {
+  private renderAllDayEvents(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
     const { currentWeek, config, allDayEvents = [] } = context;
     
     const dates = this.getWeekDates(currentWeek);
@@ -96,7 +96,7 @@ export class DateHeaderRenderer implements HeaderRenderer {
         allDayEvent.style.gridColumn = `${gridColumnStart} / ${gridColumnEnd}`;
         allDayEvent.style.backgroundColor = event.metadata?.color || '#ff9800';
         
-        weekHeader.appendChild(allDayEvent);
+        calendarHeader.appendChild(allDayEvent);
       }
     });
   }
@@ -130,7 +130,7 @@ export class DateHeaderRenderer implements HeaderRenderer {
  * Resource-based header renderer
  */
 export class ResourceHeaderRenderer implements HeaderRenderer {
-  render(weekHeader: HTMLElement, context: HeaderRenderContext): void {
+  render(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
     const { resourceData } = context;
     
     if (!resourceData) {
@@ -150,7 +150,7 @@ export class ResourceHeaderRenderer implements HeaderRenderer {
         <swp-resource-name>${resource.displayName}</swp-resource-name>
       `;
       
-      weekHeader.appendChild(header);
+      calendarHeader.appendChild(header);
     });
 
     console.log(`ResourceHeaderRenderer: Rendered ${resourceData.resources.length} resource headers`);

src/utils/PositionUtils.js

@@ -106,9 +106,9 @@ export class PositionUtils {
     static getDayColumnPosition(dayIndex) {
         // These values should be calculated based on actual calendar layout
         const timeAxisWidth = 60; // Default time axis width
-        const calendarElement = document.querySelector('swp-calendar-content');
+        const scrollableContent = document.querySelector('swp-scrollable-content');
-        const dayColumnWidth = calendarElement ?
+        const dayColumnWidth = scrollableContent ?
-            (calendarElement.clientWidth - timeAxisWidth) / calendarConfig.get('weekDays') :
+            (scrollableContent.clientWidth) / calendarConfig.get('weekDays') :
             120; // Default day column width
         
         return timeAxisWidth + (dayIndex * dayColumnWidth);
@@ -121,9 +121,9 @@ export class PositionUtils {
      */
     static getDayIndexForPosition(pixelPosition) {
         const timeAxisWidth = 60; // Default time axis width
-        const calendarElement = document.querySelector('swp-calendar-content');
+        const scrollableContent = document.querySelector('swp-scrollable-content');
-        const dayColumnWidth = calendarElement ?
+        const dayColumnWidth = scrollableContent ?
-            (calendarElement.clientWidth - timeAxisWidth) / calendarConfig.get('weekDays') :
+            (scrollableContent.clientWidth) / calendarConfig.get('weekDays') :
             120; // Default day column width
         
         if (pixelPosition < timeAxisWidth) {
@@ -152,10 +152,10 @@ export class PositionUtils {
         
         const duration = endMinutes - startMinutes;
         
-        const calendarElement = document.querySelector('swp-calendar-content');
+        const scrollableContent = document.querySelector('swp-scrollable-content');
         const timeAxisWidth = 60; // Default time axis width
-        const dayColumnWidth = calendarElement ?
+        const dayColumnWidth = scrollableContent ?
-            (calendarElement.clientWidth - timeAxisWidth) / calendarConfig.get('weekDays') :
+            (scrollableContent.clientWidth) / calendarConfig.get('weekDays') :
             120; // Default day column width
 
         return {