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

21
src/renderers/HeaderRenderer.ts
View file

@ -11,6 +11,7 @@ import { DateCalculator } from '../utils/DateCalculator';
export interface HeaderRenderer {
render(calendarHeader: HTMLElement, context: HeaderRenderContext): void;
addToAllDay(dayHeader: HTMLElement): void;
ensureAllDayContainers(calendarHeader: HTMLElement): void;
}
/**
@ -36,6 +37,24 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
}
}
/**
* Ensure all-day containers exist for all days (called automatically after header render)
*/
ensureAllDayContainers(calendarHeader: HTMLElement): void {
const root = document.documentElement;
const currentHeight = parseInt(getComputedStyle(root).getPropertyValue('--all-day-row-height') || '0');
// If all-day row doesn't exist yet, set it up without animation
if (currentHeight === 0) {
root.style.setProperty('--all-day-row-height', `${ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT}px`);
}
// Always ensure containers exist for all days
this.createEmptyAllDayContainers(calendarHeader);
console.log('BaseHeaderRenderer: Ensured all-day containers exist for all days');
}
private animateHeaderExpansion(calendarHeader: HTMLElement): void {
const root = document.documentElement;
const currentHeaderHeight = parseInt(getComputedStyle(root).getPropertyValue('--header-height'));
@ -126,7 +145,7 @@ export class DateHeaderRenderer extends BaseHeaderRenderer {
private dateCalculator!: DateCalculator;
render(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
const { currentWeek, config, allDayEvents = [] } = context;
const { currentWeek, config } = context;
// Initialize date calculator with config
this.dateCalculator = new DateCalculator(config);