Adds workweek settings and dynamic view configuration

Introduces settings service for managing tenant-specific calendar configurations

Enables dynamic workweek presets with configurable work days
Improves view switching with enhanced UI components
Adds flexible calendar rendering based on tenant settings

Extends DateService to support workweek date generation

wwwroot/css/v2/calendar-v2-layout.css

@@ -16,20 +16,78 @@ swp-calendar {
 /* Nav */
 swp-calendar-nav {
   display: flex;
-  gap: 16px;
-  padding: 12px 16px;
+  gap: 12px;
+  padding: 8px 16px;
   border-bottom: 1px solid var(--color-border);
   align-items: center;
+  font-size: 13px;
+}
+
+/* View switcher - small chips */
+swp-view-switcher {
+  display: flex;
+  gap: 4px;
+  background: var(--color-background-alt);
+  padding: 3px;
+  border-radius: 6px;
+}
+
+.view-chip {
+  padding: 4px 10px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  font-weight: 500;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: var(--color-surface);
+    color: var(--color-text);
+  }
+
+  &.active {
+    background: var(--color-surface);
+    color: var(--color-text);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+  }
+}
+
+/* Workweek dropdown */
+.workweek-dropdown {
+  padding: 4px 8px;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-surface);
+  font-size: 12px;
+  cursor: pointer;
+
+  &:hover { border-color: var(--color-text-secondary); }
+  &:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
+}
+
+/* Navigation group */
+swp-nav-group {
+  display: flex;
+  gap: 2px;
 }
 
 swp-nav-button {
-  padding: 8px 16px;
+  padding: 6px 12px;
   border: 1px solid var(--color-border);
   border-radius: 4px;
   cursor: pointer;
   background: var(--color-surface);
+  font-size: 12px;
 
   &:hover { background: var(--color-background-hover); }
+
+  &.btn-small {
+    padding: 4px 8px;
+    font-size: 11px;
+  }
 }
 
 swp-week-info {
@@ -38,11 +96,12 @@ swp-week-info {
 
   swp-week-number {
     font-weight: 600;
+    font-size: 12px;
     display: block;
   }
 
   swp-date-range {
-    font-size: 12px;
+    font-size: 11px;
     color: var(--color-text-secondary);
   }
 }
@@ -70,6 +129,8 @@ swp-time-axis {
 
 swp-header-spacer {
   border-bottom: 1px solid var(--color-border);
+  background: var(--color-surface);
+  z-index: 1;
 }
 
 swp-header-drawer {

wwwroot/data/tenant-settings.json

@@ -0,0 +1,57 @@
+{
+  "id": "tenant-settings",
+  "syncStatus": "synced",
+  "lastModified": "2025-12-15T10:00:00Z",
+
+  "workweek": {
+    "presets": {
+      "standard": {
+        "id": "standard",
+        "workDays": [1, 2, 3, 4, 5],
+        "label": "Man-Fre"
+      },
+      "compressed": {
+        "id": "compressed",
+        "workDays": [1, 2, 3, 4],
+        "label": "Man-Tor"
+      },
+      "midweek": {
+        "id": "midweek",
+        "workDays": [3, 4, 5],
+        "label": "Ons-Fre"
+      },
+      "weekend": {
+        "id": "weekend",
+        "workDays": [6, 7],
+        "label": "Weekend"
+      },
+      "fullweek": {
+        "id": "fullweek",
+        "workDays": [1, 2, 3, 4, 5, 6, 7],
+        "label": "Alle dage"
+      }
+    },
+    "defaultPreset": "standard",
+    "firstDayOfWeek": 1
+  },
+
+  "grid": {
+    "dayStartHour": 6,
+    "dayEndHour": 22,
+    "workStartHour": 8,
+    "workEndHour": 17,
+    "hourHeight": 80,
+    "snapInterval": 15
+  },
+
+  "timeFormat": {
+    "timezone": "Europe/Copenhagen",
+    "locale": "da-DK",
+    "use24HourFormat": true
+  },
+
+  "views": {
+    "availableViews": ["simple", "resource", "team", "department"],
+    "defaultView": "simple"
+  }
+}

wwwroot/v2.html

@@ -10,18 +10,36 @@
   <div class="calendar-wrapper">
     <swp-calendar>
       <swp-calendar-nav>
-        <swp-nav-button id="btn-day">Dag</swp-nav-button>
-        <swp-nav-button id="btn-simple">Datoer</swp-nav-button>
-        <swp-nav-button id="btn-resource">Resources</swp-nav-button>
-        <swp-nav-button id="btn-team">Teams</swp-nav-button>
-        <swp-nav-button id="btn-department">Departments</swp-nav-button>
+        <!-- View switcher (small chips) -->
+        <swp-view-switcher>
+          <button class="view-chip active" data-view="simple">Datoer</button>
+          <button class="view-chip" data-view="day">Dag</button>
+          <button class="view-chip" data-view="resource">Resource</button>
+          <button class="view-chip" data-view="team">Team</button>
+          <button class="view-chip" data-view="department">Dept</button>
+        </swp-view-switcher>
+
+        <!-- Workweek preset dropdown -->
+        <select id="workweek-select" class="workweek-dropdown">
+          <option value="standard">Man-Fre</option>
+          <option value="compressed">Man-Tor</option>
+          <option value="midweek">Ons-Fre</option>
+          <option value="weekend">Weekend</option>
+          <option value="fullweek">Alle dage</option>
+        </select>
+
+        <!-- Navigation -->
+        <swp-nav-group>
+          <swp-nav-button id="btn-prev">←</swp-nav-button>
+          <swp-nav-button id="btn-next">→</swp-nav-button>
+        </swp-nav-group>
+
         <swp-week-info>
-          <swp-week-number>V2</swp-week-number>
+          <swp-week-number>V2 Demo</swp-week-number>
           <swp-date-range id="view-info"></swp-date-range>
         </swp-week-info>
-        <swp-nav-button id="btn-prev">←</swp-nav-button>
-        <swp-nav-button id="btn-next">→</swp-nav-button>
-        <swp-nav-button id="btn-drawer">Toggle</swp-nav-button>
+
+        <swp-nav-button id="btn-drawer" class="btn-small">Drawer</swp-nav-button>
       </swp-calendar-nav>
 
       <swp-calendar-container>