Refactor calendar UI and time range configuration

Updates time axis and calendar to focus on 6-18 hour range
Modifies CSS to support nested selectors and time range configuration
Enhances DateService to support flexible week date generation

src/v2/core/DateService.ts

@@ -12,9 +12,9 @@ export class DateService {
     return new Intl.DateTimeFormat(this.config.locale, { weekday: format }).format(date);
   }
 
-  getWeekDates(offset = 0): string[] {
+  getWeekDates(offset = 0, days = 7): string[] {
     const monday = dayjs().startOf('week').add(1, 'day').add(offset, 'week');
-    return Array.from({ length: 7 }, (_, i) =>
+    return Array.from({ length: days }, (_, i) =>
       monday.add(i, 'day').format('YYYY-MM-DD')
     );
   }

src/v2/demo/DemoApp.ts

@@ -50,8 +50,8 @@ export class DemoApp {
       }
     };
 
-    // Render time axis
-    this.timeAxisRenderer.render(document.getElementById('time-axis') as HTMLElement);
+    // Render time axis (06:00 - 18:00)
+    this.timeAxisRenderer.render(document.getElementById('time-axis') as HTMLElement, 6, 18);
 
     // Init scroll synkronisering
     this.scrollManager.init(this.container);

wwwroot/css/calendar-v2.css

@@ -3,8 +3,8 @@
   --time-axis-width: 60px;
   --grid-columns: 7;
   --day-column-min-width: 200px;
-  --day-start-hour: 0;
-  --day-end-hour: 24;
+  --day-start-hour: 6;
+  --day-end-hour: 18;
   --color-border: #e0e0e0;
   --color-surface: #fff;
   --color-text-secondary: #666;
@@ -48,23 +48,23 @@ swp-nav-button {
   border-radius: 4px;
   cursor: pointer;
   background: var(--color-surface);
-}
 
-swp-nav-button:hover { background: #f0f0f0; }
+  &:hover { background: #f0f0f0; }
+}
 
 swp-week-info {
   margin-left: auto;
   text-align: right;
-}
 
-swp-week-number {
+  swp-week-number {
     font-weight: 600;
     display: block;
-}
+  }
 
-swp-date-range {
+  swp-date-range {
     font-size: 12px;
     color: var(--color-text-secondary);
+  }
 }
 
 /* Container */
@@ -108,9 +108,8 @@ swp-hour-marker {
   color: var(--color-text-secondary);
   text-align: right;
   position: relative;
-}
 
-swp-hour-marker::after {
+  &::after {
     content: '';
     position: absolute;
     top: -1px;
@@ -118,6 +117,7 @@ swp-hour-marker::after {
     width: 5px;
     height: 1px;
     background: var(--color-hour-line);
+  }
 }
 
 /* Grid container */
@@ -141,20 +141,18 @@ swp-content-viewport {
 
 swp-header-track {
   display: flex;
+
+  > swp-calendar-header { flex: 0 0 100%; }
 }
 
 swp-content-track {
   display: flex;
   height: 100%;
-}
 
-swp-header-track > swp-calendar-header {
-  flex: 0 0 100%;
-}
-
-swp-content-track > swp-scrollable-content {
+  > swp-scrollable-content {
     flex: 0 0 100%;
     height: 100%;
+  }
 }
 
 /* Header */
@@ -166,25 +164,24 @@ swp-calendar-header {
   background: var(--color-surface);
   overflow-y: scroll;
   overflow-x: hidden;
+
+  &::-webkit-scrollbar { background: transparent; }
+  &::-webkit-scrollbar-thumb { background: transparent; }
+
+  &[data-levels="date"] > swp-day-header { grid-row: 1; }
+
+  &[data-levels="resource date"] {
+    > swp-resource-header { grid-row: 1; }
+    > swp-day-header { grid-row: 2; }
+  }
+
+  &[data-levels="team resource date"] {
+    > swp-team-header { grid-row: 1; }
+    > swp-resource-header { grid-row: 2; }
+    > swp-day-header { grid-row: 3; }
+  }
 }
 
-swp-calendar-header::-webkit-scrollbar {
-  background: transparent;
-}
-
-swp-calendar-header::-webkit-scrollbar-thumb {
-  background: transparent;
-}
-
-swp-calendar-header[data-levels="date"] > swp-day-header { grid-row: 1; }
-
-swp-calendar-header[data-levels="resource date"] > swp-resource-header { grid-row: 1; }
-swp-calendar-header[data-levels="resource date"] > swp-day-header { grid-row: 2; }
-
-swp-calendar-header[data-levels="team resource date"] > swp-team-header { grid-row: 1; }
-swp-calendar-header[data-levels="team resource date"] > swp-resource-header { grid-row: 2; }
-swp-calendar-header[data-levels="team resource date"] > swp-day-header { grid-row: 3; }
-
 swp-day-header,
 swp-resource-header,
 swp-team-header {
@@ -205,17 +202,19 @@ swp-resource-header {
   font-size: 13px;
 }
 
-swp-day-name {
+swp-day-header {
+  swp-day-name {
     display: block;
     font-size: 11px;
     color: var(--color-text-secondary);
     text-transform: uppercase;
-}
+  }
 
-swp-day-date {
+  swp-day-date {
     display: block;
     font-size: 24px;
     font-weight: 300;
+  }
 }
 
 /* Scrollable content */
@@ -229,10 +228,9 @@ swp-time-grid {
   position: relative;
   min-height: calc((var(--day-end-hour) - var(--day-start-hour)) * var(--hour-height));
   min-width: calc(var(--grid-columns) * var(--day-column-min-width));
-}
 
-/* Timelinjer via ::after */
-swp-time-grid::after {
+  /* Timelinjer */
+  &::after {
     content: '';
     position: absolute;
     inset: 0;
@@ -245,6 +243,7 @@ swp-time-grid::after {
       var(--color-hour-line) var(--hour-height)
     );
     pointer-events: none;
+  }
 }
 
 /* Kvarterlinjer - 3 linjer per time (15, 30, 45 min), ikke ved timegrænsen */
@@ -299,15 +298,15 @@ swp-event {
   padding: 4px 6px;
   font-size: 12px;
   overflow: hidden;
-}
 
-swp-event-time {
+  swp-event-time {
     display: block;
     font-size: 10px;
     opacity: 0.9;
-}
+  }
 
-swp-event-title {
+  swp-event-title {
     display: block;
     font-weight: 500;
+  }
 }