Improves all-day event drag and drop

Handles dragging of both timed events (converting to all-day) and existing all-day events to different days.

Refactors all-day height recalculation to support animated transitions for a smoother user experience when all-day event counts change.

Uses event delegation for header mouseover detection.

Updates ScrollManager to listen for header height changes.
This commit is contained in:
Janus Knudsen 2025-08-25 21:20:51 +02:00
parent 6ede297bb5
commit f2763ad826
6 changed files with 186 additions and 48 deletions

View file

@ -135,12 +135,30 @@ export class GridRenderer {
headerRenderer.render(calendarHeader, context);
// Add mouseover listeners on day headers for drag detection
const dayHeaders = calendarHeader.querySelectorAll('swp-day-header');
dayHeaders.forEach(dayHeader => {
dayHeader.addEventListener('mouseover', () => {
eventBus.emit('header:mouseover', { dayHeader, headerRenderer });
});
// Use event delegation for mouseover detection on entire header
calendarHeader.addEventListener('mouseover', (event) => {
const target = event.target as HTMLElement;
// Check what was hovered - could be day-header OR all-day-container
const dayHeader = target.closest('swp-day-header');
const allDayContainer = target.closest('swp-allday-container');
if (dayHeader || allDayContainer) {
const hoveredElement = dayHeader || allDayContainer;
const targetDate = (hoveredElement as HTMLElement).dataset.date;
console.log('GridRenderer: Detected hover over:', {
elementType: dayHeader ? 'day-header' : 'all-day-container',
targetDate,
element: hoveredElement
});
eventBus.emit('header:mouseover', {
element: hoveredElement,
targetDate,
headerRenderer
});
}
});
}
@ -179,7 +197,7 @@ export class GridRenderer {
// Clear existing content
calendarHeader.innerHTML = '';
// Re-render headers using Strategy Pattern
// Re-render headers using Strategy Pattern - this will also re-attach the event listener
this.renderCalendarHeader(calendarHeader as HTMLElement, currentWeek, resourceData);
}
}