Just some cleanup

src/managers/EventRenderer.ts

@@ -50,24 +50,6 @@ export class EventRenderer {
         // Use strategy to render events
         eventRenderer.renderEvents(events, calendarConfig);
         
-        // Debug: Check if events are actually in DOM after rendering
-        setTimeout(() => {
-            const allRenderedEvents = document.querySelectorAll('swp-event');
-            console.log(`EventRenderer: DOM check - ${allRenderedEvents.length} swp-event elements found in DOM`);
-            
-            if (allRenderedEvents.length > 0) {
-                const firstEvent = allRenderedEvents[0] as HTMLElement;
-                console.log('EventRenderer: First event DOM details:', {
-                    visible: firstEvent.offsetWidth > 0 && firstEvent.offsetHeight > 0,
-                    offsetParent: !!firstEvent.offsetParent,
-                    computedDisplay: window.getComputedStyle(firstEvent).display,
-                    computedVisibility: window.getComputedStyle(firstEvent).visibility,
-                    computedOpacity: window.getComputedStyle(firstEvent).opacity,
-                    parentElement: firstEvent.parentElement?.tagName
-                });
-            }
-        }, 100);
-        
         console.log(`EventRenderer: Successfully rendered ${events.length} events`);
     }
 

src/managers/ScrollManager.ts

@@ -33,20 +33,14 @@ export class ScrollManager {
   }
 
   private subscribeToEvents(): void {
-    // State events removed - initialize() is now called directly after grid render
+
+    // Handle new period shown
+    //we need to subscribe to appropriate event and then call setupScrolling() again
     
     // Handle window resize
     window.addEventListener('resize', () => {
       this.updateScrollableHeight();
     });
-
-    // Handle config updates for scrollbar styling
-    eventBus.on(EventTypes.CONFIG_UPDATE, (event: Event) => {
-      const { key } = (event as CustomEvent).detail;
-      if (key.startsWith('scrollbar')) {
-        this.applyScrollbarStyling();
-      }
-    });
   }
 
   /**
@@ -59,7 +53,6 @@ export class ScrollManager {
       this.setupResizeObserver();
       this.updateScrollableHeight();
       this.setupScrollSynchronization();
-      this.applyScrollbarStyling();
     }
 
     // Setup horizontal scrolling synchronization
@@ -68,45 +61,6 @@ export class ScrollManager {
     }
   }
 
-  /**
-   * Apply scrollbar styling from configuration
-   */
-  private applyScrollbarStyling(): void {
-    if (!this.scrollableContent) return;
-
-    // Get scrollbar configuration
-    const scrollbarWidth = calendarConfig.get('scrollbarWidth');
-    const scrollbarColor = calendarConfig.get('scrollbarColor');
-    const scrollbarTrackColor = calendarConfig.get('scrollbarTrackColor');
-    const scrollbarHoverColor = calendarConfig.get('scrollbarHoverColor');
-    const scrollbarBorderRadius = calendarConfig.get('scrollbarBorderRadius');
-
-    // Apply CSS custom properties to both the element and document root
-    const root = document.documentElement;
-    
-    // Set on scrollable content
-    this.scrollableContent.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
-    this.scrollableContent.style.setProperty('--scrollbar-color', scrollbarColor);
-    this.scrollableContent.style.setProperty('--scrollbar-track-color', scrollbarTrackColor);
-    this.scrollableContent.style.setProperty('--scrollbar-hover-color', scrollbarHoverColor);
-    this.scrollableContent.style.setProperty('--scrollbar-border-radius', `${scrollbarBorderRadius}px`);
-
-    // Also set on root for global access
-    root.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
-    root.style.setProperty('--scrollbar-color', scrollbarColor);
-    root.style.setProperty('--scrollbar-track-color', scrollbarTrackColor);
-    root.style.setProperty('--scrollbar-hover-color', scrollbarHoverColor);
-    root.style.setProperty('--scrollbar-border-radius', `${scrollbarBorderRadius}px`);
-
-    console.log('ScrollManager: Applied scrollbar styling', {
-      width: `${scrollbarWidth}px`,
-      color: scrollbarColor,
-      trackColor: scrollbarTrackColor,
-      hoverColor: scrollbarHoverColor,
-      borderRadius: `${scrollbarBorderRadius}px`
-    });
-  }
-
   /**
    * Find DOM elements needed for scrolling
    */
