2025-09-12 00:36:02 +02:00
|
|
|
import { CalendarEvent } from '../types/CalendarTypes';
|
|
|
|
|
import { SwpAllDayEventElement } from '../elements/SwpEventElement';
|
2025-09-27 15:01:22 +02:00
|
|
|
import { EventLayout } from '../utils/AllDayLayoutEngine';
|
2025-10-01 21:27:13 +02:00
|
|
|
import { ColumnBounds } from '../utils/ColumnDetectionUtils';
|
|
|
|
|
import { EventManager } from '../managers/EventManager';
|
2025-09-12 00:36:02 +02:00
|
|
|
/**
|
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-27 15:01:22 +02:00
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
|
2025-09-13 00:39:56 +02:00
|
|
|
}
|
2025-09-27 15:01:22 +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-10-01 21:27:13 +02:00
|
|
|
private renderAllDayEventWithLayout(
|
2025-09-25 23:38:17 +02:00
|
|
|
event: CalendarEvent,
|
2025-09-27 15:01:22 +02:00
|
|
|
layout: EventLayout
|
|
|
|
|
) {
|
2025-09-13 00:39:56 +02:00
|
|
|
const container = this.getContainer();
|
|
|
|
|
if (!container) return null;
|
|
|
|
|
|
2025-09-27 15:01:22 +02:00
|
|
|
let dayEvent = new SwpAllDayEventElement(event);
|
|
|
|
|
dayEvent.applyGridPositioning(layout);
|
|
|
|
|
|
|
|
|
|
container.appendChild(dayEvent.getElement());
|
2025-09-13 00:39:56 +02:00
|
|
|
}
|
|
|
|
|
|
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-10-01 21:27:13 +02:00
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 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();
|
|
|
|
|
}
|
2025-09-12 00:36:02 +02:00
|
|
|
}
|