@forcecalendar/interface 1.0.9 → 1.0.11

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

@@ -1,6 +1,6 @@
-var H = Object.defineProperty;
-var P = (u, e, t) => e in u ? H(u, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[e] = t;
-var M = (u, e, t) => P(u, typeof e != "symbol" ? e + "" : e, t);
+var B = Object.defineProperty;
+var U = (u, e, t) => e in u ? B(u, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[e] = t;
+var M = (u, e, t) => U(u, typeof e != "symbol" ? e + "" : e, t);
 class T 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 T extends HTMLElement {
     this.setProp(e, s), this._initialized && this.render();
   }
 }
-class U {
+class P {
   constructor() {
     this.timezones = {
       // UTC
@@ -372,7 +372,7 @@ class U {
 }
 class S {
   constructor() {
-    this.database = new U(), this.offsetCache = /* @__PURE__ */ new Map(), this.dstCache = /* @__PURE__ */ new Map(), this.maxCacheSize = 1e3, this.cacheHits = 0, this.cacheMisses = 0;
+    this.database = new P(), 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
@@ -643,7 +643,7 @@ class S {
     }
   }
 }
-class x {
+class E {
   /**
    * Normalize event data
    * @param {import('../../types.js').EventData} data - Raw event data
@@ -708,25 +708,25 @@ class x {
     borderColor: l = null,
     textColor: d = null,
     recurring: h = !1,
-    recurrenceRule: y = null,
-    timeZone: b = null,
-    endTimeZone: D = null,
-    status: k = "confirmed",
-    visibility: E = "public",
+    recurrenceRule: p = null,
+    timeZone: v = null,
+    endTimeZone: w = null,
+    status: x = "confirmed",
+    visibility: k = "public",
     organizer: A = null,
     attendees: $ = [],
     reminders: z = [],
     category: _,
     // Support singular category (no default)
-    categories: F,
+    categories: L,
     // Support plural categories (no default)
-    attachments: L = [],
+    attachments: F = [],
     conferenceData: O = null,
     metadata: R = {},
-    ...B
+    ...H
     // Capture any extra properties
   }) {
-    const g = x.normalize({
+    const g = E.normalize({
       id: e,
       title: t,
       start: s,
@@ -739,25 +739,25 @@ class x {
       borderColor: l,
       textColor: d,
       recurring: h,
-      recurrenceRule: y,
-      timeZone: b,
-      endTimeZone: D,
-      status: k,
-      visibility: E,
+      recurrenceRule: p,
+      timeZone: v,
+      endTimeZone: w,
+      status: x,
+      visibility: k,
       organizer: A,
       attendees: $,
       reminders: z,
       category: _,
       // Pass category to normalize
-      categories: F,
+      categories: L,
       // Pass categories to normalize
-      attachments: L,
+      attachments: F,
       conferenceData: O,
       metadata: R,
-      ...B
+      ...H
       // Pass any extra properties
     });
-    x.validate(g), this.id = g.id, this.title = g.title, this._timezoneManager = new S(), this.timeZone = g.timeZone || this._timezoneManager.getSystemTimezone(), this.endTimeZone = g.endTimeZone || this.timeZone, this.start = g.start, this.end = g.end, this.startUTC = this._timezoneManager.toUTC(this.start, this.timeZone), this.endUTC = this._timezoneManager.toUTC(this.end, this.endTimeZone), this.allDay = g.allDay, this.description = g.description, this.location = g.location, this.color = g.color, this.backgroundColor = g.backgroundColor, this.borderColor = g.borderColor, this.textColor = g.textColor, this.recurring = g.recurring, this.recurrenceRule = g.recurrenceRule, this._originalTimeZone = g.timeZone || null, this.status = g.status, this.visibility = g.visibility, this.organizer = g.organizer, this.attendees = [...g.attendees], this.reminders = [...g.reminders], this.categories = g.categories ? [...g.categories] : [], this.attachments = [...g.attachments], this.conferenceData = g.conferenceData, this.metadata = { ...g.metadata }, this._cache = {}, this._validateAttendees(), this._validateReminders();
+    E.validate(g), this.id = g.id, this.title = g.title, this._timezoneManager = new S(), this.timeZone = g.timeZone || this._timezoneManager.getSystemTimezone(), this.endTimeZone = g.endTimeZone || this.timeZone, this.start = g.start, this.end = g.end, this.startUTC = this._timezoneManager.toUTC(this.start, this.timeZone), this.endUTC = this._timezoneManager.toUTC(this.end, this.endTimeZone), this.allDay = g.allDay, this.description = g.description, this.location = g.location, this.color = g.color, this.backgroundColor = g.backgroundColor, this.borderColor = g.borderColor, this.textColor = g.textColor, this.recurring = g.recurring, this.recurrenceRule = g.recurrenceRule, this._originalTimeZone = g.timeZone || null, this.status = g.status, this.visibility = g.visibility, this.organizer = g.organizer, this.attendees = [...g.attendees], this.reminders = [...g.reminders], this.categories = g.categories ? [...g.categories] : [], this.attachments = [...g.attachments], this.conferenceData = g.conferenceData, this.metadata = { ...g.metadata }, this._cache = {}, this._validateAttendees(), this._validateReminders();
   }
   /**
    * Get event duration in milliseconds
@@ -847,7 +847,7 @@ class x {
    * @throws {Error} If otherEvent is not an Event instance or doesn't have start/end
    */
   overlaps(e) {
-    if (e instanceof x)
+    if (e instanceof E)
       return !(this.end <= e.start || this.start >= e.end);
     if (e && e.start && e.end)
       return !(this.end <= e.start || this.start >= e.end);
@@ -867,7 +867,7 @@ class x {
    * @returns {Event} New Event instance with updated properties
    */
   clone(e = {}) {
-    return new x({
+    return new E({
       id: this.id,
       title: this.title,
       start: new Date(this.start),
@@ -931,7 +931,7 @@ class x {
    * @returns {Event} New Event instance
    */
   static fromObject(e) {
-    return new x(e);
+    return new E(e);
   }
   /**
    * Compare events for equality
@@ -939,7 +939,7 @@ class x {
    * @returns {boolean} True if events are equal
    */
   equals(e) {
-    return e instanceof x ? 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 E ? 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 ============
   /**
@@ -1202,7 +1202,7 @@ class x {
     return this.conferenceData !== null;
   }
 }
-let f = class w {
+let f = class D {
   /**
    * Get the start of a day
    * @param {Date} date - The date
@@ -1238,7 +1238,7 @@ let f = class w {
    * @returns {Date}
    */
   static endOfWeek(e, t = 0) {
-    const s = w.startOfWeek(e, t);
+    const s = D.startOfWeek(e, t);
     return s.setTime(s.getTime() + 6 * 24 * 60 * 60 * 1e3), s.setHours(23, 59, 59, 999), s;
   }
   /**
@@ -1290,7 +1290,7 @@ let f = class w {
    * @returns {Date}
    */
   static addWeeks(e, t) {
-    return w.addDays(e, t * 7);
+    return D.addDays(e, t * 7);
   }
   /**
    * Add months to a date
@@ -1372,7 +1372,7 @@ let f = class w {
    * @returns {boolean}
    */
   static isSameWeek(e, t, s = 0) {
-    const i = w.startOfWeek(e, s), a = w.startOfWeek(t, s);
+    const i = D.startOfWeek(e, s), a = D.startOfWeek(t, s);
     return i.toDateString() === a.toDateString();
   }
   /**
@@ -1410,7 +1410,7 @@ let f = class w {
    * @returns {number}
    */
   static differenceInWeeks(e, t) {
-    return Math.floor(w.differenceInDays(e, t) / 7);
+    return Math.floor(D.differenceInDays(e, t) / 7);
   }
   /**
    * Get the difference in months between two dates
@@ -1466,7 +1466,7 @@ let f = class w {
    * @returns {string}
    */
   static getMonthName(e, t = "en-US", s = "long") {
-    return w.format(e, t, { month: s });
+    return D.format(e, t, { month: s });
   }
   /**
    * Get day name
@@ -1476,7 +1476,7 @@ let f = class w {
    * @returns {string}
    */
   static getDayName(e, t = "en-US", s = "long") {
-    return w.format(e, t, { weekday: s });
+    return D.format(e, t, { weekday: s });
   }
   /**
    * Format time
@@ -1486,7 +1486,7 @@ let f = class w {
    * @returns {string}
    */
   static formatTime(e, t = "en-US", s = !1) {
-    return w.format(e, t, {
+    return D.format(e, t, {
       hour: "numeric",
       minute: "2-digit",
       hour12: !s
@@ -1508,7 +1508,7 @@ let f = class w {
    * @returns {Date}
    */
   static setTime(e, t) {
-    const s = new Date(e), { hours: i, minutes: a } = w.parseTime(t);
+    const s = new Date(e), { hours: i, minutes: a } = D.parseTime(t);
     return s.setHours(i, a, 0, 0), s;
   }
   /**
@@ -1587,7 +1587,7 @@ let f = class w {
    * @returns {boolean}
    */
   static isDST(e, t) {
-    const s = new Date(e.getFullYear(), 0, 1), i = new Date(e.getFullYear(), 6, 1), a = w.getTimezoneOffset(s, t), n = w.getTimezoneOffset(i, t), r = w.getTimezoneOffset(e, t);
+    const s = new Date(e.getFullYear(), 0, 1), i = new Date(e.getFullYear(), 6, 1), a = D.getTimezoneOffset(s, t), n = D.getTimezoneOffset(i, t), r = D.getTimezoneOffset(e, t);
     return Math.max(a, n) === r;
   }
   /**
@@ -1598,9 +1598,9 @@ let f = class w {
    * @returns {Date}
    */
   static addHoursWithDST(e, t, s) {
-    const i = new Date(e), a = w.getTimezoneOffset(e, s);
+    const i = new Date(e), a = D.getTimezoneOffset(e, s);
     i.setTime(i.getTime() + t * 60 * 60 * 1e3);
-    const n = w.getTimezoneOffset(i, s);
+    const n = D.getTimezoneOffset(i, s);
     if (a !== n) {
       const r = (n - a) * 6e4;
       i.setTime(i.getTime() + r);
@@ -1619,11 +1619,11 @@ let f = class w {
    * @returns {Date}
    */
   static createInTimeZone(e, t, s, i = 0, a = 0, n = 0, r) {
-    const o = `${e}-${String(t + 1).padStart(2, "0")}-${String(s).padStart(2, "0")}`, c = `${String(i).padStart(2, "0")}:${String(a).padStart(2, "0")}:${String(n).padStart(2, "0")}`, l = /* @__PURE__ */ new Date(`${o}T${c}`), d = w.getTimezoneOffset(l, r), h = l.getTime() + d * 6e4;
+    const o = `${e}-${String(t + 1).padStart(2, "0")}-${String(s).padStart(2, "0")}`, c = `${String(i).padStart(2, "0")}:${String(a).padStart(2, "0")}:${String(n).padStart(2, "0")}`, l = /* @__PURE__ */ new Date(`${o}T${c}`), d = D.getTimezoneOffset(l, r), h = l.getTime() + d * 6e4;
     return new Date(h);
   }
 };
-class Y {
+class V {
   /**
    * Parse an RRULE string into a structured rule object
    * @param {string|Object} rrule - RRULE string or rule object
@@ -1859,7 +1859,7 @@ class Y {
     return e.count ? a += `, ${e.count} time${e.count > 1 ? "s" : ""}` : e.until && (a += `, until ${e.until.toLocaleDateString()}`), a;
   }
 }
-class N {
+class Y {
   /**
    * Expand a recurring event into individual occurrences
    * @param {import('./Event.js').Event} event - The recurring event
@@ -1875,17 +1875,17 @@ class N {
     const n = this.parseRule(e.recurrenceRule), r = [], o = e.end - e.start, c = a || e.timeZone || "UTC", l = new S();
     let d = new Date(e.start), h = 0;
     n.until && n.until < s && (s = n.until);
-    let y = l.getTimezoneOffset(d, c);
+    let p = l.getTimezoneOffset(d, c);
     for (; d <= s && h < i; ) {
       if (d >= t) {
-        const b = new Date(d), D = new Date(d.getTime() + o), k = l.getTimezoneOffset(b, c);
-        if (k !== y) {
-          const E = y - k;
-          b.setMinutes(b.getMinutes() + E), D.setMinutes(D.getMinutes() + E);
+        const v = new Date(d), w = new Date(d.getTime() + o), x = l.getTimezoneOffset(v, c);
+        if (x !== p) {
+          const k = p - x;
+          v.setMinutes(v.getMinutes() + k), w.setMinutes(w.getMinutes() + k);
         }
-        y = k, this.isException(b, n, e.id) || r.push({
-          start: b,
-          end: D,
+        p = x, this.isException(v, n, e.id) || r.push({
+          start: v,
+          end: w,
           recurringEventId: e.id,
           timezone: c,
           originalStart: e.start
@@ -1902,7 +1902,7 @@ class N {
    * @returns {import('../../types.js').RecurrenceRule} Parsed rule object
    */
   static parseRule(e) {
-    return Y.parse(e);
+    return V.parse(e);
   }
   /**
    * Calculate the next occurrence based on the rule
@@ -2176,7 +2176,7 @@ class I {
     return this.cache.size;
   }
 }
-class V {
+class N {
   constructor(e = {}) {
     this.config = {
       checkInterval: 3e4,
@@ -2408,7 +2408,7 @@ class W {
       enableAdaptiveMemory: !0,
       // Enable adaptive memory management
       ...e
-    }, this.eventCache = new I(this.config.cacheCapacity), this.queryCache = new I(Math.floor(this.config.cacheCapacity / 2)), this.dateRangeCache = new I(Math.floor(this.config.cacheCapacity / 4)), this.config.enableAdaptiveMemory && (this.memoryManager = new V({
+    }, this.eventCache = new I(this.config.cacheCapacity), this.queryCache = new I(Math.floor(this.config.cacheCapacity / 2)), this.dateRangeCache = new I(Math.floor(this.config.cacheCapacity / 4)), this.config.enableAdaptiveMemory && (this.memoryManager = new N({
       checkInterval: 3e4,
       memoryThreshold: 0.75,
       criticalThreshold: 0.9
@@ -3020,7 +3020,7 @@ class Z {
    */
   addEvent(e) {
     return this.optimizer.measure("addEvent", () => {
-      if (e instanceof x || (e = new x(e)), this.events.has(e.id))
+      if (e instanceof E || (e = new E(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",
@@ -3135,8 +3135,8 @@ class Z {
     for (let l = -1; l <= 1; l++) {
       const d = new Date(i);
       d.setDate(d.getDate() + l);
-      const h = f.getLocalDateString(d), y = this.indices.byDate.get(h);
-      y && y.forEach((b) => s.add(b));
+      const h = f.getLocalDateString(d), p = this.indices.byDate.get(h);
+      p && p.forEach((v) => s.add(v));
     }
     const a = `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}`, n = this.indices.byMonth.get(a);
     n && n.forEach((l) => s.add(l));
@@ -3147,13 +3147,13 @@ class Z {
     for (const l of s) {
       const d = this.events.get(l);
       if (d) {
-        const h = d.getStartInTimezone(t), y = d.getEndInTimezone(t);
-        h <= c && y >= o && r.push(d);
+        const h = d.getStartInTimezone(t), p = d.getEndInTimezone(t);
+        h <= c && p >= o && r.push(d);
       }
     }
     return r.sort((l, d) => {
-      const h = l.getStartInTimezone(t), y = d.getStartInTimezone(t), b = h - y;
-      return b !== 0 ? b : d.duration - l.duration;
+      const h = l.getStartInTimezone(t), p = d.getStartInTimezone(t), v = h - p;
+      return v !== 0 ? v : d.duration - l.duration;
     });
   }
   /**
@@ -3170,8 +3170,8 @@ class Z {
       (this.indices.byDate.get(l) || /* @__PURE__ */ new Set()).forEach((h) => {
         if (!o.has(h) && h !== s) {
           o.add(h);
-          const y = this.events.get(h);
-          y && y.overlaps({ start: e, end: t }) && i.push(y);
+          const p = this.events.get(h);
+          p && p.overlaps({ start: e, end: t }) && i.push(p);
         }
       });
     }), i.sort((c, l) => c.start - l.start);
@@ -3281,7 +3281,7 @@ class Z {
       return [e];
     i = i || this.defaultTimezone;
     const a = e.timeZone || i;
-    return N.expandEvent(e, t, s).map((r, o) => e.clone({
+    return Y.expandEvent(e, t, s).map((r, o) => e.clone({
       id: `${e.id}_occurrence_${o}`,
       start: r.start,
       end: r.end,
@@ -4142,7 +4142,7 @@ class K {
    * @returns {import('../events/Event.js').Event} The added event
    */
   addEvent(e) {
-    !(e instanceof x) && !e.timeZone && (e = { ...e, timeZone: this.config.timeZone });
+    !(e instanceof E) && !e.timeZone && (e = { ...e, timeZone: this.config.timeZone });
     const t = this.eventStore.addEvent(e);
     return this._emit("eventAdd", { event: t }), t;
   }
@@ -4348,22 +4348,22 @@ class K {
     let l = new Date(o);
     const d = a ? 6 : Math.ceil((r.getDate() + f.getDayOfWeek(n, i)) / 7);
     for (let h = 0; h < d; h++) {
-      const y = {
+      const p = {
         weekNumber: f.getWeekNumber(l),
         days: []
       };
-      for (let b = 0; b < 7; b++) {
-        const D = new Date(l), k = D.getMonth() === s, E = f.isToday(D), A = D.getDay() === 0 || D.getDay() === 6;
-        y.days.push({
-          date: D,
-          dayOfMonth: D.getDate(),
-          isCurrentMonth: k,
-          isToday: E,
+      for (let v = 0; v < 7; v++) {
+        const w = new Date(l), x = w.getMonth() === s, k = f.isToday(w), A = w.getDay() === 0 || w.getDay() === 6;
+        p.days.push({
+          date: w,
+          dayOfMonth: w.getDate(),
+          isCurrentMonth: x,
+          isToday: k,
           isWeekend: A,
-          events: this.getEventsForDate(D)
+          events: this.getEventsForDate(w)
         }), l = f.addDays(l, 1);
       }
-      c.push(y);
+      c.push(p);
     }
     return {
       type: "month",
@@ -4848,7 +4848,7 @@ class Q {
     this.subscribers.clear(), this.state = null, this.calendar = null;
   }
 }
-class v extends f {
+class b extends f {
   /**
    * Format date for display
    */
@@ -5157,7 +5157,7 @@ class C {
     return e.addEventListener("keydown", a), s == null || s.focus(), () => e.removeEventListener("keydown", a);
   }
 }
-class p {
+class y {
   /**
    * Get CSS variable value
    */
@@ -5494,7 +5494,7 @@ class p {
 /**
  * Default theme colors
  */
-M(p, "colors", {
+M(y, "colors", {
   primary: "#3B82F6",
   // Modern Blue
   secondary: "#64748B",
@@ -5527,7 +5527,7 @@ M(p, "colors", {
 }), /**
  * Common CSS variables
  */
-M(p, "cssVariables", {
+M(y, "cssVariables", {
   // "Pro" Palette - Functional & Sharp
   "--fc-primary-color": "#2563EB",
   // International Blue (Focus)
@@ -5595,7 +5595,7 @@ M(p, "cssVariables", {
 }), /**
  * Get responsive breakpoints
  */
-M(p, "breakpoints", {
+M(y, "breakpoints", {
   xs: "320px",
   sm: "576px",
   md: "768px",
@@ -5948,7 +5948,7 @@ class J extends T {
   renderHeader() {
     const { config: e } = this.stateManager.getState(), t = [], s = e.weekStartsOn || 0;
     for (let i = 0; i < 7; i++) {
-      const a = (s + i) % 7, n = v.getDayAbbreviation(a, e.locale);
+      const a = (s + i) % 7, n = b.getDayAbbreviation(a, e.locale);
       t.push(`<div class="month-header-cell">${n}</div>`);
     }
     return `
@@ -5983,7 +5983,7 @@ class J extends T {
   renderDay(e) {
     const { date: t, dayOfMonth: s, isOtherMonth: i, isToday: a, isSelected: n, isWeekend: r, events: o = [] } = e, c = s, l = ["month-day"];
     i && l.push("other-month"), a && l.push("today"), n && l.push("selected"), r && l.push("weekend");
-    const d = o.slice(0, this.config.maxEventsToShow), h = o.length - this.config.maxEventsToShow, y = d.map((D) => this.renderEvent(D)).join(""), b = h > 0 ? `<div class="more-events">+${h} more</div>` : "";
+    const d = o.slice(0, this.config.maxEventsToShow), h = o.length - this.config.maxEventsToShow, p = d.map((w) => this.renderEvent(w)).join(""), v = h > 0 ? `<div class="more-events">+${h} more</div>` : "";
     return `
             <div class="${l.join(" ")}"
                  data-date="${t.toISOString()}"
@@ -5992,8 +5992,8 @@ class J extends T {
                     <span class="day-number">${c}</span>
                 </div>
                 <div class="day-events">
-                    ${y}
-                    ${b}
+                    ${p}
+                    ${v}
                 </div>
             </div>
         `;
@@ -6002,11 +6002,11 @@ class J extends T {
     const { title: t, start: s, allDay: i, backgroundColor: a, textColor: n } = e;
     let r = "";
     if (a) {
-      const l = p.sanitizeColor(a), d = p.sanitizeColor(n, "white");
+      const l = y.sanitizeColor(a), d = y.sanitizeColor(n, "white");
       r += `background-color: ${l}; color: ${d};`;
     }
     let o = "";
-    !i && s && (o = v.formatTime(new Date(s), !1, !1));
+    !i && s && (o = b.formatTime(new Date(s), !1, !1));
     const c = ["event-item"];
     return i && c.push("all-day"), `
             <div class="${c.join(" ")}"
@@ -6112,7 +6112,7 @@ class X extends T {
         return {
           ...s,
           date: i,
-          isToday: v.isToday(i),
+          isToday: b.isToday(i),
           timedEvents: (s.events || []).filter((a) => !a.allDay),
           allDayEvents: (s.events || []).filter((a) => a.allDay)
         };
@@ -6309,7 +6309,7 @@ class X extends T {
                     <div class="time-gutter-header"></div>
                     ${this.viewData.days.map((e) => `
                         <div class="day-column-header ${e.isToday ? "is-today" : ""}">
-                            <span class="day-name">${v.getDayAbbreviation(e.date.getDay())}</span>
+                            <span class="day-name">${b.getDayAbbreviation(e.date.getDay())}</span>
                             <span class="day-number">${e.date.getDate()}</span>
                         </div>
                     `).join("")}
@@ -6332,7 +6332,7 @@ class X extends T {
                     <div class="time-gutter">
                         ${this.hours.map((e) => `
                             <div class="time-slot-label">
-                                ${e === 0 ? "" : v.formatTime((/* @__PURE__ */ new Date()).setHours(e, 0), !1)}
+                                ${e === 0 ? "" : b.formatTime((/* @__PURE__ */ new Date()).setHours(e, 0), !1)}
                             </div>
                         `).join("")}
                     </div>
@@ -6348,18 +6348,18 @@ class X extends T {
         ` : '<div class="week-view">Loading...</div>';
   }
   renderTimedEvent(e) {
-    const t = new Date(e.start), s = new Date(e.end), i = t.getHours() * 60 + t.getMinutes(), a = (s - t) / (1e3 * 60), n = i, r = Math.max(a, 20), o = p.sanitizeColor(e.backgroundColor), c = p.sanitizeColor(p.getContrastColor(o), "white");
+    const t = new Date(e.start), s = new Date(e.end), i = t.getHours() * 60 + t.getMinutes(), a = (s - t) / (1e3 * 60), n = i, r = Math.max(a, 20), o = y.sanitizeColor(e.backgroundColor), c = y.sanitizeColor(y.getContrastColor(o), "white");
     return `
             <div class="event-container"
                  style="top: ${n}px; height: ${r}px; background-color: ${o}; color: ${c};"
                  data-event-id="${e.id}">
                 <span class="event-title">${C.escapeHTML(e.title)}</span>
-                <span class="event-time">${v.formatTime(t)}</span>
+                <span class="event-time">${b.formatTime(t)}</span>
             </div>
         `;
   }
   renderAllDayEvent(e) {
-    const t = p.sanitizeColor(e.backgroundColor), s = p.sanitizeColor(p.getContrastColor(t), "white");
+    const t = y.sanitizeColor(e.backgroundColor), s = y.sanitizeColor(y.getContrastColor(t), "white");
     return `
             <div class="event-item"
                  style="background-color: ${t}; color: ${s}; font-size: 10px; padding: 2px 4px; border-radius: 2px; cursor: pointer; margin-bottom: 2px;"
@@ -6435,7 +6435,7 @@ class ee extends T {
   updateSelection(e, t) {
     const s = this.shadowRoot.querySelector(".day-column");
     if (!s) return;
-    ((a) => a && v.isSameDay(a, new Date(s.dataset.date)))(e) ? s.classList.add("selected") : s.classList.remove("selected");
+    ((a) => a && b.isSameDay(a, new Date(s.dataset.date)))(e) ? s.classList.add("selected") : s.classList.remove("selected");
   }
   loadViewData() {
     if (!this.stateManager) return;
@@ -6448,10 +6448,10 @@ class ee extends T {
     let t = null;
     const s = (n = this.stateManager) == null ? void 0 : n.getState(), i = (s == null ? void 0 : s.currentDate) || /* @__PURE__ */ new Date();
     if (e.days && Array.isArray(e.days) && e.days.length > 0)
-      t = e.days.find((r) => v.isSameDay(new Date(r.date), i)) || e.days[0];
+      t = e.days.find((r) => b.isSameDay(new Date(r.date), i)) || e.days[0];
     else if (e.weeks && Array.isArray(e.weeks) && e.weeks.length > 0) {
       const r = e.weeks.flatMap((o) => o.days || []);
-      t = r.find((o) => v.isSameDay(new Date(o.date), i)) || r[0];
+      t = r.find((o) => b.isSameDay(new Date(o.date), i)) || r[0];
     } else e.date && (t = e);
     if (!t) return null;
     const a = new Date(t.date);
@@ -6460,7 +6460,7 @@ class ee extends T {
       day: {
         ...t,
         date: a,
-        isToday: v.isToday(a),
+        isToday: b.isToday(a),
         timedEvents: (t.events || []).filter((r) => !r.allDay),
         allDayEvents: (t.events || []).filter((r) => r.allDay)
       }
@@ -6638,7 +6638,7 @@ class ee extends T {
     var i, a, n;
     if (!this.viewData || !this.viewData.day)
       return '<div class="day-view" style="padding: 20px; color: var(--fc-text-light);">No data available.</div>';
-    const { day: e } = this.viewData, t = ((n = (a = (i = this.stateManager) == null ? void 0 : i.state) == null ? void 0 : a.config) == null ? void 0 : n.locale) || "en-US", s = v.formatDate(e.date, "day", t).split(" ")[0];
+    const { day: e } = this.viewData, t = ((n = (a = (i = this.stateManager) == null ? void 0 : i.state) == null ? void 0 : a.config) == null ? void 0 : n.locale) || "en-US", s = b.formatDate(e.date, "day", t).split(" ")[0];
     return `
             <div class="day-view">
                 <div class="day-header">
@@ -6664,7 +6664,7 @@ class ee extends T {
                     <div class="time-gutter">
                         ${this.hours.map((r) => `
                             <div class="time-slot-label">
-                                ${r === 0 ? "" : v.formatTime((/* @__PURE__ */ new Date()).setHours(r, 0), !1)}
+                                ${r === 0 ? "" : b.formatTime((/* @__PURE__ */ new Date()).setHours(r, 0), !1)}
                             </div>
                         `).join("")}
                     </div>
@@ -6678,18 +6678,18 @@ class ee extends T {
         `;
   }
   renderTimedEvent(e) {
-    const t = new Date(e.start), s = new Date(e.end), i = t.getHours() * 60 + t.getMinutes(), a = (s - t) / (1e3 * 60), n = i, r = Math.max(a, 30), o = p.sanitizeColor(e.backgroundColor), c = p.sanitizeColor(p.getContrastColor(o), "white");
+    const t = new Date(e.start), s = new Date(e.end), i = t.getHours() * 60 + t.getMinutes(), a = (s - t) / (1e3 * 60), n = i, r = Math.max(a, 30), o = y.sanitizeColor(e.backgroundColor), c = y.sanitizeColor(y.getContrastColor(o), "white");
     return `
             <div class="event-container"
                  style="top: ${n}px; height: ${r}px; background-color: ${o}; color: ${c};"
                  data-event-id="${e.id}">
                 <span class="event-title">${C.escapeHTML(e.title)}</span>
-                <span class="event-time">${v.formatTime(t)} - ${v.formatTime(s)}</span>
+                <span class="event-time">${b.formatTime(t)} - ${b.formatTime(s)}</span>
             </div>
         `;
   }
   renderAllDayEvent(e) {
-    const t = p.sanitizeColor(e.backgroundColor), s = p.sanitizeColor(p.getContrastColor(t), "white");
+    const t = y.sanitizeColor(e.backgroundColor), s = y.sanitizeColor(y.getContrastColor(t), "white");
     return `
             <div class="event-item"
                  style="background-color: ${t}; color: ${s}; font-size: 12px; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-weight: 500; margin-bottom: 2px;"
@@ -6751,8 +6751,8 @@ class te extends T {
   }
   getStyles() {
     return `
-            ${p.getBaseStyles()}
-            ${p.getButtonStyles()}
+            ${y.getBaseStyles()}
+            ${y.getButtonStyles()}
 
             :host {
                 display: none;
@@ -7068,10 +7068,10 @@ class se extends T {
   getStyles() {
     const e = this.getAttribute("height") || "800px";
     return `
-            ${p.getBaseStyles()}
-            ${p.getButtonStyles()}
-            ${p.getGridStyles()}
-            ${p.getAnimations()}
+            ${y.getBaseStyles()}
+            ${y.getButtonStyles()}
+            ${y.getGridStyles()}
+            ${y.getAnimations()}
 
             :host {
                 --calendar-height: ${e};
@@ -7234,10 +7234,15 @@ class se extends T {
                 flex-direction: column;
             }
 
-            /* Ensure view components have proper dimensions */
-            forcecal-month,
-            forcecal-week,
-            forcecal-day {
+            /* Ensure view container has proper dimensions */
+            #calendar-view-container {
+                display: block;
+                width: 100%;
+                height: 100%;
+                flex: 1;
+            }
+
+            #calendar-view-container > * {
                 display: block;
                 width: 100%;
                 height: 100%;
@@ -7306,11 +7311,147 @@ class se extends T {
                     justify-content: space-between;
                     width: 100%;
                 }
-                
+
                 #create-event-btn {
                     flex: 1;
                 }
             }
+
+            /* Month View Styles (inline rendering for Locker Service compatibility) */
+            .fc-month-view {
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+                background: var(--fc-background);
+            }
+
+            .fc-month-header {
+                display: grid;
+                grid-template-columns: repeat(7, 1fr);
+                border-bottom: 1px solid var(--fc-border-color);
+                background: var(--fc-background-alt);
+            }
+
+            .fc-month-header-cell {
+                padding: 12px 8px;
+                text-align: center;
+                font-size: 11px;
+                font-weight: 600;
+                color: var(--fc-text-light);
+                text-transform: uppercase;
+                letter-spacing: 0.05em;
+            }
+
+            .fc-month-body {
+                display: flex;
+                flex-direction: column;
+                flex: 1;
+            }
+
+            .fc-month-week {
+                display: grid;
+                grid-template-columns: repeat(7, 1fr);
+                flex: 1;
+                min-height: 100px;
+            }
+
+            .fc-month-day {
+                background: var(--fc-background);
+                border-right: 1px solid var(--fc-border-color);
+                border-bottom: 1px solid var(--fc-border-color);
+                padding: 4px;
+                min-height: 80px;
+                cursor: pointer;
+                transition: background-color 0.15s ease;
+                display: flex;
+                flex-direction: column;
+            }
+
+            .fc-month-day:hover {
+                background: var(--fc-background-hover);
+            }
+
+            .fc-month-day:last-child {
+                border-right: none;
+            }
+
+            .fc-month-day.other-month {
+                background: var(--fc-background-alt);
+            }
+
+            .fc-month-day.other-month .fc-day-number {
+                color: var(--fc-text-light);
+            }
+
+            .fc-month-day.today {
+                background: rgba(37, 99, 235, 0.05);
+            }
+
+            .fc-month-day.today .fc-day-number {
+                background: var(--fc-primary-color);
+                color: white;
+                border-radius: 50%;
+                width: 24px;
+                height: 24px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .fc-day-number {
+                font-size: 13px;
+                font-weight: 500;
+                color: var(--fc-text-color);
+                padding: 2px 4px;
+                margin-bottom: 4px;
+            }
+
+            .fc-day-events {
+                display: flex;
+                flex-direction: column;
+                gap: 2px;
+                flex: 1;
+                overflow: hidden;
+            }
+
+            .fc-event {
+                font-size: 11px;
+                padding: 2px 6px;
+                border-radius: 3px;
+                color: white;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                cursor: pointer;
+                transition: transform 0.1s ease;
+            }
+
+            .fc-event:hover {
+                transform: scale(1.02);
+            }
+
+            .fc-more-events {
+                font-size: 10px;
+                color: var(--fc-text-light);
+                padding: 2px 4px;
+                font-weight: 500;
+            }
+
+            /* Week View Styles (inline rendering for Locker Service compatibility) */
+            .fc-week-view {
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+                background: var(--fc-background);
+            }
+
+            /* Day View Styles (inline rendering for Locker Service compatibility) */
+            .fc-day-view {
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+                background: var(--fc-background);
+            }
         `;
   }
   template() {
@@ -7376,38 +7517,118 @@ class se extends T {
         `;
   }
   renderView() {
-    if (!this.currentView)
-      return "<div>Loading view...</div>";
-    const e = `forcecal-${this.currentView}`;
-    return `<${e} id="calendar-view"></${e}>`;
+    return '<div id="calendar-view-container"></div>';
   }
   afterRender() {
-    var i;
-    const e = this.$("#calendar-view");
-    if (console.log("[ForceCalendar] afterRender - viewElement:", e), console.log("[ForceCalendar] afterRender - stateManager:", !!this.stateManager), e && this.stateManager) {
-      console.log("[ForceCalendar] viewElement.constructor.name:", (i = e.constructor) == null ? void 0 : i.name), console.log("[ForceCalendar] viewElement methods:", Object.getOwnPropertyNames(Object.getPrototypeOf(e))), typeof customElements < "u" && customElements.upgrade && (console.log("[ForceCalendar] Forcing custom element upgrade"), customElements.upgrade(e));
-      const a = this._registryId || (this._registryId = "fc-" + Math.random().toString(36).substr(2, 9));
-      window.__forceCalendarRegistry = window.__forceCalendarRegistry || {}, window.__forceCalendarRegistry[a] = this.stateManager, e.setAttribute("data-state-registry", a), console.log("[ForceCalendar] Set registry ID:", a), e._checkRegistry ? (console.log("[ForceCalendar] Calling _checkRegistry directly"), e._checkRegistry()) : e.setStateManager && (console.log("[ForceCalendar] Calling setStateManager directly"), e.setStateManager(this.stateManager));
-    } else
-      console.log("[ForceCalendar] Could not set stateManager - viewElement:", !!e, "stateManager:", !!this.stateManager);
-    this.$$("[data-action]").forEach((a) => {
-      this.addListener(a, "click", this.handleNavigation);
-    }), this.$$("[data-view]").forEach((a) => {
-      this.addListener(a, "click", this.handleViewChange);
+    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");
+        return;
+      }
+      this._currentViewInstance && (this._currentViewInstance.cleanup && this._currentViewInstance.cleanup(), this._viewUnsubscribe && (this._viewUnsubscribe(), this._viewUnsubscribe = null)), console.log("[ForceCalendar] Creating view for:", this.currentView);
+      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((a, n) => {
+          (a.events !== (n == null ? void 0 : n.events) || a.currentDate !== (n == null ? void 0 : n.currentDate)) && i && i.render && i.render();
+        }));
+      } catch (i) {
+        console.error("[ForceCalendar] Error creating/rendering view:", i);
+      }
+    }
+    this.$$("[data-action]").forEach((i) => {
+      this.addListener(i, "click", this.handleNavigation);
+    }), this.$$("[data-view]").forEach((i) => {
+      this.addListener(i, "click", this.handleViewChange);
     });
     const t = this.$("#event-modal"), s = this.$("#create-event-btn");
     s && t && this.addListener(s, "click", () => {
       t.open(/* @__PURE__ */ new Date());
-    }), this.addListener(this.shadowRoot, "day-click", (a) => {
-      t && t.open(a.detail.date);
-    }), t && this.addListener(t, "save", (a) => {
-      const n = a.detail, r = window.crypto && typeof window.crypto.randomUUID == "function" ? window.crypto.randomUUID() : Math.random().toString(36).substring(2, 15);
+    }), this.addListener(this.shadowRoot, "day-click", (i) => {
+      t && t.open(i.detail.date);
+    }), t && this.addListener(t, "save", (i) => {
+      const a = i.detail, n = window.crypto && typeof window.crypto.randomUUID == "function" ? window.crypto.randomUUID() : Math.random().toString(36).substring(2, 15);
       this.stateManager.addEvent({
-        id: r,
-        ...n
+        id: n,
+        ...a
       });
     });
   }
+  _createViewRenderer(e) {
+    return {
+      stateManager: null,
+      container: null,
+      _listeners: [],
+      cleanup() {
+        this._listeners.forEach(({ element: t, event: s, handler: i }) => {
+          t.removeEventListener(s, i);
+        }), this._listeners = [];
+      },
+      addListener(t, s, i) {
+        t.addEventListener(s, i), this._listeners.push({ element: t, event: s, handler: i });
+      },
+      render() {
+        if (console.log("[ViewRenderer] render called, container:", !!this.container, "stateManager:", !!this.stateManager), !this.container || !this.stateManager) return;
+        const t = this.stateManager.getViewData();
+        if (console.log("[ViewRenderer] viewData:", t), console.log("[ViewRenderer] viewData.weeks:", t == null ? void 0 : t.weeks), !t || !t.weeks) {
+          this.container.innerHTML = '<div style="padding: 20px; text-align: center; background: #fee; color: #c00;">No viewData.weeks available. viewData keys: ' + (t ? Object.keys(t).join(", ") : "null") + "</div>";
+          return;
+        }
+        this.cleanup();
+        const s = this.stateManager.getState().config;
+        console.log("[ViewRenderer] Rendering month view with", t.weeks.length, "weeks");
+        const i = this._renderMonthView(t, s);
+        console.log("[ViewRenderer] HTML length:", i.length), this.container.innerHTML = i, console.log("[ViewRenderer] innerHTML set, container children:", this.container.children.length), this._attachEventHandlers();
+      },
+      _renderMonthView(t, s) {
+        const i = s.weekStartsOn || 0, a = [];
+        for (let r = 0; r < 7; r++) {
+          const o = (i + r) % 7;
+          a.push(["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][o]);
+        }
+        let n = `
+                    <div class="fc-month-view" style="display: flex; flex-direction: column; height: 100%; min-height: 400px; background: #fff; border: 1px solid #e5e7eb;">
+                        <div class="fc-month-header" style="display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid #e5e7eb; background: #f9fafb;">
+                            ${a.map((r) => `<div class="fc-month-header-cell" style="padding: 12px 8px; text-align: center; font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase;">${r}</div>`).join("")}
+                        </div>
+                        <div class="fc-month-body" style="display: flex; flex-direction: column; flex: 1;">
+                `;
+        return t.weeks.forEach((r) => {
+          n += '<div class="fc-month-week" style="display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; min-height: 80px;">', r.days.forEach((o) => {
+            const c = !o.isCurrentMonth, l = o.isToday, d = c ? "#f3f4f6" : "#fff", h = c ? "#9ca3af" : "#111827", p = l ? "background: #2563eb; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;" : "", v = o.events || [], w = v.slice(0, 3), x = v.length - 3;
+            n += `
+                            <div class="fc-month-day" data-date="${o.date}" style="background: ${d}; 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: ${h}; padding: 2px 4px; margin-bottom: 4px; ${p}">${o.dayOfMonth}</div>
+                                <div class="fc-day-events" style="display: flex; flex-direction: column; gap: 2px;">
+                                    ${w.map((k) => `
+                                        <div class="fc-event" data-event-id="${k.id}" style="background-color: ${k.backgroundColor || "#2563eb"}; font-size: 11px; padding: 2px 6px; border-radius: 3px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;">
+                                            ${k.title}
+                                        </div>
+                                    `).join("")}
+                                    ${x > 0 ? `<div class="fc-more-events" style="font-size: 10px; color: #6b7280; padding: 2px 4px; font-weight: 500;">+${x} more</div>` : ""}
+                                </div>
+                            </div>
+                        `;
+          }), n += "</div>";
+        }), n += "</div></div>", n;
+      },
+      _attachEventHandlers() {
+        const t = this.stateManager;
+        this.container.querySelectorAll(".fc-month-day").forEach((s) => {
+          this.addListener(s, "click", (i) => {
+            const a = new Date(s.dataset.date);
+            t.selectDate(a);
+          });
+        }), this.container.querySelectorAll(".fc-event").forEach((s) => {
+          this.addListener(s, "click", (i) => {
+            i.stopPropagation();
+            const a = s.dataset.eventId, n = t.getEvents().find((r) => r.id === a);
+            n && t.selectEvent(n);
+          });
+        });
+      }
+    };
+  }
   handleNavigation(e) {
     switch (e.currentTarget.dataset.action) {
       case "today":
@@ -7429,14 +7650,14 @@ class se extends T {
     const s = this.stateManager.state.config.locale;
     switch (t) {
       case "month":
-        return v.formatDate(e, "month", s);
+        return b.formatDate(e, "month", s);
       case "week":
-        const i = v.startOfWeek(e), a = v.endOfWeek(e);
-        return v.formatDateRange(i, a, s);
+        const i = b.startOfWeek(e), a = b.endOfWeek(e);
+        return b.formatDateRange(i, a, s);
       case "day":
-        return v.formatDate(e, "long", s);
+        return b.formatDate(e, "long", s);
       default:
-        return v.formatDate(e, "month", s);
+        return b.formatDate(e, "month", s);
     }
   }
   getIcon(e) {
@@ -7495,13 +7716,13 @@ typeof window < "u" && typeof customElements < "u" && console.log("Force Calenda
 export {
   T as BaseComponent,
   C as DOMUtils,
-  v as DateUtils,
+  b as DateUtils,
   ee as DayView,
   G as EventBus,
   se as ForceCalendar,
   J as MonthView,
   Q as StateManager,
-  p as StyleUtils,
+  y as StyleUtils,
   X as WeekView,
   m as eventBus
 };