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

Improves all-day event row height calculation

Browse source 
Ensures consistent all-day event row height calculation across CSS and TypeScript.

The all-day event row height calculation is adjusted by removing redundant container padding from the TypeScript constant and synchronizing the CSS variable with the event height.

Additionally, the layout engine is directly tested in the test file for better coverage.
This commit is contained in:
Janus C. H. Knudsen 2025-10-02 01:03:35 +02:00
parent a1e1c5d185
commit f2ad13776f
5 changed files with 58 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/managers/AllDayManager.ts
View file

@ -42,6 +42,13 @@ export class AllDayManager {
constructor(eventManager: EventManager) {
this.eventManager = eventManager;
this.allDayEventRenderer = new AllDayEventRenderer();
// Sync CSS variable with TypeScript constant to ensure consistency
document.documentElement.style.setProperty(
'--single-row-height',
`${ALL_DAY_CONSTANTS.EVENT_HEIGHT}px`
);
this.setupEventListeners();
}
@ -134,9 +141,9 @@ export class AllDayManager {
// Filter for all-day events
const allDayEvents = events.filter(event => event.allDay);
let eventLayouts = this.calculateAllDayEventsLayout(allDayEvents, headerReadyEventPayload.headerElements)
this.currentLayouts = this.calculateAllDayEventsLayout(allDayEvents, headerReadyEventPayload.headerElements)
this.allDayEventRenderer.renderAllDayEventsForPeriod(eventLayouts);
this.allDayEventRenderer.renderAllDayEventsForPeriod(this.currentLayouts );
this.checkAndAnimateAllDayHeight();
});
@ -166,7 +173,7 @@ export class AllDayManager {
heightDifference: number;
} {
const root = document.documentElement;
const targetHeight = targetRows * ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT;
const targetHeight = targetRows * ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT + 2;
// Read CSS variable directly from style property or default to 0
const currentHeightStr = root.style.getPropertyValue('--all-day-row-height') || '0px';
const currentHeight = parseInt(currentHeightStr) || 0;
@ -199,12 +206,7 @@ export class AllDayManager {
// Max rows = highest row number (e.g. if row 3 is used, height = 3 rows)
maxRows = highestRow;
console.log('🔍 AllDayManager: Height calculation using currentLayouts', {
totalLayouts: this.currentLayouts.length,
highestRowFound: highestRow,
maxRows
});
}
// Store actual row count