diff --git a/src/v2/features/event/EventRenderer.ts b/src/v2/features/event/EventRenderer.ts index 253b4bb..d8934ea 100644 --- a/src/v2/features/event/EventRenderer.ts +++ b/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).detail; this.handleColumnChange(payload); }); + + this.eventBus.on(CoreEvents.EVENT_DRAG_MOVE, (e) => { + const payload = (e as CustomEvent).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