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
+    // Render time axis (06:00 - 18:00)
-    this.timeAxisRenderer.render(document.getElementById('time-axis') as HTMLElement);
+    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-start-hour: 6;
-  --day-end-hour: 24;
+  --day-end-hour: 18;
   --color-border: #e0e0e0;
   --color-surface: #fff;
   --color-text-secondary: #666;
@@ -48,14 +48,13 @@ 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 {
     font-weight: 600;
@@ -66,6 +65,7 @@ swp-date-range {
     font-size: 12px;
     color: var(--color-text-secondary);
   }
+}
 
 /* Container */
 swp-calendar-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;
@@ -119,6 +118,7 @@ swp-hour-marker::after {
     height: 1px;
     background: var(--color-hour-line);
   }
+}
 
 /* Grid container */
 swp-grid-container {
@@ -141,21 +141,19 @@ 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 {
+  > swp-scrollable-content {
-  flex: 0 0 100%;
-}
-
-swp-content-track > swp-scrollable-content {
     flex: 0 0 100%;
     height: 100%;
   }
+}
 
 /* Header */
 swp-calendar-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; }
   }
 
-swp-calendar-header::-webkit-scrollbar {
+  &[data-levels="team resource date"] {
-  background: transparent;
+    > swp-team-header { grid-row: 1; }
+    > swp-resource-header { grid-row: 2; }
+    > swp-day-header { grid-row: 3; }
   }
-
-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,6 +202,7 @@ swp-resource-header {
   font-size: 13px;
 }
 
+swp-day-header {
   swp-day-name {
     display: block;
     font-size: 11px;
@@ -217,6 +215,7 @@ swp-day-date {
     font-size: 24px;
     font-weight: 300;
   }
+}
 
 /* Scrollable content */
 swp-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 */
+  /* Timelinjer */
-swp-time-grid::after {
+  &::after {
     content: '';
     position: absolute;
     inset: 0;
@@ -246,6 +244,7 @@ swp-time-grid::after {
     );
     pointer-events: none;
   }
+}
 
 /* Kvarterlinjer - 3 linjer per time (15, 30, 45 min), ikke ved timegrænsen */
 swp-grid-lines {
@@ -299,7 +298,6 @@ swp-event {
   padding: 4px 6px;
   font-size: 12px;
   overflow: hidden;
-}
 
   swp-event-time {
     display: block;
@@ -311,3 +309,4 @@ swp-event-title {
     display: block;
     font-weight: 500;
   }
+}