wip

src/renderers/GridRenderer.ts

@@ -5,6 +5,7 @@ import { ColumnRenderContext } from './ColumnRenderer';
 import { eventBus } from '../core/EventBus';
 import { DateService } from '../utils/DateService';
 import { CoreEvents } from '../constants/CoreEvents';
+import { TimeFormatter } from '../utils/TimeFormatter';
 
 /**
  * GridRenderer - Centralized DOM rendering for calendar grid
@@ -20,16 +21,13 @@ export class GridRenderer {
     this.dateService = new DateService(timezone);
   }
 
-  /**
-   * Render the complete grid structure with view-aware optimization
-   */
   public renderGrid(
     grid: HTMLElement,
     currentDate: Date,
     resourceData: ResourceCalendarData | null,
     view: CalendarView = 'week'
   ): void {
-    
+
     if (!grid || !currentDate) {
       return;
     }
@@ -41,7 +39,7 @@ export class GridRenderer {
     if (grid.children.length === 0) {
       this.createCompleteGridStructure(grid, currentDate, resourceData, view);
       // Setup grid-related event listeners on first render
-     // this.setupGridEventListeners();
+      // this.setupGridEventListeners();
     } else {
       // Optimized update - only refresh dynamic content
       this.updateGridContent(grid, currentDate, resourceData, view);
@@ -59,42 +57,37 @@ export class GridRenderer {
   ): void {
     // Create all elements in memory first for better performance
     const fragment = document.createDocumentFragment();
-    
+
     // Create header spacer
     const headerSpacer = document.createElement('swp-header-spacer');
     fragment.appendChild(headerSpacer);
-    
+
     // Create time axis with caching
     const timeAxis = this.createOptimizedTimeAxis();
     this.cachedTimeAxis = timeAxis;
     fragment.appendChild(timeAxis);
-    
+
     // Create grid container with caching
     const gridContainer = this.createOptimizedGridContainer(currentDate, resourceData, view);
     this.cachedGridContainer = gridContainer;
     fragment.appendChild(gridContainer);
-    
+
     // Append all at once to minimize reflows
     grid.appendChild(fragment);
   }
 
-  /**
-   * Create optimized time axis with caching
-   */
   private createOptimizedTimeAxis(): HTMLElement {
     const timeAxis = document.createElement('swp-time-axis');
     const timeAxisContent = document.createElement('swp-time-axis-content');
     const gridSettings = calendarConfig.getGridSettings();
     const startHour = gridSettings.dayStartHour;
     const endHour = gridSettings.dayEndHour;
-    
+
-    // Create all hour markers in memory first
     const fragment = document.createDocumentFragment();
     for (let hour = startHour; hour < endHour; hour++) {
       const marker = document.createElement('swp-hour-marker');
-      const period = hour >= 12 ? 'PM' : 'AM';
+      const date = new Date(2024, 0, 1, hour, 0);
-      const displayHour = hour > 12 ? hour - 12 : (hour === 0 ? 12 : hour);
+      marker.textContent = TimeFormatter.formatTime(date);
-      marker.textContent = `${displayHour} ${period}`;
       fragment.appendChild(marker);
     }
 
@@ -104,38 +97,35 @@ export class GridRenderer {
     return timeAxis;
   }
 
-  /**
-   * Create optimized grid container with header and scrollable content
-   */
   private createOptimizedGridContainer(
     currentDate: Date,
     resourceData: ResourceCalendarData | null,
     view: CalendarView
   ): HTMLElement {
     const gridContainer = document.createElement('swp-grid-container');
-    
+
     // Create calendar header as first child - always exists now!
     const calendarHeader = document.createElement('swp-calendar-header');
     gridContainer.appendChild(calendarHeader);
-    
+
     // Create scrollable content structure
     const scrollableContent = document.createElement('swp-scrollable-content');
     const timeGrid = document.createElement('swp-time-grid');
-    
+
     // Add grid lines
     const gridLines = document.createElement('swp-grid-lines');
     timeGrid.appendChild(gridLines);
-    
+
     // Create column container
     const columnContainer = document.createElement('swp-day-columns');
     this.renderColumnContainer(columnContainer, currentDate, resourceData, view);
     timeGrid.appendChild(columnContainer);
-    
+
     scrollableContent.appendChild(timeGrid);
     gridContainer.appendChild(scrollableContent);
-    
+
     console.log('✅ GridRenderer: Created grid container with header');
-    
+
     return gridContainer;
   }
 
@@ -151,7 +141,7 @@ export class GridRenderer {
   ): void {
     const calendarType = calendarConfig.getCalendarMode();
     const columnRenderer = CalendarTypeFactory.getColumnRenderer(calendarType);
-    
+
     const context: ColumnRenderContext = {
       currentWeek: currentDate, // ColumnRenderer expects currentWeek property
       config: calendarConfig,
@@ -186,9 +176,9 @@ export class GridRenderer {
     console.log('Week start:', weekStart);
     console.log('Parent container:', parentContainer);
     console.log('Using same grid creation as initial load');
-    
+
     const weekEnd = this.dateService.addDays(weekStart, 6);
-    
+
     // Use SAME method as initial load - respects workweek and resource settings
     const newGrid = this.createOptimizedGridContainer(weekStart, null, 'week');
 
@@ -201,10 +191,10 @@ export class GridRenderer {
 
     // Add to parent container
     parentContainer.appendChild(newGrid);
-    
+
     console.log('Grid created using createOptimizedGridContainer:', newGrid);
     console.log('Emitting GRID_RENDERED');
-    
+
     eventBus.emit(CoreEvents.GRID_RENDERED, {
       container: newGrid,  // Specific grid container, not parent
       currentDate: weekStart,
@@ -212,7 +202,7 @@ export class GridRenderer {
       endDate: weekEnd,
       isNavigation: true  // Flag to indicate this is navigation rendering
     });
-    
+
     console.groupEnd();
     return newGrid;
   }

wwwroot/css/calendar-layout-css.css

@@ -138,12 +138,12 @@ swp-time-axis-content {
 
 swp-hour-marker {
   height: var(--hour-height);
-  padding: 0 8px 8px 8px;
+  padding: 0 8px 8px 15px;
   font-size: 0.75rem;
   color: var(--color-text-secondary);
   display: flex;
   align-items: flex-start;
-  position: relative;
+  position: relative; 
 }
 
 swp-hour-marker::before {