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/ColumnRenderer.ts

@@ -26,7 +26,7 @@ export class DateColumnRenderer implements ColumnRenderer {
   render(columnContainer: HTMLElement, context: ColumnRenderContext): void {
     const { currentWeek, config } = context;
     
-    const dates = this.getWeekDates(currentWeek);
+    const dates = this.getWeekDates(currentWeek, config);
     const dateSettings = config.getDateViewSettings();
     const daysToShow = dates.slice(0, dateSettings.weekDays);
     
@@ -43,13 +43,20 @@ export class DateColumnRenderer implements ColumnRenderer {
     });
   }
 
-  private getWeekDates(weekStart: Date): Date[] {
+  private getWeekDates(weekStart: Date, config: CalendarConfig): Date[] {
     const dates: Date[] = [];
-    for (let i = 0; i < 7; i++) {
+    const workWeekSettings = config.getWorkWeekSettings();
+    
+    // Calculate dates based on actual work days (e.g., [1,2,3,4] for Mon-Thu)
+    workWeekSettings.workDays.forEach(dayOfWeek => {
       const date = new Date(weekStart);
-      date.setDate(weekStart.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);
       dates.push(date);
-    }
+    });
+    
     return dates;
   }
 

src/renderers/GridStyleManager.ts

@@ -60,19 +60,21 @@ export class GridStyleManager {
       return resourceData.resources.length;
     } else if (calendarType === 'date') {
       const dateSettings = this.config.getDateViewSettings();
+      const workWeekSettings = this.config.getWorkWeekSettings();
+      
       switch (dateSettings.period) {
         case 'day':
           return 1;
         case 'week':
-          return dateSettings.weekDays;
+          return workWeekSettings.totalDays;
         case 'month':
-          return 7;
+          return workWeekSettings.totalDays; // Use work week for month view too
         default:
-          return dateSettings.weekDays;
+          return workWeekSettings.totalDays;
       }
     }
     
-    return 7; // Default
+    return this.config.getWorkWeekSettings().totalDays; // Default to work week
   }
 
   /**

src/renderers/HeaderRenderer.ts

@@ -27,18 +27,19 @@ export class DateHeaderRenderer implements HeaderRenderer {
   render(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
     const { currentWeek, config, allDayEvents = [] } = context;
     
-    const dates = this.getWeekDates(currentWeek);
+    const dates = this.getWeekDates(currentWeek, config);
     const weekDays = config.get('weekDays');
     const daysToShow = dates.slice(0, weekDays);
 
-    daysToShow.forEach((date) => {
+    const workWeekSettings = config.getWorkWeekSettings();
+    daysToShow.forEach((date, index) => {
       const header = document.createElement('swp-day-header');
       if (this.isToday(date)) {
         (header as any).dataset.today = 'true';
       }
       
       header.innerHTML = `
-        <swp-day-name>${this.getDayName(date)}</swp-day-name>
+        <swp-day-name>${workWeekSettings.dayNames[index]}</swp-day-name>
         <swp-day-date>${date.getDate()}</swp-day-date>
       `;
       (header as any).dataset.date = this.formatDate(date);
@@ -53,7 +54,7 @@ export class DateHeaderRenderer implements HeaderRenderer {
   private renderAllDayEvents(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
     const { currentWeek, config, allDayEvents = [] } = context;
     
-    const dates = this.getWeekDates(currentWeek);
+    const dates = this.getWeekDates(currentWeek, config);
     const weekDays = config.get('weekDays');
     const daysToShow = dates.slice(0, weekDays);
 
@@ -101,13 +102,20 @@ export class DateHeaderRenderer implements HeaderRenderer {
     });
   }
 
-  private getWeekDates(weekStart: Date): Date[] {
+  private getWeekDates(weekStart: Date, config: CalendarConfig): Date[] {
     const dates: Date[] = [];
-    for (let i = 0; i < 7; i++) {
+    const workWeekSettings = config.getWorkWeekSettings();
+    
+    // Calculate dates based on actual work days (e.g., [1,2,3,4] for Mon-Thu)
+    workWeekSettings.workDays.forEach(dayOfWeek => {
       const date = new Date(weekStart);
-      date.setDate(weekStart.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);
       dates.push(date);
-    }
+    });
+    
     return dates;
   }
 
@@ -120,10 +128,6 @@ export class DateHeaderRenderer implements HeaderRenderer {
     return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
   }
 
-  private getDayName(date: Date): string {
-    const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-    return days[date.getDay()];
-  }
 }
 
 /**

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);
-    }
+    });
   }
 
   /**