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

Updates all-day event grid row layout

Browse source 
Ensures the all-day event container's grid layout is correctly updated to reflect the number of rows needed, even when the overall height doesn't change.
This prevents layout issues when events are rearranged without triggering a height recalculation.
Also updates the grid template when the height is updated in the BaseEventRenderer.
This commit is contained in:
Janus Knudsen 2025-08-27 20:54:06 +02:00
parent f9b7686b22
commit be4a8af7c4
3 changed files with 27 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/renderers/EventRenderer.ts
View file

@ -251,7 +251,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
}
/**
* Update all-day row height based on number of rows
* Update all-day row height and grid template based on number of rows
*/
private updateAllDayHeight(maxRows: number): void {
const root = document.documentElement;
@ -259,7 +259,14 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
const calculatedHeight = maxRows * eventHeight;
root.style.setProperty('--all-day-row-height', `${calculatedHeight}px`);
console.log(`BaseEventRenderer: Set all-day height to ${calculatedHeight}px for ${maxRows} rows`);
// Update grid-template-rows for all swp-allday-containers
const allDayContainers = document.querySelectorAll('swp-allday-container');
allDayContainers.forEach(container => {
const gridRows = `repeat(${maxRows}, var(--allday-event-height, 26px))`;
(container as HTMLElement).style.gridTemplateRows = gridRows;
});
console.log(`BaseEventRenderer: Set all-day height to ${calculatedHeight}px and grid-template-rows to ${maxRows} rows`);
}
/**