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,9 +21,6 @@ export class GridRenderer {
     this.dateService = new DateService(timezone);
   }
 
-  /**
-   * Render the complete grid structure with view-aware optimization
-   */
   public renderGrid(
     grid: HTMLElement,
     currentDate: Date,
@@ -78,9 +76,6 @@ export class GridRenderer {
     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');
@@ -88,13 +83,11 @@ export class GridRenderer {
     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 displayHour = hour > 12 ? hour - 12 : (hour === 0 ? 12 : hour);
-      marker.textContent = `${displayHour} ${period}`;
+      const date = new Date(2024, 0, 1, hour, 0);
+      marker.textContent = TimeFormatter.formatTime(date);
       fragment.appendChild(marker);
     }
 
@@ -104,9 +97,6 @@ export class GridRenderer {
     return timeAxis;
   }
 
-  /**
-   * Create optimized grid container with header and scrollable content
-   */
   private createOptimizedGridContainer(
     currentDate: Date,
     resourceData: ResourceCalendarData | null,

wwwroot/css/calendar-layout-css.css

@@ -138,7 +138,7 @@ 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;