Steps in the right direction for animated date change

src/managers/EventManager.ts

@@ -20,8 +20,9 @@ export class EventManager {
     }
 
     private setupEventListeners(): void {
-        // Keep only UI-related event listeners here if needed
-        // Data loading is now handled via direct method calls
+        // NOTE: Removed POC event listener to prevent interference with production code
+        // POC sliding animation should not trigger separate event rendering
+        // this.eventBus.on(EventTypes.WEEK_CONTENT_RENDERED, ...);
     }
 
     /**
@@ -170,6 +171,82 @@ export class EventManager {
         this.syncEvents();
     }
 
+    /**
+     * Load events for a specific week into a container (POC-style)
+     */
+    private loadEventsForWeek(weekStart: Date, weekEnd: Date, container: HTMLElement): void {
+        console.log(`EventManager: Loading events for week ${weekStart.toDateString()} - ${weekEnd.toDateString()}`);
+        
+        // Filter events for this week
+        const weekEvents = this.events.filter(event => {
+            const eventDate = new Date(event.start);
+            return eventDate >= weekStart && eventDate <= weekEnd;
+        });
+        
+        console.log(`EventManager: Found ${weekEvents.length} events for this week`);
+        
+        // Render events in the container (POC approach)
+        this.renderEventsInContainer(weekEvents, container);
+    }
+
+    /**
+     * Render events in a specific container (POC-style)
+     */
+    private renderEventsInContainer(events: CalendarEvent[], container: HTMLElement): void {
+        const dayColumns = container.querySelectorAll('swp-day-column');
+        
+        events.forEach(event => {
+            const eventDate = new Date(event.start);
+            const dayOfWeek = eventDate.getDay(); // 0 = Sunday
+            const column = dayColumns[dayOfWeek];
+            
+            if (column) {
+                const eventsLayer = column.querySelector('swp-events-layer');
+                if (eventsLayer) {
+                    this.renderEventInColumn(event, eventsLayer as HTMLElement);
+                }
+            }
+        });
+    }
+
+    /**
+     * Render a single event in a column (POC-style)
+     */
+    private renderEventInColumn(event: CalendarEvent, eventsLayer: HTMLElement): void {
+        const eventElement = document.createElement('swp-event');
+        eventElement.dataset.type = event.type || 'meeting';
+        
+        // Calculate position (simplified - assumes 7 AM start like POC)
+        const startTime = new Date(event.start);
+        const hours = startTime.getHours();
+        const minutes = startTime.getMinutes();
+        const startMinutes = (hours - 7) * 60 + minutes; // 7 is start hour like POC
+        
+        // Calculate duration
+        const endTime = new Date(event.end);
+        const durationMs = endTime.getTime() - startTime.getTime();
+        const durationMinutes = Math.floor(durationMs / (1000 * 60));
+        
+        eventElement.style.top = `${startMinutes}px`;
+        eventElement.style.height = `${durationMinutes}px`;
+        
+        eventElement.innerHTML = `
+            <swp-event-time>${this.formatTime(hours, minutes)}</swp-event-time>
+            <swp-event-title>${event.title}</swp-event-title>
+        `;
+        
+        eventsLayer.appendChild(eventElement);
+    }
+
+    /**
+     * Format time for display (POC-style)
+     */
+    private formatTime(hours: number, minutes: number): string {
+        const period = hours >= 12 ? 'PM' : 'AM';
+        const displayHours = hours % 12 || 12;
+        return `${displayHours}:${String(minutes).padStart(2, '0')} ${period}`;
+    }
+
     public destroy(): void {
         this.events = [];
     }