Refactors date handling for ISO week compatibility

Centralizes all date calculations into a new `DateCalculator` class for better maintainability and consistency.

Ensures correct ISO week handling (Monday as the first day) throughout the calendar.

Updates `CalendarConfig` to use ISO day numbering (1-7 for Mon-Sun) for work week definitions.

Fixes issue where date calculations were inconsistent.
Enhances event rendering and navigation.
Updates navigation logic to use pre-rendered events.
Removes the need for `CONTAINER_READY_FOR_EVENTS` event.

src/renderers/EventRenderer.ts

@@ -2,7 +2,7 @@
 
 import { CalendarEvent } from '../types/CalendarTypes';
 import { CalendarConfig } from '../core/CalendarConfig';
-import { DateUtils } from '../utils/DateUtils';
+import { DateCalculator } from '../utils/DateCalculator';
 
 /**
  * Interface for event rendering strategies
@@ -16,6 +16,11 @@ export interface EventRendererStrategy {
  * Base class for event renderers with common functionality
  */
 export abstract class BaseEventRenderer implements EventRendererStrategy {
+  protected dateCalculator: DateCalculator;
+
+  constructor(config: CalendarConfig) {
+    this.dateCalculator = new DateCalculator(config);
+  }
   renderEvents(events: CalendarEvent[], container: HTMLElement, config: CalendarConfig): void {
     console.log('BaseEventRenderer: renderEvents called with', events.length, 'events');
     
@@ -70,8 +75,8 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
     eventElement.style.backgroundColor = event.metadata?.color || '#3498db';
 
     // Format time for display
-    const startTime = this.formatTime(event.start);
-    const endTime = this.formatTime(event.end);
+    const startTime = this.dateCalculator.formatTime(new Date(event.start));
+    const endTime = this.dateCalculator.formatTime(new Date(event.end));
 
     // Create event content
     eventElement.innerHTML = `
@@ -160,15 +165,24 @@ export class DateEventRenderer extends BaseEventRenderer {
 
   protected getEventsForColumn(column: HTMLElement, events: CalendarEvent[]): CalendarEvent[] {
     const columnDate = column.dataset.date;
-    if (!columnDate) return [];
+    if (!columnDate) {
+      console.log(`DateEventRenderer: Column has no dataset.date`);
+      return [];
+    }
 
     const columnEvents = events.filter(event => {
       const eventDate = new Date(event.start);
-      const eventDateStr = DateUtils.formatDate(eventDate);
-      return eventDateStr === columnDate;
+      const eventDateStr = this.dateCalculator.formatISODate(eventDate);
+      const matches = eventDateStr === columnDate;
+      
+      if (!matches) {
+        console.log(`DateEventRenderer: Event ${event.title} (${eventDateStr}) does not match column (${columnDate})`);
+      }
+      
+      return matches;
     });
 
-    console.log(`DateEventRenderer: Column ${columnDate} has ${columnEvents.length} events`);
+    console.log(`DateEventRenderer: Column ${columnDate} has ${columnEvents.length} events from ${events.length} total`);
     return columnEvents;
   }
 }

src/renderers/EventRendererManager.ts

@@ -31,11 +31,7 @@ export class EventRenderingService {
      * Render events in a specific container for a given period
      */
     public renderEvents(context: RenderContext): void {
-        console.log('EventRenderer: Rendering events for period', {
-            startDate: context.startDate,
-            endDate: context.endDate,
-            container: context.container
-        });
+        console.log(`   📅 Getting events for ${context.startDate.toDateString()} - ${context.endDate.toDateString()}`);
         
         // Get events from EventManager for the period
         const events = this.eventManager.getEventsForPeriod(
@@ -43,17 +39,17 @@ export class EventRenderingService {
             context.endDate
         );
         
-        console.log(`EventRenderer: Found ${events.length} events for period`);
+        console.log(`   📊 Found ${events.length} events for period`);
         
         if (events.length === 0) {
-            console.log('EventRenderer: No events to render for this period');
+            console.log('   ⚠️  No events to render for this period');
             return;
         }
         
         // Use cached strategy to render events in the specific container
         this.strategy.renderEvents(events, context.container, calendarConfig);
         
-        console.log(`EventRenderer: Successfully rendered ${events.length} events`);
+        console.log(`   ✅ Rendered ${events.length} events successfully`);
     }
 
     private setupEventListeners(): void {
@@ -63,10 +59,11 @@ export class EventRenderingService {
             this.handleGridRendered(event as CustomEvent);
         });
 
-        this.eventBus.on(EventTypes.CONTAINER_READY_FOR_EVENTS, (event: Event) => {
-            console.log('EventRenderer: Received CONTAINER_READY_FOR_EVENTS event');
-            this.handleContainerReady(event as CustomEvent);
-        });
+        // CONTAINER_READY_FOR_EVENTS removed - events are now pre-rendered synchronously
+        // this.eventBus.on(EventTypes.CONTAINER_READY_FOR_EVENTS, (event: Event) => {
+        //     console.log('EventRenderer: Received CONTAINER_READY_FOR_EVENTS event');
+        //     this.handleContainerReady(event as CustomEvent);
+        // });
 
         this.eventBus.on(EventTypes.VIEW_CHANGED, (event: Event) => {
             console.log('EventRenderer: Received VIEW_CHANGED event');

src/renderers/HeaderRenderer.ts

@@ -37,15 +37,16 @@ export class DateHeaderRenderer implements HeaderRenderer {
     const weekDays = config.get('weekDays');
     const daysToShow = dates.slice(0, weekDays);
 
-    const workWeekSettings = config.getWorkWeekSettings();
     daysToShow.forEach((date, index) => {
       const header = document.createElement('swp-day-header');
       if (this.dateCalculator.isToday(date)) {
         (header as any).dataset.today = 'true';
       }
       
+      const dayName = this.dateCalculator.getDayName(date, 'short');
+      
       header.innerHTML = `
-        <swp-day-name>${workWeekSettings.dayNames[index]}</swp-day-name>
+        <swp-day-name>${dayName}</swp-day-name>
         <swp-day-date>${date.getDate()}</swp-day-date>
       `;
       (header as any).dataset.date = this.dateCalculator.formatISODate(date);

src/renderers/NavigationRenderer.ts

@@ -1,8 +1,8 @@
 import { IEventBus } from '../types/CalendarTypes';
 import { EventTypes } from '../constants/EventTypes';
-import { DateUtils } from '../utils/DateUtils';
 import { CalendarConfig } from '../core/CalendarConfig';
 import { DateCalculator } from '../utils/DateCalculator';
+import { EventRenderingService } from './EventRendererManager';
 
 /**
  * NavigationRenderer - Handles DOM rendering for navigation containers
@@ -12,10 +12,12 @@ export class NavigationRenderer {
   private eventBus: IEventBus;
   private config: CalendarConfig;
   private dateCalculator: DateCalculator;
+  private eventRenderer: EventRenderingService;
 
-  constructor(eventBus: IEventBus, config: CalendarConfig) {
+  constructor(eventBus: IEventBus, config: CalendarConfig, eventRenderer: EventRenderingService) {
     this.eventBus = eventBus;
     this.config = config;
+    this.eventRenderer = eventRenderer;
     this.dateCalculator = new DateCalculator(config);
     this.setupEventListeners();
   }
@@ -51,7 +53,10 @@ export class NavigationRenderer {
    * Render a complete container with content and events
    */
   public renderContainer(parentContainer: HTMLElement, weekStart: Date): HTMLElement {
-    console.log('NavigationRenderer: Rendering new container for week:', weekStart.toDateString());
+    const weekEnd = this.dateCalculator.addDays(weekStart, 6);
+    
+    console.group(`🎨 RENDERING CONTAINER: ${weekStart.toDateString()} - ${weekEnd.toDateString()}`);
+    console.log('1. Creating grid structure...');
     
     // Create new grid container
     const newGrid = document.createElement('swp-grid-container');
@@ -75,17 +80,18 @@ export class NavigationRenderer {
     // Add to parent container
     parentContainer.appendChild(newGrid);
 
-    // Render week content (headers and columns)
+    console.log('2. Rendering headers and columns...');
     this.renderWeekContentInContainer(newGrid, weekStart);
     
-    // Emit event to trigger event rendering
-    const weekEnd = DateUtils.addDays(weekStart, 6);
-    this.eventBus.emit(EventTypes.CONTAINER_READY_FOR_EVENTS, {
+    console.log('3. Pre-rendering events synchronously...');
+    this.eventRenderer.renderEvents({
       container: newGrid,
       startDate: weekStart,
       endDate: weekEnd
     });
     
+    console.log('✅ Container ready with pre-rendered events');
+    console.groupEnd();
     return newGrid;
   }
 
@@ -104,7 +110,6 @@ export class NavigationRenderer {
 
     // Get dates using DateCalculator
     const dates = this.dateCalculator.getWorkWeekDates(weekStart);
-    const workWeekSettings = this.config.getWorkWeekSettings();
     
     // Render headers for target week
     dates.forEach((date, i) => {
@@ -113,8 +118,10 @@ export class NavigationRenderer {
         headerElement.dataset.today = 'true';
       }
       
+      const dayName = this.dateCalculator.getDayName(date, 'short');
+      
       headerElement.innerHTML = `
-        <swp-day-name>${workWeekSettings.dayNames[i]}</swp-day-name>
+        <swp-day-name>${dayName}</swp-day-name>
         <swp-day-date>${date.getDate()}</swp-day-date>
       `;
       headerElement.dataset.date = this.dateCalculator.formatISODate(date);