Refactors dependency injection and configuration management

Replaces global singleton configuration with dependency injection
Introduces more modular and testable approach to configuration
Removes direct references to calendarConfig in multiple components
Adds explicit configuration passing to constructors

Improves code maintainability and reduces global state dependencies

src/renderers/ColumnRenderer.ts

@@ -25,17 +25,20 @@ export interface ColumnRenderContext {
  * Date-based column renderer (original functionality)
  */
 export class DateColumnRenderer implements ColumnRenderer {
-  private dateService!: DateService;
-  private workHoursManager!: WorkHoursManager;
+  private dateService: DateService;
+  private workHoursManager: WorkHoursManager;
+
+  constructor(
+    dateService: DateService,
+    workHoursManager: WorkHoursManager
+  ) {
+    this.dateService = dateService;
+    this.workHoursManager = workHoursManager;
+  }
 
   render(columnContainer: HTMLElement, context: ColumnRenderContext): void {
     const { currentWeek, config } = context;
     
-    // Initialize date service and work hours manager
-    const timezone = config.getTimezone?.() || 'Europe/Copenhagen';
-    this.dateService = new DateService(timezone);
-    this.workHoursManager = new WorkHoursManager();
-    
     const workWeekSettings = config.getWorkWeekSettings();
     const dates = this.dateService.getWorkWeekDates(currentWeek, workWeekSettings.workDays);
     const dateSettings = config.getDateViewSettings();

src/renderers/EventRenderer.ts

@@ -1,7 +1,7 @@
 // Event rendering strategy interface and implementations
 
 import { CalendarEvent } from '../types/CalendarTypes';
-import { calendarConfig } from '../core/CalendarConfig';
+import { CalendarConfig } from '../core/CalendarConfig';
 import { SwpEventElement } from '../elements/SwpEventElement';
 import { PositionUtils } from '../utils/PositionUtils';
 import { ColumnBounds } from '../utils/ColumnDetectionUtils';
@@ -34,14 +34,23 @@ export class DateEventRenderer implements EventRendererStrategy {
   private dateService: DateService;
   private stackManager: EventStackManager;
   private layoutCoordinator: EventLayoutCoordinator;
+  private config: CalendarConfig;
+  private positionUtils: PositionUtils;
   private draggedClone: HTMLElement | null = null;
   private originalEvent: HTMLElement | null = null;
 
-  constructor() {
-    const timezone = calendarConfig.getTimezone?.();
-    this.dateService = new DateService(timezone);
-    this.stackManager = new EventStackManager();
-    this.layoutCoordinator = new EventLayoutCoordinator();
+  constructor(
+    dateService: DateService,
+    stackManager: EventStackManager,
+    layoutCoordinator: EventLayoutCoordinator,
+    config: CalendarConfig,
+    positionUtils: PositionUtils
+  ) {
+    this.dateService = dateService;
+    this.stackManager = stackManager;
+    this.layoutCoordinator = layoutCoordinator;
+    this.config = config;
+    this.positionUtils = positionUtils;
   }
 
   private applyDragStyling(element: HTMLElement): void {
@@ -303,7 +312,7 @@ export class DateEventRenderer implements EventRendererStrategy {
     // (e.g., if container starts at 07:00 and event starts at 08:15, offset = 75 min)
     const timeDiffMs = event.start.getTime() - containerStart.getTime();
     const timeDiffMinutes = timeDiffMs / (1000 * 60);
-    const gridSettings = calendarConfig.getGridSettings();
+    const gridSettings = this.config.getGridSettings();
     const relativeTop = timeDiffMinutes > 0 ? (timeDiffMinutes / 60) * gridSettings.hourHeight : 0;
 
     // Events in grid columns are positioned absolutely within their column container
@@ -333,7 +342,7 @@ export class DateEventRenderer implements EventRendererStrategy {
 
   protected calculateEventPosition(event: CalendarEvent): { top: number; height: number } {
     // Delegate to PositionUtils for centralized position calculation
-    return PositionUtils.calculateEventPosition(event.start, event.end);
+    return this.positionUtils.calculateEventPosition(event.start, event.end);
   }
 
   clearEvents(container?: HTMLElement): void {

src/renderers/EventRendererManager.ts

@@ -1,7 +1,6 @@
 import { EventBus } from '../core/EventBus';
 import { IEventBus, CalendarEvent, RenderContext } from '../types/CalendarTypes';
 import { CoreEvents } from '../constants/CoreEvents';
-import { calendarConfig } from '../core/CalendarConfig';
 import { EventManager } from '../managers/EventManager';
 import { EventRendererStrategy } from './EventRenderer';
 import { SwpEventElement } from '../elements/SwpEventElement';
@@ -20,14 +19,16 @@ export class EventRenderingService {
 
     private dragMouseLeaveHeaderListener: ((event: Event) => void) | null = null;
 
-    constructor(eventBus: IEventBus, eventManager: EventManager, strategy: EventRendererStrategy) {
+    constructor(
+        eventBus: IEventBus,
+        eventManager: EventManager,
+        strategy: EventRendererStrategy,
+        dateService: DateService
+    ) {
         this.eventBus = eventBus;
         this.eventManager = eventManager;
         this.strategy = strategy;
-
-        // Initialize DateService
-        const timezone = calendarConfig.getTimezone?.();
-        this.dateService = new DateService(timezone);
+        this.dateService = dateService;
 
         this.setupEventListeners();
     }

src/renderers/GridRenderer.ts

@@ -1,4 +1,4 @@
-import { calendarConfig } from '../core/CalendarConfig';
+import { CalendarConfig } from '../core/CalendarConfig';
 import { ResourceCalendarData, CalendarView } from '../types/CalendarTypes';
 import { ColumnRenderer, ColumnRenderContext } from './ColumnRenderer';
 import { eventBus } from '../core/EventBus';
@@ -15,11 +15,16 @@ export class GridRenderer {
   private cachedTimeAxis: HTMLElement | null = null;
   private dateService: DateService;
   private columnRenderer: ColumnRenderer;
+  private config: CalendarConfig;
 
-  constructor(columnRenderer: ColumnRenderer) {
-    const timezone = calendarConfig.getTimezone?.();
-    this.dateService = new DateService(timezone);
+  constructor(
+    columnRenderer: ColumnRenderer,
+    dateService: DateService,
+    config: CalendarConfig
+  ) {
+    this.dateService = dateService;
     this.columnRenderer = columnRenderer;
+    this.config = config;
   }
 
   public renderGrid(
@@ -80,7 +85,7 @@ export class GridRenderer {
   private createOptimizedTimeAxis(): HTMLElement {
     const timeAxis = document.createElement('swp-time-axis');
     const timeAxisContent = document.createElement('swp-time-axis-content');
-    const gridSettings = calendarConfig.getGridSettings();
+    const gridSettings = this.config.getGridSettings();
     const startHour = gridSettings.dayStartHour;
     const endHour = gridSettings.dayEndHour;
 
@@ -142,7 +147,7 @@ export class GridRenderer {
   ): void {
     const context: ColumnRenderContext = {
       currentWeek: currentDate, // ColumnRenderer expects currentWeek property
-      config: calendarConfig,
+      config: this.config,
       resourceData: resourceData
     };
 

src/renderers/GridStyleManager.ts

@@ -1,4 +1,4 @@
-import { calendarConfig } from '../core/CalendarConfig';
+import { CalendarConfig } from '../core/CalendarConfig';
 import { ResourceCalendarData } from '../types/CalendarTypes';
 
 interface GridSettings {
@@ -16,7 +16,10 @@ interface GridSettings {
  * Separated from GridManager to follow Single Responsibility Principle
  */
 export class GridStyleManager {
-  constructor() {
+  private config: CalendarConfig;
+
+  constructor(config: CalendarConfig) {
+    this.config = config;
   }
 
   /**
@@ -24,9 +27,9 @@ export class GridStyleManager {
    */
   public updateGridStyles(resourceData: ResourceCalendarData | null = null): void {
     const root = document.documentElement;
-    const gridSettings = calendarConfig.getGridSettings();
+    const gridSettings = this.config.getGridSettings();
     const calendar = document.querySelector('swp-calendar') as HTMLElement;
-    const calendarType = calendarConfig.getCalendarMode();
+    const calendarType = this.config.getCalendarMode();
     
     // Set CSS variables for time and grid measurements
     this.setTimeVariables(root, gridSettings);
@@ -66,9 +69,9 @@ export class GridStyleManager {
     if (calendarType === 'resource' && resourceData) {
       return resourceData.resources.length;
     } else if (calendarType === 'date') {
-      const dateSettings = calendarConfig.getDateViewSettings();
-      const workWeekSettings = calendarConfig.getWorkWeekSettings();
-      
+      const dateSettings = this.config.getDateViewSettings();
+      const workWeekSettings = this.config.getWorkWeekSettings();
+
       switch (dateSettings.period) {
         case 'day':
           return 1;
@@ -80,8 +83,8 @@ export class GridStyleManager {
           return workWeekSettings.totalDays;
       }
     }
-    
-    return calendarConfig.getWorkWeekSettings().totalDays; // Default to work week
+
+    return this.config.getWorkWeekSettings().totalDays; // Default to work week
   }
 
   /**

src/renderers/HeaderRenderer.ts

@@ -37,7 +37,7 @@ export class DateHeaderRenderer implements HeaderRenderer {
     // Initialize date service with timezone and locale from config
     const timezone = config.getTimezone?.() || 'Europe/Copenhagen';
     const locale = config.getLocale?.() || 'da-DK';
-    this.dateService = new DateService(timezone);
+    this.dateService = new DateService(config);
 
     const workWeekSettings = config.getWorkWeekSettings();
     const dates = this.dateService.getWorkWeekDates(currentWeek, workWeekSettings.workDays);