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

@@ -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;
   }
 }

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();
-
         });
     }
 

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();