Adds resource-based calendar view mode

Introduces new ResourceColumnDataSource and ResourceHeaderRenderer to support column rendering by resources instead of dates

Enables dynamic calendar mode switching between date and resource views
Updates core managers and services to support async column retrieval
Refactors data source interfaces to use Promise-based methods

Improves calendar flexibility and resource management capabilities

src/managers/GridManager.ts

@@ -89,7 +89,10 @@ export class GridManager {
     }
 
     // Get columns from datasource - single source of truth
-    const columns = this.dataSource.getColumns();
+    const columns = await this.dataSource.getColumns();
+
+    // Set grid columns CSS variable based on actual column count
+    document.documentElement.style.setProperty('--grid-columns', columns.length.toString());
 
     // Extract dates for EventManager query
     const dates = columns.map(col => col.data as Date);

src/managers/HeaderManager.ts

@@ -99,7 +99,7 @@ export class HeaderManager {
   /**
    * Update header content for navigation
    */
-  private updateHeader(currentDate: Date): void {
+  private async updateHeader(currentDate: Date): Promise<void> {
     console.log('🎯 HeaderManager.updateHeader called', {
       currentDate,
       rendererType: this.headerRenderer.constructor.name
@@ -116,7 +116,7 @@ export class HeaderManager {
 
     // Update DataSource with current date and get columns
     this.dataSource.setCurrentDate(currentDate);
-    const columns = this.dataSource.getColumns();
+    const columns = await this.dataSource.getColumns();
 
     // Render new header content using injected renderer
     const context: IHeaderRenderContext = {

src/managers/NavigationManager.ts

@@ -173,7 +173,7 @@ export class NavigationManager {
   /**
    * Animation transition using pre-rendered containers when available
    */
-  private animateTransition(direction: 'prev' | 'next', targetWeek: Date): void {
+  private async animateTransition(direction: 'prev' | 'next', targetWeek: Date): Promise<void> {
 
     const container = document.querySelector('swp-calendar-container') as HTMLElement;
     const currentGrid = document.querySelector('swp-calendar-container swp-grid-container:not([data-prerendered])') as HTMLElement;
@@ -194,7 +194,7 @@ export class NavigationManager {
 
     // Update DataSource with target week and get columns
     this.dataSource.setCurrentDate(targetWeek);
-    const columns = this.dataSource.getColumns();
+    const columns = await this.dataSource.getColumns();
 
     // Always create a fresh container for consistent behavior
     newGrid = this.gridRenderer.createNavigationGrid(container, columns);