@forcecalendar/interface 1.0.38 → 1.0.40

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

@@ -1,8 +1,8 @@
-var _ = Object.defineProperty;
-var $ = (h, e, t) => e in h ? _(h, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[e] = t;
-var m = (h, e, t) => $(h, typeof e != "symbol" ? e + "" : e, t);
-import { Calendar as M, DateUtils as T } from "@forcecalendar/core";
-class k extends HTMLElement {
+var S = Object.defineProperty;
+var F = (f, e, t) => e in f ? S(f, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : f[e] = t;
+var v = (f, e, t) => F(f, typeof e != "symbol" ? e + "" : e, t);
+import { Calendar as H, DateUtils as L } from "@forcecalendar/core";
+class T extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this._listeners = [], this._state = null, this._props = /* @__PURE__ */ new Map(), this._initialized = !1;
   }
@@ -111,7 +111,7 @@ class k extends HTMLElement {
     this.setProp(e, r), this._initialized && this.render();
   }
 }
-class S {
+class V {
   constructor() {
     this.events = /* @__PURE__ */ new Map(), this.wildcardHandlers = /* @__PURE__ */ new Set();
   }
@@ -125,14 +125,14 @@ class S {
   on(e, t, r = {}) {
     const { once: i = !1, priority: s = 0 } = r;
     if (e.includes("*")) {
-      const o = { pattern: e, handler: t, once: i, priority: s };
-      return this.wildcardHandlers.add(o), () => this.wildcardHandlers.delete(o);
+      const a = { pattern: e, handler: t, once: i, priority: s };
+      return this.wildcardHandlers.add(a), () => this.wildcardHandlers.delete(a);
     }
     this.events.has(e) || this.events.set(e, []);
-    const n = { handler: t, once: i, priority: s }, a = this.events.get(e);
-    return a.push(n), a.sort((o, c) => c.priority - o.priority), () => {
-      const o = a.indexOf(n);
-      o > -1 && a.splice(o, 1);
+    const n = { handler: t, once: i, priority: s }, o = this.events.get(e);
+    return o.push(n), o.sort((a, c) => c.priority - a.priority), () => {
+      const a = o.indexOf(n);
+      a > -1 && o.splice(a, 1);
     };
   }
   /**
@@ -189,10 +189,10 @@ class S {
     if (this.events.has(e)) {
       const s = [...this.events.get(e)];
       for (const n of s) {
-        const { handler: a, once: o } = n;
-        o && this.off(e, a);
+        const { handler: o, once: a } = n;
+        a && this.off(e, o);
         try {
-          const c = a(t, e);
+          const c = o(t, e);
           c instanceof Promise && r.push(c);
         } catch (c) {
           console.error(`Error in event handler for ${e}:`, c);
@@ -202,13 +202,13 @@ class S {
     const i = [];
     for (const s of [...this.wildcardHandlers])
       if (this.matchesPattern(e, s.pattern)) {
-        const { handler: n, once: a } = s;
-        a && i.push(s);
+        const { handler: n, once: o } = s;
+        o && i.push(s);
         try {
-          const o = n(t, e);
-          o instanceof Promise && r.push(o);
-        } catch (o) {
-          console.error(`Error in wildcard handler for ${e}:`, o);
+          const a = n(t, e);
+          a instanceof Promise && r.push(a);
+        } catch (a) {
+          console.error(`Error in wildcard handler for ${e}:`, a);
         }
       }
     return i.forEach((s) => this.wildcardHandlers.delete(s)), Promise.all(r);
@@ -253,10 +253,10 @@ class S {
     return e;
   }
 }
-const d = new S();
-class C {
+const l = new V();
+class I {
   constructor(e = {}) {
-    this.calendar = new M({
+    this.calendar = new H({
       view: e.view || "month",
       date: e.date || /* @__PURE__ */ new Date(),
       weekStartsOn: e.weekStartsOn ?? 0,
@@ -343,48 +343,48 @@ class C {
   emitStateChange(e, t) {
     const r = Object.keys(t).filter((i) => e[i] !== t[i]);
     r.forEach((i) => {
-      d.emit(`state:${i}:changed`, {
+      l.emit(`state:${i}:changed`, {
         oldValue: e[i],
         newValue: t[i],
         state: t
       });
-    }), r.length > 0 && d.emit("state:changed", { oldState: e, newState: t, changedKeys: r });
+    }), r.length > 0 && l.emit("state:changed", { oldState: e, newState: t, changedKeys: r });
   }
   // Calendar operations
   setView(e) {
-    this.calendar.setView(e), this.setState({ view: e }), d.emit("view:changed", { view: e });
+    this.calendar.setView(e), this.setState({ view: e }), l.emit("view:changed", { view: e });
   }
   getView() {
     return this.state.view;
   }
   setDate(e) {
-    this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), d.emit("date:changed", { date: this.state.currentDate });
+    this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), l.emit("date:changed", { date: this.state.currentDate });
   }
   getCurrentDate() {
     return this.state.currentDate;
   }
   // Navigation
   next() {
-    this.calendar.next(), this.setState({ currentDate: this.calendar.getCurrentDate() }), d.emit("navigation:next", { date: this.state.currentDate });
+    this.calendar.next(), this.setState({ currentDate: this.calendar.getCurrentDate() }), l.emit("navigation:next", { date: this.state.currentDate });
   }
   previous() {
-    this.calendar.previous(), this.setState({ currentDate: this.calendar.getCurrentDate() }), d.emit("navigation:previous", { date: this.state.currentDate });
+    this.calendar.previous(), this.setState({ currentDate: this.calendar.getCurrentDate() }), l.emit("navigation:previous", { date: this.state.currentDate });
   }
   today() {
-    this.calendar.today(), this.setState({ currentDate: this.calendar.getCurrentDate() }), d.emit("navigation:today", { date: this.state.currentDate });
+    this.calendar.today(), this.setState({ currentDate: this.calendar.getCurrentDate() }), l.emit("navigation:today", { date: this.state.currentDate });
   }
   goToDate(e) {
-    this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), d.emit("navigation:goto", { date: this.state.currentDate });
+    this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), l.emit("navigation:goto", { date: this.state.currentDate });
   }
   // Event management
   addEvent(e) {
     const t = this.calendar.addEvent(e);
-    return t ? (this._syncEventsFromCore(), d.emit("event:add", { event: t }), d.emit("event:added", { event: t }), t) : (console.error("Failed to add event to calendar"), d.emit("event:error", { action: "add", event: e, error: "Failed to add event" }), null);
+    return t ? (this._syncEventsFromCore(), l.emit("event:add", { event: t }), l.emit("event:added", { event: t }), t) : (console.error("Failed to add event to calendar"), l.emit("event:error", { action: "add", event: e, error: "Failed to add event" }), null);
   }
   updateEvent(e, t) {
     this._syncEventsFromCore({ silent: !0 });
     const r = this.calendar.updateEvent(e, t);
-    return r ? (this._syncEventsFromCore({ force: !0 }), d.emit("event:update", { event: r }), d.emit("event:updated", { event: r }), r) : (console.error(`Failed to update event: ${e}`), d.emit("event:error", {
+    return r ? (this._syncEventsFromCore({ force: !0 }), l.emit("event:update", { event: r }), l.emit("event:updated", { event: r }), r) : (console.error(`Failed to update event: ${e}`), l.emit("event:error", {
       action: "update",
       eventId: e,
       updates: t,
@@ -392,7 +392,7 @@ class C {
     }), null);
   }
   deleteEvent(e) {
-    return this._syncEventsFromCore({ silent: !0 }), this.calendar.removeEvent(e) ? (this._syncEventsFromCore(), d.emit("event:remove", { eventId: e }), d.emit("event:deleted", { eventId: e }), !0) : (console.error(`Failed to delete event: ${e}`), d.emit("event:error", { action: "delete", eventId: e, error: "Event not found" }), !1);
+    return this._syncEventsFromCore({ silent: !0 }), this.calendar.removeEvent(e) ? (this._syncEventsFromCore(), l.emit("event:remove", { eventId: e }), l.emit("event:deleted", { eventId: e }), !0) : (console.error(`Failed to delete event: ${e}`), l.emit("event:error", { action: "delete", eventId: e, error: "Event not found" }), !1);
   }
   getEvents() {
     return this.calendar.getEvents() || [];
@@ -421,11 +421,11 @@ class C {
     if (t.weeks && (t.weeks = t.weeks.map((s) => ({
       ...s,
       days: s.days.map((n) => {
-        const a = new Date(n.date);
+        const o = new Date(n.date);
         return {
           ...n,
-          isSelected: a.toDateString() === r,
-          events: n.events || this.getEventsForDate(a)
+          isSelected: o.toDateString() === r,
+          events: n.events || this.getEventsForDate(o)
         };
       })
     }))), t.days && (t.days = t.days.map((s) => {
@@ -443,20 +443,20 @@ class C {
   }
   // Selection management
   selectEvent(e) {
-    this.setState({ selectedEvent: e }), d.emit("event:selected", { event: e });
+    this.setState({ selectedEvent: e }), l.emit("event:selected", { event: e });
   }
   selectEventById(e) {
     const t = this.state.events.find((r) => r.id === e);
     t && this.selectEvent(t);
   }
   deselectEvent() {
-    this.setState({ selectedEvent: null }), d.emit("event:deselected", {});
+    this.setState({ selectedEvent: null }), l.emit("event:deselected", {});
   }
   selectDate(e) {
-    this.setState({ selectedDate: e }), d.emit("date:selected", { date: e });
+    this.setState({ selectedDate: e }), l.emit("date:selected", { date: e });
   }
   deselectDate() {
-    this.setState({ selectedDate: null }), d.emit("date:deselected", {});
+    this.setState({ selectedDate: null }), l.emit("date:deselected", {});
   }
   // Utility methods
   isToday(e) {
@@ -476,7 +476,7 @@ class C {
   }
   // Error handling
   setError(e) {
-    this.setState({ error: e }), e && d.emit("error", { error: e });
+    this.setState({ error: e }), e && l.emit("error", { error: e });
   }
   clearError() {
     this.setState({ error: null });
@@ -490,7 +490,7 @@ class C {
     this.subscribers.clear(), this._subscriberIds && (this._subscriberIds.clear(), this._subscriberIds = null), this.state = null, this.calendar = null;
   }
 }
-class g extends T {
+class g extends L {
   /**
    * Format date for display
    */
@@ -552,8 +552,8 @@ class g extends T {
    * Get relative time string (e.g., "2 hours ago", "in 3 days")
    */
   static getRelativeTime(e, t = /* @__PURE__ */ new Date(), r = "en-US") {
-    const i = new Intl.RelativeTimeFormat(r, { numeric: "auto" }), s = e - t, n = Math.floor(s / 1e3), a = Math.floor(n / 60), o = Math.floor(a / 60), c = Math.floor(o / 24), l = Math.floor(c / 7), f = Math.floor(c / 30), p = Math.floor(c / 365);
-    return Math.abs(n) < 60 ? i.format(n, "second") : Math.abs(a) < 60 ? i.format(a, "minute") : Math.abs(o) < 24 ? i.format(o, "hour") : Math.abs(c) < 7 ? i.format(c, "day") : Math.abs(l) < 4 ? i.format(l, "week") : Math.abs(f) < 12 ? i.format(f, "month") : i.format(p, "year");
+    const i = new Intl.RelativeTimeFormat(r, { numeric: "auto" }), s = e - t, n = Math.floor(s / 1e3), o = Math.floor(n / 60), a = Math.floor(o / 60), c = Math.floor(a / 24), d = Math.floor(c / 7), h = Math.floor(c / 30), u = Math.floor(c / 365);
+    return Math.abs(n) < 60 ? i.format(n, "second") : Math.abs(o) < 60 ? i.format(o, "minute") : Math.abs(a) < 24 ? i.format(a, "hour") : Math.abs(c) < 7 ? i.format(c, "day") : Math.abs(d) < 4 ? i.format(d, "week") : Math.abs(h) < 12 ? i.format(h, "month") : i.format(u, "year");
   }
   /**
    * Check if date is today
@@ -599,12 +599,12 @@ class g extends T {
    * Parse time string (e.g., "14:30" or "2:30 PM")
    */
   static parseTimeString(e, t = /* @__PURE__ */ new Date()) {
-    const r = new Date(t), [i, s] = e.split(/\s+/), [n, a] = i.split(":").map(Number);
-    let o = n;
-    return s && (s.toLowerCase() === "pm" && n < 12 ? o = n + 12 : s.toLowerCase() === "am" && n === 12 && (o = 0)), r.setHours(o, a || 0, 0, 0), r;
+    const r = new Date(t), [i, s] = e.split(/\s+/), [n, o] = i.split(":").map(Number);
+    let a = n;
+    return s && (s.toLowerCase() === "pm" && n < 12 ? a = n + 12 : s.toLowerCase() === "am" && n === 12 && (a = 0)), r.setHours(a, o || 0, 0, 0), r;
   }
 }
-class x {
+class E {
   /**
    * Create element with attributes and children
    */
@@ -618,8 +618,8 @@ class x {
       else if (s.startsWith("data-"))
         i.setAttribute(s, n);
       else if (s.startsWith("on") && typeof n == "function") {
-        const a = s.slice(2).toLowerCase();
-        i.addEventListener(a, n);
+        const o = s.slice(2).toLowerCase();
+        i.addEventListener(o, n);
       } else
         i[s] = n;
     }), r.forEach((s) => {
@@ -643,8 +643,8 @@ class x {
    */
   static delegate(e, t, r, i) {
     const s = (n) => {
-      const a = n.target.closest(t);
-      a && e.contains(a) && i.call(a, n);
+      const o = n.target.closest(t);
+      o && e.contains(o) && i.call(o, n);
     };
     return e.addEventListener(r, s), () => e.removeEventListener(r, s);
   }
@@ -799,7 +799,7 @@ class x {
     return e.addEventListener("keydown", s), r == null || r.focus(), () => e.removeEventListener("keydown", s);
   }
 }
-class u {
+class p {
   /**
    * Get CSS variable value
    */
@@ -967,15 +967,15 @@ class u {
    * Darken color by percentage
    */
   static darken(e, t) {
-    const r = parseInt(e.replace("#", ""), 16), i = Math.round(2.55 * t), s = (r >> 16) - i, n = (r >> 8 & 255) - i, a = (r & 255) - i;
-    return "#" + (16777216 + (s < 255 ? s < 1 ? 0 : s : 255) * 65536 + (n < 255 ? n < 1 ? 0 : n : 255) * 256 + (a < 255 ? a < 1 ? 0 : a : 255)).toString(16).slice(1);
+    const r = parseInt(e.replace("#", ""), 16), i = Math.round(2.55 * t), s = (r >> 16) - i, n = (r >> 8 & 255) - i, o = (r & 255) - i;
+    return "#" + (16777216 + (s < 255 ? s < 1 ? 0 : s : 255) * 65536 + (n < 255 ? n < 1 ? 0 : n : 255) * 256 + (o < 255 ? o < 1 ? 0 : o : 255)).toString(16).slice(1);
   }
   /**
    * Lighten color by percentage
    */
   static lighten(e, t) {
-    const r = parseInt(e.replace("#", ""), 16), i = Math.round(2.55 * t), s = (r >> 16) + i, n = (r >> 8 & 255) + i, a = (r & 255) + i;
-    return "#" + (16777216 + (s < 255 ? s < 1 ? 0 : s : 255) * 65536 + (n < 255 ? n < 1 ? 0 : n : 255) * 256 + (a < 255 ? a < 1 ? 0 : a : 255)).toString(16).slice(1);
+    const r = parseInt(e.replace("#", ""), 16), i = Math.round(2.55 * t), s = (r >> 16) + i, n = (r >> 8 & 255) + i, o = (r & 255) + i;
+    return "#" + (16777216 + (s < 255 ? s < 1 ? 0 : s : 255) * 65536 + (n < 255 ? n < 1 ? 0 : n : 255) * 256 + (o < 255 ? o < 1 ? 0 : o : 255)).toString(16).slice(1);
   }
   /**
    * Get contrast color (black or white) for background
@@ -1136,7 +1136,7 @@ class u {
 /**
  * Default theme colors
  */
-m(u, "colors", {
+v(p, "colors", {
   primary: "#3B82F6",
   // Modern Blue
   secondary: "#64748B",
@@ -1169,7 +1169,7 @@ m(u, "colors", {
 }), /**
  * Common CSS variables
  */
-m(u, "cssVariables", {
+v(p, "cssVariables", {
   // "Pro" Palette - Functional & Sharp
   "--fc-primary-color": "#2563EB",
   // International Blue (Focus)
@@ -1237,7 +1237,7 @@ m(u, "cssVariables", {
 }), /**
  * Get responsive breakpoints
  */
-m(u, "breakpoints", {
+v(p, "breakpoints", {
   xs: "320px",
   sm: "576px",
   md: "768px",
@@ -1245,7 +1245,7 @@ m(u, "breakpoints", {
   xl: "1200px",
   "2xl": "1400px"
 });
-class w {
+class _ {
   /**
    * @param {HTMLElement} container - The DOM element to render into
    * @param {StateManager} stateManager - The state manager instance
@@ -1284,7 +1284,7 @@ class w {
    * @returns {string}
    */
   escapeHTML(e) {
-    return e == null ? "" : x.escapeHTML(String(e));
+    return e == null ? "" : E.escapeHTML(String(e));
   }
   /**
    * Check if a date is today
@@ -1336,8 +1336,8 @@ class w {
     const r = t.length === 3 ? t[0] + t[0] + t[1] + t[1] + t[2] + t[2] : t, i = parseInt(r.substring(0, 2), 16), s = parseInt(r.substring(2, 4), 16), n = parseInt(r.substring(4, 6), 16);
     if (isNaN(i) || isNaN(s) || isNaN(n))
       return "white";
-    const o = [i / 255, s / 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";
+    const a = [i / 255, s / 255, n / 255].map((d) => d <= 0.03928 ? d / 12.92 : Math.pow((d + 0.055) / 1.055, 2.4));
+    return 0.2126 * a[0] + 0.7152 * a[1] + 0.0722 * a[2] > 0.179 ? "black" : "white";
   }
   /**
    * Render the "now" indicator line for time-based views
@@ -1347,20 +1347,64 @@ class w {
     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>`;
   }
+  /**
+   * Compute overlap layout columns for a list of timed events.
+   * Returns a Map of event.id -> { column, totalColumns }.
+   * Uses a greedy left-to-right column packing algorithm.
+   * @param {Array} events - Array of event objects with start/end dates
+   * @returns {Map<string, {column: number, totalColumns: number}>}
+   */
+  computeOverlapLayout(e) {
+    if (!e || e.length === 0) return /* @__PURE__ */ new Map();
+    const t = e.map((a) => {
+      const c = new Date(a.start), d = new Date(a.end), h = c.getHours() * 60 + c.getMinutes(), u = Math.max(h + 1, d.getHours() * 60 + d.getMinutes());
+      return { id: a.id, startMin: h, endMin: u };
+    });
+    t.sort((a, c) => a.startMin - c.startMin || c.endMin - c.startMin - (a.endMin - a.startMin));
+    const r = [], i = /* @__PURE__ */ new Map();
+    for (const a of t) {
+      let c = !1;
+      for (let d = 0; d < r.length; d++)
+        if (r[d] <= a.startMin) {
+          r[d] = a.endMin, i.set(a.id, { column: d, totalColumns: 0 }), c = !0;
+          break;
+        }
+      c || (i.set(a.id, { column: r.length, totalColumns: 0 }), r.push(a.endMin));
+    }
+    const s = [];
+    let n = [], o = 0;
+    for (const a of t)
+      n.length === 0 || a.startMin < o ? (n.push(a), o = Math.max(o, a.endMin)) : (s.push(n), n = [a], o = a.endMin);
+    n.length > 0 && s.push(n);
+    for (const a of s) {
+      const c = Math.max(...a.map((d) => i.get(d.id).column)) + 1;
+      for (const d of a)
+        i.get(d.id).totalColumns = c;
+    }
+    return i;
+  }
   /**
    * Render a timed event block
    * @param {Object} event - Event object
    * @param {Object} options - Rendering options
+   * @param {Object} options.compact - Use compact layout
+   * @param {Object} options.overlapLayout - Map from computeOverlapLayout()
    * @returns {string} HTML string
    */
   renderTimedEvent(e, t = {}) {
-    const { compact: r = !0 } = t, i = new Date(e.start), s = new Date(e.end), n = i.getHours() * 60 + i.getMinutes(), a = Math.max((s - i) / (1e3 * 60), r ? 20 : 30), o = this.getEventColor(e), c = r ? "4px 8px" : "8px 12px", l = r ? "11px" : "13px", f = r ? "2px" : "12px", p = r ? "2px" : "24px", D = r ? "4px" : "6px";
+    const { compact: r = !0, overlapLayout: i = null } = t, s = new Date(e.start), n = new Date(e.end), o = s.getHours() * 60 + s.getMinutes(), a = Math.max((n - s) / (1e3 * 60), r ? 20 : 30), c = this.getEventColor(e), d = r ? "4px 8px" : "8px 12px", h = r ? "11px" : "13px", u = r ? 2 : 12, b = r ? 2 : 24, y = r ? "4px" : "6px";
+    let x, w;
+    if (i && i.has(e.id)) {
+      const { column: C, totalColumns: $ } = i.get(e.id), M = `(100% - ${u + b}px)`;
+      x = `calc(${u}px + ${C} * ${M} / ${$})`, w = `calc(${M} / ${$})`;
+    } else
+      x = `${u}px`, w = `calc(100% - ${u + b}px)`;
     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: ${f}; right: ${p};
-                        background-color: ${o}; border-radius: ${D};
-                        padding: ${c}; font-size: ${l};
+                 style="position: absolute; top: ${o}px; height: ${a}px;
+                        left: ${x}; width: ${w};
+                        background-color: ${c}; border-radius: ${y};
+                        padding: ${d}; font-size: ${h};
                         font-weight: 500; color: white; overflow: hidden;
                         box-shadow: 0 1px 2px rgba(0,0,0,0.1);
                         cursor: pointer; z-index: 5;">
@@ -1368,7 +1412,7 @@ class w {
                     ${this.escapeHTML(e.title)}
                 </div>
                 <div style="font-size: ${r ? "10px" : "11px"}; opacity: 0.9;">
-                    ${this.formatTime(i)}${r ? "" : " - " + this.formatTime(s)}
+                    ${this.formatTime(s)}${r ? "" : " - " + this.formatTime(n)}
                 </div>
             </div>
         `;
@@ -1379,7 +1423,7 @@ class w {
    * @returns {string}
    */
   getEventColor(e) {
-    return u.sanitizeColor(e == null ? void 0 : e.backgroundColor, "#2563eb");
+    return p.sanitizeColor(e == null ? void 0 : e.backgroundColor, "#2563eb");
   }
   /**
    * Attach common event handlers for day/event clicks
@@ -1394,7 +1438,7 @@ class w {
     });
   }
 }
-class v extends w {
+class m extends _ {
   constructor(e, t) {
     super(e, t), this.maxEventsToShow = 3;
   }
@@ -1437,7 +1481,7 @@ class v extends w {
     }), t += "</div>", t;
   }
   _renderDay(e) {
-    const t = !e.isCurrentMonth, r = e.isToday, i = t ? "#f3f4f6" : "#fff", s = t ? "#9ca3af" : "#111827", n = r ? "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;
+    const t = !e.isCurrentMonth, r = e.isToday, i = t ? "#f3f4f6" : "#fff", s = t ? "#9ca3af" : "#111827", n = r ? "background: #2563eb; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;" : "", o = e.events || [], a = o.slice(0, this.maxEventsToShow), c = o.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;">
@@ -1445,7 +1489,7 @@ class v extends w {
                     ${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("")}
+                    ${a.map((d) => this._renderEvent(d)).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>
@@ -1469,7 +1513,7 @@ class v extends w {
     }), this.attachCommonEventHandlers();
   }
 }
-class b extends w {
+class D extends _ {
   constructor(e, t) {
     super(e, t), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
   }
@@ -1485,16 +1529,16 @@ class b extends w {
     this.container.innerHTML = r, this._attachEventHandlers(), this._scrollToCurrentTime();
   }
   _renderWeekView(e, t) {
-    const r = e.days, i = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], s = Array.from({ length: 24 }, (a, o) => o), n = r.map((a) => {
-      const o = new Date(a.date), c = a.events || [];
+    const r = e.days, i = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], s = Array.from({ length: 24 }, (o, a) => a), n = r.map((o) => {
+      const a = new Date(o.date), c = o.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)
+        ...o,
+        date: a,
+        dayName: i[a.getDay()],
+        dayOfMonth: a.getDate(),
+        isToday: this.isToday(a),
+        timedEvents: c.filter((d) => !d.allDay),
+        allDayEvents: c.filter((d) => d.allDay)
       };
     });
     return `
@@ -1580,7 +1624,10 @@ class b extends w {
                 ${e.isToday ? this.renderNowIndicator() : ""}
 
                 <!-- Timed events -->
-                ${e.timedEvents.map((r) => this.renderTimedEvent(r, { compact: !0 })).join("")}
+                ${(() => {
+      const r = this.computeOverlapLayout(e.timedEvents);
+      return e.timedEvents.map((i) => this.renderTimedEvent(i, { compact: !0, overlapLayout: r })).join("");
+    })()}
             </div>
         `;
   }
@@ -1588,12 +1635,10 @@ class b extends w {
     this.addListener(this.container, "click", (e) => {
       const t = e.target.closest(".fc-week-day-column");
       if (!t || !this.container.contains(t) || e.target.closest(".fc-event")) return;
-      const r = new Date(t.dataset.date), i = t.getBoundingClientRect();
-      this.container.querySelector("#week-scroll-container");
-      const s = e.clientY - i.top;
+      const r = new Date(t.dataset.date), i = this.container.querySelector("#week-scroll-container"), s = t.offsetTop, n = e.clientY - t.getBoundingClientRect().top + (i ? i.scrollTop : 0) - s, o = Math.max(0, Math.min(n + s, this.totalHeight));
       r.setHours(
-        Math.floor(s / this.hourHeight),
-        Math.floor(s % this.hourHeight / (this.hourHeight / 60)),
+        Math.floor(o / this.hourHeight),
+        Math.floor(o % this.hourHeight / (this.hourHeight / 60)),
         0,
         0
       ), this.stateManager.selectDate(r);
@@ -1605,7 +1650,7 @@ class b extends w {
     e && (e.scrollTop = 8 * this.hourHeight - 50, this._scrolled = !0);
   }
 }
-class y extends w {
+class k extends _ {
   constructor(e, t) {
     super(e, t), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
   }
@@ -1621,40 +1666,40 @@ class y extends w {
     this.container.innerHTML = r, this._attachEventHandlers(), this._scrollToCurrentTime();
   }
   _renderDayView(e, t) {
-    var f, p;
-    const r = ((p = (f = this.stateManager) == null ? void 0 : f.getState()) == null ? void 0 : p.currentDate) || /* @__PURE__ */ new Date(), i = this._extractDayData(e, r);
+    var h, u;
+    const r = ((u = (h = this.stateManager) == null ? void 0 : h.getState()) == null ? void 0 : u.currentDate) || /* @__PURE__ */ new Date(), i = this._extractDayData(e, r);
     if (!i)
       return '<div style="padding: 20px; text-align: center; color: #666;">No data available for day view.</div>';
-    const { dayDate: s, dayName: n, isToday: a, allDayEvents: o, timedEvents: c } = i, l = Array.from({ length: 24 }, (D, E) => E);
+    const { dayDate: s, dayName: n, isToday: o, allDayEvents: a, timedEvents: c } = i, d = Array.from({ length: 24 }, (b, y) => y);
     return `
             <div class="fc-day-view" style="display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden;">
-                ${this._renderHeader(s, n, a)}
-                ${this._renderAllDayRow(o, s)}
-                ${this._renderTimeGrid(c, a, s, l)}
+                ${this._renderHeader(s, n, o)}
+                ${this._renderAllDayRow(a, s)}
+                ${this._renderTimeGrid(c, o, s, d)}
             </div>
         `;
   }
   _extractDayData(e, t) {
-    let r, i, s, n, a;
-    const o = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+    let r, i, s, n, o;
+    const a = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
     if (e.type === "day" && e.date)
-      if (r = new Date(e.date), i = e.dayName || o[r.getDay()], s = e.isToday !== void 0 ? e.isToday : this.isToday(r), n = e.allDayEvents || [], e.hours && Array.isArray(e.hours)) {
+      if (r = new Date(e.date), i = e.dayName || a[r.getDay()], s = e.isToday !== void 0 ? e.isToday : this.isToday(r), n = e.allDayEvents || [], e.hours && Array.isArray(e.hours)) {
         const c = /* @__PURE__ */ new Map();
-        e.hours.forEach((l) => {
-          (l.events || []).forEach((f) => {
-            c.has(f.id) || c.set(f.id, f);
+        e.hours.forEach((d) => {
+          (d.events || []).forEach((h) => {
+            c.has(h.id) || c.set(h.id, h);
           });
-        }), a = Array.from(c.values());
+        }), o = Array.from(c.values());
       } else
-        a = [];
+        o = [];
     else if (e.days && e.days.length > 0) {
-      const c = e.days.find((f) => this.isSameDay(new Date(f.date), t)) || e.days[0];
-      r = new Date(c.date), i = o[r.getDay()], s = this.isToday(r);
-      const l = c.events || [];
-      n = l.filter((f) => f.allDay), a = l.filter((f) => !f.allDay);
+      const c = e.days.find((h) => this.isSameDay(new Date(h.date), t)) || e.days[0];
+      r = new Date(c.date), i = a[r.getDay()], s = this.isToday(r);
+      const d = c.events || [];
+      n = d.filter((h) => h.allDay), o = d.filter((h) => !h.allDay);
     } else
       return null;
-    return { dayDate: r, dayName: i, isToday: s, allDayEvents: n, timedEvents: a };
+    return { dayDate: r, dayName: i, isToday: s, allDayEvents: n, timedEvents: o };
   }
   _renderHeader(e, t, r) {
     return `
@@ -1723,7 +1768,10 @@ class y extends w {
                 ${t ? this.renderNowIndicator() : ""}
 
                 <!-- Timed events -->
-                ${e.map((s) => this.renderTimedEvent(s, { compact: !1 })).join("")}
+                ${(() => {
+      const s = this.computeOverlapLayout(e);
+      return e.map((n) => this.renderTimedEvent(n, { compact: !1, overlapLayout: s })).join("");
+    })()}
             </div>
         `;
   }
@@ -1731,12 +1779,10 @@ class y extends w {
     this.addListener(this.container, "click", (e) => {
       const t = e.target.closest(".fc-day-column");
       if (!t || !this.container.contains(t) || e.target.closest(".fc-event")) return;
-      const r = new Date(t.dataset.date), i = t.getBoundingClientRect();
-      this.container.querySelector("#day-scroll-container");
-      const s = e.clientY - i.top;
+      const r = new Date(t.dataset.date), i = this.container.querySelector("#day-scroll-container"), s = t.offsetTop, n = e.clientY - t.getBoundingClientRect().top + (i ? i.scrollTop : 0) - s, o = Math.max(0, Math.min(n + s, this.totalHeight));
       r.setHours(
-        Math.floor(s / this.hourHeight),
-        Math.floor(s % this.hourHeight / (this.hourHeight / 60)),
+        Math.floor(o / this.hourHeight),
+        Math.floor(o % this.hourHeight / (this.hourHeight / 60)),
         0,
         0
       ), this.stateManager.selectDate(r);
@@ -1748,7 +1794,7 @@ class y extends w {
     e && (e.scrollTop = 8 * this.hourHeight - 50, this._scrolled = !0);
   }
 }
-class F extends k {
+class z extends T {
   constructor() {
     super(), this._isVisible = !1, this._cleanupFocusTrap = null, this.config = {
       title: "New Event",
@@ -1778,8 +1824,8 @@ class F extends k {
   }
   getStyles() {
     return `
-            ${u.getBaseStyles()}
-            ${u.getButtonStyles()}
+            ${p.getBaseStyles()}
+            ${p.getButtonStyles()}
 
             :host {
                 display: none;
@@ -2024,7 +2070,7 @@ class F extends k {
     });
   }
   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 && this._cleanupFocusTrap(), this._cleanupFocusTrap = x.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 && this._cleanupFocusTrap(), this._cleanupFocusTrap = E.trapFocus(this.modalContent));
   }
   close() {
     this.removeAttribute("open"), this._cleanupFocusTrap && (this._cleanupFocusTrap(), this._cleanupFocusTrap = null);
@@ -2046,15 +2092,15 @@ class F extends k {
     this.emit("save", e), this.close();
   }
   formatDateForInput(e) {
-    const t = (o) => String(o).padStart(2, "0"), r = e.getFullYear(), i = t(e.getMonth() + 1), s = t(e.getDate()), n = t(e.getHours()), a = t(e.getMinutes());
-    return `${r}-${i}-${s}T${n}:${a}`;
+    const t = (a) => String(a).padStart(2, "0"), r = e.getFullYear(), i = t(e.getMonth() + 1), s = t(e.getDate()), n = t(e.getHours()), o = t(e.getMinutes());
+    return `${r}-${i}-${s}T${n}:${o}`;
   }
   unmount() {
     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", F);
-class H extends k {
+customElements.get("forcecal-event-form") || customElements.define("forcecal-event-form", z);
+class A extends T {
   static get observedAttributes() {
     return ["view", "date", "locale", "timezone", "week-starts-on", "height"];
   }
@@ -2069,15 +2115,15 @@ class H extends k {
       timeZone: this.getAttribute("timezone") || Intl.DateTimeFormat().resolvedOptions().timeZone,
       weekStartsOn: parseInt(this.getAttribute("week-starts-on") || "0")
     };
-    this.stateManager = new C(e), this.stateManager.subscribe(this.handleStateChange.bind(this)), this.setupEventListeners();
+    this.stateManager = new I(e), this.stateManager.subscribe(this.handleStateChange.bind(this)), this.setupEventListeners();
   }
   setupEventListeners() {
     this._busUnsubscribers.forEach((t) => t()), this._busUnsubscribers = [], this._busUnsubscribers.push(
-      d.on("navigation:*", (t, r) => {
+      l.on("navigation:*", (t, r) => {
         this.emit("calendar-navigate", { action: r.split(":")[1], ...t });
       })
     ), this._busUnsubscribers.push(
-      d.on("view:changed", (t) => {
+      l.on("view:changed", (t) => {
         this.emit("calendar-view-change", t);
       })
     );
@@ -2085,40 +2131,40 @@ class H extends k {
       this.emit(`calendar-event-${t}`, r);
     };
     this._busUnsubscribers.push(
-      d.on("event:add", (t) => {
+      l.on("event:add", (t) => {
         e("add", t);
       })
     ), this._busUnsubscribers.push(
-      d.on("event:update", (t) => {
+      l.on("event:update", (t) => {
         e("update", t);
       })
     ), this._busUnsubscribers.push(
-      d.on("event:remove", (t) => {
+      l.on("event:remove", (t) => {
         e("remove", t);
       })
     ), this._busUnsubscribers.push(
-      d.on("event:added", (t) => {
+      l.on("event:added", (t) => {
         this.emit("calendar-event-added", t);
       })
     ), this._busUnsubscribers.push(
-      d.on("event:updated", (t) => {
+      l.on("event:updated", (t) => {
         this.emit("calendar-event-updated", t);
       })
     ), this._busUnsubscribers.push(
-      d.on("event:deleted", (t) => {
+      l.on("event:deleted", (t) => {
         this.emit("calendar-event-deleted", t);
       })
     ), this._busUnsubscribers.push(
-      d.on("date:selected", (t) => {
+      l.on("date:selected", (t) => {
         this.emit("calendar-date-select", t);
       })
     );
   }
   handleStateChange(e, t) {
-    var o, c;
+    var a, c;
     if (!this._hasRendered)
       return;
-    const r = e.view !== (t == null ? void 0 : t.view), i = ((o = e.currentDate) == null ? void 0 : o.getTime()) !== ((c = t == null ? void 0 : t.currentDate) == null ? void 0 : c.getTime()), s = e.events !== (t == null ? void 0 : t.events), n = e.loading !== (t == null ? void 0 : t.loading);
+    const r = e.view !== (t == null ? void 0 : t.view), i = ((a = e.currentDate) == null ? void 0 : a.getTime()) !== ((c = t == null ? void 0 : t.currentDate) == null ? void 0 : c.getTime()), s = e.events !== (t == null ? void 0 : t.events), n = e.loading !== (t == null ? void 0 : t.loading);
     if (e.error !== (t == null ? void 0 : t.error)) {
       this.render();
       return;
@@ -2158,10 +2204,10 @@ class H extends k {
       this._currentViewInstance && this._currentViewInstance.cleanup && this._currentViewInstance.cleanup();
       try {
         const r = {
-          month: v,
-          week: b,
-          day: y
-        }[this.currentView] || v, i = new r(e, this.stateManager);
+          month: m,
+          week: D,
+          day: k
+        }[this.currentView] || m, i = new r(e, this.stateManager);
         i._viewType = this.currentView, this._currentViewInstance = i, i.render();
       } catch (t) {
         console.error("[ForceCalendar] Error switching view:", t);
@@ -2190,10 +2236,10 @@ class H extends k {
   getStyles() {
     const e = this.getAttribute("height") || "800px";
     return `
-            ${u.getBaseStyles()}
-            ${u.getButtonStyles()}
-            ${u.getGridStyles()}
-            ${u.getAnimations()}
+            ${p.getBaseStyles()}
+            ${p.getButtonStyles()}
+            ${p.getGridStyles()}
+            ${p.getAnimations()}
 
             :host {
                 --calendar-height: ${e};
@@ -2582,7 +2628,7 @@ class H extends k {
       return `
                 <div class="force-calendar">
                     <div class="fc-error">
-                        <p><strong>Error:</strong> ${x.escapeHTML(s.message || "An error occurred")}</p>
+                        <p><strong>Error:</strong> ${E.escapeHTML(s.message || "An error occurred")}</p>
                     </div>
                 </div>
             `;
@@ -2646,10 +2692,10 @@ class H extends k {
       this._currentViewInstance && (this._currentViewInstance.cleanup && this._currentViewInstance.cleanup(), this._viewUnsubscribe && (this._viewUnsubscribe(), this._viewUnsubscribe = null));
       try {
         const s = {
-          month: v,
-          week: b,
-          day: y
-        }[this.currentView] || v, n = new s(e, this.stateManager);
+          month: m,
+          week: D,
+          day: k
+        }[this.currentView] || m, n = new s(e, this.stateManager);
         n._viewType = this.currentView, this._currentViewInstance = n, n.render();
       } catch (i) {
         console.error("[ForceCalendar] Error creating/rendering view:", i);
@@ -2681,10 +2727,10 @@ class H extends k {
    */
   _createViewRenderer(e) {
     const r = {
-      month: v,
-      week: b,
-      day: y
-    }[e] || v;
+      month: m,
+      week: D,
+      day: k
+    }[e] || m;
     return new r(null, null);
   }
   handleNavigation(e) {
@@ -2770,19 +2816,19 @@ class H extends k {
     this._busUnsubscribers.forEach((e) => e()), this._busUnsubscribers = [], this.stateManager && this.stateManager.destroy(), super.cleanup();
   }
 }
-customElements.get("forcecal-main") || customElements.define("forcecal-main", H);
+customElements.get("forcecal-main") || customElements.define("forcecal-main", A);
 export {
-  k as BaseComponent,
-  w as BaseViewRenderer,
-  x as DOMUtils,
+  T as BaseComponent,
+  _ as BaseViewRenderer,
+  E as DOMUtils,
   g as DateUtils,
-  y as DayViewRenderer,
-  S as EventBus,
-  H as ForceCalendar,
-  v as MonthViewRenderer,
-  C as StateManager,
-  u as StyleUtils,
-  b as WeekViewRenderer,
-  d as eventBus
+  k as DayViewRenderer,
+  V as EventBus,
+  A as ForceCalendar,
+  m as MonthViewRenderer,
+  I as StateManager,
+  p as StyleUtils,
+  D as WeekViewRenderer,
+  l as eventBus
 };
 //# sourceMappingURL=force-calendar-interface.esm.js.map