@forcecalendar/interface 1.0.17 → 1.0.18

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

@@ -1,7 +1,7 @@
-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 I = (p, e, t) => P(p, typeof e != "symbol" ? e + "" : e, t);
-class $ extends HTMLElement {
+var Y = Object.defineProperty;
+var j = (u, e, t) => e in u ? Y(u, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[e] = t;
+var z = (u, e, t) => j(u, 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 U {
+class W {
   constructor() {
     this.timezones = {
       // UTC
@@ -673,7 +673,7 @@ class U {
     };
   }
 }
-let E = null;
+let C = null;
 class S {
   /**
    * Get the shared singleton instance of TimezoneManager
@@ -681,17 +681,17 @@ class S {
    * @returns {TimezoneManager} The shared instance
    */
   static getInstance() {
-    return E || (E = new S()), E;
+    return C || (C = new S()), C;
   }
   /**
    * Reset the singleton instance (useful for testing)
    * @private
    */
   static _resetInstance() {
-    E && E.clearCache(), E = null;
+    C && C.clearCache(), C = null;
   }
   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 W(), 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 M {
+class D {
   /**
    * Normalize event data
    * @param {import('../../types.js').EventData} data - Raw event data
@@ -1041,25 +1041,25 @@ class M {
     borderColor: l = null,
     textColor: d = null,
     recurring: h = !1,
-    recurrenceRule: g = null,
-    timeZone: w = null,
-    endTimeZone: f = null,
-    status: k = "confirmed",
-    visibility: b = "public",
-    organizer: T = null,
-    attendees: A = [],
-    reminders: _ = [],
-    category: L,
+    recurrenceRule: m = null,
+    timeZone: b = null,
+    endTimeZone: x = null,
+    status: A = "confirmed",
+    visibility: k = "public",
+    organizer: M = null,
+    attendees: $ = [],
+    reminders: I = [],
+    category: R,
     // Support singular category (no default)
-    categories: F,
+    categories: B,
     // Support plural categories (no default)
-    attachments: O = [],
-    conferenceData: H = null,
-    metadata: R = {},
-    ...B
+    attachments: V = [],
+    conferenceData: N = null,
+    metadata: P = {},
+    ...U
     // Capture any extra properties
   }) {
-    const m = M.normalize({
+    const g = D.normalize({
       id: e,
       title: t,
       start: s,
@@ -1072,25 +1072,25 @@ class M {
       borderColor: l,
       textColor: d,
       recurring: h,
-      recurrenceRule: g,
-      timeZone: w,
-      endTimeZone: f,
-      status: k,
-      visibility: b,
-      organizer: T,
-      attendees: A,
-      reminders: _,
-      category: L,
+      recurrenceRule: m,
+      timeZone: b,
+      endTimeZone: x,
+      status: A,
+      visibility: k,
+      organizer: M,
+      attendees: $,
+      reminders: I,
+      category: R,
       // Pass category to normalize
-      categories: F,
+      categories: B,
       // Pass categories to normalize
-      attachments: O,
-      conferenceData: H,
-      metadata: R,
-      ...B
+      attachments: V,
+      conferenceData: N,
+      metadata: P,
+      ...U
       // Pass any extra properties
     });
-    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();
+    D.validate(g), this.id = g.id, this.title = g.title, this._timezoneManager = S.getInstance(), 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
@@ -1180,7 +1180,7 @@ class M {
    * @throws {Error} If otherEvent is not an Event instance or doesn't have start/end
    */
   overlaps(e) {
-    if (e instanceof M)
+    if (e instanceof D)
       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 M {
    * @returns {Event} New Event instance with updated properties
    */
   clone(e = {}) {
-    return new M({
+    return new D({
       id: this.id,
       title: this.title,
       start: new Date(this.start),
@@ -1264,7 +1264,7 @@ class M {
    * @returns {Event} New Event instance
    */
   static fromObject(e) {
-    return new M(e);
+    return new D(e);
   }
   /**
    * Compare events for equality
@@ -1272,7 +1272,7 @@ class M {
    * @returns {boolean} True if events are equal
    */
   equals(e) {
-    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;
+    return e instanceof D ? 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 ============
   /**
@@ -1531,7 +1531,7 @@ class M {
     return this.conferenceData !== null;
   }
 }
-let u = class D {
+let f = class w {
   /**
    * Get the start of a day
    * @param {Date} date - The date
@@ -1567,7 +1567,7 @@ let u = class D {
    * @returns {Date}
    */
   static endOfWeek(e, t = 0) {
-    const s = D.startOfWeek(e, t);
+    const s = w.startOfWeek(e, t);
     return s.setDate(s.getDate() + 6), s.setHours(23, 59, 59, 999), s;
   }
   /**
@@ -1619,7 +1619,7 @@ let u = class D {
    * @returns {Date}
    */
   static addWeeks(e, t) {
-    return D.addDays(e, t * 7);
+    return w.addDays(e, t * 7);
   }
   /**
    * Add months to a date
@@ -1701,7 +1701,7 @@ let u = class D {
    * @returns {boolean}
    */
   static isSameWeek(e, t, s = 0) {
-    const i = D.startOfWeek(e, s), r = D.startOfWeek(t, s);
+    const i = w.startOfWeek(e, s), r = w.startOfWeek(t, s);
     return i.toDateString() === r.toDateString();
   }
   /**
@@ -1739,7 +1739,7 @@ let u = class D {
    * @returns {number}
    */
   static differenceInWeeks(e, t) {
-    return Math.floor(D.differenceInDays(e, t) / 7);
+    return Math.floor(w.differenceInDays(e, t) / 7);
   }
   /**
    * Get the difference in months between two dates
@@ -1795,7 +1795,7 @@ let u = class D {
    * @returns {string}
    */
   static getMonthName(e, t = "en-US", s = "long") {
-    return D.format(e, t, { month: s });
+    return w.format(e, t, { month: s });
   }
   /**
    * Get day name
@@ -1805,7 +1805,7 @@ let u = class D {
    * @returns {string}
    */
   static getDayName(e, t = "en-US", s = "long") {
-    return D.format(e, t, { weekday: s });
+    return w.format(e, t, { weekday: s });
   }
   /**
    * Format time
@@ -1815,7 +1815,7 @@ let u = class D {
    * @returns {string}
    */
   static formatTime(e, t = "en-US", s = !1) {
-    return D.format(e, t, {
+    return w.format(e, t, {
       hour: "numeric",
       minute: "2-digit",
       hour12: !s
@@ -1837,7 +1837,7 @@ let u = class D {
    * @returns {Date}
    */
   static setTime(e, t) {
-    const s = new Date(e), { hours: i, minutes: r } = D.parseTime(t);
+    const s = new Date(e), { hours: i, minutes: r } = w.parseTime(t);
     return s.setHours(i, r, 0, 0), s;
   }
   /**
@@ -1916,7 +1916,7 @@ let u = class D {
    * @returns {boolean}
    */
   static isDST(e, t) {
-    const s = new Date(e.getFullYear(), 0, 1), i = new Date(e.getFullYear(), 6, 1), r = D.getTimezoneOffset(s, t), n = D.getTimezoneOffset(i, t), a = D.getTimezoneOffset(e, t);
+    const s = new Date(e.getFullYear(), 0, 1), i = new Date(e.getFullYear(), 6, 1), r = w.getTimezoneOffset(s, t), n = w.getTimezoneOffset(i, t), a = w.getTimezoneOffset(e, t);
     return Math.max(r, n) === a;
   }
   /**
@@ -1927,9 +1927,9 @@ let u = class D {
    * @returns {Date}
    */
   static addHoursWithDST(e, t, s) {
-    const i = new Date(e), r = D.getTimezoneOffset(e, s);
+    const i = new Date(e), r = w.getTimezoneOffset(e, s);
     i.setTime(i.getTime() + t * 60 * 60 * 1e3);
-    const n = D.getTimezoneOffset(i, s);
+    const n = w.getTimezoneOffset(i, s);
     if (r !== n) {
       const a = (n - r) * 6e4;
       i.setTime(i.getTime() + a);
@@ -1948,11 +1948,11 @@ let u = class D {
    * @returns {Date}
    */
   static createInTimeZone(e, t, s, i = 0, r = 0, n = 0, a) {
-    const o = `${e}-${String(t + 1).padStart(2, "0")}-${String(s).padStart(2, "0")}`, c = `${String(i).padStart(2, "0")}:${String(r).padStart(2, "0")}:${String(n).padStart(2, "0")}`, l = /* @__PURE__ */ new Date(`${o}T${c}`), d = D.getTimezoneOffset(l, a), 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(r).padStart(2, "0")}:${String(n).padStart(2, "0")}`, l = /* @__PURE__ */ new Date(`${o}T${c}`), d = w.getTimezoneOffset(l, a), h = l.getTime() + d * 6e4;
     return new Date(h);
   }
 };
-class Y {
+class Z {
   /**
    * Parse an RRULE string into a structured rule object
    * @param {string|Object} rrule - RRULE string or rule object
@@ -2206,7 +2206,7 @@ class Y {
     return e.count ? r += `, ${e.count} time${e.count > 1 ? "s" : ""}` : e.until && (r += `, until ${e.until.toLocaleDateString()}`), r;
   }
 }
-class N {
+class q {
   /**
    * Expand a recurring event into individual occurrences
    * @param {import('./Event.js').Event} event - The recurring event
@@ -2222,31 +2222,31 @@ class N {
     const n = this.parseRule(e.recurrenceRule), a = [], o = e.end - e.start, c = r || e.timeZone || "UTC", l = S.getInstance();
     let d = new Date(e.start), h = 0;
     n.until && n.until < s && (s = n.until);
-    let g = l.getTimezoneOffset(d, c), w = 0;
-    const f = 3;
+    let m = l.getTimezoneOffset(d, c), b = 0;
+    const x = 3;
     for (; d <= s && h < i; ) {
       if (d >= t) {
-        const b = new Date(d), T = new Date(d.getTime() + o), A = l.getTimezoneOffset(b, c);
-        if (A !== g) {
-          const _ = g - A;
-          b.setMinutes(b.getMinutes() + _), T.setMinutes(T.getMinutes() + _);
+        const k = new Date(d), M = new Date(d.getTime() + o), $ = l.getTimezoneOffset(k, c);
+        if ($ !== m) {
+          const I = m - $;
+          k.setMinutes(k.getMinutes() + I), M.setMinutes(M.getMinutes() + I);
         }
-        g = A, this.isException(b, n, e.id) || a.push({
-          start: b,
-          end: T,
+        m = $, this.isException(k, n, e.id) || a.push({
+          start: k,
+          end: M,
           recurringEventId: e.id,
           timezone: c,
           originalStart: e.start
         });
       }
-      const k = d.getTime();
-      if (d = this.getNextOccurrence(d, n, c), h++, d.getTime() === k) {
-        if (w++, w >= f) {
+      const A = d.getTime();
+      if (d = this.getNextOccurrence(d, n, c), h++, d.getTime() === A) {
+        if (b++, b >= x) {
           console.warn("RecurrenceEngine: Date not advancing, breaking to prevent infinite loop");
           break;
         }
       } else
-        w = 0;
+        b = 0;
       if (n.count && h >= n.count)
         break;
     }
@@ -2258,7 +2258,7 @@ class N {
    * @returns {import('../../types.js').RecurrenceRule} Parsed rule object
    */
   static parseRule(e) {
-    return Y.parse(e);
+    return Z.parse(e);
   }
   /**
    * Calculate the next occurrence based on the rule
@@ -2446,7 +2446,7 @@ class N {
     return r && (n = `${r === -1 ? "Last" : ["", "1st", "2nd", "3rd", "4th", "5th"][r] || `${r}th`} ${n}`), n;
   }
 }
-class z {
+class L {
   /**
    * Create a new LRU Cache
    * @param {number} capacity - Maximum number of items in cache
@@ -2533,7 +2533,7 @@ class z {
     return this.cache.size;
   }
 }
-class j {
+class K {
   constructor(e = {}) {
     this.config = {
       checkInterval: 3e4,
@@ -2751,7 +2751,7 @@ class j {
     this.stopMonitoring(), this.caches.clear();
   }
 }
-class W {
+class G {
   constructor(e = {}) {
     this.config = {
       enableCache: !0,
@@ -2766,7 +2766,7 @@ class W {
       enableAdaptiveMemory: !0,
       // Enable adaptive memory management
       ...e
-    }, 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({
+    }, this.eventCache = new L(this.config.cacheCapacity), this.queryCache = new L(Math.floor(this.config.cacheCapacity / 2)), this.dateRangeCache = new L(Math.floor(this.config.cacheCapacity / 4)), this.config.enableAdaptiveMemory && (this.memoryManager = new K({
       checkInterval: 3e4,
       memoryThreshold: 0.75,
       criticalThreshold: 0.9
@@ -3056,7 +3056,7 @@ class W {
     this.cleanupTimer && (clearInterval(this.cleanupTimer), this.cleanupTimer = null), this.batchTimer && (clearTimeout(this.batchTimer), this.batchTimer = null), this.eventCache.clear(), this.queryCache.clear(), this.dateRangeCache.clear(), this.lazyIndexes.clear(), this.pendingIndexes.clear();
   }
 }
-class Z {
+class Q {
   /**
    * Create a new ConflictDetector
    * @param {import('../events/EventStore.js').EventStore} eventStore - Event store instance
@@ -3343,7 +3343,7 @@ class Z {
     return i >= n && r <= a;
   }
 }
-class q {
+class J {
   constructor(e = {}) {
     this.events = /* @__PURE__ */ new Map(), this.indices = {
       /** @type {Map<string, Set<string>>} UTC Date string -> Set of event IDs */
@@ -3356,7 +3356,7 @@ class q {
       byCategory: /* @__PURE__ */ new Map(),
       /** @type {Map<string, Set<string>>} Status -> Set of event IDs */
       byStatus: /* @__PURE__ */ new Map()
-    }, this.timezoneManager = S.getInstance(), this.defaultTimezone = e.timezone || this.timezoneManager.getSystemTimezone(), this.optimizer = new W(e.performance), this.conflictDetector = new Z(this), this.isBatchMode = !1, this.batchNotifications = [], this.batchBackup = null, this.version = 0, this.listeners = /* @__PURE__ */ new Set();
+    }, this.timezoneManager = S.getInstance(), this.defaultTimezone = e.timezone || this.timezoneManager.getSystemTimezone(), this.optimizer = new G(e.performance), this.conflictDetector = new Q(this), this.isBatchMode = !1, this.batchNotifications = [], this.batchBackup = null, this.version = 0, this.listeners = /* @__PURE__ */ new Set();
   }
   /**
    * Add an event to the store
@@ -3366,7 +3366,7 @@ class q {
    */
   addEvent(e) {
     return this.optimizer.measure("addEvent", () => {
-      if (e instanceof M || (e = new M(e)), this.events.has(e.id))
+      if (e instanceof D || (e = new D(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",
@@ -3478,13 +3478,13 @@ class q {
    * @returns {Event[]} Events occurring on the date, sorted by start time
    */
   getEventsForDate(e, t = null) {
-    t = t || this.defaultTimezone, u.getLocalDateString(e);
+    t = t || this.defaultTimezone, f.getLocalDateString(e);
     const s = /* @__PURE__ */ new Set(), i = new Date(e);
     for (let l = -1; l <= 1; l++) {
       const d = new Date(i);
       d.setDate(d.getDate() + l);
-      const h = u.getLocalDateString(d), g = this.indices.byDate.get(h);
-      g && g.forEach((w) => s.add(w));
+      const h = f.getLocalDateString(d), m = this.indices.byDate.get(h);
+      m && m.forEach((b) => s.add(b));
     }
     const r = `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}`, n = this.indices.byMonth.get(r);
     n && n.forEach((l) => s.add(l));
@@ -3495,13 +3495,13 @@ class q {
     for (const l of s) {
       const d = this.events.get(l);
       if (d) {
-        const h = d.getStartInTimezone(t), g = d.getEndInTimezone(t);
-        h <= c && g >= o && a.push(d);
+        const h = d.getStartInTimezone(t), m = d.getEndInTimezone(t);
+        h <= c && m >= o && a.push(d);
       }
     }
     return a.sort((l, d) => {
-      const h = l.getStartInTimezone(t), g = d.getStartInTimezone(t), w = h - g;
-      return w !== 0 ? w : d.duration - l.duration;
+      const h = l.getStartInTimezone(t), m = d.getStartInTimezone(t), b = h - m;
+      return b !== 0 ? b : d.duration - l.duration;
     });
   }
   /**
@@ -3512,14 +3512,14 @@ class q {
    * @returns {Event[]} Array of overlapping events
    */
   getOverlappingEvents(e, t, s = null) {
-    const i = [], r = u.startOfDay(e), n = u.endOfDay(t), a = u.getDateRange(r, n), o = /* @__PURE__ */ new Set();
+    const i = [], r = f.startOfDay(e), n = f.endOfDay(t), a = f.getDateRange(r, n), o = /* @__PURE__ */ new Set();
     return a.forEach((c) => {
-      const l = u.getLocalDateString(c);
+      const l = f.getLocalDateString(c);
       (this.indices.byDate.get(l) || /* @__PURE__ */ new Set()).forEach((h) => {
         if (!o.has(h) && h !== s) {
           o.add(h);
-          const g = this.events.get(h);
-          g && g.overlaps({ start: e, end: t }) && i.push(g);
+          const m = this.events.get(h);
+          m && m.overlaps({ start: e, end: t }) && i.push(m);
         }
       });
     }), i.sort((c, l) => c.start - l.start);
@@ -3629,7 +3629,7 @@ class q {
       return [e];
     i = i || this.defaultTimezone;
     const r = e.timeZone || i;
-    return N.expandEvent(e, t, s).map((a, o) => e.clone({
+    return q.expandEvent(e, t, s).map((a, o) => e.clone({
       id: `${e.id}_occurrence_${o}`,
       start: a.start,
       end: a.end,
@@ -3680,9 +3680,9 @@ class q {
       this._indexEventLazy(e);
       return;
     }
-    const t = e.getStartInTimezone(e.timeZone), s = e.getEndInTimezone(e.endTimeZone || e.timeZone), i = u.startOfDay(t), r = u.endOfDay(s);
-    u.getDateRange(i, r).forEach((o) => {
-      const c = u.getLocalDateString(o);
+    const t = e.getStartInTimezone(e.timeZone), s = e.getEndInTimezone(e.endTimeZone || e.timeZone), i = f.startOfDay(t), r = f.endOfDay(s);
+    f.getDateRange(i, r).forEach((o) => {
+      const c = f.getLocalDateString(o);
       this.indices.byDate.has(c) || this.indices.byDate.set(c, /* @__PURE__ */ new Set()), this.indices.byDate.get(c).add(e.id);
     }), `${i.getFullYear()}${String(i.getMonth() + 1).padStart(2, "0")}`, `${r.getFullYear()}${String(r.getMonth() + 1).padStart(2, "0")}`;
     const a = new Date(i.getFullYear(), i.getMonth(), 1);
@@ -3700,20 +3700,20 @@ class q {
    */
   _indexEventLazy(e) {
     this.optimizer.createLazyIndexMarkers(e);
-    const t = e.getStartInTimezone(e.timeZone), s = e.getEndInTimezone(e.endTimeZone || e.timeZone), i = u.startOfDay(t), r = u.endOfDay(s), n = new Date(i);
-    if (n.setDate(n.getDate() + 7), u.getDateRange(
+    const t = e.getStartInTimezone(e.timeZone), s = e.getEndInTimezone(e.endTimeZone || e.timeZone), i = f.startOfDay(t), r = f.endOfDay(s), n = new Date(i);
+    if (n.setDate(n.getDate() + 7), f.getDateRange(
       i,
       n < r ? n : r
     ).forEach((c) => {
-      const l = u.getLocalDateString(c);
+      const l = f.getLocalDateString(c);
       this.indices.byDate.has(l) || this.indices.byDate.set(l, /* @__PURE__ */ new Set()), this.indices.byDate.get(l).add(e.id);
     }), r > n) {
       const c = new Date(r);
-      c.setDate(c.getDate() - 7), u.getDateRange(
+      c.setDate(c.getDate() - 7), f.getDateRange(
         c > i ? c : i,
         r
       ).forEach((d) => {
-        const h = u.getLocalDateString(d);
+        const h = f.getLocalDateString(d);
         this.indices.byDate.has(h) || this.indices.byDate.set(h, /* @__PURE__ */ new Set()), this.indices.byDate.get(h).add(e.id);
       });
     }
@@ -4023,7 +4023,7 @@ class q {
     return t;
   }
 }
-let K = class {
+let X = class {
   /**
    * Create a new StateManager instance
    * @param {Partial<import('../../types.js').CalendarState>} [initialState={}] - Initial state values
@@ -4404,7 +4404,7 @@ let K = class {
           }
   }
 };
-class G {
+class ee {
   /**
    * Create a new Calendar instance
    * @param {import('../../types.js').CalendarConfig} [config={}] - Configuration options
@@ -4425,7 +4425,7 @@ class G {
         end: "17:00"
       },
       ...e
-    }, this.eventStore = new q({ timezone: this.config.timeZone }), this.state = new K({
+    }, this.eventStore = new J({ timezone: this.config.timeZone }), this.state = new X({
       view: this.config.view,
       currentDate: this.config.date,
       weekStartsOn: this.config.weekStartsOn,
@@ -4516,7 +4516,7 @@ class G {
    * @returns {import('../events/Event.js').Event} The added event
    */
   addEvent(e) {
-    !(e instanceof M) && !e.timeZone && (e = { ...e, timeZone: this.config.timeZone });
+    !(e instanceof D) && !e.timeZone && (e = { ...e, timeZone: this.config.timeZone });
     const t = this.eventStore.addEvent(e);
     return this._emit("eventAdd", { event: t }), t;
   }
@@ -4714,32 +4714,32 @@ class G {
    * @private
    */
   _getMonthViewData(e) {
-    const t = e.getFullYear(), s = e.getMonth(), i = this.state.get("weekStartsOn"), r = this.state.get("fixedWeekCount"), n = new Date(t, s, 1), a = new Date(t, s + 1, 0), o = u.startOfWeek(n, i), c = [];
+    const t = e.getFullYear(), s = e.getMonth(), i = this.state.get("weekStartsOn"), r = this.state.get("fixedWeekCount"), n = new Date(t, s, 1), a = new Date(t, s + 1, 0), o = f.startOfWeek(n, i), c = [];
     let l = new Date(o);
-    const d = r ? 6 : Math.ceil((a.getDate() + u.getDayOfWeek(n, i)) / 7);
+    const d = r ? 6 : Math.ceil((a.getDate() + f.getDayOfWeek(n, i)) / 7);
     for (let h = 0; h < d; h++) {
-      const g = {
-        weekNumber: u.getWeekNumber(l),
+      const m = {
+        weekNumber: f.getWeekNumber(l),
         days: []
       };
-      for (let w = 0; w < 7; w++) {
-        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: T,
-          events: this.getEventsForDate(f)
-        }), l = u.addDays(l, 1);
+      for (let b = 0; b < 7; b++) {
+        const x = new Date(l), A = x.getMonth() === s, k = f.isToday(x), M = x.getDay() === 0 || x.getDay() === 6;
+        m.days.push({
+          date: x,
+          dayOfMonth: x.getDate(),
+          isCurrentMonth: A,
+          isToday: k,
+          isWeekend: M,
+          events: this.getEventsForDate(x)
+        }), l = f.addDays(l, 1);
       }
-      c.push(g);
+      c.push(m);
     }
     return {
       type: "month",
       year: t,
       month: s,
-      monthName: u.getMonthName(e, this.state.get("locale")),
+      monthName: f.getMonthName(e, this.state.get("locale")),
       weeks: c,
       startDate: o,
       endDate: new Date(l.getTime() - 1)
@@ -4751,15 +4751,15 @@ class G {
    * @private
    */
   _getWeekViewData(e) {
-    const t = this.state.get("weekStartsOn"), s = u.startOfWeek(e, t), i = u.endOfWeek(e, t), r = [], n = new Date(s);
+    const t = this.state.get("weekStartsOn"), s = f.startOfWeek(e, t), i = f.endOfWeek(e, t), r = [], n = new Date(s);
     for (let a = 0; a < 7; a++) {
       const o = new Date(n);
       r.push({
         date: o,
         dayOfMonth: o.getDate(),
         dayOfWeek: o.getDay(),
-        dayName: u.getDayName(o, this.state.get("locale")),
-        isToday: u.isToday(o),
+        dayName: f.getDayName(o, this.state.get("locale")),
+        isToday: f.isToday(o),
         isWeekend: o.getDay() === 0 || o.getDay() === 6,
         events: this.getEventsForDate(o),
         // Add overlap groups for positioning overlapping events
@@ -4769,7 +4769,7 @@ class G {
     }
     return {
       type: "week",
-      weekNumber: u.getWeekNumber(s),
+      weekNumber: f.getWeekNumber(s),
       startDate: s,
       endDate: i,
       days: r
@@ -4787,15 +4787,15 @@ class G {
       const o = new Date(e);
       o.setHours(n + 1, 0, 0, 0), r.push({
         hour: n,
-        time: u.formatTime(a, this.state.get("locale")),
+        time: f.formatTime(a, this.state.get("locale")),
         events: i.filter((c) => c.start < o && c.end > a)
       });
     }
     return {
       type: "day",
       date: e,
-      dayName: u.getDayName(e, this.state.get("locale")),
-      isToday: u.isToday(e),
+      dayName: f.getDayName(e, this.state.get("locale")),
+      isToday: f.isToday(e),
       allDayEvents: s,
       hours: r
     };
@@ -4819,8 +4819,8 @@ class G {
     });
     const n = Array.from(r.values()).sort((a, o) => a.date - o.date).map((a) => ({
       ...a,
-      dayName: u.getDayName(a.date, this.state.get("locale")),
-      isToday: u.isToday(a.date)
+      dayName: f.getDayName(a.date, this.state.get("locale")),
+      isToday: f.isToday(a.date)
     }));
     return {
       type: "list",
@@ -4925,7 +4925,7 @@ class G {
     }), this.plugins.clear(), this.views.clear(), this._emit("destroy");
   }
 }
-class Q {
+class te {
   constructor() {
     this.events = /* @__PURE__ */ new Map(), this.wildcardHandlers = /* @__PURE__ */ new Set();
   }
@@ -5067,10 +5067,10 @@ class Q {
     return e;
   }
 }
-const y = new Q();
-class J {
+const p = new te();
+class se {
   constructor(e = {}) {
-    this.calendar = new G({
+    this.calendar = new ee({
       view: e.view || "month",
       date: e.date || /* @__PURE__ */ new Date(),
       weekStartsOn: e.weekStartsOn ?? 0,
@@ -5147,51 +5147,51 @@ class J {
       (i) => e[i] !== t[i]
     );
     s.forEach((i) => {
-      y.emit(`state:${i}:changed`, {
+      p.emit(`state:${i}:changed`, {
         oldValue: e[i],
         newValue: t[i],
         state: t
       });
-    }), s.length > 0 && y.emit("state:changed", { oldState: e, newState: t, changedKeys: s });
+    }), s.length > 0 && p.emit("state:changed", { oldState: e, newState: t, changedKeys: s });
   }
   // Calendar operations
   setView(e) {
-    this.calendar.setView(e), this.setState({ view: e }), y.emit("view:changed", { view: e });
+    this.calendar.setView(e), this.setState({ view: e }), p.emit("view:changed", { view: e });
   }
   getView() {
     return this.state.view;
   }
   setDate(e) {
-    this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), y.emit("date:changed", { date: this.state.currentDate });
+    this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), p.emit("date:changed", { date: this.state.currentDate });
   }
   getCurrentDate() {
     return this.state.currentDate;
   }
   // Navigation
   next() {
-    this.calendar.next(), this.setState({ currentDate: this.calendar.getCurrentDate() }), y.emit("navigation:next", { date: this.state.currentDate });
+    this.calendar.next(), this.setState({ currentDate: this.calendar.getCurrentDate() }), p.emit("navigation:next", { date: this.state.currentDate });
   }
   previous() {
-    this.calendar.previous(), this.setState({ currentDate: this.calendar.getCurrentDate() }), y.emit("navigation:previous", { date: this.state.currentDate });
+    this.calendar.previous(), this.setState({ currentDate: this.calendar.getCurrentDate() }), p.emit("navigation:previous", { date: this.state.currentDate });
   }
   today() {
-    this.calendar.today(), this.setState({ currentDate: this.calendar.getCurrentDate() }), y.emit("navigation:today", { date: this.state.currentDate });
+    this.calendar.today(), this.setState({ currentDate: this.calendar.getCurrentDate() }), p.emit("navigation:today", { date: this.state.currentDate });
   }
   goToDate(e) {
-    this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), y.emit("navigation:goto", { date: this.state.currentDate });
+    this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), p.emit("navigation:goto", { date: this.state.currentDate });
   }
   // Event management
   addEvent(e) {
     const t = this.calendar.addEvent(e);
-    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);
+    return t ? (this._syncEventsFromCore(), p.emit("event:added", { event: t }), t) : (console.error("Failed to add event to calendar"), p.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);
-    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);
+    return s ? (this._syncEventsFromCore(), p.emit("event:updated", { event: s }), s) : (console.error(`Failed to update event: ${e}`), p.emit("event:error", { action: "update", eventId: e, updates: t, error: "Event not found in calendar" }), null);
   }
   deleteEvent(e) {
-    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);
+    return this._syncEventsFromCore({ silent: !0 }), this.calendar.removeEvent(e) ? (this._syncEventsFromCore(), p.emit("event:deleted", { eventId: e }), !0) : (console.error(`Failed to delete event: ${e}`), p.emit("event:error", { action: "delete", eventId: e, error: "Event not found" }), !1);
   }
   getEvents() {
     return this.calendar.getEvents() || [];
@@ -5242,20 +5242,20 @@ class J {
   }
   // Selection management
   selectEvent(e) {
-    this.setState({ selectedEvent: e }), y.emit("event:selected", { event: e });
+    this.setState({ selectedEvent: e }), p.emit("event:selected", { event: e });
   }
   selectEventById(e) {
     const t = this.state.events.find((s) => s.id === e);
     t && this.selectEvent(t);
   }
   deselectEvent() {
-    this.setState({ selectedEvent: null }), y.emit("event:deselected", {});
+    this.setState({ selectedEvent: null }), p.emit("event:deselected", {});
   }
   selectDate(e) {
-    this.setState({ selectedDate: e }), y.emit("date:selected", { date: e });
+    this.setState({ selectedDate: e }), p.emit("date:selected", { date: e });
   }
   deselectDate() {
-    this.setState({ selectedDate: null }), y.emit("date:deselected", {});
+    this.setState({ selectedDate: null }), p.emit("date:deselected", {});
   }
   // Utility methods
   isToday(e) {
@@ -5275,7 +5275,7 @@ class J {
   }
   // Error handling
   setError(e) {
-    this.setState({ error: e }), e && y.emit("error", { error: e });
+    this.setState({ error: e }), e && p.emit("error", { error: e });
   }
   clearError() {
     this.setState({ error: null });
@@ -5289,7 +5289,7 @@ class J {
     this.subscribers.clear(), this._subscriberIds && (this._subscriberIds.clear(), this._subscriberIds = null), this.state = null, this.calendar = null;
   }
 }
-class x extends u {
+class v extends f {
   /**
    * Format date for display
    */
@@ -5403,7 +5403,7 @@ class x extends u {
     return r && (r.toLowerCase() === "pm" && n < 12 ? o = n + 12 : r.toLowerCase() === "am" && n === 12 && (o = 0)), s.setHours(o, a || 0, 0, 0), s;
   }
 }
-class C {
+class T {
   /**
    * Create element with attributes and children
    */
@@ -5598,7 +5598,7 @@ class C {
     return e.addEventListener("keydown", r), s == null || s.focus(), () => e.removeEventListener("keydown", r);
   }
 }
-class v {
+class y {
   /**
    * Get CSS variable value
    */
@@ -5935,7 +5935,7 @@ class v {
 /**
  * Default theme colors
  */
-I(v, "colors", {
+z(y, "colors", {
   primary: "#3B82F6",
   // Modern Blue
   secondary: "#64748B",
@@ -5968,7 +5968,7 @@ I(v, "colors", {
 }), /**
  * Common CSS variables
  */
-I(v, "cssVariables", {
+z(y, "cssVariables", {
   // "Pro" Palette - Functional & Sharp
   "--fc-primary-color": "#2563EB",
   // International Blue (Focus)
@@ -6036,7 +6036,7 @@ I(v, "cssVariables", {
 }), /**
  * Get responsive breakpoints
  */
-I(v, "breakpoints", {
+z(y, "breakpoints", {
   xs: "320px",
   sm: "576px",
   md: "768px",
@@ -6044,7 +6044,479 @@ I(v, "breakpoints", {
   xl: "1200px",
   "2xl": "1400px"
 });
-class X extends $ {
+class O {
+  /**
+   * @param {HTMLElement} container - The DOM element to render into
+   * @param {StateManager} stateManager - The state manager instance
+   */
+  constructor(e, t) {
+    this.container = e, this.stateManager = t, this._listeners = [], this._scrolled = !1;
+  }
+  /**
+   * Render the view into the container
+   * Must be implemented by subclasses
+   */
+  render() {
+    throw new Error("render() must be implemented by subclass");
+  }
+  /**
+   * Clean up event listeners
+   */
+  cleanup() {
+    this._listeners.forEach(({ element: e, event: t, handler: s }) => {
+      e.removeEventListener(t, s);
+    }), this._listeners = [];
+  }
+  /**
+   * Add an event listener with automatic cleanup tracking
+   * @param {HTMLElement} element
+   * @param {string} event
+   * @param {Function} handler
+   */
+  addListener(e, t, s) {
+    const i = s.bind(this);
+    e.addEventListener(t, i), this._listeners.push({ element: e, event: t, handler: i });
+  }
+  /**
+   * Escape HTML to prevent XSS
+   * @param {string} str
+   * @returns {string}
+   */
+  escapeHTML(e) {
+    return e == null ? "" : T.escapeHTML(String(e));
+  }
+  /**
+   * Check if a date is today
+   * @param {Date} date
+   * @returns {boolean}
+   */
+  isToday(e) {
+    const t = /* @__PURE__ */ new Date();
+    return e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
+  }
+  /**
+   * Check if two dates are the same day
+   * @param {Date} date1
+   * @param {Date} date2
+   * @returns {boolean}
+   */
+  isSameDay(e, t) {
+    return e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
+  }
+  /**
+   * Format hour for display (e.g., "9 AM", "2 PM")
+   * @param {number} hour - Hour in 24-hour format (0-23)
+   * @returns {string}
+   */
+  formatHour(e) {
+    const t = e >= 12 ? "PM" : "AM";
+    return `${e % 12 || 12} ${t}`;
+  }
+  /**
+   * Format time for display (e.g., "9 AM", "2:30 PM")
+   * @param {Date} date
+   * @returns {string}
+   */
+  formatTime(e) {
+    const t = e.getHours(), s = e.getMinutes(), i = t >= 12 ? "PM" : "AM", r = t % 12 || 12;
+    return s === 0 ? `${r} ${i}` : `${r}:${s.toString().padStart(2, "0")} ${i}`;
+  }
+  /**
+   * Get contrasting text color for a background color
+   * Uses WCAG luminance formula
+   * @param {string} bgColor - Hex color string
+   * @returns {string} 'black' or 'white'
+   */
+  getContrastingTextColor(e) {
+    if (!e || typeof e != "string") return "white";
+    const t = e.charAt(0) === "#" ? e.substring(1) : e;
+    if (!/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(t))
+      return "white";
+    const s = t.length === 3 ? t[0] + t[0] + t[1] + t[1] + t[2] + t[2] : t, i = parseInt(s.substring(0, 2), 16), r = parseInt(s.substring(2, 4), 16), n = parseInt(s.substring(4, 6), 16);
+    if (isNaN(i) || isNaN(r) || isNaN(n))
+      return "white";
+    const o = [i / 255, r / 255, n / 255].map((l) => l <= 0.03928 ? l / 12.92 : Math.pow((l + 0.055) / 1.055, 2.4));
+    return 0.2126 * o[0] + 0.7152 * o[1] + 0.0722 * o[2] > 0.179 ? "black" : "white";
+  }
+  /**
+   * Render the "now" indicator line for time-based views
+   * @returns {string} HTML string
+   */
+  renderNowIndicator() {
+    const e = /* @__PURE__ */ new Date();
+    return `<div class="fc-now-indicator" style="position: absolute; left: 0; right: 0; top: ${e.getHours() * 60 + e.getMinutes()}px; height: 2px; background: #dc2626; z-index: 15; pointer-events: none;"></div>`;
+  }
+  /**
+   * Render a timed event block
+   * @param {Object} event - Event object
+   * @param {Object} options - Rendering options
+   * @returns {string} HTML string
+   */
+  renderTimedEvent(e, t = {}) {
+    const { compact: s = !0 } = t, i = new Date(e.start), r = new Date(e.end), n = i.getHours() * 60 + i.getMinutes(), a = Math.max((r - i) / (1e3 * 60), s ? 20 : 30), o = e.backgroundColor || "#2563eb", c = s ? "4px 8px" : "8px 12px", l = s ? "11px" : "13px", d = s ? "2px" : "12px", h = s ? "2px" : "24px", m = s ? "4px" : "6px";
+    return `
+            <div class="fc-event fc-timed-event" data-event-id="${this.escapeHTML(e.id)}"
+                 style="position: absolute; top: ${n}px; height: ${a}px;
+                        left: ${d}; right: ${h};
+                        background-color: ${o}; border-radius: ${m};
+                        padding: ${c}; font-size: ${l};
+                        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;">
+                    ${this.escapeHTML(e.title)}
+                </div>
+                <div style="font-size: ${s ? "10px" : "11px"}; opacity: 0.9;">
+                    ${this.formatTime(i)}${s ? "" : " - " + this.formatTime(r)}
+                </div>
+            </div>
+        `;
+  }
+  /**
+   * Attach common event handlers for day/event clicks
+   */
+  attachCommonEventHandlers() {
+    this.container.querySelectorAll(".fc-event").forEach((e) => {
+      this.addListener(e, "click", (t) => {
+        t.stopPropagation();
+        const s = e.dataset.eventId, i = this.stateManager.getEvents().find((r) => r.id === s);
+        i && this.stateManager.selectEvent(i);
+      });
+    });
+  }
+}
+class E extends O {
+  constructor(e, t) {
+    super(e, t), this.maxEventsToShow = 3;
+  }
+  render() {
+    if (!this.container || !this.stateManager) return;
+    const e = this.stateManager.getViewData();
+    if (!e || !e.weeks) {
+      this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">No data available for month view.</div>';
+      return;
+    }
+    this.cleanup();
+    const t = this.stateManager.getState().config, s = this._renderMonthView(e, t);
+    this.container.innerHTML = s, this._attachEventHandlers();
+  }
+  _renderMonthView(e, t) {
+    const s = t.weekStartsOn || 0;
+    let r = `
+            <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;">
+                    ${this._getDayNames(s).map((n) => `<div class="fc-month-header-cell" style="padding: 12px 8px; text-align: center; font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase;">${n}</div>`).join("")}
+                </div>
+                <div class="fc-month-body" style="display: flex; flex-direction: column; flex: 1;">
+        `;
+    return e.weeks.forEach((n) => {
+      r += this._renderWeek(n);
+    }), r += "</div></div>", r;
+  }
+  _getDayNames(e) {
+    const t = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], s = [];
+    for (let i = 0; i < 7; i++) {
+      const r = (e + i) % 7;
+      s.push(t[r]);
+    }
+    return s;
+  }
+  _renderWeek(e) {
+    let t = '<div class="fc-month-week" style="display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; min-height: 80px;">';
+    return e.days.forEach((s) => {
+      t += this._renderDay(s);
+    }), t += "</div>", t;
+  }
+  _renderDay(e) {
+    const t = !e.isCurrentMonth, s = e.isToday, i = t ? "#f3f4f6" : "#fff", r = t ? "#9ca3af" : "#111827", n = s ? "background: #2563eb; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;" : "", a = e.events || [], o = a.slice(0, this.maxEventsToShow), c = a.length - this.maxEventsToShow;
+    return `
+            <div class="fc-month-day" data-date="${e.date}"
+                 style="background: ${i}; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; padding: 4px; min-height: 80px; cursor: pointer; display: flex; flex-direction: column;">
+                <div class="fc-day-number" style="font-size: 13px; font-weight: 500; color: ${r}; padding: 2px 4px; margin-bottom: 4px; ${n}">
+                    ${e.dayOfMonth}
+                </div>
+                <div class="fc-day-events" style="display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: hidden;">
+                    ${o.map((l) => this._renderEvent(l)).join("")}
+                    ${c > 0 ? `<div class="fc-more-events" style="font-size: 10px; color: #6b7280; padding: 2px 4px; font-weight: 500;">+${c} more</div>` : ""}
+                </div>
+            </div>
+        `;
+  }
+  _renderEvent(e) {
+    const t = e.backgroundColor || "#2563eb";
+    return `
+            <div class="fc-event" data-event-id="${this.escapeHTML(e.id)}"
+                 style="background-color: ${t}; font-size: 11px; padding: 2px 6px; border-radius: 3px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;">
+                ${this.escapeHTML(e.title)}
+            </div>
+        `;
+  }
+  _attachEventHandlers() {
+    this.container.querySelectorAll(".fc-month-day").forEach((e) => {
+      this.addListener(e, "click", (t) => {
+        if (t.target.closest(".fc-event")) return;
+        const s = new Date(e.dataset.date);
+        this.stateManager.selectDate(s);
+      });
+    }), this.attachCommonEventHandlers();
+  }
+}
+class H extends O {
+  constructor(e, t) {
+    super(e, t), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
+  }
+  render() {
+    if (!this.container || !this.stateManager) return;
+    const e = this.stateManager.getViewData();
+    if (!e || !e.days || e.days.length === 0) {
+      this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">No data available for week view.</div>';
+      return;
+    }
+    this.cleanup();
+    const t = this.stateManager.getState().config, s = this._renderWeekView(e, t);
+    this.container.innerHTML = s, this._attachEventHandlers(), this._scrollToCurrentTime();
+  }
+  _renderWeekView(e, t) {
+    const s = e.days, i = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], r = Array.from({ length: 24 }, (a, o) => o), n = s.map((a) => {
+      const o = new Date(a.date), c = a.events || [];
+      return {
+        ...a,
+        date: o,
+        dayName: i[o.getDay()],
+        dayOfMonth: o.getDate(),
+        isToday: this.isToday(o),
+        timedEvents: c.filter((l) => !l.allDay),
+        allDayEvents: c.filter((l) => l.allDay)
+      };
+    });
+    return `
+            <div class="fc-week-view" style="display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden;">
+                ${this._renderHeader(n)}
+                ${this._renderAllDayRow(n)}
+                ${this._renderTimeGrid(n, r)}
+            </div>
+        `;
+  }
+  _renderHeader(e) {
+    return `
+            <div class="fc-week-header" style="display: grid; grid-template-columns: 60px repeat(7, 1fr); border-bottom: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0;">
+                <div style="border-right: 1px solid #e5e7eb;"></div>
+                ${e.map((t) => `
+                    <div style="padding: 12px 8px; text-align: center; border-right: 1px solid #e5e7eb;">
+                        <div style="font-size: 10px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.1em;">
+                            ${t.dayName}
+                        </div>
+                        <div style="font-size: 16px; font-weight: 500; margin-top: 4px; ${t.isToday ? "background: #dc2626; color: white; border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;" : "color: #111827;"}">
+                            ${t.dayOfMonth}
+                        </div>
+                    </div>
+                `).join("")}
+            </div>
+        `;
+  }
+  _renderAllDayRow(e) {
+    return `
+            <div class="fc-all-day-row" style="display: grid; grid-template-columns: 60px repeat(7, 1fr); border-bottom: 1px solid #e5e7eb; background: #fafafa; min-height: 32px; flex-shrink: 0;">
+                <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>
+                ${e.map((t) => `
+                    <div class="fc-all-day-cell" data-date="${t.date.toISOString()}" style="border-right: 1px solid #e5e7eb; padding: 4px; display: flex; flex-direction: column; gap: 2px;">
+                        ${t.allDayEvents.map((s) => `
+                            <div class="fc-event fc-all-day-event" data-event-id="${this.escapeHTML(s.id)}"
+                                 style="background-color: ${s.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(s.title)}
+                            </div>
+                        `).join("")}
+                    </div>
+                `).join("")}
+            </div>
+        `;
+  }
+  _renderTimeGrid(e, t) {
+    return `
+            <div id="week-scroll-container" class="fc-time-grid-container" style="flex: 1; overflow-y: auto; overflow-x: hidden; position: relative;">
+                <div class="fc-time-grid" style="display: grid; grid-template-columns: 60px repeat(7, 1fr); position: relative; height: ${this.totalHeight}px;">
+                    ${this._renderTimeGutter(t)}
+                    ${e.map((s) => this._renderDayColumn(s, t)).join("")}
+                </div>
+            </div>
+        `;
+  }
+  _renderTimeGutter(e) {
+    return `
+            <div class="fc-time-gutter" style="border-right: 1px solid #e5e7eb; background: #fafafa;">
+                ${e.map((t) => `
+                    <div style="height: ${this.hourHeight}px; font-size: 10px; color: #6b7280; text-align: right; padding-right: 8px; font-weight: 500;">
+                        ${t === 0 ? "" : this.formatHour(t)}
+                    </div>
+                `).join("")}
+            </div>
+        `;
+  }
+  _renderDayColumn(e, t) {
+    return `
+            <div class="fc-week-day-column" data-date="${e.date.toISOString()}" style="border-right: 1px solid #e5e7eb; position: relative; cursor: pointer;">
+                <!-- Hour grid lines -->
+                ${t.map(() => `<div style="height: ${this.hourHeight}px; border-bottom: 1px solid #f3f4f6;"></div>`).join("")}
+
+                <!-- Now indicator for today -->
+                ${e.isToday ? this.renderNowIndicator() : ""}
+
+                <!-- Timed events -->
+                ${e.timedEvents.map((s) => this.renderTimedEvent(s, { compact: !0 })).join("")}
+            </div>
+        `;
+  }
+  _attachEventHandlers() {
+    this.container.querySelectorAll(".fc-week-day-column").forEach((e) => {
+      this.addListener(e, "click", (t) => {
+        if (t.target.closest(".fc-event")) return;
+        const s = new Date(e.dataset.date), i = e.getBoundingClientRect(), r = this.container.querySelector("#week-scroll-container"), n = t.clientY - i.top + (r ? r.scrollTop : 0);
+        s.setHours(Math.floor(n / this.hourHeight), Math.floor(n % this.hourHeight / (this.hourHeight / 60)), 0, 0), this.stateManager.selectDate(s);
+      });
+    }), this.attachCommonEventHandlers();
+  }
+  _scrollToCurrentTime() {
+    if (this._scrolled) return;
+    const e = this.container.querySelector("#week-scroll-container");
+    e && (e.scrollTop = 8 * this.hourHeight - 50, this._scrolled = !0);
+  }
+}
+class F extends O {
+  constructor(e, t) {
+    super(e, t), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
+  }
+  render() {
+    if (!this.container || !this.stateManager) return;
+    const e = this.stateManager.getViewData();
+    if (!e) {
+      this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">No data available for day view.</div>';
+      return;
+    }
+    this.cleanup();
+    const t = this.stateManager.getState().config, s = this._renderDayView(e, t);
+    this.container.innerHTML = s, this._attachEventHandlers(), this._scrollToCurrentTime();
+  }
+  _renderDayView(e, t) {
+    var d, h;
+    const s = ((h = (d = this.stateManager) == null ? void 0 : d.getState()) == null ? void 0 : h.currentDate) || /* @__PURE__ */ new Date(), i = this._extractDayData(e, s);
+    if (!i)
+      return '<div style="padding: 20px; text-align: center; color: #666;">No data available for day view.</div>';
+    const { dayDate: r, dayName: n, isToday: a, allDayEvents: o, timedEvents: c } = i, l = Array.from({ length: 24 }, (m, b) => b);
+    return `
+            <div class="fc-day-view" style="display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden;">
+                ${this._renderHeader(r, n, a)}
+                ${this._renderAllDayRow(o, r)}
+                ${this._renderTimeGrid(c, a, r, l)}
+            </div>
+        `;
+  }
+  _extractDayData(e, t) {
+    let s, i, r, n, a;
+    const o = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+    if (e.type === "day" && e.date)
+      if (s = new Date(e.date), i = e.dayName || o[s.getDay()], r = e.isToday !== void 0 ? e.isToday : this.isToday(s), n = e.allDayEvents || [], e.hours && Array.isArray(e.hours)) {
+        const c = /* @__PURE__ */ new Map();
+        e.hours.forEach((l) => {
+          (l.events || []).forEach((d) => {
+            c.has(d.id) || c.set(d.id, d);
+          });
+        }), a = Array.from(c.values());
+      } else
+        a = [];
+    else if (e.days && e.days.length > 0) {
+      const c = e.days.find((d) => this.isSameDay(new Date(d.date), t)) || e.days[0];
+      s = new Date(c.date), i = o[s.getDay()], r = this.isToday(s);
+      const l = c.events || [];
+      n = l.filter((d) => d.allDay), a = l.filter((d) => !d.allDay);
+    } else
+      return null;
+    return { dayDate: s, dayName: i, isToday: r, allDayEvents: n, timedEvents: a };
+  }
+  _renderHeader(e, t, s) {
+    return `
+            <div class="fc-day-header" style="display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0;">
+                <div style="border-right: 1px solid #e5e7eb;"></div>
+                <div style="padding: 16px 24px;">
+                    <div style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.1em;">
+                        ${t}
+                    </div>
+                    <div style="font-size: 24px; font-weight: 600; margin-top: 4px; ${s ? "color: #dc2626;" : "color: #111827;"}">
+                        ${e.getDate()}
+                    </div>
+                </div>
+            </div>
+        `;
+  }
+  _renderAllDayRow(e, t) {
+    return `
+            <div class="fc-all-day-row" style="display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid #e5e7eb; background: #fafafa; min-height: 36px; flex-shrink: 0;">
+                <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 class="fc-all-day-cell" data-date="${t.toISOString()}" style="padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 4px;">
+                    ${e.map((s) => `
+                        <div class="fc-event fc-all-day-event" data-event-id="${this.escapeHTML(s.id)}"
+                             style="background-color: ${s.backgroundColor || "#2563eb"}; font-size: 12px; padding: 4px 8px; border-radius: 4px; color: white; cursor: pointer; font-weight: 500;">
+                            ${this.escapeHTML(s.title)}
+                        </div>
+                    `).join("")}
+                </div>
+            </div>
+        `;
+  }
+  _renderTimeGrid(e, t, s, i) {
+    return `
+            <div id="day-scroll-container" class="fc-time-grid-container" style="flex: 1; overflow-y: auto; overflow-x: hidden; position: relative;">
+                <div class="fc-time-grid" style="display: grid; grid-template-columns: 60px 1fr; position: relative; height: ${this.totalHeight}px;">
+                    ${this._renderTimeGutter(i)}
+                    ${this._renderDayColumn(e, t, s, i)}
+                </div>
+            </div>
+        `;
+  }
+  _renderTimeGutter(e) {
+    return `
+            <div class="fc-time-gutter" style="border-right: 1px solid #e5e7eb; background: #fafafa;">
+                ${e.map((t) => `
+                    <div style="height: ${this.hourHeight}px; font-size: 11px; color: #6b7280; text-align: right; padding-right: 12px; font-weight: 500;">
+                        ${t === 0 ? "" : this.formatHour(t)}
+                    </div>
+                `).join("")}
+            </div>
+        `;
+  }
+  _renderDayColumn(e, t, s, i) {
+    return `
+            <div class="fc-day-column" data-date="${s.toISOString()}" style="position: relative; cursor: pointer;">
+                <!-- Hour grid lines -->
+                ${i.map(() => `<div style="height: ${this.hourHeight}px; border-bottom: 1px solid #f3f4f6;"></div>`).join("")}
+
+                <!-- Now indicator for today -->
+                ${t ? this.renderNowIndicator() : ""}
+
+                <!-- Timed events -->
+                ${e.map((r) => this.renderTimedEvent(r, { compact: !1 })).join("")}
+            </div>
+        `;
+  }
+  _attachEventHandlers() {
+    this.container.querySelectorAll(".fc-day-column").forEach((e) => {
+      this.addListener(e, "click", (t) => {
+        if (t.target.closest(".fc-event")) return;
+        const s = new Date(e.dataset.date), i = e.getBoundingClientRect(), r = this.container.querySelector("#day-scroll-container"), n = t.clientY - i.top + (r ? r.scrollTop : 0);
+        s.setHours(Math.floor(n / this.hourHeight), Math.floor(n % this.hourHeight / (this.hourHeight / 60)), 0, 0), this.stateManager.selectDate(s);
+      });
+    }), this.attachCommonEventHandlers();
+  }
+  _scrollToCurrentTime() {
+    if (this._scrolled) return;
+    const e = this.container.querySelector("#day-scroll-container");
+    e && (e.scrollTop = 8 * this.hourHeight - 50, this._scrolled = !0);
+  }
+}
+class ie extends _ {
   constructor() {
     super(), this._stateManager = null, this.viewData = null, this.config = {
       maxEventsToShow: 3
@@ -6389,7 +6861,7 @@ class X extends $ {
   renderHeader() {
     const { config: e } = this.stateManager.getState(), t = [], s = e.weekStartsOn || 0;
     for (let i = 0; i < 7; i++) {
-      const r = (s + i) % 7, n = x.getDayAbbreviation(r, e.locale);
+      const r = (s + i) % 7, n = v.getDayAbbreviation(r, e.locale);
       t.push(`<div class="month-header-cell">${n}</div>`);
     }
     return `
@@ -6424,7 +6896,7 @@ class X extends $ {
   renderDay(e) {
     const { date: t, dayOfMonth: s, isOtherMonth: i, isToday: r, isSelected: n, isWeekend: a, events: o = [] } = e, c = s, l = ["month-day"];
     i && l.push("other-month"), r && l.push("today"), n && l.push("selected"), a && l.push("weekend");
-    const d = o.slice(0, this.config.maxEventsToShow), h = o.length - this.config.maxEventsToShow, g = d.map((f) => this.renderEvent(f)).join(""), w = h > 0 ? `<div class="more-events">+${h} more</div>` : "";
+    const d = o.slice(0, this.config.maxEventsToShow), h = o.length - this.config.maxEventsToShow, m = d.map((x) => this.renderEvent(x)).join(""), b = h > 0 ? `<div class="more-events">+${h} more</div>` : "";
     return `
             <div class="${l.join(" ")}"
                  data-date="${t.toISOString()}"
@@ -6433,8 +6905,8 @@ class X extends $ {
                     <span class="day-number">${c}</span>
                 </div>
                 <div class="day-events">
-                    ${g}
-                    ${w}
+                    ${m}
+                    ${b}
                 </div>
             </div>
         `;
@@ -6443,19 +6915,19 @@ class X extends $ {
     const { title: t, start: s, allDay: i, backgroundColor: r, textColor: n } = e;
     let a = "";
     if (r) {
-      const l = v.sanitizeColor(r), d = v.sanitizeColor(n, "white");
+      const l = y.sanitizeColor(r), d = y.sanitizeColor(n, "white");
       a += `background-color: ${l}; color: ${d};`;
     }
     let o = "";
-    !i && s && (o = x.formatTime(new Date(s), !1, !1));
+    !i && s && (o = v.formatTime(new Date(s), !1, !1));
     const c = ["event-item"];
     return i && c.push("all-day"), `
             <div class="${c.join(" ")}"
                  style="${a}"
                  data-event-id="${e.id}"
-                 title="${C.escapeHTML(t)}">
+                 title="${T.escapeHTML(t)}">
                 ${o ? `<span class="event-time">${o}</span>` : ""}
-                <span class="event-title">${C.escapeHTML(t)}</span>
+                <span class="event-title">${T.escapeHTML(t)}</span>
             </div>
         `;
   }
@@ -6487,7 +6959,7 @@ class X extends $ {
     this.unsubscribe && this.unsubscribe();
   }
 }
-class ee extends $ {
+class re extends _ {
   constructor() {
     super(), this._stateManager = null, this.viewData = null, this.hours = Array.from({ length: 24 }, (e, t) => t), this._registryCheckInterval = null;
   }
@@ -6553,7 +7025,7 @@ class ee extends $ {
         return {
           ...s,
           date: i,
-          isToday: x.isToday(i),
+          isToday: v.isToday(i),
           timedEvents: (s.events || []).filter((r) => !r.allDay),
           allDayEvents: (s.events || []).filter((r) => r.allDay)
         };
@@ -6750,7 +7222,7 @@ class ee extends $ {
                     <div class="time-gutter-header"></div>
                     ${this.viewData.days.map((e) => `
                         <div class="day-column-header ${e.isToday ? "is-today" : ""}">
-                            <span class="day-name">${x.getDayAbbreviation(e.date.getDay())}</span>
+                            <span class="day-name">${v.getDayAbbreviation(e.date.getDay())}</span>
                             <span class="day-number">${e.date.getDate()}</span>
                         </div>
                     `).join("")}
@@ -6773,7 +7245,7 @@ class ee extends $ {
                     <div class="time-gutter">
                         ${this.hours.map((e) => `
                             <div class="time-slot-label">
-                                ${e === 0 ? "" : x.formatTime((/* @__PURE__ */ new Date()).setHours(e, 0), !1)}
+                                ${e === 0 ? "" : v.formatTime((/* @__PURE__ */ new Date()).setHours(e, 0), !1)}
                             </div>
                         `).join("")}
                     </div>
@@ -6789,23 +7261,23 @@ class ee extends $ {
         ` : '<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(), r = (s - t) / (1e3 * 60), n = i, a = Math.max(r, 20), o = v.sanitizeColor(e.backgroundColor), c = v.sanitizeColor(v.getContrastColor(o), "white");
+    const t = new Date(e.start), s = new Date(e.end), i = t.getHours() * 60 + t.getMinutes(), r = (s - t) / (1e3 * 60), n = i, a = Math.max(r, 20), o = y.sanitizeColor(e.backgroundColor), c = y.sanitizeColor(y.getContrastColor(o), "white");
     return `
             <div class="event-container"
                  style="top: ${n}px; height: ${a}px; background-color: ${o}; color: ${c};"
                  data-event-id="${e.id}">
-                <span class="event-title">${C.escapeHTML(e.title)}</span>
-                <span class="event-time">${x.formatTime(t)}</span>
+                <span class="event-title">${T.escapeHTML(e.title)}</span>
+                <span class="event-time">${v.formatTime(t)}</span>
             </div>
         `;
   }
   renderAllDayEvent(e) {
-    const t = v.sanitizeColor(e.backgroundColor), s = v.sanitizeColor(v.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;"
                  data-event-id="${e.id}">
-                ${C.escapeHTML(e.title)}
+                ${T.escapeHTML(e.title)}
             </div>
         `;
   }
@@ -6832,7 +7304,7 @@ class ee extends $ {
     this.unsubscribe && this.unsubscribe();
   }
 }
-class te extends $ {
+class ne extends _ {
   constructor() {
     super(), this._stateManager = null, this.viewData = null, this.hours = Array.from({ length: 24 }, (e, t) => t), this._registryCheckInterval = null;
   }
@@ -6876,7 +7348,7 @@ class te extends $ {
   updateSelection(e, t) {
     const s = this.shadowRoot.querySelector(".day-column");
     if (!s) return;
-    ((r) => r && x.isSameDay(r, new Date(s.dataset.date)))(e) ? s.classList.add("selected") : s.classList.remove("selected");
+    ((r) => r && v.isSameDay(r, new Date(s.dataset.date)))(e) ? s.classList.add("selected") : s.classList.remove("selected");
   }
   loadViewData() {
     if (!this.stateManager) return;
@@ -6889,10 +7361,10 @@ class te extends $ {
     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((a) => x.isSameDay(new Date(a.date), i)) || e.days[0];
+      t = e.days.find((a) => v.isSameDay(new Date(a.date), i)) || e.days[0];
     else if (e.weeks && Array.isArray(e.weeks) && e.weeks.length > 0) {
       const a = e.weeks.flatMap((o) => o.days || []);
-      t = a.find((o) => x.isSameDay(new Date(o.date), i)) || a[0];
+      t = a.find((o) => v.isSameDay(new Date(o.date), i)) || a[0];
     } else e.date && (t = e);
     if (!t) return null;
     const r = new Date(t.date);
@@ -6901,7 +7373,7 @@ class te extends $ {
       day: {
         ...t,
         date: r,
-        isToday: x.isToday(r),
+        isToday: v.isToday(r),
         timedEvents: (t.events || []).filter((a) => !a.allDay),
         allDayEvents: (t.events || []).filter((a) => a.allDay)
       }
@@ -7079,7 +7551,7 @@ class te extends $ {
     var i, r, 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 = (r = (i = this.stateManager) == null ? void 0 : i.state) == null ? void 0 : r.config) == null ? void 0 : n.locale) || "en-US", s = x.formatDate(e.date, "day", t).split(" ")[0];
+    const { day: e } = this.viewData, t = ((n = (r = (i = this.stateManager) == null ? void 0 : i.state) == null ? void 0 : r.config) == null ? void 0 : n.locale) || "en-US", s = v.formatDate(e.date, "day", t).split(" ")[0];
     return `
             <div class="day-view">
                 <div class="day-header">
@@ -7105,7 +7577,7 @@ class te extends $ {
                     <div class="time-gutter">
                         ${this.hours.map((a) => `
                             <div class="time-slot-label">
-                                ${a === 0 ? "" : x.formatTime((/* @__PURE__ */ new Date()).setHours(a, 0), !1)}
+                                ${a === 0 ? "" : v.formatTime((/* @__PURE__ */ new Date()).setHours(a, 0), !1)}
                             </div>
                         `).join("")}
                     </div>
@@ -7119,23 +7591,23 @@ class te extends $ {
         `;
   }
   renderTimedEvent(e) {
-    const t = new Date(e.start), s = new Date(e.end), i = t.getHours() * 60 + t.getMinutes(), r = (s - t) / (1e3 * 60), n = i, a = Math.max(r, 30), o = v.sanitizeColor(e.backgroundColor), c = v.sanitizeColor(v.getContrastColor(o), "white");
+    const t = new Date(e.start), s = new Date(e.end), i = t.getHours() * 60 + t.getMinutes(), r = (s - t) / (1e3 * 60), n = i, a = Math.max(r, 30), o = y.sanitizeColor(e.backgroundColor), c = y.sanitizeColor(y.getContrastColor(o), "white");
     return `
             <div class="event-container"
                  style="top: ${n}px; height: ${a}px; background-color: ${o}; color: ${c};"
                  data-event-id="${e.id}">
-                <span class="event-title">${C.escapeHTML(e.title)}</span>
-                <span class="event-time">${x.formatTime(t)} - ${x.formatTime(s)}</span>
+                <span class="event-title">${T.escapeHTML(e.title)}</span>
+                <span class="event-time">${v.formatTime(t)} - ${v.formatTime(s)}</span>
             </div>
         `;
   }
   renderAllDayEvent(e) {
-    const t = v.sanitizeColor(e.backgroundColor), s = v.sanitizeColor(v.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;"
                  data-event-id="${e.id}">
-                ${C.escapeHTML(e.title)}
+                ${T.escapeHTML(e.title)}
             </div>
         `;
   }
@@ -7162,7 +7634,7 @@ class te extends $ {
     this.unsubscribe && this.unsubscribe();
   }
 }
-class se extends $ {
+class ae extends _ {
   constructor() {
     super(), this._isVisible = !1, this._cleanupFocusTrap = null, this.config = {
       title: "New Event",
@@ -7192,8 +7664,8 @@ class se extends $ {
   }
   getStyles() {
     return `
-            ${v.getBaseStyles()}
-            ${v.getButtonStyles()}
+            ${y.getBaseStyles()}
+            ${y.getButtonStyles()}
 
             :host {
                 display: none;
@@ -7436,7 +7908,7 @@ class se extends $ {
     });
   }
   open(e = /* @__PURE__ */ new Date()) {
-    this.hasAttribute("open") || this.setAttribute("open", ""), this.titleGroup.classList.remove("has-error"), this.endGroup.classList.remove("has-error"), this._formData.start = e, this._formData.end = new Date(e.getTime() + this.config.defaultDuration * 60 * 1e3), this._formData.title = "", this._formData.color = this.config.colors[0].color, this.startInput && (this.titleInput.value = "", this.startInput.value = this.formatDateForInput(this._formData.start), this.endInput.value = this.formatDateForInput(this._formData.end), this.updateColorSelection(), this._cleanupFocusTrap = C.trapFocus(this.modalContent));
+    this.hasAttribute("open") || this.setAttribute("open", ""), this.titleGroup.classList.remove("has-error"), this.endGroup.classList.remove("has-error"), this._formData.start = e, this._formData.end = new Date(e.getTime() + this.config.defaultDuration * 60 * 1e3), this._formData.title = "", this._formData.color = this.config.colors[0].color, this.startInput && (this.titleInput.value = "", this.startInput.value = this.formatDateForInput(this._formData.start), this.endInput.value = this.formatDateForInput(this._formData.end), this.updateColorSelection(), this._cleanupFocusTrap = T.trapFocus(this.modalContent));
   }
   close() {
     this.removeAttribute("open"), this._cleanupFocusTrap && (this._cleanupFocusTrap(), this._cleanupFocusTrap = null);
@@ -7465,11 +7937,11 @@ class se extends $ {
     this._cleanupFocusTrap && this._cleanupFocusTrap(), this._handleKeyDown && (window.removeEventListener("keydown", this._handleKeyDown), this._handleKeyDown = null, this._keydownListenerAdded = !1);
   }
 }
-customElements.get("forcecal-event-form") || customElements.define("forcecal-event-form", se);
-customElements.get("forcecal-month") || customElements.define("forcecal-month", X);
-customElements.get("forcecal-week") || customElements.define("forcecal-week", ee);
-customElements.get("forcecal-day") || customElements.define("forcecal-day", te);
-class ie extends $ {
+customElements.get("forcecal-event-form") || customElements.define("forcecal-event-form", ae);
+customElements.get("forcecal-month") || customElements.define("forcecal-month", ie);
+customElements.get("forcecal-week") || customElements.define("forcecal-week", re);
+customElements.get("forcecal-day") || customElements.define("forcecal-day", ne);
+class oe extends _ {
   static get observedAttributes() {
     return ["view", "date", "locale", "timezone", "week-starts-on", "height"];
   }
@@ -7484,16 +7956,16 @@ class ie extends $ {
       timeZone: this.getAttribute("timezone") || Intl.DateTimeFormat().resolvedOptions().timeZone,
       weekStartsOn: parseInt(this.getAttribute("week-starts-on") || "0")
     };
-    this.stateManager = new J(e), this.stateManager.subscribe(this.handleStateChange.bind(this)), this.setupEventListeners();
+    this.stateManager = new se(e), this.stateManager.subscribe(this.handleStateChange.bind(this)), this.setupEventListeners();
   }
   setupEventListeners() {
-    y.on("navigation:*", (e, t) => {
+    p.on("navigation:*", (e, t) => {
       this.emit("calendar-navigate", { action: t.split(":")[1], ...e });
-    }), y.on("view:changed", (e) => {
+    }), p.on("view:changed", (e) => {
       this.emit("calendar-view-change", e);
-    }), y.on("event:*", (e, t) => {
+    }), p.on("event:*", (e, t) => {
       this.emit(`calendar-event-${t.split(":")[1]}`, e);
-    }), y.on("date:selected", (e) => {
+    }), p.on("date:selected", (e) => {
       this.emit("calendar-date-select", e);
     });
   }
@@ -7536,8 +8008,12 @@ class ie extends $ {
     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());
+        const s = {
+          month: E,
+          week: H,
+          day: F
+        }[this.currentView] || E, i = new s(e, this.stateManager);
+        i._viewType = this.currentView, this._currentViewInstance = i, i.render();
       } catch (t) {
         console.error("[ForceCalendar] Error switching view:", t);
       }
@@ -7558,10 +8034,10 @@ class ie extends $ {
   getStyles() {
     const e = this.getAttribute("height") || "800px";
     return `
-            ${v.getBaseStyles()}
-            ${v.getButtonStyles()}
-            ${v.getGridStyles()}
-            ${v.getAnimations()}
+            ${y.getBaseStyles()}
+            ${y.getButtonStyles()}
+            ${y.getGridStyles()}
+            ${y.getAnimations()}
 
             :host {
                 --calendar-height: ${e};
@@ -7950,7 +8426,7 @@ class ie extends $ {
       return `
                 <div class="force-calendar">
                     <div class="fc-error">
-                        <p><strong>Error:</strong> ${C.escapeHTML(r.message || "An error occurred")}</p>
+                        <p><strong>Error:</strong> ${T.escapeHTML(r.message || "An error occurred")}</p>
                     </div>
                 </div>
             `;
@@ -8016,8 +8492,12 @@ class ie extends $ {
         return;
       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, i.render());
+        const r = {
+          month: E,
+          week: H,
+          day: F
+        }[this.currentView] || E, n = new r(e, this.stateManager);
+        n._viewType = this.currentView, this._currentViewInstance = n, n.render();
       } catch (i) {
         console.error("[ForceCalendar] Error creating/rendering view:", i);
       }
@@ -8040,307 +8520,19 @@ class ie extends $ {
       });
     }), this._hasRendered = !0;
   }
+  /**
+   * Create a view renderer instance for the given view type
+   * Uses pure JavaScript renderer classes for Salesforce Locker Service compatibility
+   * @param {string} viewName - 'month', 'week', or 'day'
+   * @returns {BaseViewRenderer} Renderer instance
+   */
   _createViewRenderer(e) {
-    const t = e;
-    return {
-      stateManager: null,
-      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);
-        }), this._listeners = [];
-      },
-      addListener(s, i, r) {
-        s.addEventListener(i, r), this._listeners.push({ element: s, event: i, handler: r });
-      },
-      render() {
-        if (!this.container || !this.stateManager) return;
-        const s = this.stateManager.getViewData();
-        if (!s) {
-          this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">Loading...</div>';
-          return;
-        }
-        this.cleanup();
-        const i = this.stateManager.getState().config;
-        let r = "";
-        switch (t) {
-          case "week":
-            r = this._renderWeekView(s, i);
-            break;
-          case "day":
-            r = this._renderDayView(s, i);
-            break;
-          case "month":
-          default:
-            if (!s.weeks) {
-              this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">No data available for month view.</div>';
-              return;
-            }
-            r = this._renderMonthView(s, i);
-            break;
-        }
-        this.container.innerHTML = r, this._attachEventHandlers(t);
-      },
-      _renderMonthView(s, i) {
-        const r = i.weekStartsOn || 0, n = [];
-        for (let o = 0; o < 7; o++) {
-          const c = (r + o) % 7;
-          n.push(["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][c]);
-        }
-        let a = `
-                    <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;">
-                            ${n.map((o) => `<div class="fc-month-header-cell" style="padding: 12px 8px; text-align: center; font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase;">${o}</div>`).join("")}
-                        </div>
-                        <div class="fc-month-body" style="display: flex; flex-direction: column; flex: 1;">
-                `;
-        return s.weeks.forEach((o) => {
-          a += '<div class="fc-month-week" style="display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; min-height: 80px;">', o.days.forEach((c) => {
-            const l = !c.isCurrentMonth, d = c.isToday, h = l ? "#f3f4f6" : "#fff", g = l ? "#9ca3af" : "#111827", w = d ? "background: #2563eb; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;" : "", f = c.events || [], k = f.slice(0, 3), b = f.length - 3;
-            a += `
-                            <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((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>` : ""}
-                                </div>
-                            </div>
-                        `;
-          }), a += "</div>";
-        }), a += "</div></div>", a;
-      },
-      _renderWeekView(s, i) {
-        const r = s.days || [];
-        if (r.length === 0)
-          return '<div style="padding: 20px; text-align: center; color: #666;">No data available for week view.</div>';
-        i.weekStartsOn;
-        const n = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], a = Array.from({ length: 24 }, (l, d) => d), o = r.map((l) => {
-          const d = new Date(l.date), h = l.events || [];
-          return {
-            ...l,
-            date: d,
-            dayName: n[d.getDay()],
-            dayOfMonth: d.getDate(),
-            isToday: this._isToday(d),
-            timedEvents: h.filter((g) => !g.allDay),
-            allDayEvents: h.filter((g) => g.allDay)
-          };
-        });
-        return `
-                    <div class="fc-week-view" style="display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden;">
-                        <!-- Header -->
-                        <div style="display: grid; grid-template-columns: 60px repeat(7, 1fr); border-bottom: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0;">
-                            <div style="border-right: 1px solid #e5e7eb;"></div>
-                            ${o.map((l) => `
-                                <div style="padding: 12px 8px; text-align: center; border-right: 1px solid #e5e7eb;">
-                                    <div style="font-size: 10px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.1em;">${l.dayName}</div>
-                                    <div style="font-size: 16px; font-weight: 500; margin-top: 4px; ${l.isToday ? "background: #dc2626; color: white; border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;" : "color: #111827;"}">${l.dayOfMonth}</div>
-                                </div>
-                            `).join("")}
-                        </div>
-
-                        <!-- All Day Row -->
-                        <div style="display: grid; grid-template-columns: 60px repeat(7, 1fr); border-bottom: 1px solid #e5e7eb; background: #fafafa; min-height: 32px; flex-shrink: 0;">
-                            <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>
-                            ${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="${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>
-                            `).join("")}
-                        </div>
-
-                        <!-- Time Grid Body -->
-                        <div id="week-scroll-container" style="flex: 1; overflow-y: auto; overflow-x: hidden; position: relative;">
-                            <div style="display: grid; grid-template-columns: 60px repeat(7, 1fr); position: relative; height: 1440px;">
-                                <!-- Time Gutter -->
-                                <div style="border-right: 1px solid #e5e7eb; background: #fafafa;">
-                                    ${a.map((l) => `
-                                        <div style="height: 60px; font-size: 10px; color: #6b7280; text-align: right; padding-right: 8px; font-weight: 500;">
-                                            ${l === 0 ? "" : this._formatHour(l)}
-                                        </div>
-                                    `).join("")}
-                                </div>
-
-                                <!-- Day Columns -->
-                                ${o.map((l) => `
-                                    <div class="fc-week-day-column" data-date="${l.date.toISOString()}" style="border-right: 1px solid #e5e7eb; position: relative; cursor: pointer;">
-                                        <!-- Hour grid lines -->
-                                        ${a.map(() => '<div style="height: 60px; border-bottom: 1px solid #f3f4f6;"></div>').join("")}
-
-                                        <!-- Now indicator for today -->
-                                        ${l.isToday ? this._renderNowIndicator() : ""}
-
-                                        <!-- Timed events -->
-                                        ${l.timedEvents.map((d) => this._renderTimedEvent(d)).join("")}
-                                    </div>
-                                `).join("")}
-                            </div>
-                        </div>
-                    </div>
-                `;
-      },
-      _renderDayView(s, i) {
-        var g, w;
-        const r = ((w = (g = this.stateManager) == null ? void 0 : g.getState()) == null ? void 0 : w.currentDate) || /* @__PURE__ */ new Date();
-        let n, a, o, c, l;
-        if (s.type === "day" && s.date)
-          if (n = new Date(s.date), a = s.dayName || ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][n.getDay()], o = s.isToday !== void 0 ? s.isToday : this._isToday(n), c = s.allDayEvents || [], s.hours && Array.isArray(s.hours)) {
-            const f = /* @__PURE__ */ new Map();
-            s.hours.forEach((k) => {
-              (k.events || []).forEach((b) => {
-                f.has(b.id) || f.set(b.id, b);
-              });
-            }), l = Array.from(f.values());
-          } else
-            l = [];
-        else if (s.days && s.days.length > 0) {
-          const f = s.days.find((b) => this._isSameDay(new Date(b.date), r)) || s.days[0];
-          n = new Date(f.date), a = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][n.getDay()], o = this._isToday(n);
-          const k = f.events || [];
-          c = k.filter((b) => b.allDay), l = k.filter((b) => !b.allDay);
-        } else
-          return '<div style="padding: 20px; text-align: center; color: #666;">No data available for day view.</div>';
-        const d = Array.from({ length: 24 }, (f, k) => k);
-        return `
-                    <div class="fc-day-view" style="display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden;">
-                        <!-- Header -->
-                        <div style="display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0;">
-                            <div style="border-right: 1px solid #e5e7eb;"></div>
-                            <div style="padding: 16px 24px;">
-                                <div style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.1em;">${a}</div>
-                                <div style="font-size: 24px; font-weight: 600; margin-top: 4px; ${o ? "color: #dc2626;" : "color: #111827;"}">${n.getDate()}</div>
-                            </div>
-                        </div>
-
-                        <!-- All Day Row -->
-                        <div style="display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid #e5e7eb; background: #fafafa; min-height: 36px; flex-shrink: 0;">
-                            <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="${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>
-                        </div>
-
-                        <!-- Time Grid Body -->
-                        <div id="day-scroll-container" style="flex: 1; overflow-y: auto; overflow-x: hidden; position: relative;">
-                            <div style="display: grid; grid-template-columns: 60px 1fr; position: relative; height: 1440px;">
-                                <!-- Time Gutter -->
-                                <div style="border-right: 1px solid #e5e7eb; background: #fafafa;">
-                                    ${d.map((f) => `
-                                        <div style="height: 60px; font-size: 11px; color: #6b7280; text-align: right; padding-right: 12px; font-weight: 500;">
-                                            ${f === 0 ? "" : this._formatHour(f)}
-                                        </div>
-                                    `).join("")}
-                                </div>
-
-                                <!-- Day Column -->
-                                <div class="fc-day-column" data-date="${n.toISOString()}" style="position: relative; cursor: pointer;">
-                                    <!-- Hour grid lines -->
-                                    ${d.map(() => '<div style="height: 60px; border-bottom: 1px solid #f3f4f6;"></div>').join("")}
-
-                                    <!-- Now indicator for today -->
-                                    ${o ? this._renderNowIndicator() : ""}
-
-                                    <!-- Timed events -->
-                                    ${l.map((f) => this._renderTimedEventDay(f)).join("")}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                `;
-      },
-      _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="${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;">${this._escapeHTML(s.title)}</div>
-                        <div style="font-size: 10px; opacity: 0.9;">${this._formatTime(i)}</div>
-                    </div>
-                `;
-      },
-      _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="${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;">${this._escapeHTML(s.title)}</div>
-                        <div style="font-size: 11px; opacity: 0.9;">${this._formatTime(i)} - ${this._formatTime(r)}</div>
-                    </div>
-                `;
-      },
-      _renderNowIndicator() {
-        const s = /* @__PURE__ */ new Date();
-        return `<div style="position: absolute; left: 0; right: 0; top: ${s.getHours() * 60 + s.getMinutes()}px; height: 2px; background: #dc2626; z-index: 15; pointer-events: none;"></div>`;
-      },
-      _formatHour(s) {
-        const i = s >= 12 ? "PM" : "AM";
-        return `${s % 12 || 12} ${i}`;
-      },
-      _formatTime(s) {
-        const i = s.getHours(), r = s.getMinutes(), n = i >= 12 ? "PM" : "AM", a = i % 12 || 12;
-        return r === 0 ? `${a} ${n}` : `${a}:${r.toString().padStart(2, "0")} ${n}`;
-      },
-      _isToday(s) {
-        const i = /* @__PURE__ */ new Date();
-        return s.getDate() === i.getDate() && s.getMonth() === i.getMonth() && s.getFullYear() === i.getFullYear();
-      },
-      _isSameDay(s, i) {
-        return s.getDate() === i.getDate() && s.getMonth() === i.getMonth() && s.getFullYear() === i.getFullYear();
-      },
-      _attachEventHandlers(s) {
-        const i = this.stateManager;
-        if (this.container.querySelectorAll(".fc-month-day").forEach((r) => {
-          this.addListener(r, "click", (n) => {
-            const a = new Date(r.dataset.date);
-            i.selectDate(a);
-          });
-        }), this.container.querySelectorAll(".fc-week-day-column").forEach((r) => {
-          this.addListener(r, "click", (n) => {
-            if (n.target.closest(".fc-event")) return;
-            const a = new Date(r.dataset.date), o = r.getBoundingClientRect(), c = this.container.querySelector("#week-scroll-container"), l = n.clientY - o.top + (c ? c.scrollTop : 0);
-            a.setHours(Math.floor(l / 60), Math.floor(l % 60), 0, 0), i.selectDate(a);
-          });
-        }), this.container.querySelectorAll(".fc-day-column").forEach((r) => {
-          this.addListener(r, "click", (n) => {
-            if (n.target.closest(".fc-event")) return;
-            const a = new Date(r.dataset.date), o = r.getBoundingClientRect(), c = this.container.querySelector("#day-scroll-container"), l = n.clientY - o.top + (c ? c.scrollTop : 0);
-            a.setHours(Math.floor(l / 60), Math.floor(l % 60), 0, 0), i.selectDate(a);
-          });
-        }), this.container.querySelectorAll(".fc-event").forEach((r) => {
-          this.addListener(r, "click", (n) => {
-            n.stopPropagation();
-            const a = r.dataset.eventId, o = i.getEvents().find((c) => c.id === a);
-            o && i.selectEvent(o);
-          });
-        }), s === "week" || s === "day") {
-          const r = s === "week" ? "#week-scroll-container" : "#day-scroll-container", n = this.container.querySelector(r);
-          n && !this._scrolled && (n.scrollTop = 8 * 60 - 50, this._scrolled = !0);
-        }
-      }
-    };
+    const s = {
+      month: E,
+      week: H,
+      day: F
+    }[e] || E;
+    return new s(null, null);
   }
   handleNavigation(e) {
     switch (e.currentTarget.dataset.action) {
@@ -8363,14 +8555,14 @@ class ie extends $ {
     const s = this.stateManager.state.config.locale;
     switch (t) {
       case "month":
-        return x.formatDate(e, "month", s);
+        return v.formatDate(e, "month", s);
       case "week":
-        const i = x.startOfWeek(e), r = x.endOfWeek(e);
-        return x.formatDateRange(i, r, s);
+        const i = v.startOfWeek(e), r = v.endOfWeek(e);
+        return v.formatDateRange(i, r, s);
       case "day":
-        return x.formatDate(e, "long", s);
+        return v.formatDate(e, "long", s);
       default:
-        return x.formatDate(e, "month", s);
+        return v.formatDate(e, "month", s);
     }
   }
   getIcon(e) {
@@ -8421,22 +8613,26 @@ class ie extends $ {
     this.stateManager.today();
   }
   destroy() {
-    this.stateManager && this.stateManager.destroy(), y.clear(), super.cleanup();
+    this.stateManager && this.stateManager.destroy(), p.clear(), super.cleanup();
   }
 }
-customElements.get("forcecal-main") || customElements.define("forcecal-main", ie);
+customElements.get("forcecal-main") || customElements.define("forcecal-main", oe);
 typeof window < "u" && typeof customElements < "u" && console.log("Force Calendar Interface loading...");
 export {
-  $ as BaseComponent,
-  C as DOMUtils,
-  x as DateUtils,
-  te as DayView,
-  Q as EventBus,
-  ie as ForceCalendar,
-  X as MonthView,
-  J as StateManager,
-  v as StyleUtils,
-  ee as WeekView,
-  y as eventBus
+  _ as BaseComponent,
+  O as BaseViewRenderer,
+  T as DOMUtils,
+  v as DateUtils,
+  ne as DayView,
+  F as DayViewRenderer,
+  te as EventBus,
+  oe as ForceCalendar,
+  ie as MonthView,
+  E as MonthViewRenderer,
+  se as StateManager,
+  y as StyleUtils,
+  re as WeekView,
+  H as WeekViewRenderer,
+  p as eventBus
 };
 //# sourceMappingURL=force-calendar-interface.esm.js.map