From 899c600e44c854b45094a30ed3439b1a666b10b6 Mon Sep 17 00:00:00 2001 From: "Janus C. H. Knudsen" Date: Sun, 7 Dec 2025 21:54:12 +0100 Subject: [PATCH] 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 | 4 +- src/v2/demo/DemoApp.ts | 4 +- wwwroot/css/calendar-v2.css | 159 ++++++++++++++++++------------------ 3 files changed, 83 insertions(+), 84 deletions(-) diff --git a/src/v2/core/DateService.ts b/src/v2/core/DateService.ts index 142372c..e11e9cb 100644 --- a/src/v2/core/DateService.ts +++ b/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') ); } diff --git a/src/v2/demo/DemoApp.ts b/src/v2/demo/DemoApp.ts index fbd64b4..31c69bd 100644 --- a/src/v2/demo/DemoApp.ts +++ b/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); diff --git a/wwwroot/css/calendar-v2.css b/wwwroot/css/calendar-v2.css index bbed094..66633c9 100644 --- a/wwwroot/css/calendar-v2.css +++ b/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 { - font-weight: 600; - display: block; -} + swp-week-number { + font-weight: 600; + display: block; + } -swp-date-range { - font-size: 12px; - color: var(--color-text-secondary); + swp-date-range { + font-size: 12px; + color: var(--color-text-secondary); + } } /* Container */ @@ -108,16 +108,16 @@ swp-hour-marker { color: var(--color-text-secondary); text-align: right; position: relative; -} -swp-hour-marker::after { - content: ''; - position: absolute; - top: -1px; - right: 0; - width: 5px; - height: 1px; - background: var(--color-hour-line); + &::after { + content: ''; + position: absolute; + top: -1px; + right: 0; + 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 { - flex: 0 0 100%; - height: 100%; + > 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 { - display: block; - font-size: 11px; - color: var(--color-text-secondary); - text-transform: uppercase; -} +swp-day-header { + swp-day-name { + display: block; + font-size: 11px; + color: var(--color-text-secondary); + text-transform: uppercase; + } -swp-day-date { - display: block; - font-size: 24px; - font-weight: 300; + swp-day-date { + display: block; + font-size: 24px; + font-weight: 300; + } } /* Scrollable content */ @@ -229,22 +228,22 @@ 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 { - content: ''; - position: absolute; - inset: 0; - z-index: 2; - background-image: repeating-linear-gradient( - to bottom, - transparent, - transparent calc(var(--hour-height) - 1px), - var(--color-hour-line) calc(var(--hour-height) - 1px), - var(--color-hour-line) var(--hour-height) - ); - pointer-events: none; + /* Timelinjer */ + &::after { + content: ''; + position: absolute; + inset: 0; + z-index: 2; + background-image: repeating-linear-gradient( + to bottom, + transparent, + transparent calc(var(--hour-height) - 1px), + var(--color-hour-line) calc(var(--hour-height) - 1px), + 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 { - display: block; - font-size: 10px; - opacity: 0.9; -} + swp-event-time { + display: block; + font-size: 10px; + opacity: 0.9; + } -swp-event-title { - display: block; - font-weight: 500; + swp-event-title { + display: block; + font-weight: 500; + } }