src/v2/features/event/EventRenderer.ts

@@ -2,9 +2,9 @@ import { ICalendarEvent, IEventBus } from '../../types/CalendarTypes';
 import { EventService } from '../../storage/events/EventService';
 import { DateService } from '../../core/DateService';
 import { IGridConfig } from '../../core/IGridConfig';
-import { calculateEventPosition } from '../../utils/PositionUtils';
+import { calculateEventPosition, snapToGrid, pixelsToMinutes } from '../../utils/PositionUtils';
 import { CoreEvents } from '../../constants/CoreEvents';
-import { IDragColumnChangePayload } from '../../types/DragTypes';
+import { IDragColumnChangePayload, IDragMovePayload } from '../../types/DragTypes';
 
 /**
  * EventRenderer - Renders calendar events to the DOM
@@ -32,6 +32,11 @@ export class EventRenderer {
       const payload = (e as CustomEvent<IDragColumnChangePayload>).detail;
       this.handleColumnChange(payload);
     });
+
+    this.eventBus.on(CoreEvents.EVENT_DRAG_MOVE, (e) => {
+      const payload = (e as CustomEvent<IDragMovePayload>).detail;
+      this.updateDragTimestamp(payload);
+    });
   }
 
   /**
@@ -48,6 +53,40 @@ export class EventRenderer {
     payload.element.style.top = `${payload.currentY}px`;
   }
 
+  /**
+   * Update timestamp display during drag (snapped to grid)
+   */
+  private updateDragTimestamp(payload: IDragMovePayload): void {
+    const timeEl = payload.element.querySelector('swp-event-time');
+    if (!timeEl) return;
+
+    // Snap position to grid interval
+    const snappedY = snapToGrid(payload.currentY, this.gridConfig);
+
+    // Calculate new start time
+    const minutesFromGridStart = pixelsToMinutes(snappedY, this.gridConfig);
+    const startMinutes = (this.gridConfig.dayStartHour * 60) + minutesFromGridStart;
+
+    // Keep original duration (from element height)
+    const height = parseFloat(payload.element.style.height) || this.gridConfig.hourHeight;
+    const durationMinutes = pixelsToMinutes(height, this.gridConfig);
+
+    // Create Date objects for consistent formatting via DateService
+    const start = this.minutesToDate(startMinutes);
+    const end = this.minutesToDate(startMinutes + durationMinutes);
+
+    timeEl.textContent = this.dateService.formatTimeRange(start, end);
+  }
+
+  /**
+   * Convert minutes since midnight to a Date object (today)
+   */
+  private minutesToDate(minutes: number): Date {
+    const date = new Date();
+    date.setHours(Math.floor(minutes / 60) % 24, minutes % 60, 0, 0);
+    return date;
+  }
+
   /**
    * Render events for visible dates into day columns
    * @param container - Calendar container element