Adds work week configuration feature

Implements configurable work week presets, allowing users to customize the days displayed in the calendar.

This includes:
- Defining work week settings (work days, day names, total days).
- Providing predefined work week presets (standard, compressed, weekend, full week).
- Adding UI elements to switch between presets.
- Updating grid and header rendering logic to reflect the selected work week.
- Emitting events when the work week changes, triggering necessary UI updates and data re-renders.

This provides a more flexible and personalized calendar experience.

src/managers/CalendarManager.ts

@@ -264,6 +264,13 @@ export class CalendarManager {
             this.refresh();
         });
 
+        // Lyt efter workweek changes
+        this.eventBus.on(EventTypes.WORKWEEK_CHANGED, (event: Event) => {
+            const customEvent = event as CustomEvent;
+            console.log('CalendarManager: Workweek changed to', customEvent.detail.workWeekId);
+            this.handleWorkweekChange();
+        });
+
         // Lyt efter reset requests
         this.eventBus.on(EventTypes.RESET_REQUESTED, () => {
             this.reset();
@@ -281,7 +288,8 @@ export class CalendarManager {
                 nextDate.setDate(nextDate.getDate() + 1);
                 break;
             case 'week':
-                nextDate.setDate(nextDate.getDate() + 7);
+                const workWeekSettings = this.config.getWorkWeekSettings();
+                nextDate.setDate(nextDate.getDate() + 7); // Move to next calendar week regardless of work days
                 break;
             case 'month':
                 nextDate.setMonth(nextDate.getMonth() + 1);
@@ -302,7 +310,8 @@ export class CalendarManager {
                 previousDate.setDate(previousDate.getDate() - 1);
                 break;
             case 'week':
-                previousDate.setDate(previousDate.getDate() - 7);
+                const workWeekSettings = this.config.getWorkWeekSettings();
+                previousDate.setDate(previousDate.getDate() - 7); // Move to previous calendar week regardless of work days
                 break;
             case 'month':
                 previousDate.setMonth(previousDate.getMonth() - 1);
@@ -370,4 +379,42 @@ export class CalendarManager {
         }
     }
 
+    /**
+     * Handle workweek configuration changes
+     */
+    private handleWorkweekChange(): void {
+        console.log('CalendarManager: Handling workweek change - forcing full grid rebuild');
+        
+        // Force a complete grid rebuild by clearing existing structure
+        const container = document.querySelector('swp-calendar-container');
+        if (container) {
+            container.innerHTML = ''; // Clear everything to force full rebuild
+        }
+        
+        // Re-render the grid with new workweek settings (will now rebuild everything)
+        this.gridManager.render();
+        
+        // Re-initialize scroll manager after grid rebuild
+        this.scrollManager.initialize();
+        
+        // Re-render events in the new grid structure
+        this.rerenderEvents();
+    }
+
+    /**
+     * Re-render events after grid structure changes
+     */
+    private rerenderEvents(): void {
+        console.log('CalendarManager: Re-rendering events for new workweek');
+        
+        // Get current period data to determine date range
+        const periodData = this.calculateCurrentPeriod();
+        
+        // Trigger event rendering for the current date range
+        this.eventRenderer.renderEventsForDateRange(
+            periodData.startDate, 
+            periodData.endDate
+        );
+    }
+
 }

src/managers/NavigationManager.ts

@@ -2,6 +2,7 @@ import { IEventBus } from '../types/CalendarTypes.js';
 import { DateUtils } from '../utils/DateUtils.js';
 import { EventTypes } from '../constants/EventTypes.js';
 import { NavigationRenderer } from '../renderers/NavigationRenderer.js';
+import { calendarConfig } from '../core/CalendarConfig.js';
 
 /**
  * NavigationManager handles calendar navigation (prev/next/today buttons)
@@ -17,7 +18,7 @@ export class NavigationManager {
   constructor(eventBus: IEventBus) {
     console.log('🧭 NavigationManager: Constructor called');
     this.eventBus = eventBus;
-    this.navigationRenderer = new NavigationRenderer(eventBus);
+    this.navigationRenderer = new NavigationRenderer(eventBus, calendarConfig);
     this.currentWeek = DateUtils.getWeekStart(new Date(), 0); // Sunday start like POC
     this.targetWeek = new Date(this.currentWeek);
     this.init();

src/managers/ViewManager.ts

@@ -33,6 +33,9 @@ export class ViewManager {
 
         // Setup view button handlers
         this.setupViewButtonHandlers();
+        
+        // Setup workweek preset button handlers
+        this.setupWorkweekButtonHandlers();
     }
 
     private setupViewButtonHandlers(): void {
@@ -48,8 +51,22 @@ export class ViewManager {
         });
     }
 
+    private setupWorkweekButtonHandlers(): void {
+        const workweekButtons = document.querySelectorAll('swp-preset-button[data-workweek]');
+        workweekButtons.forEach(button => {
+            button.addEventListener('click', (event) => {
+                event.preventDefault();
+                const workweekId = button.getAttribute('data-workweek');
+                if (workweekId) {
+                    this.changeWorkweek(workweekId);
+                }
+            });
+        });
+    }
+
     private initializeView(): void {
         this.updateViewButtons();
+        this.updateWorkweekButtons();
         
         this.eventBus.emit(EventTypes.VIEW_RENDERED, {
             view: this.currentView
@@ -72,6 +89,18 @@ export class ViewManager {
         });
     }
 
+    private changeWorkweek(workweekId: string): void {
+        console.log(`ViewManager: Changing workweek to ${workweekId}`);
+        
+        // Update the calendar config
+        calendarConfig.setWorkWeek(workweekId);
+        
+        // Update button states
+        this.updateWorkweekButtons();
+        
+        // Trigger a calendar refresh to apply the new workweek
+        this.eventBus.emit(EventTypes.REFRESH_REQUESTED);
+    }
 
     private updateViewButtons(): void {
         const viewButtons = document.querySelectorAll('swp-view-button[data-view]');
@@ -85,6 +114,20 @@ export class ViewManager {
         });
     }
 
+    private updateWorkweekButtons(): void {
+        const currentWorkweek = calendarConfig.getCurrentWorkWeek();
+        const workweekButtons = document.querySelectorAll('swp-preset-button[data-workweek]');
+        
+        workweekButtons.forEach(button => {
+            const buttonWorkweek = button.getAttribute('data-workweek');
+            if (buttonWorkweek === currentWorkweek) {
+                button.setAttribute('data-active', 'true');
+            } else {
+                button.removeAttribute('data-active');
+            }
+        });
+    }
+
     private refreshCurrentView(): void {
         this.eventBus.emit(EventTypes.VIEW_RENDERED, {
             view: this.currentView