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/renderers/NavigationRenderer.ts

@@ -1,6 +1,7 @@
 import { IEventBus } from '../types/CalendarTypes';
 import { EventTypes } from '../constants/EventTypes';
 import { DateUtils } from '../utils/DateUtils';
+import { CalendarConfig } from '../core/CalendarConfig';
 
 /**
  * NavigationRenderer - Handles DOM rendering for navigation containers
@@ -8,9 +9,11 @@ import { DateUtils } from '../utils/DateUtils';
  */
 export class NavigationRenderer {
   private eventBus: IEventBus;
+  private config: CalendarConfig;
 
-  constructor(eventBus: IEventBus) {
+  constructor(eventBus: IEventBus, config: CalendarConfig) {
     this.eventBus = eventBus;
+    this.config = config;
     this.setupEventListeners();
   }
 
@@ -97,10 +100,13 @@ export class NavigationRenderer {
     dayColumns.innerHTML = '';
 
     // Render headers for target week
-    const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-    for (let i = 0; i < 7; i++) {
+    const workWeekSettings = this.config.getWorkWeekSettings();
+    workWeekSettings.workDays.forEach((dayOfWeek, i) => {
       const date = new Date(weekStart);
-      date.setDate(date.getDate() + i);
+      // Set to the start of the week (Sunday = 0)
+      date.setDate(weekStart.getDate() - weekStart.getDay());
+      // Add the specific day of week
+      date.setDate(date.getDate() + dayOfWeek);
       
       const headerElement = document.createElement('swp-day-header');
       if (this.isToday(date)) {
@@ -108,26 +114,29 @@ export class NavigationRenderer {
       }
       
       headerElement.innerHTML = `
-        <swp-day-name>${days[date.getDay()]}</swp-day-name>
+        <swp-day-name>${workWeekSettings.dayNames[i]}</swp-day-name>
         <swp-day-date>${date.getDate()}</swp-day-date>
       `;
       headerElement.dataset.date = this.formatDate(date);
       
       header.appendChild(headerElement);
-    }
+    });
     
     // Render day columns for target week
-    for (let i = 0; i < 7; i++) {
+    workWeekSettings.workDays.forEach(dayOfWeek => {
       const column = document.createElement('swp-day-column');
       const date = new Date(weekStart);
-      date.setDate(date.getDate() + i);
+      // Set to the start of the week (Sunday = 0)
+      date.setDate(weekStart.getDate() - weekStart.getDay());
+      // Add the specific day of week
+      date.setDate(date.getDate() + dayOfWeek);
       column.dataset.date = this.formatDate(date);
       
       const eventsLayer = document.createElement('swp-events-layer');
       column.appendChild(eventsLayer);
       
       dayColumns.appendChild(column);
-    }
+    });
   }
 
   /**