2025-09-12 00:36:02 +02:00
|
|
|
import { CalendarEvent } from '../types/CalendarTypes';
|
|
|
|
|
import { SwpAllDayEventElement } from '../elements/SwpEventElement';
|
|
|
|
|
|
|
|
|
|
/**
|
2025-09-13 00:39:56 +02:00
|
|
|
* AllDayEventRenderer - Simple rendering of all-day events
|
|
|
|
|
* Handles adding and removing all-day events from the header container
|
2025-09-25 23:38:17 +02:00
|
|
|
* NOTE: Layout calculation is now handled by AllDayManager
|
2025-09-12 00:36:02 +02:00
|
|
|
*/
|
|
|
|
|
export class AllDayEventRenderer {
|
2025-09-13 00:39:56 +02:00
|
|
|
private container: HTMLElement | null = null;
|
|
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
|
this.getContainer();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
2025-09-18 17:55:52 +02:00
|
|
|
* Get or cache all-day container, create if it doesn't exist - SIMPLIFIED (no ghost columns)
|
2025-09-13 00:39:56 +02:00
|
|
|
*/
|
|
|
|
|
private getContainer(): HTMLElement | null {
|
2025-09-22 23:37:43 +02:00
|
|
|
|
2025-09-13 00:39:56 +02:00
|
|
|
const header = document.querySelector('swp-calendar-header');
|
|
|
|
|
if (header) {
|
|
|
|
|
this.container = header.querySelector('swp-allday-container');
|
2025-09-13 20:47:42 +02:00
|
|
|
|
|
|
|
|
if (!this.container) {
|
|
|
|
|
this.container = document.createElement('swp-allday-container');
|
|
|
|
|
header.appendChild(this.container);
|
2025-09-17 22:08:27 +02:00
|
|
|
|
2025-09-13 20:47:42 +02:00
|
|
|
}
|
2025-09-13 00:39:56 +02:00
|
|
|
}
|
2025-09-22 23:37:43 +02:00
|
|
|
return this.container;
|
|
|
|
|
|
2025-09-13 00:39:56 +02:00
|
|
|
}
|
|
|
|
|
|
2025-09-18 17:55:52 +02:00
|
|
|
// REMOVED: createGhostColumns() method - no longer needed!
|
2025-09-17 22:08:27 +02:00
|
|
|
|
2025-09-13 00:39:56 +02:00
|
|
|
/**
|
2025-09-25 23:38:17 +02:00
|
|
|
* Render an all-day event with pre-calculated layout
|
2025-09-13 00:39:56 +02:00
|
|
|
*/
|
2025-09-25 23:38:17 +02:00
|
|
|
public renderAllDayEventWithLayout(
|
|
|
|
|
event: CalendarEvent,
|
|
|
|
|
layout: { startColumn: number; endColumn: number; row: number; columnSpan: number }
|
|
|
|
|
): HTMLElement | null {
|
2025-09-13 00:39:56 +02:00
|
|
|
const container = this.getContainer();
|
|
|
|
|
if (!container) return null;
|
|
|
|
|
|
2025-09-25 23:38:17 +02:00
|
|
|
const allDayElement = SwpAllDayEventElement.fromCalendarEventWithLayout(event, layout);
|
2025-09-13 00:39:56 +02:00
|
|
|
const element = allDayElement.getElement();
|
|
|
|
|
|
|
|
|
|
container.appendChild(element);
|
|
|
|
|
return element;
|
|
|
|
|
}
|
|
|
|
|
|
2025-09-25 23:38:17 +02:00
|
|
|
|
2025-09-13 00:39:56 +02:00
|
|
|
/**
|
|
|
|
|
* Remove an all-day event by ID
|
|
|
|
|
*/
|
|
|
|
|
public removeAllDayEvent(eventId: string): void {
|
|
|
|
|
const container = this.getContainer();
|
|
|
|
|
if (!container) return;
|
|
|
|
|
|
2025-09-21 16:03:34 +02:00
|
|
|
const eventElement = container.querySelector(`swp-event[data-event-id="${eventId}"]`);
|
2025-09-13 00:39:56 +02:00
|
|
|
if (eventElement) {
|
|
|
|
|
eventElement.remove();
|
|
|
|
|
}
|
|
|
|
|
}
|
2025-09-12 00:36:02 +02:00
|
|
|
|
2025-09-13 00:39:56 +02:00
|
|
|
/**
|
|
|
|
|
* Clear cache when DOM changes
|
|
|
|
|
*/
|
|
|
|
|
public clearCache(): void {
|
|
|
|
|
this.container = null;
|
|
|
|
|
}
|
2025-09-12 00:36:02 +02:00
|
|
|
}
|