src/v2/core/CalendarOrchestrator.ts

@@ -28,6 +28,10 @@ export class CalendarOrchestrator {
     headerContainer.innerHTML = '';
     columnContainer.innerHTML = '';
 
+    // Sæt data-levels attribut for CSS grid-row styling
+    const levels = viewConfig.groupings.map(g => g.type).join(' ');
+    headerContainer.dataset.levels = levels;
+
     // Vælg renderers baseret på groupings types
     const activeRenderers = this.selectRenderers(viewConfig);
 
@@ -46,7 +50,10 @@ export class CalendarOrchestrator {
 
   private selectRenderers(viewConfig: ViewConfig): Renderer[] {
     const types = viewConfig.groupings.map(g => g.type);
-    return this.allRenderers.filter(r => types.includes(r.type));
+    // Sortér renderers i samme rækkefølge som viewConfig.groupings
+    return types
+      .map(type => this.allRenderers.find(r => r.type === type))
+      .filter((r): r is Renderer => r !== undefined);
   }
 
   private calculateTotalColumns(viewConfig: ViewConfig): number {

src/v2/demo/DemoApp.ts

@@ -65,7 +65,7 @@ export class DemoApp {
   }
 
   private buildViewConfig(): ViewConfig {
-    const dates = this.dateService.getWeekDates(this.weekOffset);
+    const dates = this.dateService.getWeekDates(this.weekOffset, 3);
 
     switch (this.currentView) {
       case 'simple':
@@ -80,7 +80,7 @@ export class DemoApp {
         return {
           templateId: 'resource',
           groupings: [
-            { type: 'resource', values: ['res1', 'res2', 'res3'] },
+            { type: 'resource', values: ['res1', 'res2'] },
             { type: 'date', values: dates }
           ]
         };

wwwroot/css/v2/calendar-v2-base.css

@@ -14,9 +14,13 @@
   --color-border: #e0e0e0;
   --color-surface: #fff;
   --color-background: #f5f5f5;
+  --color-background-hover: #f0f0f0;
+  --color-background-alt: #fafafa;
   --color-text: #333333;
   --color-text-secondary: #666;
   --color-primary: #1976d2;
+  --color-team-bg: #e3f2fd;
+  --color-team-text: #1565c0;
 
   /* Colors - Grid */
   --color-hour-line: rgba(0, 0, 0, 0.2);

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

@@ -29,7 +29,7 @@ swp-nav-button {
   cursor: pointer;
   background: var(--color-surface);
 
-  &:hover { background: #f0f0f0; }
+  &:hover { background: var(--color-background-hover); }
 }
 
 swp-week-info {
@@ -75,7 +75,7 @@ swp-header-drawer {
   display: block;
   height: 0;
   overflow: hidden;
-  background: #fafafa;
+  background: var(--color-background-alt);
   border-bottom: 1px solid var(--color-border);
 }
 
@@ -180,13 +180,14 @@ swp-team-header {
 }
 
 swp-team-header {
-  background: #e3f2fd;
+  background: var(--color-team-bg);
-  color: #1565c0;
+  color: var(--color-team-text);
   font-weight: 500;
+  grid-column: span var(--team-cols, 1);
 }
 
 swp-resource-header {
-  background: #fafafa;
+  background: var(--color-background-alt);
   font-size: 13px;
 }