From d3f4667b61e85a5743b7c19c32b285fd8a35c50a Mon Sep 17 00:00:00 2001
From: "Janus C. H. Knudsen" <janus007@gmail.com>
Date: Mon, 3 Nov 2025 22:52:48 +0100
Subject: [PATCH] Adds dynamic CSS grid column management

Updates ConfigManager to dynamically set CSS grid columns based on work week settings

Ensures the grid layout accurately reflects the number of visible days in the calendar view
Automatically updates grid columns when work week configuration changes

Improves responsive design and layout flexibility
---
 src/configurations/ConfigManager.ts | 13 +++++++++++++
 src/managers/CalendarManager.ts     |  4 +---
 src/managers/ViewManager.ts         |  4 ++++
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/configurations/ConfigManager.ts b/src/configurations/ConfigManager.ts
index 517bcb0..f7de519 100644
--- a/src/configurations/ConfigManager.ts
+++ b/src/configurations/ConfigManager.ts
@@ -5,8 +5,17 @@ import { TimeFormatter } from '../utils/TimeFormatter';
 /**
  * ConfigManager - Static configuration loader
  * Loads JSON and creates Configuration instance
+ * Also manages CSS custom properties for dynamic styling
  */
 export class ConfigManager {
+  /**
+   * Update CSS custom property for grid columns
+   * This ensures the CSS grid matches the number of visible columns
+   */
+  static updateGridColumns(weekDays: number): void {
+    document.documentElement.style.setProperty('--grid-columns', weekDays.toString());
+  }
+
   /**
    * Load configuration from JSON and create Configuration instance
    */
@@ -50,6 +59,10 @@ export class ConfigManager {
     // Configure TimeFormatter
     TimeFormatter.configure(config.timeFormatConfig);
 
+    // Set initial CSS grid columns based on the current work week preset
+    const workWeekSettings = config.getWorkWeekSettings();
+    ConfigManager.updateGridColumns(workWeekSettings.totalDays);
+
     return config;
   }
 }
diff --git a/src/managers/CalendarManager.ts b/src/managers/CalendarManager.ts
index 0ba320b..3504acc 100644
--- a/src/managers/CalendarManager.ts
+++ b/src/managers/CalendarManager.ts
@@ -115,10 +115,8 @@ export class CalendarManager {
     private setupEventListeners(): void {
         // Listen for workweek changes only
         this.eventBus.on(CoreEvents.WORKWEEK_CHANGED, (event: Event) => {
-
             const customEvent = event as CustomEvent;
-           // this.handleWorkweekChange();
-
+            this.handleWorkweekChange();
         });
     }
 
diff --git a/src/managers/ViewManager.ts b/src/managers/ViewManager.ts
index fed88ce..99bfd9d 100644
--- a/src/managers/ViewManager.ts
+++ b/src/managers/ViewManager.ts
@@ -1,5 +1,6 @@
 import { CalendarView, IEventBus } from '../types/CalendarTypes';
 import { Configuration } from '../configurations/CalendarConfig';
+import { ConfigManager } from '../configurations/ConfigManager';
 import { CoreEvents } from '../constants/CoreEvents';
 
 
@@ -95,6 +96,9 @@ export class ViewManager {
 
         this.config.setWorkWeek(workweekId);
 
+        // Update CSS grid columns to match new week days count
+        ConfigManager.updateGridColumns(this.config.dateViewSettings.weekDays);
+
         this.updateAllButtons();
 
         const settings = this.config.getWorkWeekSettings();