@forcecalendar/interface 1.0.23 → 1.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forcecalendar/interface",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "type": "module",
   "description": "Official interface layer for forceCalendar Core - Enterprise calendar components",
   "main": "dist/force-calendar-interface.umd.js",

package/src/components/ForceCalendar.js

@@ -68,9 +68,31 @@ export class ForceCalendar extends BaseComponent {
             this.emit('calendar-view-change', data);
         }));
 
-        // Event management events
-        this._busUnsubscribers.push(eventBus.on('event:*', (data, event) => {
-            this.emit(`calendar-event-${event.split(':')[1]}`, data);
+        const forwardEventAction = (action, data) => {
+            this.emit(`calendar-event-${action}`, data);
+        };
+
+        // Event management events (canonical + backward-compatible aliases)
+        this._busUnsubscribers.push(eventBus.on('event:add', (data) => {
+            forwardEventAction('add', data);
+        }));
+        this._busUnsubscribers.push(eventBus.on('event:update', (data) => {
+            forwardEventAction('update', data);
+        }));
+        this._busUnsubscribers.push(eventBus.on('event:remove', (data) => {
+            forwardEventAction('remove', data);
+        }));
+        this._busUnsubscribers.push(eventBus.on('event:added', (data) => {
+            forwardEventAction('add', data);
+            this.emit('calendar-event-added', data);
+        }));
+        this._busUnsubscribers.push(eventBus.on('event:updated', (data) => {
+            forwardEventAction('update', data);
+            this.emit('calendar-event-updated', data);
+        }));
+        this._busUnsubscribers.push(eventBus.on('event:deleted', (data) => {
+            forwardEventAction('remove', data);
+            this.emit('calendar-event-deleted', data);
         }));
 
         // Date selection events

package/src/core/StateManager.js

@@ -215,6 +215,7 @@ class StateManager {
         }
         // Sync from Core to ensure consistency (single source of truth)
         this._syncEventsFromCore();
+        eventBus.emit('event:add', { event: addedEvent });
         eventBus.emit('event:added', { event: addedEvent });
         return addedEvent;
     }
@@ -232,6 +233,7 @@ class StateManager {
 
         // Sync from Core to ensure consistency (single source of truth)
         this._syncEventsFromCore();
+        eventBus.emit('event:update', { event });
         eventBus.emit('event:updated', { event });
         return event;
     }
@@ -248,6 +250,7 @@ class StateManager {
         }
         // Sync from Core to ensure consistency (single source of truth)
         this._syncEventsFromCore();
+        eventBus.emit('event:remove', { eventId });
         eventBus.emit('event:deleted', { eventId });
         return true;
     }
@@ -409,4 +412,4 @@ class StateManager {
 }
 
 // Export StateManager
-export default StateManager;
+export default StateManager;

package/src/renderers/BaseViewRenderer.js

@@ -171,7 +171,7 @@ export class BaseViewRenderer {
         const end = new Date(event.end);
         const startMinutes = start.getHours() * 60 + start.getMinutes();
         const durationMinutes = Math.max((end - start) / (1000 * 60), compact ? 20 : 30);
-        const color = event.backgroundColor || '#2563eb';
+        const color = this.getEventColor(event);
 
         const padding = compact ? '4px 8px' : '8px 12px';
         const fontSize = compact ? '11px' : '13px';
@@ -198,6 +198,15 @@ export class BaseViewRenderer {
         `;
     }
 
+    /**
+     * Get a safe, sanitized event color value.
+     * @param {Object} event
+     * @returns {string}
+     */
+    getEventColor(event) {
+        return StyleUtils.sanitizeColor(event?.backgroundColor, '#2563eb');
+    }
+
     /**
      * Attach common event handlers for day/event clicks
      */

package/src/renderers/DayViewRenderer.js

@@ -116,7 +116,7 @@ export class DayViewRenderer extends BaseViewRenderer {
                 <div class="fc-all-day-cell" data-date="${dayDate.toISOString()}" style="padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 4px;">
                     ${allDayEvents.map(evt => `
                         <div class="fc-event fc-all-day-event" data-event-id="${this.escapeHTML(evt.id)}"
-                             style="background-color: ${evt.backgroundColor || '#2563eb'}; font-size: 12px; padding: 4px 8px; border-radius: 4px; color: white; cursor: pointer; font-weight: 500;">
+                             style="background-color: ${this.getEventColor(evt)}; font-size: 12px; padding: 4px 8px; border-radius: 4px; color: white; cursor: pointer; font-weight: 500;">
                             ${this.escapeHTML(evt.title)}
                         </div>
                     `).join('')}

package/src/renderers/MonthViewRenderer.js

@@ -98,7 +98,7 @@ export class MonthViewRenderer extends BaseViewRenderer {
     }
 
     _renderEvent(event) {
-        const color = event.backgroundColor || '#2563eb';
+        const color = this.getEventColor(event);
         return `
             <div class="fc-event" data-event-id="${this.escapeHTML(event.id)}"
                  style="background-color: ${color}; font-size: 11px; padding: 2px 6px; border-radius: 3px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;">

package/src/renderers/WeekViewRenderer.js

@@ -87,7 +87,7 @@ export class WeekViewRenderer extends BaseViewRenderer {
                     <div class="fc-all-day-cell" data-date="${day.date.toISOString()}" style="border-right: 1px solid #e5e7eb; padding: 4px; display: flex; flex-direction: column; gap: 2px;">
                         ${day.allDayEvents.map(evt => `
                             <div class="fc-event fc-all-day-event" data-event-id="${this.escapeHTML(evt.id)}"
-                                 style="background-color: ${evt.backgroundColor || '#2563eb'}; font-size: 10px; padding: 2px 4px; border-radius: 2px; color: white; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+                                 style="background-color: ${this.getEventColor(evt)}; font-size: 10px; padding: 2px 4px; border-radius: 2px; color: white; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                 ${this.escapeHTML(evt.title)}
                             </div>
                         `).join('')}