Introduces uniform column key concept for calendar events

Refactors column identification with a new buildColumnKey method to support flexible date and resource tracking

Replaces separate dateKey and resourceId handling with a unified columnKey approach
Improves column rendering and event management with more consistent key generation
Simplifies cross-component event tracking and column lookups

src/v2/managers/DragDropManager.ts

@@ -26,8 +26,7 @@ interface DragState {
   targetY: number;
   currentY: number;
   animationId: number;
-  sourceDateKey: string;        // Source column date (where drag started)
-  sourceResourceId?: string;    // Source column resource (where drag started)
+  sourceColumnKey: string;      // Source column key (where drag started)
   dragSource: 'grid' | 'header'; // Where drag originated
 }
 
@@ -176,13 +175,12 @@ export class DragDropManager {
       ) as HTMLElement;
 
       if (gridEvent) {
-        const dateKey = this.dragState.currentColumn.dataset.date || '';
-        const swpEvent = SwpEvent.fromElement(gridEvent, dateKey, this.gridConfig);
+        const columnKey = this.dragState.currentColumn.dataset.columnKey || '';
+        const swpEvent = SwpEvent.fromElement(gridEvent, columnKey, this.gridConfig);
 
         const payload: IDragEndPayload = {
           swpEvent,
-          sourceDateKey: this.dragState.sourceDateKey,
-          sourceResourceId: this.dragState.sourceResourceId,
+          sourceColumnKey: this.dragState.sourceColumnKey,
           target: 'grid'
         };
 
@@ -205,21 +203,20 @@ export class DragDropManager {
     // Remove ghost
     this.dragState.ghostElement?.remove();
 
-    // Get dateKey from target column
-    const dateKey = this.dragState.columnElement.dataset.date || '';
+    // Get columnKey from target column
+    const columnKey = this.dragState.columnElement.dataset.columnKey || '';
 
-    // Create SwpEvent from element (reads top/height/eventId/resourceId from element)
+    // Create SwpEvent from element (reads top/height/eventId from element)
     const swpEvent = SwpEvent.fromElement(
       this.dragState.element,
-      dateKey,
+      columnKey,
       this.gridConfig
     );
 
     // Emit drag:end
     const payload: IDragEndPayload = {
       swpEvent,
-      sourceDateKey: this.dragState.sourceDateKey,
-      sourceResourceId: this.dragState.sourceResourceId,
+      sourceColumnKey: this.dragState.sourceColumnKey,
       target: this.inHeader ? 'header' : 'grid'
     };
 
@@ -262,8 +259,7 @@ export class DragDropManager {
       targetY: 0,
       currentY: 0,
       animationId: 0,
-      sourceDateKey: '',  // Will be set from header item data
-      sourceResourceId: undefined,
+      sourceColumnKey: '',  // Will be set from header item data
       dragSource: 'header'
     };
 
@@ -323,8 +319,7 @@ export class DragDropManager {
       targetY: Math.max(0, targetY),
       currentY: startY,
       animationId: 0,
-      sourceDateKey: columnElement.dataset.date || '',
-      sourceResourceId: columnElement.dataset.resourceId,
+      sourceColumnKey: columnElement.dataset.columnKey || '',
       dragSource: 'grid'
     };
 

src/v2/managers/EventPersistenceManager.ts

@@ -40,6 +40,9 @@ export class EventPersistenceManager {
       return;
     }
 
+    // Parse resourceId from columnKey if present
+    const { resource } = this.dateService.parseColumnKey(swpEvent.columnKey);
+
     // Update and save - start/end already calculated in SwpEvent
     // Set allDay based on drop target:
     // - header: allDay = true
@@ -48,7 +51,7 @@ export class EventPersistenceManager {
       ...event,
       start: swpEvent.start,
       end: swpEvent.end,
-      resourceId: swpEvent.resourceId ?? event.resourceId,
+      resourceId: resource ?? event.resourceId,
       allDay: payload.target === 'header',
       syncStatus: 'pending'
     };
@@ -56,13 +59,10 @@ export class EventPersistenceManager {
     await this.eventService.save(updatedEvent);
 
     // Emit EVENT_UPDATED for EventRenderer to re-render affected columns
-    const targetDateKey = this.dateService.getDateKey(swpEvent.start);
     const updatePayload: IEventUpdatedPayload = {
       eventId: updatedEvent.id,
-      sourceDateKey: payload.sourceDateKey,
-      sourceResourceId: payload.sourceResourceId,
-      targetDateKey,
-      targetResourceId: swpEvent.resourceId
+      sourceColumnKey: payload.sourceColumnKey,
+      targetColumnKey: swpEvent.columnKey
     };
     this.eventBus.emit(CoreEvents.EVENT_UPDATED, updatePayload);
   };
@@ -92,13 +92,10 @@ export class EventPersistenceManager {
 
     // Emit EVENT_UPDATED for EventRenderer to re-render the column
     // Resize stays in same column, so source and target are the same
-    const dateKey = this.dateService.getDateKey(swpEvent.start);
     const updatePayload: IEventUpdatedPayload = {
       eventId: updatedEvent.id,
-      sourceDateKey: dateKey,
-      sourceResourceId: swpEvent.resourceId,
-      targetDateKey: dateKey,
-      targetResourceId: swpEvent.resourceId
+      sourceColumnKey: swpEvent.columnKey,
+      targetColumnKey: swpEvent.columnKey
     };
     this.eventBus.emit(CoreEvents.EVENT_UPDATED, updatePayload);
   };

src/v2/managers/ResizeManager.ts

@@ -251,14 +251,14 @@ export class ResizeManager {
     // Remove global resizing class
     document.documentElement.classList.remove('swp--resizing');
 
-    // Get dateKey from parent column
+    // Get columnKey from parent column
     const column = this.resizeState.element.closest('swp-day-column') as HTMLElement;
-    const dateKey = column?.dataset.date || '';
+    const columnKey = column?.dataset.columnKey || '';
 
-    // Create SwpEvent from element (reads top/height/eventId/resourceId from element)
+    // Create SwpEvent from element (reads top/height/eventId from element)
     const swpEvent = SwpEvent.fromElement(
       this.resizeState.element,
-      dateKey,
+      columnKey,
       this.gridConfig
     );