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

43
src/renderers/EventRenderer.ts
View file

@ -80,9 +80,11 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
return;
}
// Clear any existing all-day containers first
// Clear content of existing all-day containers (but keep the containers)
const existingContainers = calendarHeader.querySelectorAll('swp-allday-container');
existingContainers.forEach(container => container.remove());
existingContainers.forEach(container => {
container.innerHTML = ''; // Clear content, keep container
});
// Track maximum number of stacked events to calculate row height
let maxStackHeight = 0;
@ -142,20 +144,31 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
}
const columnSpan = endColumn - startColumn + 1;
// Create or find container for this column span
const containerKey = `${startColumn}-${columnSpan}`;
let allDayContainer = calendarHeader.querySelector(`swp-allday-container[data-container-key="${containerKey}"]`);
let allDayContainer: Element | null = null;
if (columnSpan === 1) {
// Single day event - use existing single-day container
const containerKey = `${startColumn}-1`;
allDayContainer = calendarHeader.querySelector(`swp-allday-container[data-container-key="${containerKey}"]`);
} else {
// Multi-day event - create or find spanning container
const containerKey = `${startColumn}-${columnSpan}`;
allDayContainer = calendarHeader.querySelector(`swp-allday-container[data-container-key="${containerKey}"]`);
if (!allDayContainer) {
// Create container that spans the appropriate columns
allDayContainer = document.createElement('swp-allday-container');
allDayContainer.setAttribute('data-container-key', containerKey);
allDayContainer.setAttribute('data-date', this.dateCalculator.formatISODate(startDate));
(allDayContainer as HTMLElement).style.gridColumn = `${startColumn} / span ${columnSpan}`;
(allDayContainer as HTMLElement).style.gridRow = '2';
calendarHeader.appendChild(allDayContainer);
}
}
if (!allDayContainer) {
// Create container that spans the appropriate columns
allDayContainer = document.createElement('swp-allday-container');
allDayContainer.setAttribute('data-container-key', containerKey);
(allDayContainer as HTMLElement).style.gridColumn = columnSpan > 1
? `${startColumn} / span ${columnSpan}`
: `${startColumn}`;
(allDayContainer as HTMLElement).style.gridRow = '2';
calendarHeader.appendChild(allDayContainer);
console.warn(`BaseEventRenderer: No container found for event "${event.title}"`);
return;
}
// Create the all-day event element inside container