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

Back to a single swp-allday-container

Browse source
This commit is contained in:
Janus Knudsen 2025-08-26 00:05:42 +02:00
parent 07402a07d9
commit f9b7686b22
7 changed files with 252 additions and 182 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/renderers/HeaderRenderer.ts
View file

@ -38,7 +38,7 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
}
/**
* Ensure all-day containers exist for all days (called automatically after header render)
* Ensure all-day main container and initial stack level exist (called automatically after header render)
*/
ensureAllDayContainers(calendarHeader: HTMLElement): void {
const root = document.documentElement;
@ -49,10 +49,10 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
root.style.setProperty('--all-day-row-height', `${ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT}px`);
}
// Always ensure containers exist for all days
this.createEmptyAllDayContainers(calendarHeader);
// Always ensure main container and initial stack level exist
this.createAllDayMainStructure(calendarHeader);
console.log('BaseHeaderRenderer: Ensured all-day containers exist for all days');
console.log('BaseHeaderRenderer: Ensured all-day main structure exists');
}
private animateHeaderExpansion(calendarHeader: HTMLElement): void {
@ -93,39 +93,25 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
// Set the CSS variable after animation
root.style.setProperty('--all-day-row-height', `${ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT}px`);
// Create empty all-day containers after animation
this.createEmptyAllDayContainers(calendarHeader);
// Create all-day main structure after animation
this.createAllDayMainStructure(calendarHeader);
// Notify ScrollManager about header height change
eventBus.emit('header:height-changed');
});
}
private createEmptyAllDayContainers(calendarHeader: HTMLElement): void {
const dayHeaders = calendarHeader.querySelectorAll('swp-day-header');
private createAllDayMainStructure(calendarHeader: HTMLElement): void {
// Check if container already exists
let container = calendarHeader.querySelector('swp-allday-container');
dayHeaders.forEach((dayHeader, index) => {
const date = (dayHeader as HTMLElement).dataset.date;
if (!date) return;
const columnIndex = index + 1; // 1-based grid index
const containerKey = `${columnIndex}-1`;
// Check if container already exists
let container = calendarHeader.querySelector(`swp-allday-container[data-container-key="${containerKey}"]`);
if (!container) {
// Create empty container
container = document.createElement('swp-allday-container');
container.setAttribute('data-container-key', containerKey);
container.setAttribute('data-date', date);
(container as HTMLElement).style.gridColumn = `${columnIndex}`;
(container as HTMLElement).style.gridRow = '2';
calendarHeader.appendChild(container);
}
});
if (!container) {
// Create simple all-day container
container = document.createElement('swp-allday-container');
calendarHeader.appendChild(container);
}
console.log('Created empty all-day containers for all days');
console.log('Created simple all-day container');
}
}