Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adds event drag timestamp updating during drag

Browse source 
Enhances event drag interactions by dynamically updating timestamp display

Implements grid-snapped time calculation during event dragging
Updates event time display with accurate start and end times
Converts minutes to formatted time range using existing date services
This commit is contained in:
Janus C. H. Knudsen 2025-12-10 21:49:49 +01:00
parent ae48ff38d0
commit cacd312936
1 changed files with 41 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/v2/features/event/EventRenderer.ts
View file

@ -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