From 2f854b2c64d6020939c5ead03723b7354f5bf76f Mon Sep 17 00:00:00 2001 From: Janus Knudsen Date: Mon, 18 Aug 2025 23:24:22 +0200 Subject: [PATCH] Updates calendar week info and event rendering Refactors how the calendar week information is updated to use the actual rendered column dates, ensuring accuracy after workweek changes. It also adjusts event rendering to target the swp-calendar-container element, preventing rendering issues. The change also addresses a styling issue that was preventing the scroll bar from appearing in the correct location. --- src/managers/CalendarManager.ts | 122 ++++++++++++++++++++++++++-- wwwroot/css/calendar-layout-css.css | 26 ++++++ 2 files changed, 143 insertions(+), 5 deletions(-) diff --git a/src/managers/CalendarManager.ts b/src/managers/CalendarManager.ts index 66c0e7e..3fda062 100644 --- a/src/managers/CalendarManager.ts +++ b/src/managers/CalendarManager.ts @@ -269,12 +269,20 @@ export class CalendarManager { const customEvent = event as CustomEvent; console.log('CalendarManager: Workweek changed to', customEvent.detail.workWeekId); this.handleWorkweekChange(); + + // Also update week info display since workweek affects date range display + this.updateWeekInfoForWorkweekChange(); }); // Lyt efter reset requests this.eventBus.on(EventTypes.RESET_REQUESTED, () => { this.reset(); }); + + // Update week info when grid is rendered with actual column dates + this.eventBus.on(EventTypes.GRID_RENDERED, () => { + this.updateWeekInfoFromRenderedColumns(); + }); } /** @@ -410,11 +418,115 @@ export class CalendarManager { // Get current period data to determine date range const periodData = this.calculateCurrentPeriod(); - // Trigger event rendering for the current date range - this.eventRenderer.renderEventsForDateRange( - periodData.startDate, - periodData.endDate - ); + // Find the grid container to render events in + const container = document.querySelector('swp-calendar-container'); + if (!container) { + console.warn('CalendarManager: No container found for event re-rendering'); + return; + } + + // Trigger event rendering for the current date range using correct method + this.eventRenderer.renderEvents({ + container: container as HTMLElement, + startDate: new Date(periodData.startDate), + endDate: new Date(periodData.endDate) + }); + } + + /** + * Update week info display after workweek changes + */ + private updateWeekInfoForWorkweekChange(): void { + // Don't do anything here - let GRID_RENDERED event handle it + console.log('CalendarManager: Workweek changed - week info will update after grid renders'); + } + + /** + * Update week info based on actual rendered columns + */ + private updateWeekInfoFromRenderedColumns(): void { + console.log('CalendarManager: Updating week info from rendered columns'); + + // Get actual dates from rendered columns + const columns = document.querySelectorAll('swp-day-column'); + if (columns.length === 0) { + console.warn('CalendarManager: No columns found for week info update'); + return; + } + + // Get first and last column dates + const firstColumn = columns[0] as HTMLElement; + const lastColumn = columns[columns.length - 1] as HTMLElement; + + const firstDateStr = firstColumn.dataset.date; + const lastDateStr = lastColumn.dataset.date; + + if (!firstDateStr || !lastDateStr) { + console.warn('CalendarManager: Column dates not found'); + return; + } + + // Parse dates + const firstDate = new Date(firstDateStr); + const lastDate = new Date(lastDateStr); + + // Calculate week number from first date + const weekNumber = this.getWeekNumber(firstDate); + + // Format date range + const dateRange = this.formatDateRange(firstDate, lastDate); + + console.log('CalendarManager: Week info from columns:', { + firstDate: firstDateStr, + lastDate: lastDateStr, + weekNumber, + dateRange + }); + + // Emit week info update + this.eventBus.emit(EventTypes.WEEK_INFO_UPDATED, { + weekNumber, + dateRange, + weekStart: firstDate, + weekEnd: lastDate + }); + } + + /** + * Helper method to get week number + */ + private getWeekNumber(date: Date): number { + const start = new Date(date.getFullYear(), 0, 1); + const days = Math.floor((date.getTime() - start.getTime()) / (24 * 60 * 60 * 1000)); + return Math.ceil((days + start.getDay() + 1) / 7); + } + + /** + * Helper method to get week start (Sunday) + */ + private getWeekStart(date: Date): Date { + const weekStart = new Date(date); + weekStart.setDate(date.getDate() - date.getDay()); + return weekStart; + } + + /** + * Helper method to format date range + */ + private formatDateRange(start: Date, end: Date): string { + const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + + const startMonth = months[start.getMonth()]; + const endMonth = months[end.getMonth()]; + const startDay = start.getDate(); + const endDay = end.getDate(); + const year = start.getFullYear(); + + if (startMonth === endMonth) { + return `${startMonth} ${startDay} - ${endDay}, ${year}`; + } else { + return `${startMonth} ${startDay} - ${endMonth} ${endDay}, ${year}`; + } } } \ No newline at end of file diff --git a/wwwroot/css/calendar-layout-css.css b/wwwroot/css/calendar-layout-css.css index 59c1af7..a501425 100644 --- a/wwwroot/css/calendar-layout-css.css +++ b/wwwroot/css/calendar-layout-css.css @@ -151,11 +151,37 @@ swp-calendar-header { top: 0; z-index: 3; /* Lower than header-spacer so it slides under during horizontal scroll */ height: calc(var(--header-height) + var(--all-day-row-height)); /* Same calculation as spacers */ + + /* Force scrollbar to appear for alignment */ + overflow-y: scroll; + overflow-x: hidden; + + /* Ensure there's scrollable content by adding min-height slightly larger than container */ + min-height: calc(var(--header-height) + var(--all-day-row-height) + 1px); + + /* Firefox - hide scrollbar but keep space */ + scrollbar-width: auto; /* Normal width to match content scrollbar */ + scrollbar-color: transparent transparent; +} + +/* WebKit browsers (Chrome, Safari, Edge) - hide scrollbar but keep space */ +swp-calendar-header::-webkit-scrollbar { + width: 17px; /* Match system default scrollbar width */ + background: transparent; +} + +swp-calendar-header::-webkit-scrollbar-thumb { + background: transparent; +} + +swp-calendar-header::-webkit-scrollbar-track { + background: transparent; } swp-day-header { padding: 12px; + pointer-events: auto; /* Ensure header clicks work despite parent scrollbar */ text-align: center; border-right: 1px solid var(--color-grid-line); border-bottom: 1px solid var(--color-grid-line);