@@ -116,12 +70,6 @@ export class ScrollManager {
     this.timeAxis = document.querySelector('swp-time-axis');
     this.calendarHeader = document.querySelector('swp-calendar-header');
    
-    console.log('ScrollManager: Found elements:', {
-      scrollableContent: !!this.scrollableContent,
-      calendarContainer: !!this.calendarContainer,
-      timeAxis: !!this.timeAxis,
-      calendarHeader: !!this.calendarHeader
-    });
   }
 
   /**

src/renderers/EventRenderer.ts

@@ -30,28 +30,35 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
     // Events should already be filtered by DataManager - no need to filter here
     console.log('BaseEventRenderer: Rendering', events.length, 'pre-filtered events');
 
-    // Render each event in the correct column
+    // OPTIMIZATION: Column-first rendering instead of event-first
-    events.forEach(event => {
+    // This is much more efficient when there are many events
-      const column = this.findColumn(event);
+    const columns = this.getColumns();
+    console.log(`BaseEventRenderer: Found ${columns.length} columns to render events in`);
 
-      if (column) {
+    columns.forEach(column => {
-        const eventsLayer = column.querySelector('swp-events-layer');
+      const columnEvents = this.getEventsForColumn(column, events);
-        if (eventsLayer) {
+      console.log(`BaseEventRenderer: Rendering ${columnEvents.length} events in column`);
+      
+      const eventsLayer = column.querySelector('swp-events-layer');
+      if (eventsLayer) {
+        columnEvents.forEach(event => {
           console.log(`BaseEventRenderer: Rendering event "${event.title}" in events layer`);
           this.renderEvent(event, eventsLayer, config);
+        });
         
-          // Debug: Verify event was actually added
+        // Debug: Verify events were actually added
-          const renderedEvents = eventsLayer.querySelectorAll('swp-event');
+        const renderedEvents = eventsLayer.querySelectorAll('swp-event');
-          console.log(`BaseEventRenderer: Events layer now has ${renderedEvents.length} events`);
+        console.log(`BaseEventRenderer: Events layer now has ${renderedEvents.length} events`);
-        } else {
-          console.warn('BaseEventRenderer: No events layer found in column for event', event.title, 'Column:', column);
-        }
       } else {
-        console.warn('BaseEventRenderer: No column found for event', event.title);
+        console.warn('BaseEventRenderer: No events layer found in column');
       }
     });
   }
 
+  // Abstract methods that subclasses must implement for column-first rendering
+  protected abstract getColumns(): HTMLElement[];
+  protected abstract getEventsForColumn(column: HTMLElement, events: CalendarEvent[]): CalendarEvent[];
+
   protected renderEvent(event: CalendarEvent, container: Element, config: CalendarConfig): void {
     const eventElement = document.createElement('swp-event');
     eventElement.dataset.eventId = event.id;
@@ -160,6 +167,26 @@ export class DateEventRenderer extends BaseEventRenderer {
     
     return dayColumn;
   }
+
+  protected getColumns(): HTMLElement[] {
+    const columns = document.querySelectorAll('swp-day-column');
+    console.log('DateEventRenderer: Found', columns.length, 'day columns in DOM');
+    return Array.from(columns) as HTMLElement[];
+  }
+
+  protected getEventsForColumn(column: HTMLElement, events: CalendarEvent[]): CalendarEvent[] {
+    const columnDate = column.dataset.date;
+    if (!columnDate) return [];
+
+    const columnEvents = events.filter(event => {
+      const eventDate = new Date(event.start);
+      const eventDateStr = DateUtils.formatDate(eventDate);
+      return eventDateStr === columnDate;
+    });
+
+    console.log(`DateEventRenderer: Column ${columnDate} has ${columnEvents.length} events`);
+    return columnEvents;
+  }
 }
 
 /**
@@ -177,4 +204,22 @@ export class ResourceEventRenderer extends BaseEventRenderer {
     console.log('ResourceEventRenderer: Looking for resource column with name', resourceName, 'found:', !!resourceColumn);
     return resourceColumn;
   }
+
+  protected getColumns(): HTMLElement[] {
+    const columns = document.querySelectorAll('swp-resource-column');
+    console.log('ResourceEventRenderer: Found', columns.length, 'resource columns in DOM');
+    return Array.from(columns) as HTMLElement[];
+  }
+
+  protected getEventsForColumn(column: HTMLElement, events: CalendarEvent[]): CalendarEvent[] {
+    const resourceName = column.dataset.resource;
+    if (!resourceName) return [];
+
+    const columnEvents = events.filter(event => {
+      return event.resource?.name === resourceName;
+    });
+
+    console.log(`ResourceEventRenderer: Resource ${resourceName} has ${columnEvents.length} events`);
+    return columnEvents;
+  }
 }