@forcecalendar/interface 1.0.51 → 1.0.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/force-calendar-interface.esm.js +37 -18
- package/dist/force-calendar-interface.esm.js.map +1 -1
- package/dist/force-calendar-interface.umd.js +8 -8
- package/dist/force-calendar-interface.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/renderers/BaseViewRenderer.js +25 -1
- package/src/renderers/DayViewRenderer.js +11 -2
- package/src/renderers/WeekViewRenderer.js +11 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var F = Object.defineProperty;
|
|
2
2
|
var H = (h, t, e) => t in h ? F(h, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[t] = e;
|
|
3
3
|
var v = (h, t, e) => H(h, typeof t != "symbol" ? t + "" : t, e);
|
|
4
|
-
import { Calendar as
|
|
4
|
+
import { Calendar as I, DateUtils as L } from "@forcecalendar/core";
|
|
5
5
|
class M extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
7
7
|
super(), this.attachShadow({ mode: "open" }), this._listeners = [], this._state = null, this._props = /* @__PURE__ */ new Map(), this._initialized = !1;
|
|
@@ -111,7 +111,7 @@ class M extends HTMLElement {
|
|
|
111
111
|
this.setProp(t, r), this._initialized && this.render();
|
|
112
112
|
}
|
|
113
113
|
}
|
|
114
|
-
class
|
|
114
|
+
class T {
|
|
115
115
|
constructor() {
|
|
116
116
|
this.events = /* @__PURE__ */ new Map(), this.wildcardHandlers = /* @__PURE__ */ new Set();
|
|
117
117
|
}
|
|
@@ -249,10 +249,10 @@ class S {
|
|
|
249
249
|
return t;
|
|
250
250
|
}
|
|
251
251
|
}
|
|
252
|
-
const U = new
|
|
253
|
-
class
|
|
252
|
+
const U = new T();
|
|
253
|
+
class V {
|
|
254
254
|
constructor(t = {}) {
|
|
255
|
-
this.eventBus = new
|
|
255
|
+
this.eventBus = new T(), this.calendar = new I({
|
|
256
256
|
view: t.view || "month",
|
|
257
257
|
date: t.date || /* @__PURE__ */ new Date(),
|
|
258
258
|
weekStartsOn: t.weekStartsOn ?? 0,
|
|
@@ -486,7 +486,7 @@ class I {
|
|
|
486
486
|
this.subscribers.clear(), this._subscriberIds && (this._subscriberIds.clear(), this._subscriberIds = null), this.eventBus && (this.eventBus.clear(), this.eventBus = null), this.state = null, this.calendar = null;
|
|
487
487
|
}
|
|
488
488
|
}
|
|
489
|
-
class u extends
|
|
489
|
+
class u extends L {
|
|
490
490
|
/**
|
|
491
491
|
* Format date for display
|
|
492
492
|
*/
|
|
@@ -1254,7 +1254,7 @@ class E {
|
|
|
1254
1254
|
* @param {StateManager} stateManager - The state manager instance
|
|
1255
1255
|
*/
|
|
1256
1256
|
constructor(t, e) {
|
|
1257
|
-
this.container = t, this.stateManager = e, this._listeners = [], this._scrolled = !1;
|
|
1257
|
+
this.container = t, this.stateManager = e, this._listeners = [], this._scrolled = !1, this._nowIndicatorTimer = null;
|
|
1258
1258
|
}
|
|
1259
1259
|
/**
|
|
1260
1260
|
* Render the view into the container
|
|
@@ -1269,7 +1269,7 @@ class E {
|
|
|
1269
1269
|
cleanup() {
|
|
1270
1270
|
this._listeners.forEach(({ element: t, event: e, handler: r }) => {
|
|
1271
1271
|
t.removeEventListener(e, r);
|
|
1272
|
-
}), this._listeners = [];
|
|
1272
|
+
}), this._listeners = [], this._nowIndicatorTimer && (clearInterval(this._nowIndicatorTimer), this._nowIndicatorTimer = null);
|
|
1273
1273
|
}
|
|
1274
1274
|
/**
|
|
1275
1275
|
* Add an event listener with automatic cleanup tracking
|
|
@@ -1342,6 +1342,19 @@ class E {
|
|
|
1342
1342
|
const t = /* @__PURE__ */ new Date();
|
|
1343
1343
|
return `<div class="fc-now-indicator" style="position: absolute; left: 0; right: 0; top: ${t.getHours() * 60 + t.getMinutes()}px; height: 2px; background: var(--fc-danger-color); z-index: 15; pointer-events: none;"></div>`;
|
|
1344
1344
|
}
|
|
1345
|
+
/**
|
|
1346
|
+
* Start a timer that updates the now indicator position every 60 seconds.
|
|
1347
|
+
* Call this after render() in day/week views that show a now indicator.
|
|
1348
|
+
*/
|
|
1349
|
+
startNowIndicatorTimer() {
|
|
1350
|
+
this._nowIndicatorTimer && clearInterval(this._nowIndicatorTimer), this._nowIndicatorTimer = setInterval(() => {
|
|
1351
|
+
const t = this.container.querySelector(".fc-now-indicator");
|
|
1352
|
+
if (t) {
|
|
1353
|
+
const e = /* @__PURE__ */ new Date();
|
|
1354
|
+
t.style.top = `${e.getHours() * 60 + e.getMinutes()}px`;
|
|
1355
|
+
}
|
|
1356
|
+
}, 6e4);
|
|
1357
|
+
}
|
|
1345
1358
|
/**
|
|
1346
1359
|
* Compute overlap layout columns for a list of timed events.
|
|
1347
1360
|
* Returns a Map of event.id -> { column, totalColumns }.
|
|
@@ -1355,7 +1368,9 @@ class E {
|
|
|
1355
1368
|
const c = new Date(o.start), l = new Date(o.end), d = c.getHours() * 60 + c.getMinutes(), p = Math.max(d + 1, l.getHours() * 60 + l.getMinutes());
|
|
1356
1369
|
return { id: o.id, startMin: d, endMin: p };
|
|
1357
1370
|
});
|
|
1358
|
-
e.sort(
|
|
1371
|
+
e.sort(
|
|
1372
|
+
(o, c) => o.startMin - c.startMin || c.endMin - c.startMin - (o.endMin - o.startMin)
|
|
1373
|
+
);
|
|
1359
1374
|
const r = [], i = /* @__PURE__ */ new Map();
|
|
1360
1375
|
for (const o of e) {
|
|
1361
1376
|
let c = !1;
|
|
@@ -1387,7 +1402,7 @@ class E {
|
|
|
1387
1402
|
* @returns {string} HTML string
|
|
1388
1403
|
*/
|
|
1389
1404
|
renderTimedEvent(t, e = {}) {
|
|
1390
|
-
const { compact: r = !0, overlapLayout: i = null } = e, s = new Date(t.start), n = new Date(t.end), a = s.getHours() * 60 + s.getMinutes(), o = Math.max((n - s) / (1e3 * 60), r ? 20 : 30), c = this.getEventColor(t), l = this.getContrastingTextColor(c), d = r ? "4px 8px" : "8px 12px", p = r ? "11px" : "13px", g = r ? 2 : 12, b = r ? 2 : 24,
|
|
1405
|
+
const { compact: r = !0, overlapLayout: i = null } = e, s = new Date(t.start), n = new Date(t.end), a = s.getHours() * 60 + s.getMinutes(), o = Math.max((n - s) / (1e3 * 60), r ? 20 : 30), c = this.getEventColor(t), l = this.getContrastingTextColor(c), d = r ? "4px 8px" : "8px 12px", p = r ? "11px" : "13px", g = r ? 2 : 12, b = r ? 2 : 24, S = r ? "4px" : "6px";
|
|
1391
1406
|
let y, x;
|
|
1392
1407
|
if (i && i.has(t.id)) {
|
|
1393
1408
|
const { column: C, totalColumns: _ } = i.get(t.id), $ = `(100% - ${g + b}px)`;
|
|
@@ -1398,7 +1413,7 @@ class E {
|
|
|
1398
1413
|
<div class="fc-event fc-timed-event" data-event-id="${this.escapeHTML(t.id)}"
|
|
1399
1414
|
style="position: absolute; top: ${a}px; height: ${o}px;
|
|
1400
1415
|
left: ${y}; width: ${x};
|
|
1401
|
-
background-color: ${c}; border-radius: ${
|
|
1416
|
+
background-color: ${c}; border-radius: ${S};
|
|
1402
1417
|
padding: ${d}; font-size: ${p};
|
|
1403
1418
|
font-weight: 500; color: ${l}; overflow: hidden;
|
|
1404
1419
|
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
|
@@ -1521,7 +1536,7 @@ class z extends E {
|
|
|
1521
1536
|
}
|
|
1522
1537
|
this.cleanup(), this._scrolled = !1;
|
|
1523
1538
|
const e = this.stateManager.getState().config, r = this._renderWeekView(t, e);
|
|
1524
|
-
this.container.innerHTML = r, this._attachEventHandlers(), this._scrollToCurrentTime();
|
|
1539
|
+
this.container.innerHTML = r, this._attachEventHandlers(), this._scrollToCurrentTime(), this.startNowIndicatorTimer();
|
|
1525
1540
|
}
|
|
1526
1541
|
_renderWeekView(t, e) {
|
|
1527
1542
|
const r = t.days, i = this.stateManager.getState().config.locale || "en-US", s = Array.from({ length: 24 }, (a, o) => o), n = r.map((a) => {
|
|
@@ -1621,7 +1636,9 @@ class z extends E {
|
|
|
1621
1636
|
<!-- Timed events -->
|
|
1622
1637
|
${(() => {
|
|
1623
1638
|
const r = this.computeOverlapLayout(t.timedEvents);
|
|
1624
|
-
return t.timedEvents.map(
|
|
1639
|
+
return t.timedEvents.map(
|
|
1640
|
+
(i) => this.renderTimedEvent(i, { compact: !0, overlapLayout: r })
|
|
1641
|
+
).join("");
|
|
1625
1642
|
})()}
|
|
1626
1643
|
</div>
|
|
1627
1644
|
`;
|
|
@@ -1658,7 +1675,7 @@ class B extends E {
|
|
|
1658
1675
|
}
|
|
1659
1676
|
this.cleanup(), this._scrolled = !1;
|
|
1660
1677
|
const e = this.stateManager.getState().config, r = this._renderDayView(t, e);
|
|
1661
|
-
this.container.innerHTML = r, this._attachEventHandlers(), this._scrollToCurrentTime();
|
|
1678
|
+
this.container.innerHTML = r, this._attachEventHandlers(), this._scrollToCurrentTime(), this.startNowIndicatorTimer();
|
|
1662
1679
|
}
|
|
1663
1680
|
_renderDayView(t, e) {
|
|
1664
1681
|
var d, p;
|
|
@@ -1765,7 +1782,9 @@ class B extends E {
|
|
|
1765
1782
|
<!-- Timed events -->
|
|
1766
1783
|
${(() => {
|
|
1767
1784
|
const s = this.computeOverlapLayout(t);
|
|
1768
|
-
return t.map(
|
|
1785
|
+
return t.map(
|
|
1786
|
+
(n) => this.renderTimedEvent(n, { compact: !1, overlapLayout: s })
|
|
1787
|
+
).join("");
|
|
1769
1788
|
})()}
|
|
1770
1789
|
</div>
|
|
1771
1790
|
`;
|
|
@@ -2110,7 +2129,7 @@ const m = class m extends M {
|
|
|
2110
2129
|
timeZone: this.getAttribute("timezone") || Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
2111
2130
|
weekStartsOn: parseInt(this.getAttribute("week-starts-on") || "0")
|
|
2112
2131
|
};
|
|
2113
|
-
this.stateManager = new
|
|
2132
|
+
this.stateManager = new V(t), this._stateUnsubscribe = this.stateManager.subscribe(this.handleStateChange.bind(this)), this.setupEventListeners();
|
|
2114
2133
|
}
|
|
2115
2134
|
setupEventListeners() {
|
|
2116
2135
|
this._busUnsubscribers.forEach((r) => r()), this._busUnsubscribers = [];
|
|
@@ -2807,10 +2826,10 @@ export {
|
|
|
2807
2826
|
k as DOMUtils,
|
|
2808
2827
|
u as DateUtils,
|
|
2809
2828
|
B as DayViewRenderer,
|
|
2810
|
-
|
|
2829
|
+
T as EventBus,
|
|
2811
2830
|
D as ForceCalendar,
|
|
2812
2831
|
w as MonthViewRenderer,
|
|
2813
|
-
|
|
2832
|
+
V as StateManager,
|
|
2814
2833
|
f as StyleUtils,
|
|
2815
2834
|
z as WeekViewRenderer,
|
|
2816
2835
|
U as eventBus
|