Steps in the right direction for animated date change

src/managers/CalendarManager.ts

@@ -76,9 +76,9 @@ export class CalendarManager {
             this.setView(this.currentView);
             this.setCurrentDate(this.currentDate);
             
-            // Step 5: Render events (after view is set)
-            console.log('🎨 Rendering events...');
-            const events = this.eventManager.getEvents();
+            // Step 5: Render events (after view is set) - only render events for current period
+            console.log('🎨 Rendering events for current period...');
+            const events = this.getEventsForCurrentPeriod();
             await this.eventRenderer.renderEvents(events);
             
             this.isInitialized = true;
@@ -109,6 +109,11 @@ export class CalendarManager {
             currentView: view,
             date: this.currentDate
         });
+
+        // Re-render events for new view if calendar is initialized
+        if (this.isInitialized) {
+            this.rerenderEventsForCurrentPeriod();
+        }
     }
 
     /**
@@ -126,6 +131,11 @@ export class CalendarManager {
             currentDate: this.currentDate,
             view: this.currentView
         });
+
+        // Re-render events for new period if calendar is initialized
+        if (this.isInitialized) {
+            this.rerenderEventsForCurrentPeriod();
+        }
     }
 
     /**
@@ -302,4 +312,99 @@ export class CalendarManager {
         
         return previousDate;
     }
+
+    /**
+     * Get events filtered for the current period (week/month/day)
+     */
+    private getEventsForCurrentPeriod(): CalendarEvent[] {
+        const allEvents = this.eventManager.getEvents();
+        
+        // Calculate current period based on view
+        const period = this.calculateCurrentPeriod();
+        
+        // Filter events to only include those in the current period
+        const filteredEvents = allEvents.filter(event => {
+            const eventStart = new Date(event.start);
+            const eventEnd = new Date(event.end);
+            const periodStart = new Date(period.start);
+            const periodEnd = new Date(period.end);
+            
+            // Include event if it overlaps with the period
+            return eventStart <= periodEnd && eventEnd >= periodStart;
+        });
+        
+        // Also filter out all-day events (handled by GridManager)
+        const nonAllDayEvents = filteredEvents.filter(event => !event.allDay);
+        
+        console.log(`CalendarManager: Filtered ${allEvents.length} total events to ${nonAllDayEvents.length} non-all-day events for current period`);
+        
+        return nonAllDayEvents;
+    }
+
+    /**
+     * Calculate the current period based on view and date
+     */
+    private calculateCurrentPeriod(): { start: string; end: string } {
+        const current = new Date(this.currentDate);
+        
+        switch (this.currentView) {
+            case 'day':
+                const dayStart = new Date(current);
+                dayStart.setHours(0, 0, 0, 0);
+                const dayEnd = new Date(current);
+                dayEnd.setHours(23, 59, 59, 999);
+                return {
+                    start: dayStart.toISOString(),
+                    end: dayEnd.toISOString()
+                };
+                
+            case 'week':
+                // Find start of week (Monday)
+                const weekStart = new Date(current);
+                const dayOfWeek = weekStart.getDay();
+                const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // Sunday = 0, so 6 days back to Monday
+                weekStart.setDate(weekStart.getDate() - daysToMonday);
+                weekStart.setHours(0, 0, 0, 0);
+                
+                // Find end of week (Sunday)
+                const weekEnd = new Date(weekStart);
+                weekEnd.setDate(weekEnd.getDate() + 6);
+                weekEnd.setHours(23, 59, 59, 999);
+                
+                return {
+                    start: weekStart.toISOString(),
+                    end: weekEnd.toISOString()
+                };
+                
+            case 'month':
+                const monthStart = new Date(current.getFullYear(), current.getMonth(), 1);
+                const monthEnd = new Date(current.getFullYear(), current.getMonth() + 1, 0, 23, 59, 59, 999);
+                return {
+                    start: monthStart.toISOString(),
+                    end: monthEnd.toISOString()
+                };
+                
+            default:
+                // Fallback to week view
+                const fallbackStart = new Date(current);
+                fallbackStart.setDate(fallbackStart.getDate() - 3);
+                fallbackStart.setHours(0, 0, 0, 0);
+                const fallbackEnd = new Date(current);
+                fallbackEnd.setDate(fallbackEnd.getDate() + 3);
+                fallbackEnd.setHours(23, 59, 59, 999);
+                return {
+                    start: fallbackStart.toISOString(),
+                    end: fallbackEnd.toISOString()
+                };
+        }
+    }
+
+    /**
+     * Re-render events for the current period
+     */
+    private async rerenderEventsForCurrentPeriod(): Promise<void> {
+        console.log('CalendarManager: Re-rendering events for current period');
+        const events = this.getEventsForCurrentPeriod();
+        await this.eventRenderer.renderEvents(events);
+    }
 }