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/renderers/ResourceColumnRenderer.ts

@@ -0,0 +1,46 @@
+import { WorkHoursManager } from '../managers/WorkHoursManager';
+import { IColumnRenderer, IColumnRenderContext } from './ColumnRenderer';
+
+/**
+ * Resource-based column renderer
+ *
+ * In resource mode, columns represent resources (people, rooms, etc.)
+ * Work hours are hardcoded (09:00-18:00) for all columns.
+ * TODO: Each resource should have its own work hours.
+ */
+export class ResourceColumnRenderer implements IColumnRenderer {
+  private workHoursManager: WorkHoursManager;
+
+  constructor(workHoursManager: WorkHoursManager) {
+    this.workHoursManager = workHoursManager;
+  }
+
+  render(columnContainer: HTMLElement, context: IColumnRenderContext): void {
+    const { columns } = context;
+
+    // Hardcoded work hours for all resources: 09:00 - 18:00
+    const workHours = { start: 9, end: 18 };
+
+    columns.forEach((columnInfo) => {
+      const column = document.createElement('swp-day-column');
+
+      column.dataset.columnId = columnInfo.identifier;
+
+      // Apply hardcoded work hours to all resource columns
+      this.applyWorkHoursToColumn(column, workHours);
+
+      const eventsLayer = document.createElement('swp-events-layer');
+      column.appendChild(eventsLayer);
+
+      columnContainer.appendChild(column);
+    });
+  }
+
+  private applyWorkHoursToColumn(column: HTMLElement, workHours: { start: number; end: number }): void {
+    const nonWorkStyle = this.workHoursManager.calculateNonWorkHoursStyle(workHours);
+    if (nonWorkStyle) {
+      column.style.setProperty('--before-work-height', `${nonWorkStyle.beforeWorkHeight}px`);
+      column.style.setProperty('--after-work-top', `${nonWorkStyle.afterWorkTop}px`);
+    }
+  }
+}