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

Improves all-day event rendering and handling

Browse source 
Refactors all-day event container handling to improve rendering and event delegation.

Ensures all-day containers are consistently created and managed,
preventing issues with event display and drag-and-drop functionality.

Moves event listener setup into dedicated methods for better
organization and reusability.
This commit is contained in:
Janus Knudsen 2025-08-25 22:05:57 +02:00
parent f2763ad826
commit 07402a07d9
6 changed files with 142 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

74
src/renderers/GridRenderer.ts
View file

@ -10,6 +10,7 @@ import { eventBus } from '../core/EventBus';
*/
export class GridRenderer {
private config: CalendarConfig;
private headerEventListener: ((event: Event) => void) | null = null;
constructor(config: CalendarConfig) {
this.config = config;
@ -135,31 +136,11 @@ export class GridRenderer {
headerRenderer.render(calendarHeader, context);
// 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
});
}
});
// Always ensure all-day containers exist for all days
headerRenderer.ensureAllDayContainers(calendarHeader);
// Setup event listener for mouseover detection
this.setupHeaderEventListener(calendarHeader);
}
/**
@ -200,4 +181,47 @@ export class GridRenderer {
// Re-render headers using Strategy Pattern - this will also re-attach the event listener
this.renderCalendarHeader(calendarHeader as HTMLElement, currentWeek, resourceData);
}
/**
* Setup or re-setup event delegation listener on calendar header
*/
private setupHeaderEventListener(calendarHeader: HTMLElement): void {
// Remove existing listener if any (stored reference approach)
if (this.headerEventListener) {
calendarHeader.removeEventListener('mouseover', this.headerEventListener);
}
// Create new listener function
this.headerEventListener = (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
});
// Get the header renderer for addToAllDay functionality
const calendarType = this.config.getCalendarMode();
const headerRenderer = CalendarTypeFactory.getHeaderRenderer(calendarType);
eventBus.emit('header:mouseover', {
element: hoveredElement,
targetDate,
headerRenderer
});
}
};
// Add the new listener
calendarHeader.addEventListener('mouseover', this.headerEventListener);
}
}