@forcecalendar/interface 1.0.14 → 1.0.16

package/dist/force-calendar-interface.esm.js

@@ -1,6 +1,6 @@
-var P = Object.defineProperty;
-var U = (p, e, t) => e in p ? P(p, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : p[e] = t;
-var z = (p, e, t) => U(p, typeof e != "symbol" ? e + "" : e, t);
+var V = Object.defineProperty;
+var P = (p, e, t) => e in p ? V(p, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : p[e] = t;
+var _ = (p, e, t) => P(p, typeof e != "symbol" ? e + "" : e, t);
 class $ extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this._listeners = [], this._state = null, this._props = /* @__PURE__ */ new Map(), this._initialized = !1;
@@ -108,7 +108,7 @@ class $ extends HTMLElement {
     this.setProp(e, s), this._initialized && this.render();
   }
 }
-class V {
+class U {
   constructor() {
     this.timezones = {
       // UTC
@@ -691,7 +691,7 @@ class S {
     E && E.clearCache(), E = null;
   }
   constructor() {
-    this.database = new V(), this.offsetCache = /* @__PURE__ */ new Map(), this.dstCache = /* @__PURE__ */ new Map(), this.maxCacheSize = 1e3, this.cacheHits = 0, this.cacheMisses = 0;
+    this.database = new U(), this.offsetCache = /* @__PURE__ */ new Map(), this.dstCache = /* @__PURE__ */ new Map(), this.maxCacheSize = 1e3, this.cacheHits = 0, this.cacheMisses = 0;
   }
   /**
    * Convert date from one timezone to another
@@ -976,7 +976,7 @@ class S {
     }
   }
 }
-class T {
+class M {
   /**
    * Normalize event data
    * @param {import('../../types.js').EventData} data - Raw event data
@@ -1046,7 +1046,7 @@ class T {
     endTimeZone: f = null,
     status: k = "confirmed",
     visibility: b = "public",
-    organizer: M = null,
+    organizer: T = null,
     attendees: A = [],
     reminders: I = [],
     category: L,
@@ -1059,7 +1059,7 @@ class T {
     ...B
     // Capture any extra properties
   }) {
-    const m = T.normalize({
+    const m = M.normalize({
       id: e,
       title: t,
       start: s,
@@ -1077,7 +1077,7 @@ class T {
       endTimeZone: f,
       status: k,
       visibility: b,
-      organizer: M,
+      organizer: T,
       attendees: A,
       reminders: I,
       category: L,
@@ -1090,7 +1090,7 @@ class T {
       ...B
       // Pass any extra properties
     });
-    T.validate(m), this.id = m.id, this.title = m.title, this._timezoneManager = S.getInstance(), this.timeZone = m.timeZone || this._timezoneManager.getSystemTimezone(), this.endTimeZone = m.endTimeZone || this.timeZone, this.start = m.start, this.end = m.end, this.startUTC = this._timezoneManager.toUTC(this.start, this.timeZone), this.endUTC = this._timezoneManager.toUTC(this.end, this.endTimeZone), this.allDay = m.allDay, this.description = m.description, this.location = m.location, this.color = m.color, this.backgroundColor = m.backgroundColor, this.borderColor = m.borderColor, this.textColor = m.textColor, this.recurring = m.recurring, this.recurrenceRule = m.recurrenceRule, this._originalTimeZone = m.timeZone || null, this.status = m.status, this.visibility = m.visibility, this.organizer = m.organizer, this.attendees = [...m.attendees], this.reminders = [...m.reminders], this.categories = m.categories ? [...m.categories] : [], this.attachments = [...m.attachments], this.conferenceData = m.conferenceData, this.metadata = { ...m.metadata }, this._cache = {}, this._validateAttendees(), this._validateReminders();
+    M.validate(m), this.id = m.id, this.title = m.title, this._timezoneManager = S.getInstance(), this.timeZone = m.timeZone || this._timezoneManager.getSystemTimezone(), this.endTimeZone = m.endTimeZone || this.timeZone, this.start = m.start, this.end = m.end, this.startUTC = this._timezoneManager.toUTC(this.start, this.timeZone), this.endUTC = this._timezoneManager.toUTC(this.end, this.endTimeZone), this.allDay = m.allDay, this.description = m.description, this.location = m.location, this.color = m.color, this.backgroundColor = m.backgroundColor, this.borderColor = m.borderColor, this.textColor = m.textColor, this.recurring = m.recurring, this.recurrenceRule = m.recurrenceRule, this._originalTimeZone = m.timeZone || null, this.status = m.status, this.visibility = m.visibility, this.organizer = m.organizer, this.attendees = [...m.attendees], this.reminders = [...m.reminders], this.categories = m.categories ? [...m.categories] : [], this.attachments = [...m.attachments], this.conferenceData = m.conferenceData, this.metadata = { ...m.metadata }, this._cache = {}, this._validateAttendees(), this._validateReminders();
   }
   /**
    * Get event duration in milliseconds
@@ -1180,7 +1180,7 @@ class T {
    * @throws {Error} If otherEvent is not an Event instance or doesn't have start/end
    */
   overlaps(e) {
-    if (e instanceof T)
+    if (e instanceof M)
       return !(this.end <= e.start || this.start >= e.end);
     if (e && e.start && e.end)
       return !(this.end <= e.start || this.start >= e.end);
@@ -1200,7 +1200,7 @@ class T {
    * @returns {Event} New Event instance with updated properties
    */
   clone(e = {}) {
-    return new T({
+    return new M({
       id: this.id,
       title: this.title,
       start: new Date(this.start),
@@ -1264,7 +1264,7 @@ class T {
    * @returns {Event} New Event instance
    */
   static fromObject(e) {
-    return new T(e);
+    return new M(e);
   }
   /**
    * Compare events for equality
@@ -1272,7 +1272,7 @@ class T {
    * @returns {boolean} True if events are equal
    */
   equals(e) {
-    return e instanceof T ? this.id === e.id && this.title === e.title && this.start.getTime() === e.start.getTime() && this.end.getTime() === e.end.getTime() && this.allDay === e.allDay && this.description === e.description && this.location === e.location && this.recurring === e.recurring && this.recurrenceRule === e.recurrenceRule && this.status === e.status : !1;
+    return e instanceof M ? this.id === e.id && this.title === e.title && this.start.getTime() === e.start.getTime() && this.end.getTime() === e.end.getTime() && this.allDay === e.allDay && this.description === e.description && this.location === e.location && this.recurring === e.recurring && this.recurrenceRule === e.recurrenceRule && this.status === e.status : !1;
   }
   // ============ Attendee Management Methods ============
   /**
@@ -2226,14 +2226,14 @@ class N {
     const f = 3;
     for (; d <= s && h < i; ) {
       if (d >= t) {
-        const b = new Date(d), M = new Date(d.getTime() + o), A = l.getTimezoneOffset(b, c);
+        const b = new Date(d), T = new Date(d.getTime() + o), A = l.getTimezoneOffset(b, c);
         if (A !== g) {
           const I = g - A;
-          b.setMinutes(b.getMinutes() + I), M.setMinutes(M.getMinutes() + I);
+          b.setMinutes(b.getMinutes() + I), T.setMinutes(T.getMinutes() + I);
         }
         g = A, this.isException(b, n, e.id) || a.push({
           start: b,
-          end: M,
+          end: T,
           recurringEventId: e.id,
           timezone: c,
           originalStart: e.start
@@ -2446,7 +2446,7 @@ class N {
     return r && (n = `${r === -1 ? "Last" : ["", "1st", "2nd", "3rd", "4th", "5th"][r] || `${r}th`} ${n}`), n;
   }
 }
-class _ {
+class z {
   /**
    * Create a new LRU Cache
    * @param {number} capacity - Maximum number of items in cache
@@ -2766,7 +2766,7 @@ class W {
       enableAdaptiveMemory: !0,
       // Enable adaptive memory management
       ...e
-    }, this.eventCache = new _(this.config.cacheCapacity), this.queryCache = new _(Math.floor(this.config.cacheCapacity / 2)), this.dateRangeCache = new _(Math.floor(this.config.cacheCapacity / 4)), this.config.enableAdaptiveMemory && (this.memoryManager = new j({
+    }, this.eventCache = new z(this.config.cacheCapacity), this.queryCache = new z(Math.floor(this.config.cacheCapacity / 2)), this.dateRangeCache = new z(Math.floor(this.config.cacheCapacity / 4)), this.config.enableAdaptiveMemory && (this.memoryManager = new j({
       checkInterval: 3e4,
       memoryThreshold: 0.75,
       criticalThreshold: 0.9
@@ -3366,7 +3366,7 @@ class q {
    */
   addEvent(e) {
     return this.optimizer.measure("addEvent", () => {
-      if (e instanceof T || (e = new T(e)), this.events.has(e.id))
+      if (e instanceof M || (e = new M(e)), this.events.has(e.id))
         throw new Error(`Event with id ${e.id} already exists`);
       return this.events.set(e.id, e), this.optimizer.cache(e.id, e, "event"), this._indexEvent(e), this.isBatchMode ? this.batchNotifications.push({
         type: "add",
@@ -4516,7 +4516,7 @@ class G {
    * @returns {import('../events/Event.js').Event} The added event
    */
   addEvent(e) {
-    !(e instanceof T) && !e.timeZone && (e = { ...e, timeZone: this.config.timeZone });
+    !(e instanceof M) && !e.timeZone && (e = { ...e, timeZone: this.config.timeZone });
     const t = this.eventStore.addEvent(e);
     return this._emit("eventAdd", { event: t }), t;
   }
@@ -4723,13 +4723,13 @@ class G {
         days: []
       };
       for (let w = 0; w < 7; w++) {
-        const f = new Date(l), k = f.getMonth() === s, b = u.isToday(f), M = f.getDay() === 0 || f.getDay() === 6;
+        const f = new Date(l), k = f.getMonth() === s, b = u.isToday(f), T = f.getDay() === 0 || f.getDay() === 6;
         g.days.push({
           date: f,
           dayOfMonth: f.getDate(),
           isCurrentMonth: k,
           isToday: b,
-          isWeekend: M,
+          isWeekend: T,
           events: this.getEventsForDate(f)
         }), l = u.addDays(l, 1);
       }
@@ -5042,7 +5042,23 @@ class J {
       loading: !1,
       error: null,
       config: { ...e }
-    }, this.subscribers = /* @__PURE__ */ new Set(), this.subscribe = this.subscribe.bind(this), this.unsubscribe = this.unsubscribe.bind(this), this.setState = this.setState.bind(this);
+    }, this.subscribers = /* @__PURE__ */ new Set(), this.subscribe = this.subscribe.bind(this), this.unsubscribe = this.unsubscribe.bind(this), this.setState = this.setState.bind(this), this._syncEventsFromCore({ silent: !0 });
+  }
+  /**
+   * Sync state.events from Core calendar (single source of truth)
+   * This ensures state.events always matches Core's event store
+   */
+  _syncEventsFromCore(e = {}) {
+    const t = this.calendar.getEvents() || [];
+    return (this.state.events.length !== t.length || !this._eventsMatch(this.state.events, t)) && this.setState({ events: [...t] }, e), t;
+  }
+  /**
+   * Check if two event arrays have the same events (by id)
+   */
+  _eventsMatch(e, t) {
+    if (e.length !== t.length) return !1;
+    const s = new Set(e.map((i) => i.id));
+    return t.every((i) => s.has(i.id));
   }
   // State management
   getState() {
@@ -5108,29 +5124,25 @@ class J {
   // Event management
   addEvent(e) {
     const t = this.calendar.addEvent(e);
-    if (!t)
-      return console.error("Failed to add event to calendar"), y.emit("event:error", { action: "add", event: e, error: "Failed to add event" }), null;
-    const s = [...this.state.events, t];
-    return this.setState({ events: s }), y.emit("event:added", { event: t }), t;
+    return t ? (this._syncEventsFromCore(), y.emit("event:added", { event: t }), t) : (console.error("Failed to add event to calendar"), y.emit("event:error", { action: "add", event: e, error: "Failed to add event" }), null);
   }
   updateEvent(e, t) {
+    this._syncEventsFromCore({ silent: !0 });
     const s = this.calendar.updateEvent(e, t);
-    if (!s)
-      return console.error(`Failed to update event: ${e}`), y.emit("event:error", { action: "update", eventId: e, updates: t, error: "Event not found in calendar" }), null;
-    const i = this.state.events.findIndex((n) => n.id === e);
-    if (i === -1)
-      return console.error(`Event ${e} not found in state`), y.emit("event:error", { action: "update", eventId: e, error: "Event not found in state" }), null;
-    const r = [...this.state.events];
-    return r[i] = s, this.setState({ events: r }), y.emit("event:updated", { event: s }), s;
+    return s ? (this._syncEventsFromCore(), y.emit("event:updated", { event: s }), s) : (console.error(`Failed to update event: ${e}`), y.emit("event:error", { action: "update", eventId: e, updates: t, error: "Event not found in calendar" }), null);
   }
   deleteEvent(e) {
-    if (!this.calendar.removeEvent(e))
-      return console.error(`Failed to delete event: ${e}`), y.emit("event:error", { action: "delete", eventId: e, error: "Event not found" }), !1;
-    const s = this.state.events.filter((i) => i.id !== e);
-    return this.setState({ events: s }), y.emit("event:deleted", { eventId: e }), !0;
+    return this._syncEventsFromCore({ silent: !0 }), this.calendar.removeEvent(e) ? (this._syncEventsFromCore(), y.emit("event:deleted", { eventId: e }), !0) : (console.error(`Failed to delete event: ${e}`), y.emit("event:error", { action: "delete", eventId: e, error: "Event not found" }), !1);
   }
   getEvents() {
-    return this.calendar.getEvents();
+    return this.calendar.getEvents() || [];
+  }
+  /**
+   * Force sync state.events from Core calendar
+   * Use this if you've modified events directly on the Core calendar
+   */
+  syncEvents() {
+    return this._syncEventsFromCore();
   }
   getEventsForDate(e) {
     return this.calendar.getEventsForDate(e);
@@ -5864,7 +5876,7 @@ class v {
 /**
  * Default theme colors
  */
-z(v, "colors", {
+_(v, "colors", {
   primary: "#3B82F6",
   // Modern Blue
   secondary: "#64748B",
@@ -5897,7 +5909,7 @@ z(v, "colors", {
 }), /**
  * Common CSS variables
  */
-z(v, "cssVariables", {
+_(v, "cssVariables", {
   // "Pro" Palette - Functional & Sharp
   "--fc-primary-color": "#2563EB",
   // International Blue (Focus)
@@ -5965,7 +5977,7 @@ z(v, "cssVariables", {
 }), /**
  * Get responsive breakpoints
  */
-z(v, "breakpoints", {
+_(v, "breakpoints", {
   xs: "320px",
   sm: "576px",
   md: "768px",
@@ -7403,7 +7415,7 @@ class ie extends $ {
     return ["view", "date", "locale", "timezone", "week-starts-on", "height"];
   }
   constructor() {
-    super(), this.stateManager = null, this.currentView = null;
+    super(), this.stateManager = null, this.currentView = null, this._hasRendered = !1, this._cachedStyles = null;
   }
   initialize() {
     const e = {
@@ -7427,7 +7439,56 @@ class ie extends $ {
     });
   }
   handleStateChange(e, t) {
-    e.view !== (t == null ? void 0 : t.view) && (this.currentView = e.view), this.render();
+    var o, c;
+    if (!this._hasRendered)
+      return;
+    const s = e.view !== (t == null ? void 0 : t.view), i = ((o = e.currentDate) == null ? void 0 : o.getTime()) !== ((c = t == null ? void 0 : t.currentDate) == null ? void 0 : c.getTime()), r = e.events !== (t == null ? void 0 : t.events), n = e.loading !== (t == null ? void 0 : t.loading), a = e.error !== (t == null ? void 0 : t.error);
+    if (n || a) {
+      this.render();
+      return;
+    }
+    s && (this.currentView = e.view), s ? (this._updateTitle(), this._updateViewButtons(), this._switchView()) : i ? (this._updateTitle(), this._updateViewContent()) : r && this._updateViewContent();
+  }
+  /**
+   * Update only the title text (no DOM recreation)
+   */
+  _updateTitle() {
+    const e = this.$(".fc-title");
+    if (e) {
+      const t = this.stateManager.getState();
+      e.textContent = this.getTitle(t.currentDate, t.view);
+    }
+  }
+  /**
+   * Update view button active states (no DOM recreation)
+   */
+  _updateViewButtons() {
+    const e = this.stateManager.getState();
+    this.$$("[data-view]").forEach((t) => {
+      const s = t.dataset.view === e.view;
+      t.classList.toggle("active", s);
+    });
+  }
+  /**
+   * Switch to a different view type
+   */
+  _switchView() {
+    const e = this.$("#calendar-view-container");
+    if (e) {
+      this._currentViewInstance && this._currentViewInstance.cleanup && this._currentViewInstance.cleanup();
+      try {
+        const t = this._createViewRenderer(this.currentView);
+        t && (t._viewType = this.currentView, this._currentViewInstance = t, t.stateManager = this.stateManager, t.container = e, t.render());
+      } catch (t) {
+        console.error("[ForceCalendar] Error switching view:", t);
+      }
+    }
+  }
+  /**
+   * Re-render only the view content (not header)
+   */
+  _updateViewContent() {
+    this._currentViewInstance && this._currentViewInstance.render && this._currentViewInstance.render();
   }
   mount() {
     super.mount(), this.loadView(this.stateManager.getView());
@@ -7830,7 +7891,7 @@ class ie extends $ {
       return `
                 <div class="force-calendar">
                     <div class="fc-error">
-                        <p><strong>Error:</strong> ${r.message || "An error occurred"}</p>
+                        <p><strong>Error:</strong> ${C.escapeHTML(r.message || "An error occurred")}</p>
                     </div>
                 </div>
             `;
@@ -7891,17 +7952,13 @@ class ie extends $ {
   }
   afterRender() {
     const e = this.$("#calendar-view-container");
-    if (console.log("[ForceCalendar] afterRender - container:", !!e, "stateManager:", !!this.stateManager, "currentView:", this.currentView), e && this.stateManager && this.currentView) {
-      if (this._currentViewInstance && this._currentViewInstance._viewType === this.currentView && e.children.length > 0) {
-        console.log("[ForceCalendar] View already exists with content, skipping creation");
+    if (e && this.stateManager && this.currentView) {
+      if (this._currentViewInstance && this._currentViewInstance._viewType === this.currentView && e.children.length > 0)
         return;
-      }
-      this._currentViewInstance && (this._currentViewInstance.cleanup && this._currentViewInstance.cleanup(), this._viewUnsubscribe && (this._viewUnsubscribe(), this._viewUnsubscribe = null)), console.log("[ForceCalendar] Creating view for:", this.currentView);
+      this._currentViewInstance && (this._currentViewInstance.cleanup && this._currentViewInstance.cleanup(), this._viewUnsubscribe && (this._viewUnsubscribe(), this._viewUnsubscribe = null));
       try {
         const i = this._createViewRenderer(this.currentView);
-        i && (i._viewType = this.currentView, this._currentViewInstance = i, i.stateManager = this.stateManager, i.container = e, console.log("[ForceCalendar] Calling viewRenderer.render()"), i.render(), console.log("[ForceCalendar] viewRenderer.render() completed"), this._viewUnsubscribe = this.stateManager.subscribe((r, n) => {
-          (r.events !== (n == null ? void 0 : n.events) || r.currentDate !== (n == null ? void 0 : n.currentDate)) && i && i.render && i.render();
-        }));
+        i && (i._viewType = this.currentView, this._currentViewInstance = i, i.stateManager = this.stateManager, i.container = e, i.render());
       } catch (i) {
         console.error("[ForceCalendar] Error creating/rendering view:", i);
       }
@@ -7922,7 +7979,7 @@ class ie extends $ {
         id: n,
         ...r
       });
-    });
+    }), this._hasRendered = !0;
   }
   _createViewRenderer(e) {
     const t = e;
@@ -7931,6 +7988,9 @@ class ie extends $ {
       container: null,
       _listeners: [],
       _scrolled: !1,
+      _escapeHTML(s) {
+        return s == null ? "" : C.escapeHTML(String(s));
+      },
       cleanup() {
         this._listeners.forEach(({ element: s, event: i, handler: r }) => {
           s.removeEventListener(i, r);
@@ -7987,9 +8047,9 @@ class ie extends $ {
                             <div class="fc-month-day" data-date="${c.date}" style="background: ${h}; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; padding: 4px; min-height: 80px; cursor: pointer;">
                                 <div class="fc-day-number" style="font-size: 13px; font-weight: 500; color: ${g}; padding: 2px 4px; margin-bottom: 4px; ${w}">${c.dayOfMonth}</div>
                                 <div class="fc-day-events" style="display: flex; flex-direction: column; gap: 2px;">
-                                    ${k.map((M) => `
-                                        <div class="fc-event" data-event-id="${M.id}" style="background-color: ${M.backgroundColor || "#2563eb"}; font-size: 11px; padding: 2px 6px; border-radius: 3px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;">
-                                            ${M.title}
+                                    ${k.map((T) => `
+                                        <div class="fc-event" data-event-id="${this._escapeHTML(T.id)}" style="background-color: ${T.backgroundColor || "#2563eb"}; font-size: 11px; padding: 2px 6px; border-radius: 3px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;">
+                                            ${this._escapeHTML(T.title)}
                                         </div>
                                     `).join("")}
                                     ${b > 0 ? `<div class="fc-more-events" style="font-size: 10px; color: #6b7280; padding: 2px 4px; font-weight: 500;">+${b} more</div>` : ""}
@@ -8035,8 +8095,8 @@ class ie extends $ {
                             ${o.map((l) => `
                                 <div style="border-right: 1px solid #e5e7eb; padding: 4px; display: flex; flex-direction: column; gap: 2px;">
                                     ${l.allDayEvents.map((d) => `
-                                        <div class="fc-event" data-event-id="${d.id}" style="background-color: ${d.backgroundColor || "#2563eb"}; font-size: 10px; padding: 2px 4px; border-radius: 2px; color: white; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-                                            ${d.title}
+                                        <div class="fc-event" data-event-id="${this._escapeHTML(d.id)}" style="background-color: ${d.backgroundColor || "#2563eb"}; font-size: 10px; padding: 2px 4px; border-radius: 2px; color: white; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+                                            ${this._escapeHTML(d.title)}
                                         </div>
                                     `).join("")}
                                 </div>
@@ -8111,8 +8171,8 @@ class ie extends $ {
                             <div style="font-size: 9px; color: #6b7280; display: flex; align-items: center; justify-content: center; border-right: 1px solid #e5e7eb; text-transform: uppercase; font-weight: 700;">All day</div>
                             <div style="padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 4px;">
                                 ${c.map((f) => `
-                                    <div class="fc-event" data-event-id="${f.id}" style="background-color: ${f.backgroundColor || "#2563eb"}; font-size: 12px; padding: 4px 8px; border-radius: 4px; color: white; cursor: pointer; font-weight: 500;">
-                                        ${f.title}
+                                    <div class="fc-event" data-event-id="${this._escapeHTML(f.id)}" style="background-color: ${f.backgroundColor || "#2563eb"}; font-size: 12px; padding: 4px 8px; border-radius: 4px; color: white; cursor: pointer; font-weight: 500;">
+                                        ${this._escapeHTML(f.title)}
                                     </div>
                                 `).join("")}
                             </div>
@@ -8149,12 +8209,12 @@ class ie extends $ {
       _renderTimedEvent(s) {
         const i = new Date(s.start), r = new Date(s.end), n = i.getHours() * 60 + i.getMinutes(), a = Math.max((r - i) / (1e3 * 60), 20), o = s.backgroundColor || "#2563eb";
         return `
-                    <div class="fc-event" data-event-id="${s.id}"
+                    <div class="fc-event" data-event-id="${this._escapeHTML(s.id)}"
                          style="position: absolute; top: ${n}px; height: ${a}px; left: 2px; right: 2px;
                                 background-color: ${o}; border-radius: 4px; padding: 4px 8px; font-size: 11px;
                                 font-weight: 500; color: white; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
                                 cursor: pointer; z-index: 5;">
-                        <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${s.title}</div>
+                        <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${this._escapeHTML(s.title)}</div>
                         <div style="font-size: 10px; opacity: 0.9;">${this._formatTime(i)}</div>
                     </div>
                 `;
@@ -8162,12 +8222,12 @@ class ie extends $ {
       _renderTimedEventDay(s) {
         const i = new Date(s.start), r = new Date(s.end), n = i.getHours() * 60 + i.getMinutes(), a = Math.max((r - i) / (1e3 * 60), 30), o = s.backgroundColor || "#2563eb";
         return `
-                    <div class="fc-event" data-event-id="${s.id}"
+                    <div class="fc-event" data-event-id="${this._escapeHTML(s.id)}"
                          style="position: absolute; top: ${n}px; height: ${a}px; left: 12px; right: 24px;
                                 background-color: ${o}; border-radius: 6px; padding: 8px 12px; font-size: 13px;
                                 font-weight: 500; color: white; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                                 cursor: pointer; z-index: 5;">
-                        <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${s.title}</div>
+                        <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${this._escapeHTML(s.title)}</div>
                         <div style="font-size: 11px; opacity: 0.9;">${this._formatTime(i)} - ${this._formatTime(r)}</div>
                     </div>
                 `;