Refactor calendar datasource architecture

Centralizes date calculation logic into DateColumnDataSource
Improves separation of concerns across rendering components

Key changes:
- Introduces IColumnInfo interface for flexible column data
- Moves date calculation from multiple managers to dedicated datasource
- Removes duplicate date rendering logic
- Prepares architecture for future resource-based views

src/renderers/ColumnRenderer.ts

@@ -3,6 +3,7 @@
 import { Configuration } from '../configurations/CalendarConfig';
 import { DateService } from '../utils/DateService';
 import { WorkHoursManager } from '../managers/WorkHoursManager';
+import { IColumnInfo } from '../types/ColumnDataSource';
 
 /**
  * Interface for column rendering strategies
@@ -15,7 +16,7 @@ export interface IColumnRenderer {
  * Context for column rendering
  */
 export interface IColumnRenderContext {
-  dates: Date[];
+  columns: IColumnInfo[];
   config: Configuration;
 }
 
@@ -35,11 +36,13 @@ export class DateColumnRenderer implements IColumnRenderer {
   }
 
   render(columnContainer: HTMLElement, context: IColumnRenderContext): void {
-    const { dates } = context;
+    const { columns } = context;
 
-    dates.forEach((date) => {
+    columns.forEach((columnInfo) => {
+      const date = columnInfo.data as Date;
       const column = document.createElement('swp-day-column');
-      (column as any).dataset.date = this.dateService.formatISODate(date);
+
+      column.dataset.columnId = columnInfo.identifier;
 
       // Apply work hours styling
       this.applyWorkHoursToColumn(column, date);

src/renderers/DateHeaderRenderer.ts

@@ -2,6 +2,7 @@
 
 import { Configuration } from '../configurations/CalendarConfig';
 import { DateService } from '../utils/DateService';
+import { IColumnInfo } from '../types/ColumnDataSource';
 
 /**
  * Interface for header rendering strategies
@@ -15,7 +16,7 @@ export interface IHeaderRenderer {
  * Context for header rendering
  */
 export interface IHeaderRenderContext {
-  currentWeek: Date;
+  columns: IColumnInfo[];
   config: Configuration;
 }
 
@@ -26,26 +27,22 @@ export class DateHeaderRenderer implements IHeaderRenderer {
   private dateService!: DateService;
 
   render(calendarHeader: HTMLElement, context: IHeaderRenderContext): void {
-    const { currentWeek, config } = context;
+    const { columns, config } = context;
 
     // FIRST: Always create all-day container as part of standard header structure
     const allDayContainer = document.createElement('swp-allday-container');
     calendarHeader.appendChild(allDayContainer);
 
     // Initialize date service with timezone and locale from config
-    const timezone = config.timeFormatConfig.timezone;
     const locale = config.timeFormatConfig.locale;
     this.dateService = new DateService(config);
 
-    const workWeekSettings = config.getWorkWeekSettings();
-    const dates = this.dateService.getWorkWeekDates(currentWeek, workWeekSettings.workDays);
-    const weekDays = config.dateViewSettings.weekDays;
-    const daysToShow = dates.slice(0, weekDays);
-
-    daysToShow.forEach((date, index) => {
+    columns.forEach((columnInfo) => {
+      const date = columnInfo.data as Date;
       const header = document.createElement('swp-day-header');
+
       if (this.dateService.isSameDay(date, new Date())) {
-        (header as any).dataset.today = 'true';
+        header.dataset.today = 'true';
       }
 
       const dayName = this.dateService.getDayName(date, 'long', locale).toUpperCase();
@@ -54,7 +51,8 @@ export class DateHeaderRenderer implements IHeaderRenderer {
         <swp-day-name>${dayName}</swp-day-name>
         <swp-day-date>${date.getDate()}</swp-day-date>
       `;
-      (header as any).dataset.date = this.dateService.formatISODate(date);
+
+      header.dataset.columnId = columnInfo.identifier;
 
       calendarHeader.appendChild(header);
     });

src/renderers/EventRenderer.ts

@@ -390,14 +390,15 @@ export class DateEventRenderer implements IEventRenderer {
   }
 
   protected getEventsForColumn(column: HTMLElement, events: ICalendarEvent[]): ICalendarEvent[] {
-    const columnDate = column.dataset.date;
-    if (!columnDate) {
+    const columnId = column.dataset.columnId;
+    if (!columnId) {
       return [];
     }
 
     // Create start and end of day for interval overlap check
-    const columnStart = this.dateService.parseISO(`${columnDate}T00:00:00`);
-    const columnEnd = this.dateService.parseISO(`${columnDate}T23:59:59.999`);
+    // In date-mode, columnId is ISO date string like "2024-11-13"
+    const columnStart = this.dateService.parseISO(`${columnId}T00:00:00`);
+    const columnEnd = this.dateService.parseISO(`${columnId}T23:59:59.999`);
 
     const columnEvents = events.filter(event => {
       // Interval overlap: event overlaps with column day if event.start < columnEnd AND event.end > columnStart

src/renderers/EventRendererManager.ts

@@ -91,12 +91,15 @@ export class EventRenderingService {
      * Handle GRID_RENDERED event - render events in the current grid
      */
     private handleGridRendered(event: CustomEvent): void {
-        const { container, dates } = event.detail;
+        const { container, columns } = event.detail;
 
-        if (!container || !dates || dates.length === 0) {
+        if (!container || !columns || columns.length === 0) {
             return;
         }
 
+        // Extract dates from columns
+        const dates = columns.map((col: any) => col.data as Date);
+
         // Calculate startDate and endDate from dates array
         const startDate = dates[0];
         const endDate = dates[dates.length - 1];

src/renderers/GridRenderer.ts

@@ -5,6 +5,7 @@ import { eventBus } from '../core/EventBus';
 import { DateService } from '../utils/DateService';
 import { CoreEvents } from '../constants/CoreEvents';
 import { TimeFormatter } from '../utils/TimeFormatter';
+import { IColumnInfo } from '../types/ColumnDataSource';
 
 /**
  * GridRenderer - Centralized DOM rendering for calendar grid structure
@@ -111,7 +112,7 @@ export class GridRenderer {
     grid: HTMLElement,
     currentDate: Date,
     view: CalendarView = 'week',
-    dates: Date[] = [],
+    columns: IColumnInfo[] = [],
     events: ICalendarEvent[] = []
   ): void {
 
@@ -124,10 +125,10 @@ export class GridRenderer {
 
     // Only clear and rebuild if grid is empty (first render)
     if (grid.children.length === 0) {
-      this.createCompleteGridStructure(grid, currentDate, view, dates, events);
+      this.createCompleteGridStructure(grid, currentDate, view, columns, events);
     } else {
       // Optimized update - only refresh dynamic content
-      this.updateGridContent(grid, currentDate, view, dates, events);
+      this.updateGridContent(grid, currentDate, view, columns, events);
     }
   }
 
@@ -151,7 +152,7 @@ export class GridRenderer {
     grid: HTMLElement,
     currentDate: Date,
     view: CalendarView,
-    dates: Date[],
+    columns: IColumnInfo[],
     events: ICalendarEvent[]
   ): void {
     // Create all elements in memory first for better performance
@@ -167,7 +168,7 @@ export class GridRenderer {
     fragment.appendChild(timeAxis);
 
     // Create grid container with caching
-    const gridContainer = this.createOptimizedGridContainer(dates, events);
+    const gridContainer = this.createOptimizedGridContainer(columns, events);
     this.cachedGridContainer = gridContainer;
     fragment.appendChild(gridContainer);
 
@@ -218,7 +219,7 @@ export class GridRenderer {
    * @returns Complete grid container element
    */
   private createOptimizedGridContainer(
-    dates: Date[],
+    columns: IColumnInfo[],
     events: ICalendarEvent[]
   ): HTMLElement {
     const gridContainer = document.createElement('swp-grid-container');
@@ -237,7 +238,7 @@ export class GridRenderer {
 
     // Create column container
     const columnContainer = document.createElement('swp-day-columns');
-    this.renderColumnContainer(columnContainer, dates, events);
+    this.renderColumnContainer(columnContainer, columns, events);
     timeGrid.appendChild(columnContainer);
 
     scrollableContent.appendChild(timeGrid);
@@ -259,12 +260,12 @@ export class GridRenderer {
    */
   private renderColumnContainer(
     columnContainer: HTMLElement,
-    dates: Date[],
+    columns: IColumnInfo[],
     events: ICalendarEvent[]
   ): void {
     // Delegate to ColumnRenderer
     this.columnRenderer.render(columnContainer, {
-      dates: dates,
+      columns: columns,
       config: this.config
     });
   }
@@ -285,14 +286,14 @@ export class GridRenderer {
     grid: HTMLElement,
     currentDate: Date,
     view: CalendarView,
-    dates: Date[],
+    columns: IColumnInfo[],
     events: ICalendarEvent[]
   ): void {
     // Update column container if needed
     const columnContainer = grid.querySelector('swp-day-columns');
     if (columnContainer) {
       columnContainer.innerHTML = '';
-      this.renderColumnContainer(columnContainer as HTMLElement, dates, events);
+      this.renderColumnContainer(columnContainer as HTMLElement, columns, events);
     }
   }
   /**
@@ -308,9 +309,9 @@ export class GridRenderer {
    * @param dates - Array of dates to render
    * @returns New grid element ready for animation
    */
-  public createNavigationGrid(parentContainer: HTMLElement, dates: Date[]): HTMLElement {
+  public createNavigationGrid(parentContainer: HTMLElement, columns: IColumnInfo[]): HTMLElement {
     // Create grid structure without events (events rendered by EventRenderingService)
-    const newGrid = this.createOptimizedGridContainer(dates, []);
+    const newGrid = this.createOptimizedGridContainer(columns, []);
 
     // Position new grid for animation - NO transform here, let Animation API handle it
     newGrid.style.position = 'absolute';