@forcecalendar/interface 1.0.48 → 1.0.49
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.
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import { Calendar as
|
|
1
|
+
var F = Object.defineProperty;
|
|
2
|
+
var H = (h, t, e) => t in h ? F(h, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[t] = e;
|
|
3
|
+
var v = (h, t, e) => H(h, typeof t != "symbol" ? t + "" : t, e);
|
|
4
|
+
import { Calendar as L, DateUtils as V } 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;
|
|
@@ -52,8 +52,8 @@ class M extends HTMLElement {
|
|
|
52
52
|
console.warn("addListener called with invalid parameters", { element: t, event: e, handler: r });
|
|
53
53
|
return;
|
|
54
54
|
}
|
|
55
|
-
const
|
|
56
|
-
t.addEventListener(e,
|
|
55
|
+
const s = r.bind(this);
|
|
56
|
+
t.addEventListener(e, s), this._listeners.push({ element: t, event: e, handler: s });
|
|
57
57
|
}
|
|
58
58
|
emit(t, e = {}) {
|
|
59
59
|
this.dispatchEvent(
|
|
@@ -123,13 +123,13 @@ class T {
|
|
|
123
123
|
* @returns {Function} Unsubscribe function
|
|
124
124
|
*/
|
|
125
125
|
on(t, e, r = {}) {
|
|
126
|
-
const { once:
|
|
126
|
+
const { once: s = !1, priority: i = 0 } = r;
|
|
127
127
|
if (t.includes("*")) {
|
|
128
|
-
const o = { pattern: t, handler: e, once:
|
|
128
|
+
const o = { pattern: t, handler: e, once: s, priority: i };
|
|
129
129
|
return this.wildcardHandlers.add(o), () => this.wildcardHandlers.delete(o);
|
|
130
130
|
}
|
|
131
131
|
this.events.has(t) || this.events.set(t, []);
|
|
132
|
-
const n = { handler: e, once:
|
|
132
|
+
const n = { handler: e, once: s, priority: i }, a = this.events.get(t);
|
|
133
133
|
return a.push(n), a.sort((o, c) => c.priority - o.priority), () => {
|
|
134
134
|
const o = a.indexOf(n);
|
|
135
135
|
o > -1 && a.splice(o, 1);
|
|
@@ -146,16 +146,16 @@ class T {
|
|
|
146
146
|
*/
|
|
147
147
|
off(t, e) {
|
|
148
148
|
if (t.includes("*")) {
|
|
149
|
-
for (const
|
|
150
|
-
if (
|
|
151
|
-
this.wildcardHandlers.delete(
|
|
149
|
+
for (const i of this.wildcardHandlers)
|
|
150
|
+
if (i.pattern === t && i.handler === e) {
|
|
151
|
+
this.wildcardHandlers.delete(i);
|
|
152
152
|
return;
|
|
153
153
|
}
|
|
154
154
|
return;
|
|
155
155
|
}
|
|
156
156
|
if (!this.events.has(t)) return;
|
|
157
|
-
const r = this.events.get(t),
|
|
158
|
-
|
|
157
|
+
const r = this.events.get(t), s = r.findIndex((i) => i.handler === e);
|
|
158
|
+
s > -1 && r.splice(s, 1), r.length === 0 && this.events.delete(t);
|
|
159
159
|
}
|
|
160
160
|
/**
|
|
161
161
|
* Remove all wildcard handlers matching a pattern
|
|
@@ -172,8 +172,8 @@ class T {
|
|
|
172
172
|
*/
|
|
173
173
|
offAll(t) {
|
|
174
174
|
for (const [e, r] of this.events) {
|
|
175
|
-
const
|
|
176
|
-
|
|
175
|
+
const s = r.findIndex((i) => i.handler === t);
|
|
176
|
+
s > -1 && r.splice(s, 1), r.length === 0 && this.events.delete(e);
|
|
177
177
|
}
|
|
178
178
|
for (const e of [...this.wildcardHandlers])
|
|
179
179
|
e.handler === t && this.wildcardHandlers.delete(e);
|
|
@@ -185,9 +185,9 @@ class T {
|
|
|
185
185
|
*/
|
|
186
186
|
emit(t, e) {
|
|
187
187
|
if (this.events.has(t)) {
|
|
188
|
-
const
|
|
189
|
-
for (const
|
|
190
|
-
const { handler: n, once: a } =
|
|
188
|
+
const s = [...this.events.get(t)];
|
|
189
|
+
for (const i of s) {
|
|
190
|
+
const { handler: n, once: a } = i;
|
|
191
191
|
a && this.off(t, n);
|
|
192
192
|
try {
|
|
193
193
|
n(e, t);
|
|
@@ -197,17 +197,17 @@ class T {
|
|
|
197
197
|
}
|
|
198
198
|
}
|
|
199
199
|
const r = [];
|
|
200
|
-
for (const
|
|
201
|
-
if (this.matchesPattern(t,
|
|
202
|
-
const { handler:
|
|
203
|
-
n && r.push(
|
|
200
|
+
for (const s of [...this.wildcardHandlers])
|
|
201
|
+
if (this.matchesPattern(t, s.pattern)) {
|
|
202
|
+
const { handler: i, once: n } = s;
|
|
203
|
+
n && r.push(s);
|
|
204
204
|
try {
|
|
205
|
-
|
|
205
|
+
i(e, t);
|
|
206
206
|
} catch (a) {
|
|
207
207
|
console.error(`Error in wildcard handler for ${t}:`, a);
|
|
208
208
|
}
|
|
209
209
|
}
|
|
210
|
-
r.forEach((
|
|
210
|
+
r.forEach((s) => this.wildcardHandlers.delete(s));
|
|
211
211
|
}
|
|
212
212
|
/**
|
|
213
213
|
* Check if event name matches a pattern
|
|
@@ -249,10 +249,10 @@ class T {
|
|
|
249
249
|
return t;
|
|
250
250
|
}
|
|
251
251
|
}
|
|
252
|
-
const
|
|
253
|
-
class
|
|
252
|
+
const U = new T();
|
|
253
|
+
class I {
|
|
254
254
|
constructor(t = {}) {
|
|
255
|
-
this.eventBus = new T(), this.calendar = new
|
|
255
|
+
this.eventBus = new T(), this.calendar = new L({
|
|
256
256
|
view: t.view || "month",
|
|
257
257
|
date: t.date || /* @__PURE__ */ new Date(),
|
|
258
258
|
weekStartsOn: t.weekStartsOn ?? 0,
|
|
@@ -291,8 +291,8 @@ class V {
|
|
|
291
291
|
*/
|
|
292
292
|
_eventsMatch(t, e) {
|
|
293
293
|
if (t.length !== e.length) return !1;
|
|
294
|
-
const r = new Set(t.map((
|
|
295
|
-
return e.every((
|
|
294
|
+
const r = new Set(t.map((s) => s.id));
|
|
295
|
+
return e.every((s) => r.has(s.id));
|
|
296
296
|
}
|
|
297
297
|
// State management
|
|
298
298
|
getState() {
|
|
@@ -303,8 +303,8 @@ class V {
|
|
|
303
303
|
};
|
|
304
304
|
}
|
|
305
305
|
setState(t, e = {}) {
|
|
306
|
-
const { silent: r = !1 } = e,
|
|
307
|
-
return this.state = { ...this.state, ...t }, r || (this.notifySubscribers(
|
|
306
|
+
const { silent: r = !1 } = e, s = { ...this.state };
|
|
307
|
+
return this.state = { ...this.state, ...t }, r || (this.notifySubscribers(s, this.state), this.emitStateChange(s, this.state)), this.state;
|
|
308
308
|
}
|
|
309
309
|
subscribe(t, e = null) {
|
|
310
310
|
return this.subscribers.add(t), e && (this._subscriberIds || (this._subscriberIds = /* @__PURE__ */ new Map()), this._subscriberIds.set(e, t)), () => this.unsubscribe(t, e);
|
|
@@ -331,17 +331,17 @@ class V {
|
|
|
331
331
|
this.subscribers.forEach((r) => {
|
|
332
332
|
try {
|
|
333
333
|
r(e, t);
|
|
334
|
-
} catch (
|
|
335
|
-
console.error("Error in state subscriber:",
|
|
334
|
+
} catch (s) {
|
|
335
|
+
console.error("Error in state subscriber:", s);
|
|
336
336
|
}
|
|
337
337
|
});
|
|
338
338
|
}
|
|
339
339
|
emitStateChange(t, e) {
|
|
340
|
-
const r = Object.keys(e).filter((
|
|
341
|
-
r.forEach((
|
|
342
|
-
this.eventBus.emit(`state:${
|
|
343
|
-
oldValue: t[
|
|
344
|
-
newValue: e[
|
|
340
|
+
const r = Object.keys(e).filter((s) => t[s] !== e[s]);
|
|
341
|
+
r.forEach((s) => {
|
|
342
|
+
this.eventBus.emit(`state:${s}:changed`, {
|
|
343
|
+
oldValue: t[s],
|
|
344
|
+
newValue: e[s],
|
|
345
345
|
state: e
|
|
346
346
|
});
|
|
347
347
|
}), r.length > 0 && this.eventBus.emit("state:changed", { oldState: t, newState: e, changedKeys: r });
|
|
@@ -412,11 +412,11 @@ class V {
|
|
|
412
412
|
return this.enrichViewData(t);
|
|
413
413
|
}
|
|
414
414
|
enrichViewData(t) {
|
|
415
|
-
var
|
|
416
|
-
const e = { ...t }, r = (
|
|
417
|
-
if (e.weeks && (e.weeks = e.weeks.map((
|
|
418
|
-
...
|
|
419
|
-
days:
|
|
415
|
+
var s;
|
|
416
|
+
const e = { ...t }, r = (s = this.state.selectedDate) == null ? void 0 : s.toDateString();
|
|
417
|
+
if (e.weeks && (e.weeks = e.weeks.map((i) => ({
|
|
418
|
+
...i,
|
|
419
|
+
days: i.days.map((n) => {
|
|
420
420
|
const a = new Date(n.date);
|
|
421
421
|
return {
|
|
422
422
|
...n,
|
|
@@ -424,16 +424,16 @@ class V {
|
|
|
424
424
|
events: n.events || this.getEventsForDate(a)
|
|
425
425
|
};
|
|
426
426
|
})
|
|
427
|
-
}))), e.days && (e.days = e.days.map((
|
|
428
|
-
const n = new Date(
|
|
427
|
+
}))), e.days && (e.days = e.days.map((i) => {
|
|
428
|
+
const n = new Date(i.date);
|
|
429
429
|
return {
|
|
430
|
-
...
|
|
430
|
+
...i,
|
|
431
431
|
isSelected: n.toDateString() === r,
|
|
432
|
-
events:
|
|
432
|
+
events: i.events || this.getEventsForDate(n)
|
|
433
433
|
};
|
|
434
434
|
})), e.date && !e.days && !e.weeks) {
|
|
435
|
-
const
|
|
436
|
-
e.isSelected =
|
|
435
|
+
const i = new Date(e.date);
|
|
436
|
+
e.isSelected = i.toDateString() === r, e.events = e.events || this.getEventsForDate(i);
|
|
437
437
|
}
|
|
438
438
|
return e;
|
|
439
439
|
}
|
|
@@ -486,13 +486,13 @@ class V {
|
|
|
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 p extends
|
|
489
|
+
class p extends V {
|
|
490
490
|
/**
|
|
491
491
|
* Format date for display
|
|
492
492
|
*/
|
|
493
493
|
static formatDate(t, e = "default", r = "en-US") {
|
|
494
494
|
if (!t) return "";
|
|
495
|
-
const
|
|
495
|
+
const s = {
|
|
496
496
|
default: { year: "numeric", month: "long", day: "numeric" },
|
|
497
497
|
short: { year: "numeric", month: "short", day: "numeric" },
|
|
498
498
|
long: { weekday: "long", year: "numeric", month: "long", day: "numeric" },
|
|
@@ -509,20 +509,20 @@ class p extends L {
|
|
|
509
509
|
hour: "numeric",
|
|
510
510
|
minute: "2-digit"
|
|
511
511
|
}
|
|
512
|
-
},
|
|
513
|
-
return new Intl.DateTimeFormat(r,
|
|
512
|
+
}, i = s[e] || s.default;
|
|
513
|
+
return new Intl.DateTimeFormat(r, i).format(t);
|
|
514
514
|
}
|
|
515
515
|
/**
|
|
516
516
|
* Format time for display
|
|
517
517
|
*/
|
|
518
|
-
static formatTime(t, e = !0, r = !1,
|
|
518
|
+
static formatTime(t, e = !0, r = !1, s = "en-US") {
|
|
519
519
|
if (!t) return "";
|
|
520
|
-
const
|
|
520
|
+
const i = {
|
|
521
521
|
hour: "numeric",
|
|
522
522
|
minute: e ? "2-digit" : void 0,
|
|
523
523
|
hour12: !r
|
|
524
524
|
};
|
|
525
|
-
return new Intl.DateTimeFormat(
|
|
525
|
+
return new Intl.DateTimeFormat(s, i).format(t);
|
|
526
526
|
}
|
|
527
527
|
/**
|
|
528
528
|
* Format date range for display
|
|
@@ -531,25 +531,25 @@ class p extends L {
|
|
|
531
531
|
if (!t) return "";
|
|
532
532
|
if (!e || this.isSameDay(t, e))
|
|
533
533
|
return this.formatDate(t, "default", r);
|
|
534
|
-
const
|
|
535
|
-
return `${this.formatDate(t,
|
|
534
|
+
const s = this.isSameYear(t, e) ? "short" : "default";
|
|
535
|
+
return `${this.formatDate(t, s, r)} - ${this.formatDate(e, "default", r)}`;
|
|
536
536
|
}
|
|
537
537
|
/**
|
|
538
538
|
* Format time range for display
|
|
539
539
|
*/
|
|
540
540
|
static formatTimeRange(t, e, r = "en-US") {
|
|
541
541
|
if (!t) return "";
|
|
542
|
-
const
|
|
543
|
-
if (!e) return
|
|
544
|
-
const
|
|
545
|
-
return `${
|
|
542
|
+
const s = this.formatTime(t, !0, !1, r);
|
|
543
|
+
if (!e) return s;
|
|
544
|
+
const i = this.formatTime(e, !0, !1, r);
|
|
545
|
+
return `${s} - ${i}`;
|
|
546
546
|
}
|
|
547
547
|
/**
|
|
548
548
|
* Get relative time string (e.g., "2 hours ago", "in 3 days")
|
|
549
549
|
*/
|
|
550
550
|
static getRelativeTime(t, e = /* @__PURE__ */ new Date(), r = "en-US") {
|
|
551
|
-
const
|
|
552
|
-
return Math.abs(n) < 60 ?
|
|
551
|
+
const s = new Intl.RelativeTimeFormat(r, { numeric: "auto" }), i = t - e, n = Math.floor(i / 1e3), a = Math.floor(n / 60), o = Math.floor(a / 60), c = Math.floor(o / 24), d = Math.floor(c / 7), l = Math.floor(c / 30), f = Math.floor(c / 365);
|
|
552
|
+
return Math.abs(n) < 60 ? s.format(n, "second") : Math.abs(a) < 60 ? s.format(a, "minute") : Math.abs(o) < 24 ? s.format(o, "hour") : Math.abs(c) < 7 ? s.format(c, "day") : Math.abs(d) < 4 ? s.format(d, "week") : Math.abs(l) < 12 ? s.format(l, "month") : s.format(f, "year");
|
|
553
553
|
}
|
|
554
554
|
/**
|
|
555
555
|
* Check if date is today
|
|
@@ -588,16 +588,16 @@ class p extends L {
|
|
|
588
588
|
* Get month name
|
|
589
589
|
*/
|
|
590
590
|
static getMonthName(t, e = "long", r = "en-US") {
|
|
591
|
-
const
|
|
592
|
-
return new Intl.DateTimeFormat(r, { month: e }).format(
|
|
591
|
+
const s = new Date(2024, t, 1);
|
|
592
|
+
return new Intl.DateTimeFormat(r, { month: e }).format(s);
|
|
593
593
|
}
|
|
594
594
|
/**
|
|
595
595
|
* Parse time string (e.g., "14:30" or "2:30 PM")
|
|
596
596
|
*/
|
|
597
597
|
static parseTimeString(t, e = /* @__PURE__ */ new Date()) {
|
|
598
|
-
const r = new Date(e), [
|
|
598
|
+
const r = new Date(e), [s, i] = t.split(/\s+/), [n, a] = s.split(":").map(Number);
|
|
599
599
|
let o = n;
|
|
600
|
-
return
|
|
600
|
+
return i && (i.toLowerCase() === "pm" && n < 12 ? o = n + 12 : i.toLowerCase() === "am" && n === 12 && (o = 0)), r.setHours(o, a || 0, 0, 0), r;
|
|
601
601
|
}
|
|
602
602
|
}
|
|
603
603
|
class D {
|
|
@@ -605,44 +605,44 @@ class D {
|
|
|
605
605
|
* Create element with attributes and children
|
|
606
606
|
*/
|
|
607
607
|
static createElement(t, e = {}, r = []) {
|
|
608
|
-
const
|
|
609
|
-
return Object.entries(e).forEach(([
|
|
610
|
-
if (
|
|
611
|
-
|
|
612
|
-
else if (
|
|
613
|
-
Object.assign(
|
|
614
|
-
else if (
|
|
615
|
-
|
|
616
|
-
else if (
|
|
617
|
-
const a =
|
|
618
|
-
|
|
608
|
+
const s = document.createElement(t);
|
|
609
|
+
return Object.entries(e).forEach(([i, n]) => {
|
|
610
|
+
if (i === "className")
|
|
611
|
+
s.className = n;
|
|
612
|
+
else if (i === "style" && typeof n == "object")
|
|
613
|
+
Object.assign(s.style, n);
|
|
614
|
+
else if (i.startsWith("data-"))
|
|
615
|
+
s.setAttribute(i, n);
|
|
616
|
+
else if (i.startsWith("on") && typeof n == "function") {
|
|
617
|
+
const a = i.slice(2).toLowerCase();
|
|
618
|
+
s.addEventListener(a, n);
|
|
619
619
|
} else
|
|
620
|
-
i
|
|
621
|
-
}), r.forEach((
|
|
622
|
-
typeof
|
|
623
|
-
}),
|
|
620
|
+
s[i] = n;
|
|
621
|
+
}), r.forEach((i) => {
|
|
622
|
+
typeof i == "string" ? s.appendChild(document.createTextNode(i)) : i instanceof Node && s.appendChild(i);
|
|
623
|
+
}), s;
|
|
624
624
|
}
|
|
625
625
|
/**
|
|
626
626
|
* Add multiple event listeners
|
|
627
627
|
*/
|
|
628
628
|
static addEventListeners(t, e) {
|
|
629
|
-
return Object.entries(e).forEach(([r,
|
|
630
|
-
t.addEventListener(r,
|
|
629
|
+
return Object.entries(e).forEach(([r, s]) => {
|
|
630
|
+
t.addEventListener(r, s);
|
|
631
631
|
}), () => {
|
|
632
|
-
Object.entries(e).forEach(([r,
|
|
633
|
-
t.removeEventListener(r,
|
|
632
|
+
Object.entries(e).forEach(([r, s]) => {
|
|
633
|
+
t.removeEventListener(r, s);
|
|
634
634
|
});
|
|
635
635
|
};
|
|
636
636
|
}
|
|
637
637
|
/**
|
|
638
638
|
* Delegate event handling
|
|
639
639
|
*/
|
|
640
|
-
static delegate(t, e, r,
|
|
641
|
-
const
|
|
640
|
+
static delegate(t, e, r, s) {
|
|
641
|
+
const i = (n) => {
|
|
642
642
|
const a = n.target.closest(e);
|
|
643
|
-
a && t.contains(a) &&
|
|
643
|
+
a && t.contains(a) && s.call(a, n);
|
|
644
644
|
};
|
|
645
|
-
return t.addEventListener(r,
|
|
645
|
+
return t.addEventListener(r, i), () => t.removeEventListener(r, i);
|
|
646
646
|
}
|
|
647
647
|
/**
|
|
648
648
|
* Get element position relative to viewport
|
|
@@ -669,8 +669,8 @@ class D {
|
|
|
669
669
|
* Smooth scroll to element
|
|
670
670
|
*/
|
|
671
671
|
static scrollToElement(t, e = {}) {
|
|
672
|
-
const { behavior: r = "smooth", block:
|
|
673
|
-
t.scrollIntoView({ behavior: r, block:
|
|
672
|
+
const { behavior: r = "smooth", block: s = "start", inline: i = "nearest" } = e;
|
|
673
|
+
t.scrollIntoView({ behavior: r, block: s, inline: i });
|
|
674
674
|
}
|
|
675
675
|
/**
|
|
676
676
|
* Get computed style value
|
|
@@ -695,10 +695,10 @@ class D {
|
|
|
695
695
|
*/
|
|
696
696
|
static waitForAnimation(t, e = "animationend") {
|
|
697
697
|
return new Promise((r) => {
|
|
698
|
-
const
|
|
699
|
-
t.removeEventListener(e,
|
|
698
|
+
const s = () => {
|
|
699
|
+
t.removeEventListener(e, s), r();
|
|
700
700
|
};
|
|
701
|
-
t.addEventListener(e,
|
|
701
|
+
t.addEventListener(e, s);
|
|
702
702
|
});
|
|
703
703
|
}
|
|
704
704
|
/**
|
|
@@ -726,9 +726,9 @@ class D {
|
|
|
726
726
|
*/
|
|
727
727
|
static debounce(t, e = 250) {
|
|
728
728
|
let r;
|
|
729
|
-
return function(...
|
|
729
|
+
return function(...i) {
|
|
730
730
|
const n = () => {
|
|
731
|
-
clearTimeout(r), t(...
|
|
731
|
+
clearTimeout(r), t(...i);
|
|
732
732
|
};
|
|
733
733
|
clearTimeout(r), r = setTimeout(n, e);
|
|
734
734
|
};
|
|
@@ -738,8 +738,8 @@ class D {
|
|
|
738
738
|
*/
|
|
739
739
|
static throttle(t, e = 250) {
|
|
740
740
|
let r;
|
|
741
|
-
return function(...
|
|
742
|
-
r || (t.apply(this,
|
|
741
|
+
return function(...s) {
|
|
742
|
+
r || (t.apply(this, s), r = !0, setTimeout(() => r = !1, e));
|
|
743
743
|
};
|
|
744
744
|
}
|
|
745
745
|
/**
|
|
@@ -753,9 +753,9 @@ class D {
|
|
|
753
753
|
*/
|
|
754
754
|
static parents(t, e) {
|
|
755
755
|
const r = [];
|
|
756
|
-
let
|
|
757
|
-
for (;
|
|
758
|
-
|
|
756
|
+
let s = t.parentElement;
|
|
757
|
+
for (; s; )
|
|
758
|
+
s.matches(e) && r.push(s), s = s.parentElement;
|
|
759
759
|
return r;
|
|
760
760
|
}
|
|
761
761
|
/**
|
|
@@ -789,13 +789,13 @@ class D {
|
|
|
789
789
|
);
|
|
790
790
|
if (e.length === 0)
|
|
791
791
|
return t.setAttribute("tabindex", "-1"), t.focus(), () => t.removeAttribute("tabindex");
|
|
792
|
-
const r = e[0],
|
|
793
|
-
n.key === "Tab" && (n.shiftKey ? document.activeElement === r && (
|
|
792
|
+
const r = e[0], s = e[e.length - 1], i = (n) => {
|
|
793
|
+
n.key === "Tab" && (n.shiftKey ? document.activeElement === r && (s == null || s.focus(), n.preventDefault()) : document.activeElement === s && (r == null || r.focus(), n.preventDefault()));
|
|
794
794
|
};
|
|
795
|
-
return t.addEventListener("keydown",
|
|
795
|
+
return t.addEventListener("keydown", i), r == null || r.focus(), () => t.removeEventListener("keydown", i);
|
|
796
796
|
}
|
|
797
797
|
}
|
|
798
|
-
class
|
|
798
|
+
class u {
|
|
799
799
|
/**
|
|
800
800
|
* Get CSS variable value
|
|
801
801
|
*/
|
|
@@ -806,8 +806,8 @@ class f {
|
|
|
806
806
|
* Set CSS variables
|
|
807
807
|
*/
|
|
808
808
|
static setCSSVariables(t, e = document.documentElement) {
|
|
809
|
-
Object.entries(t).forEach(([r,
|
|
810
|
-
e.style.setProperty(r,
|
|
809
|
+
Object.entries(t).forEach(([r, s]) => {
|
|
810
|
+
e.style.setProperty(r, s);
|
|
811
811
|
});
|
|
812
812
|
}
|
|
813
813
|
/**
|
|
@@ -963,22 +963,22 @@ class f {
|
|
|
963
963
|
* Darken color by percentage
|
|
964
964
|
*/
|
|
965
965
|
static darken(t, e) {
|
|
966
|
-
const r = parseInt(t.replace("#", ""), 16),
|
|
967
|
-
return "#" + (16777216 + (
|
|
966
|
+
const r = parseInt(t.replace("#", ""), 16), s = Math.round(2.55 * e), i = (r >> 16) - s, n = (r >> 8 & 255) - s, a = (r & 255) - s;
|
|
967
|
+
return "#" + (16777216 + (i < 255 ? i < 1 ? 0 : i : 255) * 65536 + (n < 255 ? n < 1 ? 0 : n : 255) * 256 + (a < 255 ? a < 1 ? 0 : a : 255)).toString(16).slice(1);
|
|
968
968
|
}
|
|
969
969
|
/**
|
|
970
970
|
* Lighten color by percentage
|
|
971
971
|
*/
|
|
972
972
|
static lighten(t, e) {
|
|
973
|
-
const r = parseInt(t.replace("#", ""), 16),
|
|
974
|
-
return "#" + (16777216 + (
|
|
973
|
+
const r = parseInt(t.replace("#", ""), 16), s = Math.round(2.55 * e), i = (r >> 16) + s, n = (r >> 8 & 255) + s, a = (r & 255) + s;
|
|
974
|
+
return "#" + (16777216 + (i < 255 ? i < 1 ? 0 : i : 255) * 65536 + (n < 255 ? n < 1 ? 0 : n : 255) * 256 + (a < 255 ? a < 1 ? 0 : a : 255)).toString(16).slice(1);
|
|
975
975
|
}
|
|
976
976
|
/**
|
|
977
977
|
* Get contrast color (black or white) for background
|
|
978
978
|
*/
|
|
979
979
|
static getContrastColor(t) {
|
|
980
|
-
const e = t.replace("#", ""), r = parseInt(e.substr(0, 2), 16),
|
|
981
|
-
return (r * 299 +
|
|
980
|
+
const e = t.replace("#", ""), r = parseInt(e.substr(0, 2), 16), s = parseInt(e.substr(2, 2), 16), i = parseInt(e.substr(4, 2), 16);
|
|
981
|
+
return (r * 299 + s * 587 + i * 114) / 1e3 >= 128 ? "#000000" : "#FFFFFF";
|
|
982
982
|
}
|
|
983
983
|
/**
|
|
984
984
|
* Sanitize color value to prevent CSS injection
|
|
@@ -1020,8 +1020,8 @@ class f {
|
|
|
1020
1020
|
* Convert hex to rgba
|
|
1021
1021
|
*/
|
|
1022
1022
|
static hexToRgba(t, e = 1) {
|
|
1023
|
-
const r = t.replace("#", ""),
|
|
1024
|
-
return `rgba(${
|
|
1023
|
+
const r = t.replace("#", ""), s = parseInt(r.substr(0, 2), 16), i = parseInt(r.substr(2, 2), 16), n = parseInt(r.substr(4, 2), 16);
|
|
1024
|
+
return `rgba(${s}, ${i}, ${n}, ${e})`;
|
|
1025
1025
|
}
|
|
1026
1026
|
/**
|
|
1027
1027
|
* Generate grid styles
|
|
@@ -1132,7 +1132,7 @@ class f {
|
|
|
1132
1132
|
/**
|
|
1133
1133
|
* Default theme colors
|
|
1134
1134
|
*/
|
|
1135
|
-
|
|
1135
|
+
v(u, "colors", {
|
|
1136
1136
|
primary: "#3B82F6",
|
|
1137
1137
|
// Modern Blue
|
|
1138
1138
|
secondary: "#64748B",
|
|
@@ -1165,7 +1165,7 @@ g(f, "colors", {
|
|
|
1165
1165
|
}), /**
|
|
1166
1166
|
* Common CSS variables
|
|
1167
1167
|
*/
|
|
1168
|
-
|
|
1168
|
+
v(u, "cssVariables", {
|
|
1169
1169
|
// "Pro" Palette - Functional & Sharp
|
|
1170
1170
|
"--fc-primary-color": "#2563EB",
|
|
1171
1171
|
// International Blue (Focus)
|
|
@@ -1233,7 +1233,7 @@ g(f, "cssVariables", {
|
|
|
1233
1233
|
}), /**
|
|
1234
1234
|
* Get responsive breakpoints
|
|
1235
1235
|
*/
|
|
1236
|
-
|
|
1236
|
+
v(u, "breakpoints", {
|
|
1237
1237
|
xs: "320px",
|
|
1238
1238
|
sm: "576px",
|
|
1239
1239
|
md: "768px",
|
|
@@ -1271,8 +1271,8 @@ class E {
|
|
|
1271
1271
|
* @param {Function} handler
|
|
1272
1272
|
*/
|
|
1273
1273
|
addListener(t, e, r) {
|
|
1274
|
-
const
|
|
1275
|
-
t.addEventListener(e,
|
|
1274
|
+
const s = r.bind(this);
|
|
1275
|
+
t.addEventListener(e, s), this._listeners.push({ element: t, event: e, handler: s });
|
|
1276
1276
|
}
|
|
1277
1277
|
/**
|
|
1278
1278
|
* Escape HTML to prevent XSS
|
|
@@ -1315,8 +1315,8 @@ class E {
|
|
|
1315
1315
|
* @returns {string}
|
|
1316
1316
|
*/
|
|
1317
1317
|
formatTime(t) {
|
|
1318
|
-
const e = t.getHours(), r = t.getMinutes(),
|
|
1319
|
-
return r === 0 ? `${
|
|
1318
|
+
const e = t.getHours(), r = t.getMinutes(), s = e >= 12 ? "PM" : "AM", i = e % 12 || 12;
|
|
1319
|
+
return r === 0 ? `${i} ${s}` : `${i}:${r.toString().padStart(2, "0")} ${s}`;
|
|
1320
1320
|
}
|
|
1321
1321
|
/**
|
|
1322
1322
|
* Get contrasting text color for a background color.
|
|
@@ -1325,7 +1325,7 @@ class E {
|
|
|
1325
1325
|
* @returns {string} '#000000' or '#FFFFFF'
|
|
1326
1326
|
*/
|
|
1327
1327
|
getContrastingTextColor(t) {
|
|
1328
|
-
return !t || typeof t != "string" || t.charAt(0) !== "#" ? "white" :
|
|
1328
|
+
return !t || typeof t != "string" || t.charAt(0) !== "#" ? "white" : u.getContrastColor(t);
|
|
1329
1329
|
}
|
|
1330
1330
|
/**
|
|
1331
1331
|
* Render the "now" indicator line for time-based views
|
|
@@ -1345,31 +1345,31 @@ class E {
|
|
|
1345
1345
|
computeOverlapLayout(t) {
|
|
1346
1346
|
if (!t || t.length === 0) return /* @__PURE__ */ new Map();
|
|
1347
1347
|
const e = t.map((o) => {
|
|
1348
|
-
const c = new Date(o.start), d = new Date(o.end), l = c.getHours() * 60 + c.getMinutes(),
|
|
1349
|
-
return { id: o.id, startMin: l, endMin:
|
|
1348
|
+
const c = new Date(o.start), d = new Date(o.end), l = c.getHours() * 60 + c.getMinutes(), f = Math.max(l + 1, d.getHours() * 60 + d.getMinutes());
|
|
1349
|
+
return { id: o.id, startMin: l, endMin: f };
|
|
1350
1350
|
});
|
|
1351
1351
|
e.sort((o, c) => o.startMin - c.startMin || c.endMin - c.startMin - (o.endMin - o.startMin));
|
|
1352
|
-
const r = [],
|
|
1352
|
+
const r = [], s = /* @__PURE__ */ new Map();
|
|
1353
1353
|
for (const o of e) {
|
|
1354
1354
|
let c = !1;
|
|
1355
1355
|
for (let d = 0; d < r.length; d++)
|
|
1356
1356
|
if (r[d] <= o.startMin) {
|
|
1357
|
-
r[d] = o.endMin,
|
|
1357
|
+
r[d] = o.endMin, s.set(o.id, { column: d, totalColumns: 0 }), c = !0;
|
|
1358
1358
|
break;
|
|
1359
1359
|
}
|
|
1360
|
-
c || (
|
|
1360
|
+
c || (s.set(o.id, { column: r.length, totalColumns: 0 }), r.push(o.endMin));
|
|
1361
1361
|
}
|
|
1362
|
-
const
|
|
1362
|
+
const i = [];
|
|
1363
1363
|
let n = [], a = 0;
|
|
1364
1364
|
for (const o of e)
|
|
1365
|
-
n.length === 0 || o.startMin < a ? (n.push(o), a = Math.max(a, o.endMin)) : (
|
|
1366
|
-
n.length > 0 &&
|
|
1367
|
-
for (const o of
|
|
1368
|
-
const c = Math.max(...o.map((d) =>
|
|
1365
|
+
n.length === 0 || o.startMin < a ? (n.push(o), a = Math.max(a, o.endMin)) : (i.push(n), n = [o], a = o.endMin);
|
|
1366
|
+
n.length > 0 && i.push(n);
|
|
1367
|
+
for (const o of i) {
|
|
1368
|
+
const c = Math.max(...o.map((d) => s.get(d.id).column)) + 1;
|
|
1369
1369
|
for (const d of o)
|
|
1370
|
-
|
|
1370
|
+
s.get(d.id).totalColumns = c;
|
|
1371
1371
|
}
|
|
1372
|
-
return
|
|
1372
|
+
return s;
|
|
1373
1373
|
}
|
|
1374
1374
|
/**
|
|
1375
1375
|
* Render a timed event block
|
|
@@ -1380,27 +1380,27 @@ class E {
|
|
|
1380
1380
|
* @returns {string} HTML string
|
|
1381
1381
|
*/
|
|
1382
1382
|
renderTimedEvent(t, e = {}) {
|
|
1383
|
-
const { compact: r = !0, overlapLayout:
|
|
1383
|
+
const { compact: r = !0, overlapLayout: s = null } = e, i = new Date(t.start), n = new Date(t.end), a = i.getHours() * 60 + i.getMinutes(), o = Math.max((n - i) / (1e3 * 60), r ? 20 : 30), c = this.getEventColor(t), d = this.getContrastingTextColor(c), l = r ? "4px 8px" : "8px 12px", f = r ? "11px" : "13px", g = r ? 2 : 12, b = r ? 2 : 24, S = r ? "4px" : "6px";
|
|
1384
1384
|
let y, x;
|
|
1385
|
-
if (
|
|
1386
|
-
const { column:
|
|
1387
|
-
y = `calc(${
|
|
1385
|
+
if (s && s.has(t.id)) {
|
|
1386
|
+
const { column: C, totalColumns: _ } = s.get(t.id), $ = `(100% - ${g + b}px)`;
|
|
1387
|
+
y = `calc(${g}px + ${C} * ${$} / ${_})`, x = `calc(${$} / ${_})`;
|
|
1388
1388
|
} else
|
|
1389
|
-
y = `${
|
|
1389
|
+
y = `${g}px`, x = `calc(100% - ${g + b}px)`;
|
|
1390
1390
|
return `
|
|
1391
1391
|
<div class="fc-event fc-timed-event" data-event-id="${this.escapeHTML(t.id)}"
|
|
1392
1392
|
style="position: absolute; top: ${a}px; height: ${o}px;
|
|
1393
1393
|
left: ${y}; width: ${x};
|
|
1394
|
-
background-color: ${c}; border-radius: ${
|
|
1395
|
-
padding: ${
|
|
1396
|
-
font-weight: 500; color:
|
|
1394
|
+
background-color: ${c}; border-radius: ${S};
|
|
1395
|
+
padding: ${l}; font-size: ${f};
|
|
1396
|
+
font-weight: 500; color: ${d}; overflow: hidden;
|
|
1397
1397
|
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
|
1398
1398
|
cursor: pointer; z-index: 5;">
|
|
1399
1399
|
<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
|
1400
1400
|
${this.escapeHTML(t.title)}
|
|
1401
1401
|
</div>
|
|
1402
1402
|
<div style="font-size: ${r ? "10px" : "11px"}; opacity: 0.9;">
|
|
1403
|
-
${this.formatTime(
|
|
1403
|
+
${this.formatTime(i)}${r ? "" : " - " + this.formatTime(n)}
|
|
1404
1404
|
</div>
|
|
1405
1405
|
</div>
|
|
1406
1406
|
`;
|
|
@@ -1411,7 +1411,7 @@ class E {
|
|
|
1411
1411
|
* @returns {string}
|
|
1412
1412
|
*/
|
|
1413
1413
|
getEventColor(t) {
|
|
1414
|
-
return
|
|
1414
|
+
return u.sanitizeColor(t == null ? void 0 : t.backgroundColor, "#2563eb");
|
|
1415
1415
|
}
|
|
1416
1416
|
/**
|
|
1417
1417
|
* Attach common event handlers for day/event clicks
|
|
@@ -1421,8 +1421,8 @@ class E {
|
|
|
1421
1421
|
const e = t.target.closest(".fc-event");
|
|
1422
1422
|
if (!e || !this.container.contains(e)) return;
|
|
1423
1423
|
t.stopPropagation();
|
|
1424
|
-
const r = e.dataset.eventId,
|
|
1425
|
-
|
|
1424
|
+
const r = e.dataset.eventId, s = this.stateManager.getEvents().find((i) => i.id === r);
|
|
1425
|
+
s && this.stateManager.selectEvent(s);
|
|
1426
1426
|
});
|
|
1427
1427
|
}
|
|
1428
1428
|
}
|
|
@@ -1443,7 +1443,7 @@ class w extends E {
|
|
|
1443
1443
|
}
|
|
1444
1444
|
_renderMonthView(t, e) {
|
|
1445
1445
|
const r = e.weekStartsOn || 0;
|
|
1446
|
-
let
|
|
1446
|
+
let i = `
|
|
1447
1447
|
<div class="fc-month-view" style="display: flex; flex-direction: column; height: 100%; min-height: 400px; background: var(--fc-background); border: 1px solid var(--fc-border-color);">
|
|
1448
1448
|
<div class="fc-month-header" style="display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--fc-border-color); background: var(--fc-background-alt);">
|
|
1449
1449
|
${this._getDayNames(r).map((n) => `<div class="fc-month-header-cell" style="padding: 12px 8px; text-align: center; font-size: 11px; font-weight: 600; color: var(--fc-text-light); text-transform: uppercase;">${n}</div>`).join("")}
|
|
@@ -1451,14 +1451,14 @@ class w extends E {
|
|
|
1451
1451
|
<div class="fc-month-body" style="display: flex; flex-direction: column; flex: 1;">
|
|
1452
1452
|
`;
|
|
1453
1453
|
return t.weeks.forEach((n) => {
|
|
1454
|
-
|
|
1455
|
-
}),
|
|
1454
|
+
i += this._renderWeek(n);
|
|
1455
|
+
}), i += "</div></div>", i;
|
|
1456
1456
|
}
|
|
1457
1457
|
_getDayNames(t) {
|
|
1458
1458
|
const e = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], r = [];
|
|
1459
|
-
for (let
|
|
1460
|
-
const
|
|
1461
|
-
r.push(e[
|
|
1459
|
+
for (let s = 0; s < 7; s++) {
|
|
1460
|
+
const i = (t + s) % 7;
|
|
1461
|
+
r.push(e[i]);
|
|
1462
1462
|
}
|
|
1463
1463
|
return r;
|
|
1464
1464
|
}
|
|
@@ -1469,11 +1469,11 @@ class w extends E {
|
|
|
1469
1469
|
}), e += "</div>", e;
|
|
1470
1470
|
}
|
|
1471
1471
|
_renderDay(t) {
|
|
1472
|
-
const e = !t.isCurrentMonth, r = t.isToday,
|
|
1472
|
+
const e = !t.isCurrentMonth, r = t.isToday, s = e ? "var(--fc-background-hover)" : "var(--fc-background)", i = e ? "var(--fc-text-light)" : "var(--fc-text-color)", n = r ? "background: var(--fc-primary-color); color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;" : "", a = t.events || [], o = a.slice(0, this.maxEventsToShow), c = a.length - this.maxEventsToShow;
|
|
1473
1473
|
return `
|
|
1474
1474
|
<div class="fc-month-day" data-date="${t.date}"
|
|
1475
|
-
style="background: ${
|
|
1476
|
-
<div class="fc-day-number" style="font-size: 13px; font-weight: 500; color: ${
|
|
1475
|
+
style="background: ${s}; border-right: 1px solid var(--fc-border-color); border-bottom: 1px solid var(--fc-border-color); padding: 4px; min-height: 80px; cursor: pointer; display: flex; flex-direction: column;">
|
|
1476
|
+
<div class="fc-day-number" style="font-size: 13px; font-weight: 500; color: ${i}; padding: 2px 4px; margin-bottom: 4px; ${n}">
|
|
1477
1477
|
${t.dayOfMonth}
|
|
1478
1478
|
</div>
|
|
1479
1479
|
<div class="fc-day-events" style="display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: hidden;">
|
|
@@ -1501,7 +1501,7 @@ class w extends E {
|
|
|
1501
1501
|
}), this.attachCommonEventHandlers();
|
|
1502
1502
|
}
|
|
1503
1503
|
}
|
|
1504
|
-
class
|
|
1504
|
+
class z extends E {
|
|
1505
1505
|
constructor(t, e) {
|
|
1506
1506
|
super(t, e), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
|
|
1507
1507
|
}
|
|
@@ -1517,12 +1517,12 @@ class I extends E {
|
|
|
1517
1517
|
this.container.innerHTML = r, this._attachEventHandlers(), this._scrollToCurrentTime();
|
|
1518
1518
|
}
|
|
1519
1519
|
_renderWeekView(t, e) {
|
|
1520
|
-
const r = t.days,
|
|
1520
|
+
const r = t.days, s = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], i = Array.from({ length: 24 }, (a, o) => o), n = r.map((a) => {
|
|
1521
1521
|
const o = new Date(a.date), c = a.events || [];
|
|
1522
1522
|
return {
|
|
1523
1523
|
...a,
|
|
1524
1524
|
date: o,
|
|
1525
|
-
dayName:
|
|
1525
|
+
dayName: s[o.getDay()],
|
|
1526
1526
|
dayOfMonth: o.getDate(),
|
|
1527
1527
|
isToday: this.isToday(o),
|
|
1528
1528
|
timedEvents: c.filter((d) => !d.allDay),
|
|
@@ -1533,7 +1533,7 @@ class I extends E {
|
|
|
1533
1533
|
<div class="fc-week-view" style="display: flex; flex-direction: column; height: 100%; background: var(--fc-background); overflow: hidden;">
|
|
1534
1534
|
${this._renderHeader(n)}
|
|
1535
1535
|
${this._renderAllDayRow(n)}
|
|
1536
|
-
${this._renderTimeGrid(n,
|
|
1536
|
+
${this._renderTimeGrid(n, i)}
|
|
1537
1537
|
</div>
|
|
1538
1538
|
`;
|
|
1539
1539
|
}
|
|
@@ -1614,7 +1614,7 @@ class I extends E {
|
|
|
1614
1614
|
<!-- Timed events -->
|
|
1615
1615
|
${(() => {
|
|
1616
1616
|
const r = this.computeOverlapLayout(t.timedEvents);
|
|
1617
|
-
return t.timedEvents.map((
|
|
1617
|
+
return t.timedEvents.map((s) => this.renderTimedEvent(s, { compact: !0, overlapLayout: r })).join("");
|
|
1618
1618
|
})()}
|
|
1619
1619
|
</div>
|
|
1620
1620
|
`;
|
|
@@ -1623,7 +1623,7 @@ class I extends E {
|
|
|
1623
1623
|
this.addListener(this.container, "click", (t) => {
|
|
1624
1624
|
const e = t.target.closest(".fc-week-day-column");
|
|
1625
1625
|
if (!e || !this.container.contains(e) || t.target.closest(".fc-event")) return;
|
|
1626
|
-
const r = new Date(e.dataset.date),
|
|
1626
|
+
const r = new Date(e.dataset.date), s = this.container.querySelector("#week-scroll-container"), i = e.offsetTop, n = t.clientY - e.getBoundingClientRect().top + (s ? s.scrollTop : 0) - i, a = Math.max(0, Math.min(n + i, this.totalHeight));
|
|
1627
1627
|
r.setHours(
|
|
1628
1628
|
Math.floor(a / this.hourHeight),
|
|
1629
1629
|
Math.floor(a % this.hourHeight / (this.hourHeight / 60)),
|
|
@@ -1638,7 +1638,7 @@ class I extends E {
|
|
|
1638
1638
|
t && (t.scrollTop = 8 * this.hourHeight - 50, this._scrolled = !0);
|
|
1639
1639
|
}
|
|
1640
1640
|
}
|
|
1641
|
-
class
|
|
1641
|
+
class B extends E {
|
|
1642
1642
|
constructor(t, e) {
|
|
1643
1643
|
super(t, e), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
|
|
1644
1644
|
}
|
|
@@ -1654,24 +1654,24 @@ class z extends E {
|
|
|
1654
1654
|
this.container.innerHTML = r, this._attachEventHandlers(), this._scrollToCurrentTime();
|
|
1655
1655
|
}
|
|
1656
1656
|
_renderDayView(t, e) {
|
|
1657
|
-
var l,
|
|
1658
|
-
const r = ((
|
|
1659
|
-
if (!
|
|
1657
|
+
var l, f;
|
|
1658
|
+
const r = ((f = (l = this.stateManager) == null ? void 0 : l.getState()) == null ? void 0 : f.currentDate) || /* @__PURE__ */ new Date(), s = this._extractDayData(t, r);
|
|
1659
|
+
if (!s)
|
|
1660
1660
|
return '<div style="padding: 20px; text-align: center; color: var(--fc-text-secondary);">No data available for day view.</div>';
|
|
1661
|
-
const { dayDate:
|
|
1661
|
+
const { dayDate: i, dayName: n, isToday: a, allDayEvents: o, timedEvents: c } = s, d = Array.from({ length: 24 }, (g, b) => b);
|
|
1662
1662
|
return `
|
|
1663
1663
|
<div class="fc-day-view" style="display: flex; flex-direction: column; height: 100%; background: var(--fc-background); overflow: hidden;">
|
|
1664
|
-
${this._renderHeader(
|
|
1665
|
-
${this._renderAllDayRow(o,
|
|
1666
|
-
${this._renderTimeGrid(c, a,
|
|
1664
|
+
${this._renderHeader(i, n, a)}
|
|
1665
|
+
${this._renderAllDayRow(o, i)}
|
|
1666
|
+
${this._renderTimeGrid(c, a, i, d)}
|
|
1667
1667
|
</div>
|
|
1668
1668
|
`;
|
|
1669
1669
|
}
|
|
1670
1670
|
_extractDayData(t, e) {
|
|
1671
|
-
let r,
|
|
1671
|
+
let r, s, i, n, a;
|
|
1672
1672
|
const o = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
|
|
1673
1673
|
if (t.type === "day" && t.date)
|
|
1674
|
-
if (r = new Date(t.date),
|
|
1674
|
+
if (r = new Date(t.date), s = t.dayName || o[r.getDay()], i = t.isToday !== void 0 ? t.isToday : this.isToday(r), n = t.allDayEvents || [], t.hours && Array.isArray(t.hours)) {
|
|
1675
1675
|
const c = /* @__PURE__ */ new Map();
|
|
1676
1676
|
t.hours.forEach((d) => {
|
|
1677
1677
|
(d.events || []).forEach((l) => {
|
|
@@ -1682,12 +1682,12 @@ class z extends E {
|
|
|
1682
1682
|
a = [];
|
|
1683
1683
|
else if (t.days && t.days.length > 0) {
|
|
1684
1684
|
const c = t.days.find((l) => this.isSameDay(new Date(l.date), e)) || t.days[0];
|
|
1685
|
-
r = new Date(c.date),
|
|
1685
|
+
r = new Date(c.date), s = o[r.getDay()], i = this.isToday(r);
|
|
1686
1686
|
const d = c.events || [];
|
|
1687
1687
|
n = d.filter((l) => l.allDay), a = d.filter((l) => !l.allDay);
|
|
1688
1688
|
} else
|
|
1689
1689
|
return null;
|
|
1690
|
-
return { dayDate: r, dayName:
|
|
1690
|
+
return { dayDate: r, dayName: s, isToday: i, allDayEvents: n, timedEvents: a };
|
|
1691
1691
|
}
|
|
1692
1692
|
_renderHeader(t, e, r) {
|
|
1693
1693
|
return `
|
|
@@ -1723,12 +1723,12 @@ class z extends E {
|
|
|
1723
1723
|
</div>
|
|
1724
1724
|
`;
|
|
1725
1725
|
}
|
|
1726
|
-
_renderTimeGrid(t, e, r,
|
|
1726
|
+
_renderTimeGrid(t, e, r, s) {
|
|
1727
1727
|
return `
|
|
1728
1728
|
<div id="day-scroll-container" class="fc-time-grid-container" style="flex: 1; overflow-y: auto; overflow-x: hidden; position: relative;">
|
|
1729
1729
|
<div class="fc-time-grid" style="display: grid; grid-template-columns: 60px 1fr; position: relative; height: ${this.totalHeight}px;">
|
|
1730
|
-
${this._renderTimeGutter(
|
|
1731
|
-
${this._renderDayColumn(t, e, r,
|
|
1730
|
+
${this._renderTimeGutter(s)}
|
|
1731
|
+
${this._renderDayColumn(t, e, r, s)}
|
|
1732
1732
|
</div>
|
|
1733
1733
|
</div>
|
|
1734
1734
|
`;
|
|
@@ -1746,19 +1746,19 @@ class z extends E {
|
|
|
1746
1746
|
</div>
|
|
1747
1747
|
`;
|
|
1748
1748
|
}
|
|
1749
|
-
_renderDayColumn(t, e, r,
|
|
1749
|
+
_renderDayColumn(t, e, r, s) {
|
|
1750
1750
|
return `
|
|
1751
1751
|
<div class="fc-day-column" data-date="${r.toISOString()}" style="position: relative; cursor: pointer;">
|
|
1752
1752
|
<!-- Hour grid lines -->
|
|
1753
|
-
${
|
|
1753
|
+
${s.map(() => `<div style="height: ${this.hourHeight}px; border-bottom: 1px solid var(--fc-background-hover);"></div>`).join("")}
|
|
1754
1754
|
|
|
1755
1755
|
<!-- Now indicator for today -->
|
|
1756
1756
|
${e ? this.renderNowIndicator() : ""}
|
|
1757
1757
|
|
|
1758
1758
|
<!-- Timed events -->
|
|
1759
1759
|
${(() => {
|
|
1760
|
-
const
|
|
1761
|
-
return t.map((n) => this.renderTimedEvent(n, { compact: !1, overlapLayout:
|
|
1760
|
+
const i = this.computeOverlapLayout(t);
|
|
1761
|
+
return t.map((n) => this.renderTimedEvent(n, { compact: !1, overlapLayout: i })).join("");
|
|
1762
1762
|
})()}
|
|
1763
1763
|
</div>
|
|
1764
1764
|
`;
|
|
@@ -1767,7 +1767,7 @@ class z extends E {
|
|
|
1767
1767
|
this.addListener(this.container, "click", (t) => {
|
|
1768
1768
|
const e = t.target.closest(".fc-day-column");
|
|
1769
1769
|
if (!e || !this.container.contains(e) || t.target.closest(".fc-event")) return;
|
|
1770
|
-
const r = new Date(e.dataset.date),
|
|
1770
|
+
const r = new Date(e.dataset.date), s = this.container.querySelector("#day-scroll-container"), i = e.offsetTop, n = t.clientY - e.getBoundingClientRect().top + (s ? s.scrollTop : 0) - i, a = Math.max(0, Math.min(n + i, this.totalHeight));
|
|
1771
1771
|
r.setHours(
|
|
1772
1772
|
Math.floor(a / this.hourHeight),
|
|
1773
1773
|
Math.floor(a % this.hourHeight / (this.hourHeight / 60)),
|
|
@@ -1782,7 +1782,7 @@ class z extends E {
|
|
|
1782
1782
|
t && (t.scrollTop = 8 * this.hourHeight - 50, this._scrolled = !0);
|
|
1783
1783
|
}
|
|
1784
1784
|
}
|
|
1785
|
-
class
|
|
1785
|
+
class A extends M {
|
|
1786
1786
|
constructor() {
|
|
1787
1787
|
super(), this._isVisible = !1, this._cleanupFocusTrap = null, this.config = {
|
|
1788
1788
|
title: "New Event",
|
|
@@ -1812,8 +1812,8 @@ class B extends M {
|
|
|
1812
1812
|
}
|
|
1813
1813
|
getStyles() {
|
|
1814
1814
|
return `
|
|
1815
|
-
${
|
|
1816
|
-
${
|
|
1815
|
+
${u.getBaseStyles()}
|
|
1816
|
+
${u.getButtonStyles()}
|
|
1817
1817
|
|
|
1818
1818
|
:host {
|
|
1819
1819
|
display: none;
|
|
@@ -2080,15 +2080,15 @@ class B extends M {
|
|
|
2080
2080
|
this.emit("save", t), this.close();
|
|
2081
2081
|
}
|
|
2082
2082
|
formatDateForInput(t) {
|
|
2083
|
-
const e = (o) => String(o).padStart(2, "0"), r = t.getFullYear(),
|
|
2084
|
-
return `${r}-${
|
|
2083
|
+
const e = (o) => String(o).padStart(2, "0"), r = t.getFullYear(), s = e(t.getMonth() + 1), i = e(t.getDate()), n = e(t.getHours()), a = e(t.getMinutes());
|
|
2084
|
+
return `${r}-${s}-${i}T${n}:${a}`;
|
|
2085
2085
|
}
|
|
2086
2086
|
unmount() {
|
|
2087
2087
|
this._cleanupFocusTrap && this._cleanupFocusTrap(), this._handleKeyDown && (window.removeEventListener("keydown", this._handleKeyDown), this._handleKeyDown = null, this._keydownListenerAdded = !1);
|
|
2088
2088
|
}
|
|
2089
2089
|
}
|
|
2090
|
-
customElements.get("forcecal-event-form") || customElements.define("forcecal-event-form",
|
|
2091
|
-
const
|
|
2090
|
+
customElements.get("forcecal-event-form") || customElements.define("forcecal-event-form", A);
|
|
2091
|
+
const m = class m extends M {
|
|
2092
2092
|
static get observedAttributes() {
|
|
2093
2093
|
return ["view", "date", "locale", "timezone", "week-starts-on", "height"];
|
|
2094
2094
|
}
|
|
@@ -2103,22 +2103,22 @@ const v = class v extends M {
|
|
|
2103
2103
|
timeZone: this.getAttribute("timezone") || Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
2104
2104
|
weekStartsOn: parseInt(this.getAttribute("week-starts-on") || "0")
|
|
2105
2105
|
};
|
|
2106
|
-
this.stateManager = new
|
|
2106
|
+
this.stateManager = new I(t), this._stateUnsubscribe = this.stateManager.subscribe(this.handleStateChange.bind(this)), this.setupEventListeners();
|
|
2107
2107
|
}
|
|
2108
2108
|
setupEventListeners() {
|
|
2109
2109
|
this._busUnsubscribers.forEach((r) => r()), this._busUnsubscribers = [];
|
|
2110
2110
|
const t = this.stateManager.eventBus;
|
|
2111
2111
|
this._busUnsubscribers.push(
|
|
2112
|
-
t.on("navigation:*", (r,
|
|
2113
|
-
this.emit("calendar-navigate", { action:
|
|
2112
|
+
t.on("navigation:*", (r, s) => {
|
|
2113
|
+
this.emit("calendar-navigate", { action: s.split(":")[1], ...r });
|
|
2114
2114
|
})
|
|
2115
2115
|
), this._busUnsubscribers.push(
|
|
2116
2116
|
t.on("view:changed", (r) => {
|
|
2117
2117
|
this.emit("calendar-view-change", r);
|
|
2118
2118
|
})
|
|
2119
2119
|
);
|
|
2120
|
-
const e = (r,
|
|
2121
|
-
this.emit(`calendar-event-${r}`,
|
|
2120
|
+
const e = (r, s) => {
|
|
2121
|
+
this.emit(`calendar-event-${r}`, s);
|
|
2122
2122
|
};
|
|
2123
2123
|
this._busUnsubscribers.push(
|
|
2124
2124
|
t.on("event:add", (r) => {
|
|
@@ -2154,7 +2154,7 @@ const v = class v extends M {
|
|
|
2154
2154
|
var o, c;
|
|
2155
2155
|
if (!this._hasRendered)
|
|
2156
2156
|
return;
|
|
2157
|
-
const r = t.view !== (e == null ? void 0 : e.view),
|
|
2157
|
+
const r = t.view !== (e == null ? void 0 : e.view), s = ((o = t.currentDate) == null ? void 0 : o.getTime()) !== ((c = e == null ? void 0 : e.currentDate) == null ? void 0 : c.getTime()), i = t.events !== (e == null ? void 0 : e.events), n = t.loading !== (e == null ? void 0 : e.loading);
|
|
2158
2158
|
if (t.error !== (e == null ? void 0 : e.error)) {
|
|
2159
2159
|
this.render();
|
|
2160
2160
|
return;
|
|
@@ -2163,7 +2163,7 @@ const v = class v extends M {
|
|
|
2163
2163
|
this._updateLoadingState(t.loading);
|
|
2164
2164
|
return;
|
|
2165
2165
|
}
|
|
2166
|
-
r && (this.currentView = t.view), r ? (this._updateTitle(), this._updateViewButtons(), this._switchView()) :
|
|
2166
|
+
r && (this.currentView = t.view), r ? (this._updateTitle(), this._updateViewButtons(), this._switchView()) : s ? (this._updateTitle(), this._updateViewContent()) : i && this._updateViewContent();
|
|
2167
2167
|
}
|
|
2168
2168
|
/**
|
|
2169
2169
|
* Update only the title text (no DOM recreation)
|
|
@@ -2193,7 +2193,7 @@ const v = class v extends M {
|
|
|
2193
2193
|
if (t) {
|
|
2194
2194
|
this._currentViewInstance && this._currentViewInstance.cleanup && this._currentViewInstance.cleanup();
|
|
2195
2195
|
try {
|
|
2196
|
-
const e =
|
|
2196
|
+
const e = m.RENDERERS[this.currentView] || w, r = new e(t, this.stateManager);
|
|
2197
2197
|
r._viewType = this.currentView, this._currentViewInstance = r, r.render();
|
|
2198
2198
|
} catch (e) {
|
|
2199
2199
|
console.error("[ForceCalendar] Error switching view:", e);
|
|
@@ -2222,10 +2222,10 @@ const v = class v extends M {
|
|
|
2222
2222
|
getStyles() {
|
|
2223
2223
|
const t = this.getAttribute("height") || "800px";
|
|
2224
2224
|
return `
|
|
2225
|
-
${
|
|
2226
|
-
${
|
|
2227
|
-
${
|
|
2228
|
-
${
|
|
2225
|
+
${u.getBaseStyles()}
|
|
2226
|
+
${u.getButtonStyles()}
|
|
2227
|
+
${u.getGridStyles()}
|
|
2228
|
+
${u.getAnimations()}
|
|
2229
2229
|
|
|
2230
2230
|
:host {
|
|
2231
2231
|
--calendar-height: ${t};
|
|
@@ -2609,12 +2609,12 @@ const v = class v extends M {
|
|
|
2609
2609
|
`;
|
|
2610
2610
|
}
|
|
2611
2611
|
template() {
|
|
2612
|
-
const t = this.stateManager.getState(), { currentDate: e, view: r, loading:
|
|
2613
|
-
if (
|
|
2612
|
+
const t = this.stateManager.getState(), { currentDate: e, view: r, loading: s, error: i } = t;
|
|
2613
|
+
if (i)
|
|
2614
2614
|
return `
|
|
2615
2615
|
<div class="force-calendar">
|
|
2616
2616
|
<div class="fc-error">
|
|
2617
|
-
<p><strong>Error:</strong> ${D.escapeHTML(
|
|
2617
|
+
<p><strong>Error:</strong> ${D.escapeHTML(i.message || "An error occurred")}</p>
|
|
2618
2618
|
</div>
|
|
2619
2619
|
</div>
|
|
2620
2620
|
`;
|
|
@@ -2654,11 +2654,11 @@ const v = class v extends M {
|
|
|
2654
2654
|
</header>
|
|
2655
2655
|
|
|
2656
2656
|
<div class="fc-body">
|
|
2657
|
-
<div class="fc-loading" style="display: ${
|
|
2657
|
+
<div class="fc-loading" style="display: ${s ? "flex" : "none"};">
|
|
2658
2658
|
<div class="fc-spinner"></div>
|
|
2659
2659
|
<span>Loading...</span>
|
|
2660
2660
|
</div>
|
|
2661
|
-
<div class="fc-view-container" style="display: ${
|
|
2661
|
+
<div class="fc-view-container" style="display: ${s ? "none" : "flex"};">
|
|
2662
2662
|
${this.renderView()}
|
|
2663
2663
|
</div>
|
|
2664
2664
|
</div>
|
|
@@ -2677,27 +2677,27 @@ const v = class v extends M {
|
|
|
2677
2677
|
return;
|
|
2678
2678
|
this._currentViewInstance && (this._currentViewInstance.cleanup && this._currentViewInstance.cleanup(), this._viewUnsubscribe && (this._viewUnsubscribe(), this._viewUnsubscribe = null));
|
|
2679
2679
|
try {
|
|
2680
|
-
const
|
|
2681
|
-
|
|
2682
|
-
} catch (
|
|
2683
|
-
console.error("[ForceCalendar] Error creating/rendering view:",
|
|
2680
|
+
const s = m.RENDERERS[this.currentView] || w, i = new s(t, this.stateManager);
|
|
2681
|
+
i._viewType = this.currentView, this._currentViewInstance = i, i.render();
|
|
2682
|
+
} catch (s) {
|
|
2683
|
+
console.error("[ForceCalendar] Error creating/rendering view:", s);
|
|
2684
2684
|
}
|
|
2685
2685
|
}
|
|
2686
|
-
this.$$("[data-action]").forEach((
|
|
2687
|
-
this.addListener(
|
|
2688
|
-
}), this.$$("[data-view]").forEach((
|
|
2689
|
-
this.addListener(
|
|
2686
|
+
this.$$("[data-action]").forEach((s) => {
|
|
2687
|
+
this.addListener(s, "click", this.handleNavigation);
|
|
2688
|
+
}), this.$$("[data-view]").forEach((s) => {
|
|
2689
|
+
this.addListener(s, "click", this.handleViewChange);
|
|
2690
2690
|
});
|
|
2691
2691
|
const e = this.$("#event-modal"), r = this.$("#create-event-btn");
|
|
2692
2692
|
r && e && this.addListener(r, "click", () => {
|
|
2693
2693
|
e.open(/* @__PURE__ */ new Date());
|
|
2694
|
-
}), this.addListener(this.shadowRoot, "day-click", (
|
|
2695
|
-
e && e.open(
|
|
2696
|
-
}), e && this.addListener(e, "save", (
|
|
2697
|
-
const
|
|
2694
|
+
}), this.addListener(this.shadowRoot, "day-click", (s) => {
|
|
2695
|
+
e && e.open(s.detail.date);
|
|
2696
|
+
}), e && this.addListener(e, "save", (s) => {
|
|
2697
|
+
const i = s.detail, n = window.crypto && typeof window.crypto.randomUUID == "function" ? window.crypto.randomUUID() : Math.random().toString(36).substring(2, 15);
|
|
2698
2698
|
this.stateManager.addEvent({
|
|
2699
2699
|
id: n,
|
|
2700
|
-
...
|
|
2700
|
+
...i
|
|
2701
2701
|
});
|
|
2702
2702
|
}), this._hasRendered = !0;
|
|
2703
2703
|
}
|
|
@@ -2724,8 +2724,8 @@ const v = class v extends M {
|
|
|
2724
2724
|
case "month":
|
|
2725
2725
|
return p.formatDate(t, "month", r);
|
|
2726
2726
|
case "week": {
|
|
2727
|
-
const
|
|
2728
|
-
return p.formatDateRange(
|
|
2727
|
+
const s = p.startOfWeek(t), i = p.endOfWeek(t);
|
|
2728
|
+
return p.formatDateRange(s, i, r);
|
|
2729
2729
|
}
|
|
2730
2730
|
case "day":
|
|
2731
2731
|
return p.formatDate(t, "long", r);
|
|
@@ -2787,25 +2787,25 @@ const v = class v extends M {
|
|
|
2787
2787
|
this._busUnsubscribers.forEach((t) => t()), this._busUnsubscribers = [], this._stateUnsubscribe && (this._stateUnsubscribe(), this._stateUnsubscribe = null), this._currentViewInstance && this._currentViewInstance.cleanup && (this._currentViewInstance.cleanup(), this._currentViewInstance = null), this.stateManager && this.stateManager.destroy(), super.cleanup();
|
|
2788
2788
|
}
|
|
2789
2789
|
};
|
|
2790
|
-
|
|
2790
|
+
v(m, "RENDERERS", {
|
|
2791
2791
|
month: w,
|
|
2792
|
-
week:
|
|
2793
|
-
day:
|
|
2792
|
+
week: z,
|
|
2793
|
+
day: B
|
|
2794
2794
|
});
|
|
2795
|
-
let k =
|
|
2795
|
+
let k = m;
|
|
2796
2796
|
customElements.get("forcecal-main") || customElements.define("forcecal-main", k);
|
|
2797
2797
|
export {
|
|
2798
2798
|
M as BaseComponent,
|
|
2799
2799
|
E as BaseViewRenderer,
|
|
2800
2800
|
D as DOMUtils,
|
|
2801
2801
|
p as DateUtils,
|
|
2802
|
-
|
|
2802
|
+
B as DayViewRenderer,
|
|
2803
2803
|
T as EventBus,
|
|
2804
2804
|
k as ForceCalendar,
|
|
2805
2805
|
w as MonthViewRenderer,
|
|
2806
|
-
|
|
2807
|
-
|
|
2808
|
-
|
|
2809
|
-
|
|
2806
|
+
I as StateManager,
|
|
2807
|
+
u as StyleUtils,
|
|
2808
|
+
z as WeekViewRenderer,
|
|
2809
|
+
U as eventBus
|
|
2810
2810
|
};
|
|
2811
2811
|
//# sourceMappingURL=force-calendar-interface.esm.js.map
|