d7867d4a9f
Refactors all-day event rendering to use header column data. This ensures events are rendered based on the actual visible dates in the header, improving accuracy and responsiveness to view changes. Removes direct dependency on week dates in `AllDayManager` and `EventRenderingService`, instead, the all-day manager is instantiated with event manager. Updates `HeaderManager` to emit header bounds.
112 lines
No EOL
3 KiB
TypeScript
112 lines
No EOL
3 KiB
TypeScript
import { CalendarEvent } from '../types/CalendarTypes';
|
|
import { SwpAllDayEventElement } from '../elements/SwpEventElement';
|
|
import { EventLayout } from '../utils/AllDayLayoutEngine';
|
|
import { ColumnBounds } from '../utils/ColumnDetectionUtils';
|
|
import { EventManager } from '../managers/EventManager';
|
|
/**
|
|
* AllDayEventRenderer - Simple rendering of all-day events
|
|
* Handles adding and removing all-day events from the header container
|
|
* NOTE: Layout calculation is now handled by AllDayManager
|
|
*/
|
|
export class AllDayEventRenderer {
|
|
private container: HTMLElement | null = null;
|
|
|
|
constructor() {
|
|
this.getContainer();
|
|
}
|
|
|
|
/**
|
|
* Get or cache all-day container, create if it doesn't exist - SIMPLIFIED (no ghost columns)
|
|
*/
|
|
private getContainer(): HTMLElement | null {
|
|
|
|
const header = document.querySelector('swp-calendar-header');
|
|
if (header) {
|
|
this.container = header.querySelector('swp-allday-container');
|
|
|
|
if (!this.container) {
|
|
this.container = document.createElement('swp-allday-container');
|
|
header.appendChild(this.container);
|
|
|
|
}
|
|
}
|
|
return this.container;
|
|
|
|
}
|
|
|
|
// REMOVED: createGhostColumns() method - no longer needed!
|
|
|
|
/**
|
|
* Render an all-day event with pre-calculated layout
|
|
*/
|
|
private renderAllDayEventWithLayout(
|
|
event: CalendarEvent,
|
|
layout: EventLayout
|
|
) {
|
|
const container = this.getContainer();
|
|
if (!container) return null;
|
|
|
|
let dayEvent = new SwpAllDayEventElement(event);
|
|
dayEvent.applyGridPositioning(layout);
|
|
|
|
container.appendChild(dayEvent.getElement());
|
|
}
|
|
|
|
|
|
/**
|
|
* Remove an all-day event by ID
|
|
*/
|
|
public removeAllDayEvent(eventId: string): void {
|
|
const container = this.getContainer();
|
|
if (!container) return;
|
|
|
|
const eventElement = container.querySelector(`swp-event[data-event-id="${eventId}"]`);
|
|
if (eventElement) {
|
|
eventElement.remove();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Clear cache when DOM changes
|
|
*/
|
|
public clearCache(): void {
|
|
this.container = null;
|
|
}
|
|
|
|
/**
|
|
* Render all-day events for specific period using AllDayEventRenderer
|
|
*/
|
|
public renderAllDayEventsForPeriod(eventLayouts: EventLayout[]): void {
|
|
// Get events from EventManager for the period
|
|
// const events = this.eventManager.getEventsForPeriod(startDate, endDate);
|
|
|
|
|
|
|
|
// Clear existing all-day events first
|
|
this.clearAllDayEvents();
|
|
|
|
// Get actual visible dates from DOM headers instead of generating them
|
|
|
|
// const layouts = this.allDayManager.initAllDayEventsLayout(allDayEvents, weekDates);
|
|
|
|
// Render each all-day event with pre-calculated layout
|
|
eventLayouts.forEach(layout => {
|
|
this.renderAllDayEventWithLayout(layout.calenderEvent, layout);
|
|
});
|
|
|
|
|
|
}
|
|
/**
|
|
* Clear only all-day events
|
|
*/
|
|
private clearAllDayEvents(): void {
|
|
const allDayContainer = document.querySelector('swp-allday-container');
|
|
if (allDayContainer) {
|
|
allDayContainer.querySelectorAll('swp-event').forEach(event => event.remove());
|
|
}
|
|
}
|
|
|
|
public handleViewChanged(event: CustomEvent): void {
|
|
this.clearAllDayEvents();
|
|
}
|
|
} |