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

Improves drag and drop for timed and all-day events

Browse source 
Refactors drag and drop handling to use a cloned event element,
ensuring correct positioning and styling during drag operations
for both regular timed events and all-day events.

This change streamlines the drag and drop process by:
- Creating a clone of the dragged event at the start of the drag.
- Passing the clone through the drag events.
- Handling all-day events with the AllDayManager
- Handling regular timed events with the EventRendererManager

This resolves issues with event positioning and styling during
drag, especially when moving events across columns or between
all-day and timed sections.
This commit is contained in:
Janus C. H. Knudsen 2025-09-26 22:53:49 +02:00
parent 0553089085
commit 9dfd4574d8
5 changed files with 62 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/managers/AllDayManager.ts
View file

@ -65,7 +65,7 @@ export class AllDayManager {
// Listen for drag operations on all-day events
eventBus.on('drag:start', (event) => {
const { draggedElement, mouseOffset } = (event as CustomEvent<DragStartEventPayload>).detail;
const { draggedElement, draggedClone, mouseOffset } = (event as CustomEvent<DragStartEventPayload>).detail;
// Check if this is an all-day event by checking if it's in all-day container
const isAllDayEvent = draggedElement.closest('swp-allday-container');
@ -77,26 +77,22 @@ export class AllDayManager {
});
eventBus.on('drag:column-change', (event) => {
const { draggedElement, mousePosition } = (event as CustomEvent<DragColumnChangeEventPayload>).detail;
const { draggedElement, draggedClone, mousePosition } = (event as CustomEvent<DragColumnChangeEventPayload>).detail;
if(draggedClone == null)
return;
// Check if there's an all-day clone for this event
const eventId = draggedElement.dataset.eventId;
const dragClone = document.querySelector(`swp-allday-container swp-event[data-event-id="clone-${eventId}"]`) as HTMLElement;
// Filter: Only handle events where clone IS an all-day event
if (!draggedClone.hasAttribute('data-allday')) {
return; // This is not an all-day event, let EventRendererManager handle it
}
console.log('🔄 AllDayManager: Handling drag:column-change for all-day event', {
eventId : draggedElement.dataset.eventId,
cloneId: draggedClone.dataset.eventId
});
if (!dragClone.hasAttribute('data-allday')) {
return;
}
// If we find an all-day clone, handle the drag move
if (dragClone) {
console.log('🔄 AllDayManager: Found all-day clone, handling drag:column-change', {
eventId,
cloneId: dragClone.dataset.eventId
});
this.handleColumnChange(dragClone, mousePosition);
}
this.handleColumnChange(draggedClone, mousePosition);
});
eventBus.on('drag:end', (event) => {