Adds handling of fit to width bool

src/core/CalendarConfig.ts

@@ -37,6 +37,7 @@ export class CalendarConfig {
       hourHeight: 60,         // Pixels per hour
       showCurrentTime: true,
       showWorkHours: true,
+      fitToWidth: false,       // Fit columns to calendar width (no horizontal scroll)
       
       // Interaction settings
       allowDrag: true,
@@ -81,6 +82,7 @@ export class CalendarConfig {
     if (attrs.dayStartHour) this.config.dayStartHour = parseInt(attrs.dayStartHour);
     if (attrs.dayEndHour) this.config.dayEndHour = parseInt(attrs.dayEndHour);
     if (attrs.hourHeight) this.config.hourHeight = parseInt(attrs.hourHeight);
+    if (attrs.fitToWidth !== undefined) this.config.fitToWidth = attrs.fitToWidth === 'true';
   }
 
   /**

src/managers/GridManager.ts

@@ -53,7 +53,7 @@ export class GridManager {
     // Re-render grid on config changes
     eventBus.on(EventTypes.CONFIG_UPDATE, (e: Event) => {
       const detail = (e as CustomEvent).detail;
-      if (['dayStartHour', 'dayEndHour', 'hourHeight', 'view', 'weekDays'].includes(detail.key)) {
+      if (['dayStartHour', 'dayEndHour', 'hourHeight', 'view', 'weekDays', 'fitToWidth'].includes(detail.key)) {
         this.render();
       }
     });
@@ -426,6 +426,7 @@ export class GridManager {
   private updateGridStyles(): void {
     const root = document.documentElement;
     const config = calendarConfig.getAll();
+    const calendar = document.querySelector('swp-calendar') as HTMLElement;
     
     // Set CSS variables
     root.style.setProperty('--hour-height', `${config.hourHeight}px`);
@@ -435,6 +436,18 @@ export class GridManager {
     root.style.setProperty('--day-end-hour', config.dayEndHour.toString());
     root.style.setProperty('--work-start-hour', config.workStartHour.toString());
     root.style.setProperty('--work-end-hour', config.workEndHour.toString());
+    
+    // Set day column min width based on fitToWidth setting
+    if (config.fitToWidth) {
+      root.style.setProperty('--day-column-min-width', '50px'); // Small min-width allows columns to fit available space
+    } else {
+      root.style.setProperty('--day-column-min-width', '250px'); // Default min-width for horizontal scroll mode
+    }
+    
+    // Set fitToWidth data attribute for CSS targeting
+    if (calendar) {
+      calendar.setAttribute('data-fit-to-width', config.fitToWidth.toString());
+    }
   }
 
   /**

src/managers/ScrollManager.ts

@@ -401,7 +401,7 @@ export class ScrollManager {
     
     if (timeAxisContent) {
       // Use transform for smooth performance
-      timeAxisContent.style.transform = `translateY(-${scrollTop}px)`;
+      (timeAxisContent as HTMLElement).style.transform = `translateY(-${scrollTop}px)`;
       
       // Debug logging (can be removed later)
       if (scrollTop % 100 === 0) { // Only log every 100px to avoid spam
@@ -529,6 +529,7 @@ export class ScrollManager {
     }
   }
 
+
   /**
    * Cleanup resources
    */

src/types/CalendarTypes.ts

@@ -37,6 +37,7 @@ export interface CalendarConfig {
   hourHeight: number;          // Pixels per hour
   showCurrentTime: boolean;
   showWorkHours: boolean;
+  fitToWidth: boolean;         // Fit columns to calendar width vs horizontal scroll
   
   // Interaction settings
   allowDrag: boolean;