src/v2/constants/CoreEvents.ts

@@ -67,5 +67,9 @@ export const CoreEvents = {
   AUDIT_LOGGED: 'audit:logged',
 
   // Rendering events
-  EVENTS_RENDERED: 'events:rendered'
+  EVENTS_RENDERED: 'events:rendered',
+
+  // Calendar command events
+  CALENDAR_CMD_NAVIGATE_PREV: 'calendar:cmd:navigate:prev',
+  CALENDAR_CMD_NAVIGATE_NEXT: 'calendar:cmd:navigate:next'
 } as const;

src/v2/core/CalendarApp.ts

@@ -14,6 +14,8 @@ import { SettingsService } from '../storage/settings/SettingsService';
 import { ResourceService } from '../storage/resources/ResourceService';
 import { ViewConfigService } from '../storage/viewconfigs/ViewConfigService';
 import { IWorkweekPreset } from '../types/SettingsTypes';
+import { IEventBus } from '../types/CalendarTypes';
+import { CoreEvents } from '../constants/CoreEvents';
 
 export class CalendarApp {
   private animator!: NavigationAnimator;
@@ -35,7 +37,8 @@ export class CalendarApp {
     private eventPersistenceManager: EventPersistenceManager,
     private settingsService: SettingsService,
     private resourceService: ResourceService,
-    private viewConfigService: ViewConfigService
+    private viewConfigService: ViewConfigService,
+    private eventBus: IEventBus
   ) {}
 
   async init(container: HTMLElement): Promise<void> {
@@ -74,16 +77,21 @@ export class CalendarApp {
   }
 
   private setupEventListeners(): void {
+    // Navigation commands via EventBus
+    this.eventBus.on(CoreEvents.CALENDAR_CMD_NAVIGATE_PREV, () => {
+      this.handleNavigatePrev();
+    });
+
+    this.eventBus.on(CoreEvents.CALENDAR_CMD_NAVIGATE_NEXT, () => {
+      this.handleNavigateNext();
+    });
+
+    // Other commands via container DOM events (migrates later)
     this.container.addEventListener('calendar:cmd:render', ((e: CustomEvent) => {
       const { viewId, direction } = e.detail;
       this.handleRenderCommand(viewId, direction);
     }) as EventListener);
 
-    this.container.addEventListener('calendar:cmd:navigate', ((e: CustomEvent) => {
-      const { offset, direction } = e.detail;
-      this.handleNavigateCommand(offset, direction);
-    }) as EventListener);
-
     this.container.addEventListener('calendar:cmd:drawer:toggle', (() => {
       this.headerDrawerManager.toggle();
     }) as EventListener);
@@ -101,9 +109,15 @@ export class CalendarApp {
     this.emitStatus('rendered', { viewId });
   }
 
-  private async handleNavigateCommand(offset: number, direction: 'left' | 'right'): Promise<void> {
+  private async handleNavigatePrev(): Promise<void> {
-    this.weekOffset += offset;
+    this.weekOffset--;
-    await this.animator.slide(direction, () => this.render());
+    await this.animator.slide('right', () => this.render());
+    this.emitStatus('rendered', { viewId: this.currentViewId });
+  }
+
+  private async handleNavigateNext(): Promise<void> {
+    this.weekOffset++;
+    await this.animator.slide('left', () => this.render());
     this.emitStatus('rendered', { viewId: this.currentViewId });
   }
 

src/v2/demo/DemoApp.ts

@@ -3,6 +3,8 @@ import { DataSeeder } from '../workers/DataSeeder';
 import { AuditService } from '../storage/audit/AuditService';
 import { CalendarApp } from '../core/CalendarApp';
 import { DateService } from '../core/DateService';
+import { IEventBus } from '../types/CalendarTypes';
+import { CoreEvents } from '../constants/CoreEvents';
 
 export class DemoApp {
   private container!: HTMLElement;
@@ -13,7 +15,8 @@ export class DemoApp {
     private dataSeeder: DataSeeder,
     private auditService: AuditService,
     private calendarApp: CalendarApp,
-    private dateService: DateService
+    private dateService: DateService,
+    private eventBus: IEventBus
   ) {}
 
   async init(): Promise<void> {
@@ -48,11 +51,11 @@ export class DemoApp {
 
   private setupNavigation(): void {
     document.getElementById('btn-prev')!.onclick = () => {
-      this.emitNavigateCommand(-1, 'right');
+      this.eventBus.emit(CoreEvents.CALENDAR_CMD_NAVIGATE_PREV);
     };
 
     document.getElementById('btn-next')!.onclick = () => {
-      this.emitNavigateCommand(1, 'left');
+      this.eventBus.emit(CoreEvents.CALENDAR_CMD_NAVIGATE_NEXT);
     };
   }
 
@@ -97,10 +100,4 @@ export class DemoApp {
       detail: { viewId, direction }
     }));
   }
-
-  private emitNavigateCommand(offset: number, direction: 'left' | 'right'): void {
-    this.container.dispatchEvent(new CustomEvent('calendar:cmd:navigate', {
-      detail: { offset, direction }
-    }));
-  }
 }