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/datasources/DateColumnDataSource.ts

@@ -1,4 +1,4 @@
-import { IColumnDataSource } from '../types/ColumnDataSource';
+import { IColumnDataSource, IColumnInfo } from '../types/ColumnDataSource';
 import { DateService } from '../utils/DateService';
 import { Configuration } from '../configurations/CalendarConfig';
 import { CalendarView } from '../types/CalendarTypes';
@@ -32,17 +32,28 @@ export class DateColumnDataSource implements IColumnDataSource {
   /**
    * Get columns (dates) to display
    */
-  public getColumns(): Date[] {
+  public getColumns(): IColumnInfo[] {
+    let dates: Date[];
+
     switch (this.currentView) {
       case 'week':
-        return this.getWeekDates();
+        dates = this.getWeekDates();
+        break;
       case 'month':
-        return this.getMonthDates();
+        dates = this.getMonthDates();
+        break;
       case 'day':
-        return [this.currentDate];
+        dates = [this.currentDate];
+        break;
       default:
-        return this.getWeekDates();
+        dates = this.getWeekDates();
     }
+
+    // Convert Date[] to IColumnInfo[]
+    return dates.map(date => ({
+      identifier: this.dateService.formatISODate(date),
+      data: date
+    }));
   }
 
   /**

src/managers/DragDropManager.ts

@@ -738,7 +738,7 @@ export class DragDropManager {
     }
 
     const dragMouseLeavePayload: IDragMouseLeaveHeaderEventPayload = {
-      targetDate: targetColumn.date,
+      targetColumn: targetColumn,
       mousePosition: position,
       originalElement: this.originalElement,
       draggedClone: this.draggedClone

src/managers/GridManager.ts

@@ -87,20 +87,21 @@ export class GridManager {
       return;
     }
 
-    // Get dates from datasource - single source of truth
-    const dates = this.dataSource.getColumns();
+    // Get columns from datasource - single source of truth
+    const columns = this.dataSource.getColumns();
 
-    // Get events for the period from EventManager
+    // Extract dates for EventManager query
+    const dates = columns.map(col => col.data as Date);
     const startDate = dates[0];
     const endDate = dates[dates.length - 1];
     const events = await this.eventManager.getEventsForPeriod(startDate, endDate);
 
-    // Delegate to GridRenderer with dates and events
+    // Delegate to GridRenderer with columns and events
     this.gridRenderer.renderGrid(
       this.container,
       this.currentDate,
       this.currentView,
-      dates,
+      columns,
       events
     );
 
@@ -108,7 +109,7 @@ export class GridManager {
     eventBus.emit(CoreEvents.GRID_RENDERED, {
       container: this.container,
       currentDate: this.currentDate,
-      dates: dates
+      columns: columns
     });
   }
 }

src/managers/HeaderManager.ts

@@ -4,6 +4,7 @@ import { CoreEvents } from '../constants/CoreEvents';
 import { IHeaderRenderer, IHeaderRenderContext } from '../renderers/DateHeaderRenderer';
 import { IDragMouseEnterHeaderEventPayload, IDragMouseLeaveHeaderEventPayload, IHeaderReadyEventPayload } from '../types/EventTypes';
 import { ColumnDetectionUtils } from '../utils/ColumnDetectionUtils';
+import { DateColumnDataSource } from '../datasources/DateColumnDataSource';
 
 /**
  * HeaderManager - Handles all header-related event logic
@@ -13,10 +14,12 @@ import { ColumnDetectionUtils } from '../utils/ColumnDetectionUtils';
 export class HeaderManager {
   private headerRenderer: IHeaderRenderer;
   private config: Configuration;
+  private dataSource: DateColumnDataSource;
 
-  constructor(headerRenderer: IHeaderRenderer, config: Configuration) {
+  constructor(headerRenderer: IHeaderRenderer, config: Configuration, dataSource: DateColumnDataSource) {
     this.headerRenderer = headerRenderer;
     this.config = config;
+    this.dataSource = dataSource;
 
     // Bind handler methods for event listeners
     this.handleDragMouseEnterHeader = this.handleDragMouseEnterHeader.bind(this);
@@ -43,11 +46,11 @@ export class HeaderManager {
    * Handle drag mouse enter header event
    */
   private handleDragMouseEnterHeader(event: Event): void {
-    const { targetColumn: targetDate, mousePosition, originalElement, draggedClone: cloneElement } =
+    const { targetColumn, mousePosition, originalElement, draggedClone: cloneElement } =
       (event as CustomEvent<IDragMouseEnterHeaderEventPayload>).detail;
 
     console.log('🎯 HeaderManager: Received drag:mouseenter-header', {
-      targetDate,
+      targetColumn: targetColumn.identifier,
       originalElement: !!originalElement,
       cloneElement: !!cloneElement
     });
@@ -57,11 +60,11 @@ export class HeaderManager {
    * Handle drag mouse leave header event
    */
   private handleDragMouseLeaveHeader(event: Event): void {
-    const { targetDate, mousePosition, originalElement, draggedClone: cloneElement } =
+    const { targetColumn, mousePosition, originalElement, draggedClone: cloneElement } =
       (event as CustomEvent<IDragMouseLeaveHeaderEventPayload>).detail;
 
     console.log('🚪 HeaderManager: Received drag:mouseleave-header', {
-      targetDate,
+      targetColumn: targetColumn?.identifier,
       originalElement: !!originalElement,
       cloneElement: !!cloneElement
     });
@@ -111,9 +114,13 @@ export class HeaderManager {
     // Clear existing content
     calendarHeader.innerHTML = '';
 
+    // Update DataSource with current date and get columns
+    this.dataSource.setCurrentDate(currentDate);
+    const columns = this.dataSource.getColumns();
+
     // Render new header content using injected renderer
     const context: IHeaderRenderContext = {
-      currentWeek: currentDate,
+      columns: columns,
       config: this.config
     };
 

src/managers/NavigationManager.ts

@@ -191,12 +191,12 @@ export class NavigationManager {
     console.log('Calling GridRenderer instead of NavigationRenderer');
     console.log('Target week:', targetWeek);
 
-    // Update DataSource with target week and get dates
+    // Update DataSource with target week and get columns
     this.dataSource.setCurrentDate(targetWeek);
-    const dates = this.dataSource.getColumns();
+    const columns = this.dataSource.getColumns();
 
     // Always create a fresh container for consistent behavior
-    newGrid = this.gridRenderer.createNavigationGrid(container, dates);
+    newGrid = this.gridRenderer.createNavigationGrid(container, columns);
 
     console.groupEnd();
 

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';

src/types/ColumnDataSource.ts

@@ -1,3 +1,12 @@
+/**
+ * Column information container
+ * Contains both identifier and actual data for a column
+ */
+export interface IColumnInfo {
+  identifier: string;      // "2024-11-13" (date mode) or "person-1" (resource mode)
+  data: Date | any;        // Date for date-mode, IResource for resource-mode
+}
+
 /**
  * IColumnDataSource - Defines the contract for providing column data
  *
@@ -6,10 +15,10 @@
  */
 export interface IColumnDataSource {
   /**
-   * Get the list of column identifiers to render
-   * @returns Array of identifiers (dates or resource IDs)
+   * Get the list of columns to render
+   * @returns Array of column information
    */
-  getColumns(): Date[];
+  getColumns(): IColumnInfo[];
 
   /**
    * Get the type of columns this datasource provides

src/types/EventTypes.ts

@@ -60,7 +60,7 @@ export interface IDragMouseEnterHeaderEventPayload {
 
 // Drag mouse leave header event payload
 export interface IDragMouseLeaveHeaderEventPayload {
-  targetDate: string | null;
+  targetColumn: IColumnBounds | null;
   mousePosition: IMousePosition;
   originalElement: HTMLElement| null;
   draggedClone: HTMLElement| null;

src/utils/ColumnDetectionUtils.ts

@@ -7,7 +7,7 @@ import { IMousePosition } from "../types/DragDropTypes";
 
 
 export interface IColumnBounds {
-    date: string;
+    identifier: string;
     left: number;
     right: number;
     boundingClientRect: DOMRect,
@@ -31,15 +31,15 @@ export class ColumnDetectionUtils {
         // Cache hver kolonnes x-grænser
         columns.forEach(column => {
             const rect = column.getBoundingClientRect();
-            const date = (column as HTMLElement).dataset.date;
+            const identifier = (column as HTMLElement).dataset.columnId;
 
-            if (date) {
+            if (identifier) {
                 this.columnBoundsCache.push({
                     boundingClientRect : rect,
                     element: column as HTMLElement,
-                    date,
+                    identifier,
                     left: rect.left,
-                    right: rect.right, 
+                    right: rect.right,
                     index: index++
                 });
             }
@@ -68,18 +68,15 @@ export class ColumnDetectionUtils {
     }
 
     /**
-     * Get column bounds by Date
+     * Get column bounds by identifier
      */
-    public static getColumnBoundsByDate(date: Date): IColumnBounds | null {
+    public static getColumnBoundsByIdentifier(identifier: string): IColumnBounds | null {
         if (this.columnBoundsCache.length === 0) {
             this.updateColumnBoundsCache();
         }
 
-        // Convert Date to YYYY-MM-DD format
-        let dateString = date.toISOString().split('T')[0];
-
-        // Find column that matches the date
-        let column = this.columnBoundsCache.find(col => col.date === dateString);
+        // Find column that matches the identifier
+        let column = this.columnBoundsCache.find(col => col.identifier === identifier);
         return column || null;
     }
 
@@ -96,15 +93,15 @@ export class ColumnDetectionUtils {
         // Cache hver kolonnes x-grænser
         dayColumns.forEach(column => {
             const rect = column.getBoundingClientRect();
-            const date = (column as HTMLElement).dataset.date;
+            const identifier = (column as HTMLElement).dataset.columnId;
 
-            if (date) {
+            if (identifier) {
                 dayHeaders.push({
                     boundingClientRect : rect,
                     element: column as HTMLElement,
-                    date,
+                    identifier,
                     left: rect.left,
-                    right: rect.right, 
+                    right: rect.right,
                     index: index++
                 });
             }