@forcecalendar/interface 1.0.24 → 1.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forcecalendar/interface",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "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,20 +198,30 @@ 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
      */
     attachCommonEventHandlers() {
-        // Event click handlers
-        this.container.querySelectorAll('.fc-event').forEach(eventEl => {
-            this.addListener(eventEl, 'click', (e) => {
-                e.stopPropagation();
-                const eventId = eventEl.dataset.eventId;
-                const event = this.stateManager.getEvents().find(ev => ev.id === eventId);
-                if (event) {
-                    this.stateManager.selectEvent(event);
-                }
-            });
+        // Delegate event clicks at container level to avoid rebinding per event node.
+        this.addListener(this.container, 'click', (e) => {
+            const eventEl = e.target.closest('.fc-event');
+            if (!eventEl || !this.container.contains(eventEl)) return;
+
+            e.stopPropagation();
+            const eventId = eventEl.dataset.eventId;
+            const event = this.stateManager.getEvents().find(ev => ev.id === eventId);
+            if (event) {
+                this.stateManager.selectEvent(event);
+            }
         });
     }
 }

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('')}
@@ -164,20 +164,19 @@ export class DayViewRenderer extends BaseViewRenderer {
     }
 
     _attachEventHandlers() {
-        // Day column click handler
-        this.container.querySelectorAll('.fc-day-column').forEach(dayEl => {
-            this.addListener(dayEl, 'click', (e) => {
-                if (e.target.closest('.fc-event')) return;
-
-                const date = new Date(dayEl.dataset.date);
-                const rect = dayEl.getBoundingClientRect();
-                const scrollContainer = this.container.querySelector('#day-scroll-container');
-                const y = e.clientY - rect.top + (scrollContainer ? scrollContainer.scrollTop : 0);
-
-                // Calculate time from click position
-                date.setHours(Math.floor(y / this.hourHeight), Math.floor((y % this.hourHeight) / (this.hourHeight / 60)), 0, 0);
-                this.stateManager.selectDate(date);
-            });
+        this.addListener(this.container, 'click', (e) => {
+            const dayEl = e.target.closest('.fc-day-column');
+            if (!dayEl || !this.container.contains(dayEl)) return;
+            if (e.target.closest('.fc-event')) return;
+
+            const date = new Date(dayEl.dataset.date);
+            const rect = dayEl.getBoundingClientRect();
+            const scrollContainer = this.container.querySelector('#day-scroll-container');
+            const y = e.clientY - rect.top + (scrollContainer ? scrollContainer.scrollTop : 0);
+
+            // Calculate time from click position
+            date.setHours(Math.floor(y / this.hourHeight), Math.floor((y % this.hourHeight) / (this.hourHeight / 60)), 0, 0);
+            this.stateManager.selectDate(date);
         });
 
         // Common event handlers (event clicks)

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;">
@@ -108,13 +108,13 @@ export class MonthViewRenderer extends BaseViewRenderer {
     }
 
     _attachEventHandlers() {
-        // Day click handlers
-        this.container.querySelectorAll('.fc-month-day').forEach(dayEl => {
-            this.addListener(dayEl, 'click', (e) => {
-                if (e.target.closest('.fc-event')) return;
-                const date = new Date(dayEl.dataset.date);
-                this.stateManager.selectDate(date);
-            });
+        this.addListener(this.container, 'click', (e) => {
+            const dayEl = e.target.closest('.fc-month-day');
+            if (!dayEl || !this.container.contains(dayEl)) return;
+            if (e.target.closest('.fc-event')) return;
+
+            const date = new Date(dayEl.dataset.date);
+            this.stateManager.selectDate(date);
         });
 
         // Common event handlers (event clicks)

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('')}
@@ -136,20 +136,19 @@ export class WeekViewRenderer extends BaseViewRenderer {
     }
 
     _attachEventHandlers() {
-        // Day column click handlers
-        this.container.querySelectorAll('.fc-week-day-column').forEach(dayEl => {
-            this.addListener(dayEl, 'click', (e) => {
-                if (e.target.closest('.fc-event')) return;
-
-                const date = new Date(dayEl.dataset.date);
-                const rect = dayEl.getBoundingClientRect();
-                const scrollContainer = this.container.querySelector('#week-scroll-container');
-                const y = e.clientY - rect.top + (scrollContainer ? scrollContainer.scrollTop : 0);
-
-                // Calculate time from click position
-                date.setHours(Math.floor(y / this.hourHeight), Math.floor((y % this.hourHeight) / (this.hourHeight / 60)), 0, 0);
-                this.stateManager.selectDate(date);
-            });
+        this.addListener(this.container, 'click', (e) => {
+            const dayEl = e.target.closest('.fc-week-day-column');
+            if (!dayEl || !this.container.contains(dayEl)) return;
+            if (e.target.closest('.fc-event')) return;
+
+            const date = new Date(dayEl.dataset.date);
+            const rect = dayEl.getBoundingClientRect();
+            const scrollContainer = this.container.querySelector('#week-scroll-container');
+            const y = e.clientY - rect.top + (scrollContainer ? scrollContainer.scrollTop : 0);
+
+            // Calculate time from click position
+            date.setHours(Math.floor(y / this.hourHeight), Math.floor((y % this.hourHeight) / (this.hourHeight / 60)), 0, 0);
+            this.stateManager.selectDate(date);
         });
 
         // Common event handlers (event clicks)