Preserves event duration during drag and drop
Ensures all-day events maintain their original duration when dragged and dropped to a new date. Calculates and applies the correct end date based on the original event's span.
This commit is contained in:
parent
576367974b
commit
98ad46efab
1 changed files with 38 additions and 9 deletions
|
|
@ -343,10 +343,16 @@ export class AllDayManager {
|
|||
if (!dragColumnChangeEventPayload.draggedClone)
|
||||
return;
|
||||
|
||||
// Update clone position - ALWAYS keep in row 1 during drag
|
||||
// Use simple grid positioning that matches all-day container structure
|
||||
dragColumnChangeEventPayload.draggedClone.style.gridColumn = targetColumn.index.toString();
|
||||
//dragColumnChangeEventPayload.draggedClone.style.gridRow = dragColumnChangeEventPayload.draggedClone.style.gridRow; // Bevar nuværende row
|
||||
// Calculate event span from original grid positioning
|
||||
const computedStyle = window.getComputedStyle(dragColumnChangeEventPayload.draggedClone);
|
||||
const gridColumnStart = parseInt(computedStyle.gridColumnStart) || targetColumn.index;
|
||||
const gridColumnEnd = parseInt(computedStyle.gridColumnEnd) || targetColumn.index + 1;
|
||||
const span = gridColumnEnd - gridColumnStart;
|
||||
|
||||
// Update clone position maintaining the span
|
||||
const newStartColumn = targetColumn.index;
|
||||
const newEndColumn = newStartColumn + span;
|
||||
dragColumnChangeEventPayload.draggedClone.style.gridColumn = `${newStartColumn} / ${newEndColumn}`;
|
||||
|
||||
}
|
||||
private fadeOutAndRemove(element: HTMLElement): void {
|
||||
|
|
@ -357,11 +363,25 @@ export class AllDayManager {
|
|||
element.remove();
|
||||
}, 300);
|
||||
}
|
||||
/**
|
||||
* Handle drag end for all-day events - WITH DIFFERENTIAL UPDATES
|
||||
*/
|
||||
|
||||
|
||||
private handleDragEnd(dragEndEvent: DragEndEventPayload): void {
|
||||
|
||||
const getEventDurationDays = (start: string|undefined, end: string|undefined): number => {
|
||||
|
||||
if(!start || !end)
|
||||
throw new Error('Undefined start or end - date');
|
||||
|
||||
const startDate = new Date(start);
|
||||
const endDate = new Date(end);
|
||||
|
||||
if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
|
||||
throw new Error('Ugyldig start eller slut-dato i dataset');
|
||||
}
|
||||
|
||||
return Math.round((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24));
|
||||
};
|
||||
|
||||
if (dragEndEvent.draggedClone == null)
|
||||
return;
|
||||
|
||||
|
|
@ -378,12 +398,21 @@ export class AllDayManager {
|
|||
return;
|
||||
|
||||
|
||||
// Calculate original event duration
|
||||
|
||||
|
||||
|
||||
const durationDays = getEventDurationDays(dragEndEvent.draggedClone.dataset.start, dragEndEvent.draggedClone.dataset.end);
|
||||
const newStartDate = new Date(eventDate);
|
||||
const newEndDate = new Date(newStartDate);
|
||||
newEndDate.setDate(newEndDate.getDate() + durationDays);
|
||||
|
||||
|
||||
const droppedEvent: CalendarEvent = {
|
||||
id: eventId,
|
||||
title: dragEndEvent.draggedClone.dataset.title || '',
|
||||
start: new Date(eventDate),
|
||||
end: new Date(eventDate),
|
||||
start: newStartDate,
|
||||
end: newEndDate,
|
||||
type: eventType,
|
||||
allDay: true,
|
||||
syncStatus: 'synced'
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue