wip

src/managers/EventRenderer.ts

@@ -2,6 +2,7 @@ import { EventBus } from '../core/EventBus';
 import { IEventBus, CalendarEvent } from '../types/CalendarTypes';
 import { EventTypes } from '../constants/EventTypes';
 import { calendarConfig } from '../core/CalendarConfig';
+import { DateUtils } from '../utils/DateUtils';
 
 /**
  * EventRenderer - Render events i DOM med positionering
@@ -52,13 +53,76 @@ export class EventRenderer {
     }
 
     private renderEvents(events: CalendarEvent[]): void {
+        console.log('EventRenderer: renderEvents called with', events.length, 'events');
+        
         // Clear existing events first
         this.clearEvents();
 
-        // For now, just emit event rendered - proper rendering will be implemented later
-        this.eventBus.emit(EventTypes.EVENT_RENDERED, {
-            count: events.length
+        // Get current week dates for filtering
+        const currentWeekDates = this.getCurrentWeekDates();
+        console.log('EventRenderer: Current week dates:', currentWeekDates.map(d => DateUtils.formatDate(d)));
+
+        // Filter events for current week
+        const currentWeekEvents = events.filter(event => {
+            const eventDate = new Date(event.start);
+            const eventDateStr = DateUtils.formatDate(eventDate);
+            const isInCurrentWeek = currentWeekDates.some(weekDate =>
+                DateUtils.formatDate(weekDate) === eventDateStr
+            );
+            console.log('EventRenderer: Event', event.title, 'on', eventDateStr, 'is in current week:', isInCurrentWeek);
+            return isInCurrentWeek;
         });
+
+        console.log('EventRenderer: Rendering', currentWeekEvents.length, 'events for current week');
+
+        // Render each event in the correct day column
+        currentWeekEvents.forEach(event => {
+            const eventDate = new Date(event.start);
+            const dayColumn = this.findDayColumn(eventDate);
+            
+            if (dayColumn) {
+                const eventsLayer = dayColumn.querySelector('swp-events-layer');
+                if (eventsLayer) {
+                    console.log('EventRenderer: Rendering event', event.title, 'in day column for', DateUtils.formatDate(eventDate));
+                    this.renderEvent(event, eventsLayer);
+                } else {
+                    console.warn('EventRenderer: No events layer found in day column for', DateUtils.formatDate(eventDate));
+                }
+            } else {
+                console.warn('EventRenderer: No day column found for event date', DateUtils.formatDate(eventDate));
+            }
+        });
+
+        // Emit event rendered
+        this.eventBus.emit(EventTypes.EVENT_RENDERED, {
+            count: currentWeekEvents.length
+        });
+    }
+
+    /**
+     * Get current week dates (Sunday to Saturday)
+     */
+    private getCurrentWeekDates(): Date[] {
+        const today = new Date();
+        const weekStart = DateUtils.getWeekStart(today, 0); // Sunday start
+        const dates: Date[] = [];
+        
+        for (let i = 0; i < 7; i++) {
+            const date = DateUtils.addDays(weekStart, i);
+            dates.push(date);
+        }
+        
+        return dates;
+    }
+
+    /**
+     * Find day column for specific date
+     */
+    private findDayColumn(date: Date): HTMLElement | null {
+        const dateStr = DateUtils.formatDate(date);
+        const dayColumn = document.querySelector(`swp-day-column[data-date="${dateStr}"]`) as HTMLElement;
+        console.log('EventRenderer: Looking for day column with date', dateStr, 'found:', !!dayColumn);
+        return dayColumn;
     }
 
     private renderEvent(event: CalendarEvent, container: Element): void {
@@ -95,17 +159,42 @@ export class EventRenderer {
         const startDate = new Date(event.start);
         const endDate = new Date(event.end);
         
-        const startHour = calendarConfig.get('dayStartHour');
+        // Use dayStartHour to match time-axis positioning
+        const dayStartHour = calendarConfig.get('dayStartHour'); // 0 (midnight)
         const hourHeight = calendarConfig.get('hourHeight');
 
-        // Calculate minutes from day start
-        const startMinutes = (startDate.getHours() - startHour) * 60 + startDate.getMinutes();
-        const duration = (endDate.getTime() - startDate.getTime()) / (1000 * 60); // Duration in minutes
+        // Calculate minutes from day start (midnight)
+        const eventHour = startDate.getHours();
+        const eventMinutes = startDate.getMinutes();
+        const startMinutes = (eventHour - dayStartHour) * 60 + eventMinutes;
+        
+        // Calculate duration in minutes
+        const duration = (endDate.getTime() - startDate.getTime()) / (1000 * 60);
 
-        // Convert to pixels
-        const top = startMinutes * (hourHeight / 60);
+        // Convert to pixels - this gives absolute position from top of time-grid
+        const absoluteTop = startMinutes * (hourHeight / 60);
         const height = duration * (hourHeight / 60);
 
+        // Get current scroll position to adjust for viewport
+        const scrollableContent = document.querySelector('swp-scrollable-content') as HTMLElement;
+        const scrollTop = scrollableContent ? scrollableContent.scrollTop : 0;
+        
+        // Calculate relative position within the visible viewport
+        // Events are positioned relative to their day-column, not the scrollable content
+        // So we use the absolute position directly
+        const top = absoluteTop;
+
+        console.log('EventRenderer: Position calculation for', event.title, {
+            eventTime: `${eventHour}:${eventMinutes.toString().padStart(2, '0')}`,
+            dayStartHour,
+            startMinutes,
+            duration,
+            absoluteTop,
+            scrollTop,
+            finalTop: top,
+            height
+        });
+
         return { top, height };
     }