wip

src/di/container.ts

@@ -27,6 +27,7 @@ import { HeaderManager } from '../managers/HeaderManager';
 import { DateHeaderRenderer, ResourceHeaderRenderer } from '../renderers/HeaderRenderer';
 import { DateColumnRenderer, ResourceColumnRenderer } from '../renderers/ColumnRenderer';
 import { DateEventRenderer } from '../renderers/EventRenderer';
+import { GridRenderer } from '../renderers/GridRenderer';
 
 /**
  * Create and configure the DI container
@@ -62,16 +63,19 @@ export function createContainer(): Container {
   const eventManager = new EventManager(eventBus);
   container.bind(TOKENS.eventManager).toConstant(eventManager);
 
-  const eventRenderer = new EventRenderingService(eventBus, eventManager);
+  const eventRenderer = new EventRenderingService(eventBus, eventManager, container.get(TOKENS.eventRendererStrategy));
   container.bind(TOKENS.eventRenderer).toConstant(eventRenderer);
 
-  const gridManager = new GridManager();
+  const gridRenderer = new GridRenderer(container.get(TOKENS.columnRenderer));
+  container.bind(TOKENS.gridRenderer).toConstant(gridRenderer);
+
+  const gridManager = new GridManager(gridRenderer);
   container.bind(TOKENS.gridManager).toConstant(gridManager);
 
   const scrollManager = new ScrollManager();
   container.bind(TOKENS.scrollManager).toConstant(scrollManager);
 
-  const navigationManager = new NavigationManager(eventBus, eventRenderer);
+  const navigationManager = new NavigationManager(eventBus, eventRenderer, gridRenderer);
   container.bind(TOKENS.navigationManager).toConstant(navigationManager);
 
   const viewManager = new ViewManager(eventBus);

src/di/tokens.ts

@@ -21,6 +21,7 @@ import { HeaderManager } from '../managers/HeaderManager';
 import { HeaderRenderer } from '../renderers/HeaderRenderer';
 import { ColumnRenderer } from '../renderers/ColumnRenderer';
 import { EventRendererStrategy } from '../renderers/EventRenderer';
+import { GridRenderer } from '../renderers/GridRenderer';
 
 /**
  * DI Tokens - Type-safe identifiers for dependency injection
@@ -33,6 +34,7 @@ export const TOKENS = {
   headerRenderer: token<HeaderRenderer>('headerRenderer'),
   columnRenderer: token<ColumnRenderer>('columnRenderer'),
   eventRendererStrategy: token<EventRendererStrategy>('eventRendererStrategy'),
+  gridRenderer: token<GridRenderer>('gridRenderer'),
 
   // Managers
   eventManager: token<EventManager>('eventManager'),

src/managers/GridManager.ts

@@ -23,9 +23,9 @@ export class GridManager {
   private styleManager: GridStyleManager;
   private dateService: DateService;
 
-  constructor() {
+  constructor(gridRenderer: GridRenderer) {
-    // Initialize GridRenderer and StyleManager with config
+    // Inject GridRenderer via DI
-    this.gridRenderer = new GridRenderer();
+    this.gridRenderer = gridRenderer;
     this.styleManager = new GridStyleManager();
     this.dateService = new DateService('Europe/Copenhagen');
     this.init();

src/managers/NavigationManager.ts

@@ -19,11 +19,11 @@ export class NavigationManager {
   private targetWeek: Date;
   private animationQueue: number = 0;
 
-  constructor(eventBus: IEventBus, eventRenderer: EventRenderingService) {
+  constructor(eventBus: IEventBus, eventRenderer: EventRenderingService, gridRenderer: GridRenderer) {
     this.eventBus = eventBus;
     this.dateService = new DateService('Europe/Copenhagen');
     this.navigationRenderer = new NavigationRenderer(eventBus, eventRenderer);
-    this.gridRenderer = new GridRenderer();
+    this.gridRenderer = gridRenderer;
     this.currentWeek = this.getISOWeekStart(new Date());
     this.targetWeek = new Date(this.currentWeek);
     this.init();

src/renderers/EventRendererManager.ts

@@ -21,13 +21,10 @@ export class EventRenderingService {
 
     private dragMouseLeaveHeaderListener: ((event: Event) => void) | null = null;
 
-    constructor(eventBus: IEventBus, eventManager: EventManager) {
+    constructor(eventBus: IEventBus, eventManager: EventManager, strategy: EventRendererStrategy) {
         this.eventBus = eventBus;
         this.eventManager = eventManager;
-
+        this.strategy = strategy;
-        // Cache strategy at initialization
-        const calendarType = calendarConfig.getCalendarMode();
-        this.strategy = CalendarTypeFactory.getEventRenderer(calendarType);
 
         // Initialize DateService
         const timezone = calendarConfig.getTimezone?.();

src/renderers/GridRenderer.ts

@@ -15,10 +15,12 @@ export class GridRenderer {
   private cachedGridContainer: HTMLElement | null = null;
   private cachedTimeAxis: HTMLElement | null = null;
   private dateService: DateService;
+  private columnRenderer: ColumnRenderer;
 
-  constructor() {
+  constructor(columnRenderer: ColumnRenderer) {
     const timezone = calendarConfig.getTimezone?.();
     this.dateService = new DateService(timezone);
+    this.columnRenderer = columnRenderer;
   }
 
   public renderGrid(
@@ -139,16 +141,13 @@ export class GridRenderer {
     resourceData: ResourceCalendarData | null,
     view: CalendarView
   ): void {
-    const calendarType = calendarConfig.getCalendarMode();
-    const columnRenderer = CalendarTypeFactory.getColumnRenderer(calendarType);
-
     const context: ColumnRenderContext = {
       currentWeek: currentDate, // ColumnRenderer expects currentWeek property
       config: calendarConfig,
       resourceData: resourceData
     };
 
-    columnRenderer.render(columnContainer, context);
+    this.columnRenderer.render(columnContainer, context);
   }
 
   /**