v-event-calendar
Version:
Lightweight, Vue 3 Event Calendar With Event Scheduling, Multiple Views, Drag-&-Drop, Resizing and Customizable Styling
1,247 lines • 73.2 kB
JavaScript
import { defineComponent as se, computed as P, createElementBlock as L, openBlock as F, ref as K, onBeforeUnmount as Ge, normalizeClass as X, renderSlot as Q, watch as fe, onMounted as Ve, withModifiers as ge, normalizeStyle as J, createCommentVNode as ne, unref as m, normalizeProps as de, guardReactiveProps as ce, createElementVNode as Y, toDisplayString as me, onUnmounted as qe, createVNode as q, Fragment as ee, renderList as te, createBlock as ve, withCtx as V, mergeProps as De, reactive as je } from "vue";
import ye from "vuedraggable";
const Ke = {
plus: `<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24">
<path fill="currentColor" d="M11 13H6q-.425 0-.712-.288T5 12t.288-.712T6 11h5V6q0-.425.288-.712T12 5t.713.288T13 6v5h5q.425 0 .713.288T19 12t-.288.713T18 13h-5v5q0 .425-.288.713T12 19t-.712-.288T11 18z"/>
</svg>
`,
spinner: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12A9 9 0 1 1 3 12A9 9 0 0 1 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 12A9 9 0 0 0 12 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`
}, Ze = ["innerHTML"], He = /* @__PURE__ */ se({
__name: "Icon",
props: {
icon: {},
width: {},
height: {}
},
setup(e) {
const n = e, t = P(() => Ke[n.icon].replace(/width="(\d+)"/, `width="${n == null ? void 0 : n.width}"`).replace(/height="(\d+)"/, `height="${n == null ? void 0 : n.height}"`));
return (i, s) => (F(), L("div", {
style: {
height: "auto",
display: "flex"
},
innerHTML: t.value
}, null, 8, Ze));
}
}), be = /* @__PURE__ */ se({
__name: "Scrollablar",
setup(e) {
const n = K(!1);
let t;
function i() {
n.value = !0, clearTimeout(t), t = setTimeout(() => {
n.value = !1;
}, 1e3);
}
return Ge(() => {
clearTimeout(t);
}), (s, v) => (F(), L("div", {
class: X(["scrollable-wrapper", { scrolling: n.value }]),
onScroll: i
}, [
Q(s.$slots, "default")
], 34));
}
});
function B(e) {
if (!e.start || !e.end)
return !1;
const n = new Date(e.start);
return (new Date(e.end).getTime() - n.getTime()) / (1e3 * 60 * 60) >= 24;
}
const Ee = (e) => {
const n = e.getFullYear(), t = (e.getMonth() + 1).toString().padStart(2, "0"), i = e.getDate().toString().padStart(2, "0");
return `${n}-${t}-${i}`;
}, Je = (e) => {
const n = e.getHours().toString().padStart(2, "0"), t = e.getMinutes().toString().padStart(2, "0");
return `${n}:${t}`;
}, re = (e) => {
const [n, t] = e.split(":").map(Number);
return { hour: n, minute: t };
}, en = (e) => e.toISOString(), Re = (e, n) => {
if (!n) {
const v = new Date(e);
return v.setHours(0, 0, 0, 0), v.toISOString();
}
const { hour: t, minute: i } = re(n), s = new Date(e);
return s.setHours(t, i, 0, 0), s.toISOString();
}, Fe = (e) => {
const n = new Date(e);
return new Date(n.getFullYear(), n.getMonth(), n.getDate());
}, Ae = (e) => {
const n = new Date(e), t = n.getHours().toString().padStart(2, "0"), i = n.getMinutes().toString().padStart(2, "0");
return `${t}:${i}`;
}, ie = (e) => Fe(e.start), xe = (e) => e.end ? Fe(e.end) : ie(e), j = (e) => Ae(e.start), le = (e) => {
if (e.end)
return Ae(e.end);
}, ue = (e) => {
if (!e.end) return !1;
const n = ie(e), t = xe(e);
return !we(n, t);
}, Qe = (e) => {
const n = /* @__PURE__ */ new Date();
return e.getDate() === n.getDate() && e.getMonth() === n.getMonth() && e.getFullYear() === n.getFullYear();
}, we = (e, n) => e.getDate() === n.getDate() && e.getMonth() === n.getMonth() && e.getFullYear() === n.getFullYear(), Xe = (e, n) => e.getMonth() === n.getMonth() && e.getFullYear() === n.getFullYear(), et = (e) => new Date(e.getFullYear(), e.getMonth(), 1), Le = (e, n = !0) => {
const t = e.getDay(), i = n ? t === 0 ? -6 : 1 - t : -t, s = new Date(e);
return s.setDate(e.getDate() + i), s;
}, tt = (e, n) => {
const t = new Date(e);
return t.setDate(e.getDate() + n), t;
}, Ue = (e, n) => {
const t = new Date(e);
return t.setMonth(e.getMonth() + n), t;
}, _e = (e, n) => tt(e, n * 7), nt = (e) => {
const n = new Date(Date.UTC(e.getFullYear(), e.getMonth(), e.getDate())), t = n.getUTCDay() || 7;
n.setUTCDate(n.getUTCDate() + 4 - t);
const i = new Date(Date.UTC(n.getUTCFullYear(), 0, 1));
return Math.ceil(((n.getTime() - i.getTime()) / 864e5 + 1) / 7);
}, at = (e) => {
const n = e.getDay();
return n === 0 || n === 6;
}, rt = (e, n = !0) => {
const t = et(e), i = Le(t, n), s = [];
let v = new Date(i);
for (let D = 0; D < 42; D++)
s.push(new Date(v)), v.setDate(v.getDate() + 1);
return s;
}, ot = (e, n = !0) => {
const t = Le(e, n), i = [];
for (let s = 0; s < 7; s++) {
const v = new Date(t);
v.setDate(t.getDate() + s), i.push(v);
}
return i;
}, st = (e) => [...e].sort((n, t) => {
const i = B(n), s = B(t);
if (i && !s) return -1;
if (!i && s) return 1;
if (i && s) return 0;
const v = j(n), D = j(t);
return !v && D ? -1 : v && !D ? 1 : !v && !D ? 0 : v.localeCompare(D);
}), tn = (e, n) => {
if (B(e) || B(n) || !e.end || !n.end) return !1;
const t = ie(e), i = ie(n);
if (!we(t, i)) return !1;
const s = j(e), v = le(e), D = j(n), p = le(n);
if (!s || !v || !D || !p) return !1;
const h = re(s), f = re(v), M = re(D), r = re(p), a = h.hour * 60 + h.minute, d = f.hour * 60 + f.minute, l = M.hour * 60 + M.minute, E = r.hour * 60 + r.minute;
return a < E && l < d;
}, Se = (e, n = !0) => {
if (!e) return "";
const [t, i] = e.split(":").map(Number);
if (n)
return `${t.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}`;
const s = t >= 12 ? "PM" : "AM";
return `${t === 0 ? 12 : t > 12 ? t - 12 : t}:${i.toString().padStart(2, "0")} ${s}`;
}, nn = (e, n) => new Date(e.getTime() + n * 60 * 1e3), Te = (e, n, t, i) => {
const s = Re(e, n), v = t ? Re(e, t) : void 0;
return {
start: s,
end: v
};
};
function an(e) {
const n = new Date(e), t = Ee(n), i = Je(n);
return { date: t, time: i };
}
const Ne = (e, n) => {
const t = n.filter(
(d) => !B(d) && d.end && we(ie(d), e)
);
if (!t.length)
return { startTime: "09:00", endTime: "10:00" };
const i = [...t].sort((d, l) => {
const E = j(d), o = j(l);
return !E || !o ? 0 : E.localeCompare(o);
}), s = i[i.length - 1], v = le(s);
if (!v)
return { startTime: "09:00", endTime: "10:00" };
const [D, p] = v.split(":").map(Number);
let h = D, f = p;
if (f > 0 && (h += 1, f = 0), h >= 24)
return { startTime: "09:00", endTime: "10:00" };
const M = `${h.toString().padStart(2, "0")}:${f.toString().padStart(2, "0")}`, a = `${Math.min(h + 1, 23).toString().padStart(2, "0")}:${f.toString().padStart(2, "0")}`;
return { startTime: M, endTime: a };
}, rn = (e, n) => {
if (!e || !n) return 60;
const t = new Date(e), i = new Date(n);
return Math.max(15, (i.getTime() - t.getTime()) / (1e3 * 60));
}, g = K({
date: null,
eventId: null,
isResizing: !1,
startMouseY: 0,
hourHeight: 60,
currentEnd: null,
originalEnd: null,
timeFormat: "24h",
resizeHandle: null,
eventElement: null,
currentStart: null,
originalStart: null,
originalDuration: 0,
originalEventTop: 0,
timeSlotElement: null,
originalEventHeight: 0
});
let ke = null, Me = null;
const it = (e, n) => {
let t = null;
return (...i) => {
t && clearTimeout(t), t = setTimeout(() => e(...i), n);
};
};
function ze() {
const e = (r, a, d, l, E, o, c, S, I) => {
if (B(l) || !l.end) return;
document.querySelectorAll(".vdr").forEach((_) => {
_.setAttribute("data-draggable-disabled", "true");
});
const R = o.getBoundingClientRect(), C = p(l.start, l.end);
g.value = {
isResizing: !0,
eventId: r,
originalStart: l.start,
originalEnd: l.end,
originalDuration: C,
resizeHandle: a,
startMouseY: d,
hourHeight: E,
eventElement: o,
timeSlotElement: c,
originalEventHeight: R.height,
originalEventTop: R.top,
currentStart: l.start,
currentEnd: l.end,
date: S,
timeFormat: I
}, o && (o.style.transition = "none", o.style.zIndex = "1000", o.style.userSelect = "none", o.classList.add("calendar-event-resizing"), document.body.style.cursor = "row-resize"), document.addEventListener("mousemove", t, { passive: !1 }), document.addEventListener("mouseup", D, { once: !0 }), document.addEventListener("keydown", s), document.body.style.userSelect = "none";
}, t = it((r) => {
var b, R;
if (!g.value.isResizing || !g.value.eventId || !g.value.eventElement || !g.value.originalStart || !g.value.originalEnd)
return;
(b = r == null ? void 0 : r.preventDefault) == null || b.call(r), (R = r == null ? void 0 : r.stopPropagation) == null || R.call(r);
const a = r.clientY - g.value.startMouseY, l = 60 / g.value.hourHeight, E = Math.round(a * l / 15) * 15, o = new Date(g.value.originalStart), c = new Date(g.value.originalEnd);
let S = new Date(o), I = new Date(c);
if (g.value.resizeHandle === "top") {
const C = o.getTime() + E * 60 * 1e3;
S = new Date(
Math.max(0, Math.min(c.getTime() - 9e5, C))
);
} else {
const C = c.getTime() + E * 60 * 1e3;
I = new Date(Math.max(o.getTime() + 9e5, C));
}
g.value.currentStart = S.toISOString(), g.value.currentEnd = I.toISOString(), i(S, I), ke && g.value.eventId && ke(
g.value.eventId,
g.value.currentStart,
g.value.currentEnd
);
}, 16), i = (r, a) => {
if (!g.value.eventElement || !g.value.timeSlotElement) return;
const d = (a.getTime() - r.getTime()) / (1e3 * 60), l = Math.max(28, d / 60 * g.value.hourHeight - 2);
let E = g.value.originalEventTop;
if (g.value.resizeHandle === "top" && g.value.originalStart) {
const c = new Date(g.value.originalStart), S = (r.getTime() - c.getTime()) / (1e3 * 60);
E += S / 60 * g.value.hourHeight;
}
if (g.value.eventElement.style.height = `${l}px`, g.value.eventElement.style.minHeight = `${l}px`, g.value.eventElement.setAttribute("data-event-duration", d.toString()), g.value.resizeHandle === "top") {
const c = g.value.timeSlotElement.getBoundingClientRect(), S = E - c.top;
g.value.eventElement.style.position = "absolute", g.value.eventElement.style.top = `${S}px`;
}
g.value.eventElement.querySelectorAll(".event-time-display").forEach((c) => {
const S = j({
start: r.toISOString(),
end: a.toISOString()
}), I = le({
start: r.toISOString(),
end: a.toISOString()
});
if (S && I) {
const b = Se(S, g.value.timeFormat === "24h"), R = Se(I, g.value.timeFormat === "24h");
c.textContent = `${b} - ${R}`;
}
});
}, s = (r) => {
r.key === "Escape" && v();
}, v = () => {
if (!(!g.value.isResizing || !g.value.eventElement)) {
if (g.value.eventElement.style.height = `${g.value.originalEventHeight}px`, g.value.eventElement.style.minHeight = `${g.value.originalEventHeight}px`, g.value.eventElement.style.position = "", g.value.eventElement.style.top = "", g.value.eventElement.setAttribute(
"data-event-duration",
g.value.originalDuration.toString()
), g.value.originalStart && g.value.originalEnd) {
const r = new Date(g.value.originalStart), a = new Date(g.value.originalEnd);
i(r, a);
}
D();
}
}, D = () => {
if (!g.value.isResizing) return;
if (document.removeEventListener("mousemove", t), document.removeEventListener("keydown", s), document.querySelectorAll('[data-draggable-disabled="true"]').forEach((a) => {
a.removeAttribute("data-draggable-disabled");
}), g.value.eventElement && (g.value.eventElement.style.transition = "", g.value.eventElement.style.zIndex = "", g.value.eventElement.style.userSelect = "", g.value.eventElement.style.position = "", g.value.eventElement.style.top = "", g.value.eventElement.classList.remove("calendar-event-resizing"), g.value.currentStart && g.value.currentEnd)) {
const a = p(
g.value.currentStart,
g.value.currentEnd
), d = Math.max(28, a / 60 * g.value.hourHeight - 2);
g.value.eventElement.style.height = `${d}px`, g.value.eventElement.style.minHeight = `${d}px`, g.value.eventElement.setAttribute("data-event-duration", a.toString());
}
document.body.style.cursor = "", document.body.style.userSelect = "", Me && g.value.eventId && g.value.currentStart && g.value.currentEnd && Me(
g.value.eventId,
g.value.currentStart,
g.value.currentEnd
), g.value = {
isResizing: !1,
eventId: null,
originalStart: null,
originalEnd: null,
originalDuration: 0,
resizeHandle: null,
startMouseY: 0,
hourHeight: 60,
timeSlotElement: null,
eventElement: null,
originalEventHeight: 0,
originalEventTop: 0,
currentStart: null,
currentEnd: null,
date: null,
timeFormat: "24h"
};
}, p = (r, a) => {
const d = new Date(r), l = new Date(a);
return Math.max(15, (l.getTime() - d.getTime()) / (1e3 * 60));
}, h = (r, a) => {
ke = r, Me = a;
}, f = P(() => g.value.isResizing), M = P(() => g.value.eventId);
return fe(
() => g.value.isResizing,
(r) => {
if (!r && g.value.eventElement && g.value.currentStart && g.value.currentEnd) {
const a = p(
g.value.currentStart,
g.value.currentEnd
), d = Math.max(28, a / 60 * g.value.hourHeight - 2);
g.value.eventElement.style.height = `${d}px`, g.value.eventElement.style.minHeight = `${d}px`, g.value.eventElement.setAttribute("data-event-duration", a.toString());
}
}
), {
startResize: e,
endResize: D,
cancelResize: v,
isCurrentlyResizing: f,
getCurrentResizeEventId: M,
setUpdateCallbacks: h,
resizeState: P(() => g.value)
};
}
const lt = ["title"], ut = { class: "calendar-event-content" }, he = /* @__PURE__ */ se({
__name: "CalendarEvent",
props: {
event: {},
compact: { type: Boolean, default: !1 },
canResize: { type: Boolean },
eventIndex: { default: 0 },
hourHeight: { default: 60 },
rounded: {},
maxDisplayEvents: { default: 3 },
layout: {},
timeFormat: { default: "24h" },
view: { default: "month" }
},
emits: ["click", "resizeUpdate", "resizeEnd"],
setup(e, { emit: n }) {
const t = e, i = n, s = K(), { startResize: v, isCurrentlyResizing: D, getCurrentResizeEventId: p, setUpdateCallbacks: h } = ze(), f = P(() => {
if (!t.event) return "";
if (B(t.event)) return "All day";
const o = j(t.event), c = le(t.event);
if (!o) return "";
const S = o, I = c ? Se(c, t.timeFormat === "24h") : "";
return `${S} - ${I}`;
}), M = P(() => {
var c;
const o = ["calendar-event", "relative", "cursor-pointer", "group", "flex-shrink-0"];
return t.compact && o.push("compact"), t.rounded === "sm" && o.push("small-radius"), D.value && p.value === ((c = t.event) == null ? void 0 : c.id) && o.push("calendar-event-resizing"), o;
}), r = P(() => {
var c, S, I, b, R;
const o = {
backgroundColor: ((c = t.event) == null ? void 0 : c.backgroundColor) || "#3b82f6",
color: ((S = t.event) == null ? void 0 : S.textColor) || "#ffffff"
};
if (t.event && (t.view === "week" || t.view === "date") && !t.compact && !B(t.event) && t.event.end) {
const C = d(), _ = (t.hourHeight ?? 60) / 60, u = Math.max(28, C * _);
o.height = `${u - 3}px`, o.minHeight = `${u - 3}px`, o.position = "absolute";
const y = j(t.event);
if (y) {
const $ = re(y), x = (($ == null ? void 0 : $.minute) ?? 0) * _;
o.top = `${x + 1}px`;
}
t.layout ? (o.width = (I = t.layout) == null ? void 0 : I.width, o.left = (b = t.layout) == null ? void 0 : b.left, o.zIndex = (R = t.layout) == null ? void 0 : R.zIndex, o.margin = "0 2px") : (o.width = "100%", o.left = "0", o.margin = "0 2px");
}
return o;
}), a = P(() => {
var o;
return D.value && p.value === ((o = t.event) == null ? void 0 : o.id);
}), d = () => {
if (!t.event || B(t.event) || !t.event.end) return 60;
const o = j(t.event), c = le(t.event);
if (!o || !c) return 60;
const [S, I] = o.split(":").map(Number), [b, R] = c.split(":").map(Number), C = (S ?? 0) * 60 + (I ?? 0), _ = (b ?? 0) * 60 + (R ?? 0);
return Math.max(15, _ - C);
}, l = (o) => {
var c, S, I;
if (D.value) {
(c = o == null ? void 0 : o.preventDefault) == null || c.call(o), (S = o == null ? void 0 : o.stopPropagation) == null || S.call(o);
return;
}
(I = o == null ? void 0 : o.stopPropagation) == null || I.call(o), i("click", t.event);
}, E = (o, c) => {
var b, R, C, _;
if (!t.canResize || !s.value || !t.event || B(t.event)) return;
(b = c == null ? void 0 : c.preventDefault) == null || b.call(c), (R = c == null ? void 0 : c.stopPropagation) == null || R.call(c);
const S = (_ = (C = s.value) == null ? void 0 : C.closest) == null ? void 0 : _.call(C, ".calendar-time-slot");
if (!S) return;
const I = Ee(ie(t.event));
v(
t.event.id,
o,
c.clientY,
t.event,
t.hourHeight ?? 60,
s.value,
S,
I,
t.timeFormat
);
};
return Ve(() => {
h(
(o, c, S) => {
i("resizeUpdate", o, c, S);
},
(o, c, S) => {
i("resizeEnd", o, c, S);
}
);
}), (o, c) => {
var S, I;
return F(), L("div", {
ref_key: "eventRef",
ref: s,
class: X(M.value),
style: J(r.value),
onClick: ge(l, ["stop"]),
onMousedown: c[4] || (c[4] = ge(() => {
}, ["stop"])),
title: `${((S = o.event) == null ? void 0 : S.title) ?? ""}${f.value ? " • " + f.value : ""}`
}, [
o.canResize && o.event && !m(B)(o.event) ? (F(), L("div", {
key: 0,
class: X(["resize-handle resize-handle-top", {
"resize-handle-active": a.value,
"resize-handle-visible": a.value
}]),
onMousedown: c[0] || (c[0] = (b) => E("top", b)),
onClick: c[1] || (c[1] = ge(() => {
}, ["stop", "prevent"]))
}, null, 34)) : ne("", !0),
Q(o.$slots, "event", de(ce({
event: o.event,
displayTime: f.value,
view: o.view,
isMultiDay: !1,
isContained: (I = t.layout) == null ? void 0 : I.isContained
})), () => {
var b;
return [
Y("div", ut, [
Y("span", {
class: X([o.view !== "month" ? "event-title multiline" : "event-title", "event-title"])
}, me((b = o.event) == null ? void 0 : b.title), 3)
])
];
}),
o.canResize && o.event && !m(B)(o.event) ? (F(), L("div", {
key: 1,
class: X(["resize-handle resize-handle-bottom", {
"resize-handle-active": a.value,
"resize-handle-visible": a.value
}]),
onMousedown: c[2] || (c[2] = (b) => E("bottom", b)),
onClick: c[3] || (c[3] = ge(() => {
}, ["stop", "prevent"]))
}, null, 34)) : ne("", !0)
], 46, lt);
};
}
}), Pe = /* @__PURE__ */ se({
__name: "CurrentTimeIndicator",
props: {
top: {}
},
setup(e) {
return (n, t) => (F(), L("div", {
class: "current-time-indicator",
style: J({ top: n.top })
}, t[0] || (t[0] = [
Y("div", { class: "current-time-indicator__dot" }, null, -1),
Y("div", { class: "current-time-indicator__line" }, null, -1)
]), 4));
}
});
function Ye(e) {
const { getTimeSlotHeight: n, startHour: t = 0, enabled: i } = e, s = K(/* @__PURE__ */ new Date()), v = () => {
s.value = /* @__PURE__ */ new Date();
};
let D;
const p = () => {
D && (clearInterval(D), D = void 0);
}, h = () => {
p(), v(), D = window.setInterval(v, 6e4);
};
return fe(
i,
(M) => {
M ? h() : p();
},
{ immediate: !0 }
), qe(() => {
p();
}), {
topPosition: P(() => {
const M = s.value, r = M.getHours(), a = M.getMinutes();
let d = 0;
for (let c = t; c < r; c++)
d += n(c);
const E = n(r) / 60, o = a * E;
return `${d + o}px`;
})
};
}
const A = K({
date: null,
startHour: 0,
isDragging: !1,
startMouseY: 0,
hourHeight: 60,
currentMouseY: 0,
currentEndTime: null,
timeSlotElement: null,
initialStartTime: null,
currentStartTime: null,
placeholderEventElement: null
});
let $e = null;
function dt() {
const e = (r, a, d, l, E) => {
const o = `${a.toString().padStart(2, "0")}:00`, c = `${(a + 1).toString().padStart(2, "0")}:00`;
A.value = {
isDragging: !0,
startMouseY: r,
currentMouseY: r,
timeSlotElement: l,
placeholderEventElement: null,
startHour: a,
date: d,
hourHeight: E,
initialStartTime: o,
currentStartTime: o,
currentEndTime: c
}, n(l), document.body.style.userSelect = "none", document.addEventListener("mousemove", t, { passive: !1 }), document.addEventListener("mouseup", p, { once: !0 }), document.addEventListener("keydown", v);
}, n = (r, a, d) => {
var o, c, S;
if (!((o = A.value) != null && o.date)) return;
const l = document.createElement("div");
l.className = "calendar-event-placeholder", l.style.backgroundColor = "var(--calendar-primary-color)", l.style.minHeight = "28px", l.style.height = `${(((c = A.value) == null ? void 0 : c.hourHeight) ?? 60) - 4}px`, l.style.top = "1px", l.innerHTML = `
<div class="calendar-event-content">
<span class="event-title">New Event</span>
</div>
`;
const E = (S = r == null ? void 0 : r.querySelector) == null ? void 0 : S.call(r, ".calendar-events-container");
E && (E.appendChild(l), A.value.placeholderEventElement = l);
}, t = (r) => {
var c, S, I, b, R, C, _, u, y, $, k;
if (!((c = A.value) != null && c.isDragging) || !((S = A.value) != null && S.placeholderEventElement)) return;
(I = r == null ? void 0 : r.preventDefault) == null || I.call(r), (b = r == null ? void 0 : r.stopPropagation) == null || b.call(r), A.value.currentMouseY = (r == null ? void 0 : r.clientY) ?? 0;
const a = ((r == null ? void 0 : r.clientY) ?? 0) - (((R = A.value) == null ? void 0 : R.startMouseY) ?? 0), d = 60 / (((C = A.value) == null ? void 0 : C.hourHeight) ?? 60), l = Math.round(a * d / 15) * 15;
let E = ((_ = A.value) == null ? void 0 : _.initialStartTime) ?? "00:00", o = ((u = A.value) == null ? void 0 : u.initialStartTime) ?? "00:00";
if (a >= 0) {
const x = re(((y = A.value) == null ? void 0 : y.initialStartTime) ?? "00:00"), z = (x == null ? void 0 : x.hour) * 60 + (x == null ? void 0 : x.minute), w = Math.max(z + 15, z + Math.abs(l)), H = Math.min(23, Math.floor(w / 60)), T = Math.min(59, w % 60);
E = (($ = A.value) == null ? void 0 : $.initialStartTime) ?? "00:00", o = `${H.toString().padStart(2, "0")}:${T.toString().padStart(2, "0")}`;
} else {
const x = re(((k = A.value) == null ? void 0 : k.initialStartTime) ?? "00:00"), z = (x == null ? void 0 : x.hour) * 60 + (x == null ? void 0 : x.minute) + 60, w = Math.max(0, (x == null ? void 0 : x.hour) * 60 + (x == null ? void 0 : x.minute) + l), H = Math.max(0, Math.floor(w / 60)), T = Math.max(0, w % 60);
E = `${H.toString().padStart(2, "0")}:${T.toString().padStart(2, "0")}`, o = `${Math.floor(z / 60).toString().padStart(2, "0")}:${(z % 60).toString().padStart(2, "0")}`;
}
A.value.currentStartTime = E, A.value.currentEndTime = o, i(E, o, a);
}, i = (r, a, d) => {
var c, S, I, b;
if (!((c = A.value) != null && c.placeholderEventElement)) return;
const l = s(r, a), E = Math.max(28, l / 60 * (((S = A.value) == null ? void 0 : S.hourHeight) ?? 60) - 4);
let o = 1;
if (d < 0) {
const R = 60 / (((I = A.value) == null ? void 0 : I.hourHeight) ?? 60), C = Math.abs(d * R);
o = 1 - Math.max(0, C / 60 * (((b = A.value) == null ? void 0 : b.hourHeight) ?? 60));
}
A.value.placeholderEventElement.style.height = `${E}px`, A.value.placeholderEventElement.style.minHeight = `${E}px`, A.value.placeholderEventElement.style.top = `${o}px`;
}, s = (r, a) => {
const d = re(r), l = re(a), E = (d == null ? void 0 : d.hour) * 60 + (d == null ? void 0 : d.minute), o = (l == null ? void 0 : l.hour) * 60 + (l == null ? void 0 : l.minute);
return Math.max(15, o - E);
}, v = (r) => {
(r == null ? void 0 : r.key) === "Escape" && D();
}, D = () => {
var r, a, d;
(r = A.value) != null && r.isDragging && ((d = (a = A.value) == null ? void 0 : a.placeholderEventElement) == null || d.remove(), h());
}, p = () => {
var a, d, l, E, o, c, S, I;
if (!((a = A.value) != null && a.isDragging)) return;
(l = (d = A.value) == null ? void 0 : d.placeholderEventElement) == null || l.remove(), Math.abs(
(((E = A.value) == null ? void 0 : E.currentMouseY) ?? 0) - (((o = A.value) == null ? void 0 : o.startMouseY) ?? 0)
) > 10 && $e && ((c = A.value) != null && c.date) && ((S = A.value) != null && S.currentStartTime) && ((I = A.value) != null && I.currentEndTime) && $e(
A.value.date,
A.value.currentStartTime,
A.value.currentEndTime
), h();
}, h = () => {
document.removeEventListener("mousemove", t), document.removeEventListener("keydown", v), document.body.style.userSelect = "", A.value = {
isDragging: !1,
startMouseY: 0,
currentMouseY: 0,
timeSlotElement: null,
placeholderEventElement: null,
startHour: 0,
date: null,
hourHeight: 60,
initialStartTime: null,
currentStartTime: null,
currentEndTime: null
};
}, f = (r) => {
$e = r;
}, M = P(() => {
var r;
return (r = A.value) == null ? void 0 : r.isDragging;
});
return {
startDragCreate: e,
endDragCreate: p,
cancelDragCreate: D,
isDragCreating: M,
setEventCreateCallback: f,
dragCreateState: P(() => A.value)
};
}
function We(e, n, t) {
const i = K(!1), s = K(null), { startDragCreate: v, isDragCreating: D, setEventCreateCallback: p, cancelDragCreate: h } = dt();
p((u, y, $) => {
const k = Te(u, y, $), x = Math.max(
15,
(new Date(k.end || k.start).getTime() - new Date(k.start).getTime()) / 6e4
);
n("createEvent", u, k.start, k.end, x);
});
const f = P(() => {
const u = [];
for (let y = e.startHour; y < e.endHour; y++)
u.push({
hour: y,
display: Se(
`${y.toString().padStart(2, "0")}:00`,
e.timeFormat === "24h"
),
value: y
});
return u;
}), M = (u, y) => {
const $ = typeof u == "number" ? t.value : u, k = typeof u == "number" ? u : y;
return !$ || !$.events ? [] : $.events.filter((x) => {
if (B(x) || ue(x)) return !1;
const z = j(x);
return z ? parseInt(z.split(":")[0]) === k : !1;
});
}, r = (u) => {
if (!e.calendarCells) return 0;
let y = 0;
return e.calendarCells.forEach(($) => {
const k = M($, u).length;
k > y && (y = k);
}), y;
}, a = (u) => {
const y = e.calendarCells ? r(u) : M(u).length;
if (y <= 1) return e.hourHeight;
const $ = e.hourHeight, x = Math.max(0, y - 1) * 32;
return Math.max($, $ + x);
}, d = (u) => M(u).length <= 1 ? Math.max(28, e.hourHeight - 4) : 28, l = (u, y) => {
const $ = typeof u == "number" ? t.value : u, k = typeof u == "number" ? u : y, x = M($, k);
if (!x.length) {
const N = `${k.toString().padStart(2, "0")}:00`, G = `${(k + 1).toString().padStart(2, "0")}:00`;
return { startTime: N, endTime: G };
}
const z = x.sort((N, G) => {
const O = j(N), W = j(G);
return !O || !W ? 0 : O.localeCompare(W);
}), w = z[z.length - 1], H = le(w);
if (H) {
const [N, G] = H.split(":").map(Number);
let O = N, W = G;
G > 0 && (O = N + 1, W = 0);
const ae = `${O.toString().padStart(2, "0")}:${W.toString().padStart(2, "0")}`, oe = `${(O + 1).toString().padStart(2, "0")}:00`;
return { startTime: ae, endTime: oe };
}
const T = `${k.toString().padStart(2, "0")}:00`, U = `${(k + 1).toString().padStart(2, "0")}:00`;
return { startTime: T, endTime: U };
};
return {
hours: f,
getEventsForTimeSlot: M,
getMaxEventsInHourSlot: r,
getTimeSlotHeight: a,
getEventHeight: d,
getNextAvailableTimeForSlot: l,
handleTimeSlotClick: (u, y) => {
if (s.value && (clearTimeout(s.value), s.value = null), !e.allowEventCreation || i.value || D.value) return;
const $ = typeof u == "number" ? t.value : u, k = typeof u == "number" ? u : y;
if (!$) return;
const { startTime: x, endTime: z } = l($, k);
n("timeSlotClick", $.date, x);
},
handleTimeSlotMouseDown: (u, y, $) => {
if (!e.allowEventCreation || i.value || D.value) return;
const k = typeof y == "number" ? t.value : y, x = typeof y == "number" ? y : $;
k && (s.value && (clearTimeout(s.value), s.value = null), s.value = setTimeout(() => {
const z = u.target.closest(".calendar-time-slot");
z && v(
u.clientY,
x,
k.date,
z,
e.hourHeight
);
}, 150));
},
handleTimeSlotMouseUp: (u) => {
s.value && (clearTimeout(s.value), s.value = null);
},
handleDragEnd: (u) => {
if (!u.to || !u.from) return;
const y = u.item.dataset.eventId;
if (!y) return;
const $ = u.to.closest(".calendar-time-slot"), k = $ == null ? void 0 : $.getAttribute("data-col"), x = $ == null ? void 0 : $.getAttribute("data-hour");
if (!k || !x) return;
const z = parseInt(x), w = new Date(k), H = u.item.dataset.eventDuration || "60", T = parseInt(H), [U, N] = [
`${z.toString().padStart(2, "0")}:00`.split(":")[0],
"00"
].map(Number), O = U * 60 + N + T, W = Math.floor(O / 60) % 24, ae = O % 60, oe = `${W.toString().padStart(2, "0")}:${ae.toString().padStart(2, "0")}`, Z = Te(
w,
`${z.toString().padStart(2, "0")}:00`,
oe
), pe = Math.max(
15,
(new Date(Z.end || Z.start).getTime() - new Date(Z.start).getTime()) / 6e4
);
n("eventUpdate", y, Z.start, Z.end, pe);
},
getDayHeaderClass: (u) => {
if (!u) return [];
const y = [];
return u.isToday && y.push("today"), u.isWeekend && y.push("weekend"), y;
},
getTimeSlotClass: (u, y) => {
const $ = typeof u == "number" ? u : y, k = ["border-gray-100", "relative", "cursor-pointer"];
return $ % 2 === 0 && k.push("border-gray-200"), D.value && k.push("drag-creating"), k;
},
handleEventResizeUpdate: (u, y, $) => {
const k = Math.max(15, (new Date($).getTime() - new Date(y).getTime()) / 6e4);
n("eventUpdate", u, y, $, k);
},
handleEventResizeEnd: (u, y, $) => {
const k = Math.max(15, (new Date($).getTime() - new Date(y).getTime()) / 6e4);
n("eventUpdate", u, y, $, k);
},
setDraggingDisabled: (u) => {
i.value = u;
},
isDraggingDisabled: P(() => i.value),
isDragCreating: D,
cancelDragCreate: h
};
}
const ct = { class: "calendar-date-grid" }, mt = {
key: 0,
class: "grid-template-time all-day-section"
}, vt = { class: "all-day-events" }, gt = { class: "grid-template-week" }, ht = { class: "time-slot-container" }, ft = { class: "week-grid-border relative overflow-hidden" }, pt = ["data-hour", "data-col", "onClick", "onMousedown"], Dt = ["data-event-id", "data-event-start", "data-event-end", "data-event-duration"], yt = {
key: 0,
class: "add-event-hover"
}, Et = { class: "add-event-icon" }, wt = /* @__PURE__ */ se({
__name: "CalendarDateGrid",
props: {
endHour: { default: 24 },
startHour: { default: 0 },
hourHeight: { default: 60 },
calendarCells: {},
timeFormat: { default: "24h" },
allowEventCreation: { type: Boolean, default: !0 }
},
emits: ["dayClick", "eventClick", "createEvent", "timeSlotClick", "eventUpdate"],
setup(e, { emit: n }) {
const t = e, i = n, s = P(() => t.calendarCells[0]), {
hours: v,
handleDragEnd: D,
isDragCreating: p,
getEventHeight: h,
getTimeSlotClass: f,
getEventsForTimeSlot: M,
getTimeSlotHeight: r,
isDraggingDisabled: a,
handleTimeSlotClick: d,
setDraggingDisabled: l,
handleEventResizeEnd: E,
handleTimeSlotMouseUp: o,
handleTimeSlotMouseDown: c,
handleEventResizeUpdate: S
} = We(t, i, s), I = P(() => {
var k;
return ((k = s.value) == null ? void 0 : k.isToday) ?? !1;
}), { topPosition: b } = Ye({
getTimeSlotHeight: r,
startHour: t.startHour,
enabled: I
}), { isCurrentlyResizing: R, getCurrentResizeEventId: C } = ze(), _ = P(() => s.value ? s.value.events.filter(B) : []);
fe(
() => R.value,
(k) => {
l(k);
}
);
const u = (k) => {
R.value || p.value || i("eventClick", k);
}, y = (k, x, z) => {
const w = Math.max(15, (new Date(z).getTime() - new Date(x).getTime()) / 6e4);
S(k, x, z), i("eventUpdate", k, x, z, w);
}, $ = (k, x, z) => {
const w = Math.max(15, (new Date(z).getTime() - new Date(x).getTime()) / 6e4);
E(k, x, z), i("eventUpdate", k, x, z, w);
};
return (k, x) => (F(), L("div", ct, [
_.value.length > 0 ? (F(), L("div", mt, [
x[1] || (x[1] = Y("div", { class: "all-day-label" }, "All-day", -1)),
Y("div", vt, [
(F(!0), L(ee, null, te(_.value, (z) => (F(), ve(he, {
key: z.id,
view: "date",
event: z,
compact: !0,
"time-format": t.timeFormat,
onClick: (w) => u(z)
}, {
event: V((w) => [
Q(k.$slots, "event", De({ ref_for: !0 }, w))
]),
_: 2
}, 1032, ["event", "time-format", "onClick"]))), 128))
])
])) : ne("", !0),
q(be, { class: "flex-1 overflow-auto" }, {
default: V(() => [
Y("div", gt, [
Y("div", ht, [
(F(!0), L(ee, null, te(m(v), (z, w) => (F(), L("div", {
key: z.hour,
class: "time-slot-label",
style: J({
height: `${w == 0 ? m(r)(z.hour) - 1 : m(r)(z.hour)}px`
})
}, me(z.display), 5))), 128))
]),
Y("div", ft, [
s.value.isToday ? (F(), ve(Pe, {
key: 0,
top: m(b)
}, null, 8, ["top"])) : ne("", !0),
(F(!0), L(ee, null, te(m(v), (z) => (F(), L("div", {
key: `${s.value.dateString}-${z.hour}`,
class: X([m(f)(z.hour), "calendar-time-slot"]),
style: J({ height: `${m(r)(z.hour)}px` }),
"data-hour": z.hour,
"data-col": s.value.dateString,
onClick: (w) => m(d)(z.hour),
onMousedown: (w) => m(c)(w, z.hour),
onMouseup: x[0] || (x[0] = (w) => m(o)(w))
}, [
q(m(ye), {
"item-key": "id",
onEnd: m(D),
"data-col": s.value.date,
list: m(M)(z.hour),
group: "calendar-events",
"ghost-class": "opacity-50",
class: "calendar-events-container",
disabled: m(a) || m(R) || m(p)
}, {
item: V(({ element: w, index: H }) => {
var T;
return [
Y("div", {
"data-event-id": w.id,
"data-event-start": w.start,
"data-event-end": w.end,
"data-event-duration": Math.max(
15,
(new Date(w.end || w.start).getTime() - new Date(w.start).getTime()) / 6e4
),
style: J({
pointerEvents: m(R) && w.id !== m(C) || m(p) ? "none" : "auto"
})
}, [
q(he, {
event: w,
layout: (T = s.value.timedLayout) == null ? void 0 : T.get(w.id),
style: J({ minHeight: `${m(h)(z.hour) - 4}px` }),
view: "date",
"event-index": H,
canResize: "",
compact: !1,
"hour-height": k.hourHeight,
"time-format": t.timeFormat,
onClick: u,
onResizeUpdate: y,
onResizeEnd: $
}, {
event: V((U) => [
Q(k.$slots, "event", De({ ref_for: !0 }, U))
]),
_: 2
}, 1032, ["event", "layout", "style", "event-index", "hour-height", "time-format"])
], 12, Dt)
];
}),
_: 2
}, 1032, ["onEnd", "data-col", "list", "disabled"]),
k.allowEventCreation && m(M)(z.hour).length === 0 && !m(R) && !m(p) ? (F(), L("div", yt, [
Y("div", Et, [
q(He, {
icon: "plus",
width: "10",
height: "10"
})
])
])) : ne("", !0)
], 46, pt))), 128))
])
])
]),
_: 3
})
]));
}
}), Tt = (e, n) => {
if (!e.end || !n.end) return !1;
const t = new Date(e.start).getTime(), i = new Date(e.end).getTime(), s = new Date(n.start).getTime(), v = new Date(n.end).getTime();
return t < v && s < i;
};
function St(e) {
const n = /* @__PURE__ */ new Map();
if (!e || e.length === 0)
return n;
const i = [...e].sort((s, v) => {
const D = new Date(s.start).getTime(), p = new Date(v.start).getTime();
if (D !== p)
return D - p;
const h = s.end ? new Date(s.end).getTime() : 0;
return (v.end ? new Date(v.end).getTime() : 0) - h;
}).map((s) => ({
event: s,
overlaps: [],
column: -1
}));
for (let s = 0; s < i.length; s++)
for (let v = s + 1; v < i.length; v++) {
const D = i[s], p = i[v];
Tt(D.event, p.event) && (D.overlaps.push(p), p.overlaps.push(D));
}
for (const s of i) {
const v = s.overlaps.map((p) => p.column).filter((p) => p !== -1);
let D = 0;
for (; v.includes(D); )
D++;
s.column = D;
}
for (const s of i) {
const v = [s, ...s.overlaps], p = 100 / (Math.max(...v.map((f) => f.column)) + 1), h = s.column * p;
n.set(s.event.id, {
width: `calc(${p}% - 4px)`,
left: `${h}%`,
zIndex: 10 + s.column,
isContained: p !== 100
});
}
return n;
}
function Be(e) {
if (!e || e.length === 0) return [];
const n = e[0].date, t = e[e.length - 1].date, i = /* @__PURE__ */ new Map();
e.forEach((p) => {
p.events.forEach((h) => {
if ((B(h) || ue(h)) && !i.has(h.id)) {
const f = ie(h), M = xe(h);
let r = e.findIndex((d) => we(d.date, f)), a = e.findIndex((d) => we(d.date, M));
f < n && (r = 0), M > t && (a = e.length - 1), r === -1 && f <= t && M >= n && (r = 0), a === -1 && f <= t && M >= n && (a = e.length - 1), r !== -1 && i.set(h.id, {
event: h,
startDayIndex: r,
endDayIndex: a !== -1 ? a : r
});
}
});
});
const s = Array.from(i.values()).map(
({ event: p, startDayIndex: h, endDayIndex: f }) => {
const M = Math.max(1, f - h + 1);
return { event: p, startDayIndex: h, span: M };
}
);
s.sort((p, h) => p.startDayIndex !== h.startDayIndex ? p.startDayIndex - h.startDayIndex : p.span !== h.span ? h.span - p.span : p.event.title.localeCompare(h.event.title));
const v = [], D = [];
return s.forEach((p) => {
let h = !1;
for (let f = 0; f < v.length; f++) {
let M = !0;
for (let r = 0; r < p.span; r++) {
const a = p.startDayIndex + r;
if (a < e.length && v[f][a]) {
M = !1;
break;
}
}
if (M) {
const r = { ...p, track: f };
for (let a = 0; a < p.span; a++) {
const d = p.startDayIndex + a;
d < e.length && (v[f][d] = r);
}
D.push(r), h = !0;
break;
}
}
if (!h) {
const f = new Array(e.length).fill(null), M = v.length, r = { ...p, track: M };
for (let a = 0; a < p.span; a++) {
const d = p.startDayIndex + a;
d < e.length && (f[d] = r);
}
v.push(f), D.push(r);
}
}), D;
}
const Ct = { class: "calendar-week-grid" }, kt = { class: "grid-template-week-header" }, Mt = ["data-day-date", "onClick"], $t = { class: "day-name" }, Ht = { class: "day-number" }, bt = {
key: 0,
class: "grid-template-time all-day-section"
}, xt = { class: "relative" }, zt = ["data-event-id", "data-event-all-day", "data-is-multi-day"], It = { class: "grid-template-week-body" }, Rt = { class: "time-slot-container" }, Ut = ["data-hour", "data-col", "onClick", "onMousedown"], _t = ["data-event-id", "data-event-start", "data-event-end", "data-event-duration"], Ft = {
key: 0,
class: "add-event-hover"
}, At = { class: "add-event-icon" }, Lt = /* @__PURE__ */ se({
__name: "CalendarWeekGrid",
props: {
calendarCells: {},
dayNames: {},
allowEventCreation: { type: Boolean, default: !0 },
hourHeight: { default: 60 },
startHour: { default: 0 },
endHour: { default: 24 },
timeFormat: { default: "24h" }
},
emits: ["dayClick", "eventClick", "createEvent", "timeSlotClick", "eventUpdate"],
setup(e, { emit: n }) {
const t = e, i = n, s = K(!1), {
hours: v,
getEventsForTimeSlot: D,
getTimeSlotHeight: p,
getDayHeaderClass: h,
getTimeSlotClass: f,
handleTimeSlotClick: M,
handleTimeSlotMouseDown: r,
handleTimeSlotMouseUp: a,
handleDragEnd: d,
handleEventResizeUpdate: l,
handleEventResizeEnd: E,
setDraggingDisabled: o,
isDraggingDisabled: c,
isDragCreating: S
} = We(t, i), I = P(() => t.calendarCells.some((w) => w.isToday)), { topPosition: b } = Ye({
getTimeSlotHeight: p,
startHour: t.startHour,
enabled: I
}), { isCurrentlyResizing: R, getCurrentResizeEventId: C } = ze(), _ = P(() => Be(t.calendarCells)), u = P(() => _.value.length === 0 ? 0 : (Math.max(..._.value.map((H) => H.track)) + 1) * 21.5 + 2.5);
fe(
() => R.value,
(w) => {
o(w);
}
);
const y = (w) => {
R.value || S.value || i("eventClick", w);
}, $ = (w) => {
R.value || S.value || i("dayClick", w.date);
}, k = (w, H, T) => {
const U = Math.max(15, (new Date(T).getTime() - new Date(H).getTime()) / 6e4);
l(w, H, T), i("eventUpdate", w, H, T, U);
}, x = (w, H, T) => {
const U = Math.max(15, (new Date(T).getTime() - new Date(H).getTime()) / 6e4);
E(w, H, T), i("eventUpdate", w, H, T, U);
}, z = (w) => {
var G, O;
if (!w.to || !w.from) return;
const H = w.item.dataset.eventId;
if (!H) return;
const T = w.to.closest(".calendar-time-slot");
let U = T == null ? void 0 : T.getAttribute("data-col"), N = null;
if (T) {
const W = T.getAttribute("data-hour");
W && (N = parseInt(W, 10));
}
if (!U) {
const W = w.to.closest("[data-day-date]");
W && (U = W.getAttribute("data-day-date"));
}
if (!U && w.to) {
const W = Array.from(((G = w.to.parentElement) == null ? void 0 : G.children) || []).indexOf(w.to);
W >= 0 && W < t.calendarCells.length && (U = t.calendarCells[W].dateString);
}
if (U) {
const W = new Date(U);
let ae, oe;
if (N !== null)
ae = `${N.toString().padStart(2, "0")}:00`, oe = `${(N + 1).toString().padStart(2, "0")}:00`;
else {
const Ce = ((O = t.calendarCells.find((Oe) => Oe.dateString === U)) == null ? void 0 : O.events) || [], Ie = Ne(W, Ce);
ae = Ie.startTime, oe = Ie.endTime;
}
const Z = Te(W, ae, oe), pe = Math.max(
15,
(new Date(Z.end || Z.start).getTime() - new Date(Z.start).getTime()) / 6e4
);
i("eventUpdate", H, Z.start, Z.end, pe);
}
};
return (w, H) => (F(), L("div", Ct, [
Y("div", kt, [
H[3] || (H[3] = Y("div", { class: "day-header" }, null, -1)),
(F(!0), L(ee, null, te(w.calendarCells, (T, U) => (F(), L("div", {
key: T.dateString,
class: X([m(h)(T), "day-header"]),
"data-day-date": T.dateString,
onClick: (N) => $(T)
}, [
Y("div", $t, me(w.dayNames[U]), 1),
Y("div", Ht, me(T.date.getDate()), 1)
], 10, Mt))), 128))
]),
_.value.length > 0 ? (F(), L("div", bt, [
H[4] || (H[4] = Y("div", { class: "all-day-label" }, "All-day", -1)),
Y("div", xt, [
Y("div", {
class: "grid-cols-7",
style: J({ height: `${u.value}px` })
}, null, 4),
q(m(ye), {
list: _.value,
"item-key": "event.id",
group: "calendar-events",
class: "all-day-events-overlay",
"ghost-class": "opacity-50",
disabled: s.value || m(R) || m(S),
"component-data": { class: "w-full h-full all-day-events-overlay" },
onStart: H[0] || (H[0] = (T) => s.value = !0),
onEnd: H[1] || (H[1] = (T) => {
z(T), s.value = !1;
})
}, {
item: V(({ element: T }) => [
Y("div", {
"data-event-id": T.event.id,
"data-event-all-day": m(B)(T.event),
"data-is-multi-day": m(ue)(T.event),
class: "all-day-event-item",
style: J({
left: `${T.startDayIndex / 7 * 100}%`,
width: `${T.span / 7 * 100}%`,
top: `${T.track * 21}px`
})
}, [
q(he, {
event: T.event,
view: "week",
compact: !0,
rounded: "sm",
class: "all-day-event",
"time-format": t.timeFormat,
onClick: (U) => y(T.event)
}, {
event: V((U) => [
Q(w.$slots, "event", de(ce({ ...U, isMultiDay: !0 })))
]),
_: 2
}, 1032, ["event", "time-format", "onClick"])
], 12, zt)
]),
_: 3
}, 8, ["list", "disabled"])
])
])) : ne("", !0),
q(be, { class: "flex-1 overflow-auto" }, {
default: V(() => [
Y("div", It, [
Y("div", Rt, [
(F(!0), L(ee, null, te(m(v), (T) => (F(), L("div", {
key: T.hour,
class: "time-slot-label",
style: J({ height: `${m(p)(T.hour) + 0.02}px` })
}, me(T.display), 5))), 128))
]),
(F(!0), L(ee, null, te(w.calendarCells, (T) => (F(), L("div", {
key: T.dateString,
class: "week-grid-border relative"
}, [
T.isToday ? (F(), ve(Pe, {
key: 0,
top: m(b)
}, null, 8, ["top"])) : ne("", !0),
(F(!0), L(ee, null, te(m(v), (U) => (F(), L("div", {
key: `${T.dateString}-${U.hour}`,
class: X([m(f)(T, U.hour), "calendar-time-slot"]),
style: J({ height: `${m(p)(U.hour)}px` }),
"data-hour": U.hour,
"data-col": T.dateString,
onClick: (N) => m(M)(T, U.hour),
onMousedown: (N) => m(r)(N, T, U.hour),
onMouseup: H[2] || (H[2] = (N) => m(a)(N))
}, [
q(m(ye), {
list: m(D)(T, U.hour),
"item-key": "id",
group: "calendar-events",
class: "calendar-events-container week-view",
onEnd: m(d),
"ghost-class": "opacity-50",
"data-col": T.dateString,
animation: 200,
disabled: m(c) || m(R) || m(S)
}, {
item: V(({ element: N, index: G }) => {
var O;
return [
Y("div", {
"data-event-id": N.id,
"data-event-start": N.start,
"data-event-end": N.end,
"data-event-duration": Math.max(
15,
(new Date(N.end || N.start).getTime() - new Date(N.start).getTime()) / 6e4
),
style: J({
pointerEvents: m(R) && N.id !== m(C) || m(S) ? "none" : "auto"
})
}, [
q(he, {
ev