@forcecalendar/interface 1.0.24 → 1.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forcecalendar/interface",
-  "version": "1.0.24",
+  "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/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('')}