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;

wwwroot/css/calendar-layout-css.css

@@ -247,6 +247,7 @@ swp-week-header {
   height: calc(var(--header-height) + var(--all-day-row-height)); /* Same calculation as spacers */
 }
 
+
 swp-day-header {
   padding: 12px;
   text-align: center;
@@ -331,6 +332,16 @@ swp-scrollable-content::-webkit-scrollbar {
   display: none;
 }
 
+/* Fit to width mode - disable horizontal scroll */
+swp-calendar[data-fit-to-width="true"] swp-scrollable-content {
+  overflow-x: hidden;
+}
+
+/* Hide horizontal scrollbar by collapsing bottom row */
+swp-calendar[data-fit-to-width="true"] swp-calendar-container {
+  grid-template-rows: auto 1fr 0px;
+}
+
 /* Time grid */
 swp-time-grid {
   position: relative;
@@ -368,6 +379,7 @@ swp-grid-lines {
   );
 }
 
+
 /* Day columns */
 swp-day-columns {
   position: absolute;
@@ -377,6 +389,7 @@ swp-day-columns {
   min-width: calc(var(--week-days) * var(--day-column-min-width)); /* Dynamic width */
 }
 
+
 swp-day-column {
   position: relative;
   border-right: 1px solid var(--color-grid-line);