hisonvue 1.0.0
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/LICENSE +21 -0
- package/README.md +248 -0
- package/dist/HAccordion-CPtgQUK0.js +1 -0
- package/dist/HAccordion-ll-4cIAw.mjs +262 -0
- package/dist/HBaggie-D6omQoFh.js +1 -0
- package/dist/HBaggie-D_7mEiuV.mjs +283 -0
- package/dist/HBanner-DmcMOFqS.mjs +420 -0
- package/dist/HBanner-Io4SdGGs.js +1 -0
- package/dist/HButton-DAVuDmOQ.js +1 -0
- package/dist/HButton-DAriO81x.mjs +256 -0
- package/dist/HCalendar-DKwGatUk.js +2 -0
- package/dist/HCalendar-w18iIB90.mjs +3387 -0
- package/dist/HCaption-6CbSqRA7.js +1 -0
- package/dist/HCaption-DwsXHDNK.mjs +275 -0
- package/dist/HChart-C86JXUyW.js +1 -0
- package/dist/HChart-CcArHFr0.mjs +179 -0
- package/dist/HDrawer-DG1O42iF.mjs +439 -0
- package/dist/HDrawer-U5VC_okK.js +1 -0
- package/dist/HDropdown-Bs7AfefJ.mjs +393 -0
- package/dist/HDropdown-D4RAGmjE.js +1 -0
- package/dist/HFileset-BGuP9O4l.mjs +578 -0
- package/dist/HFileset-CuPR6Hwf.js +2 -0
- package/dist/HGap-BPAdnOQz.js +1 -0
- package/dist/HGap-DzGrfWVt.mjs +233 -0
- package/dist/HGrid-BiIhVCv_.mjs +345 -0
- package/dist/HGrid-C3EV_pgM.js +1 -0
- package/dist/HImagebox-D_DKeCrO.mjs +654 -0
- package/dist/HImagebox-t_UdFjQO.js +2 -0
- package/dist/HInput-BEyJqYkD.mjs +1103 -0
- package/dist/HInput-DMGLY473.js +1 -0
- package/dist/HInputGroup-D37WTYoI.mjs +281 -0
- package/dist/HInputGroup-Dcfr23sZ.js +1 -0
- package/dist/HLabel-B2FOqSiS.mjs +369 -0
- package/dist/HLabel-Dm48mSwn.js +1 -0
- package/dist/HLayout-BbCEm_aO.mjs +196 -0
- package/dist/HLayout-C1e4BZ_K.js +1 -0
- package/dist/HList-CAeYb-hz.mjs +419 -0
- package/dist/HList-eNXmMf27.js +1 -0
- package/dist/HModal-BDBEEpKm.mjs +778 -0
- package/dist/HModal-GODLq3wH.js +1 -0
- package/dist/HNote-CWnUjt3_.mjs +934 -0
- package/dist/HNote-D_Xwu9oL.js +1 -0
- package/dist/HPagination-Db_L9wv-.js +1 -0
- package/dist/HPagination-e5e2a5GS.mjs +496 -0
- package/dist/HParagraph-BRuSeOMU.js +1 -0
- package/dist/HParagraph-DYuB-qjY.mjs +463 -0
- package/dist/HPopup-Brp1FVpm.mjs +431 -0
- package/dist/HPopup-ChkoI3xm.js +1 -0
- package/dist/HSpinner-DDtU9PL_.js +1 -0
- package/dist/HSpinner-DOq2k5kT.mjs +281 -0
- package/dist/HTable-DGFnzD4u.js +1 -0
- package/dist/HTable-GCDP5O_J.mjs +620 -0
- package/dist/_plugin-vue_export-helper-BHFhmbuH.js +1 -0
- package/dist/_plugin-vue_export-helper-CHgC5LLL.mjs +9 -0
- package/dist/ar.es-CKau4tBl.js +5 -0
- package/dist/ar.es-XxSuE68c.mjs +57 -0
- package/dist/bg.es-BJ7fu6yy.mjs +57 -0
- package/dist/bg.es-Melqx1M5.js +5 -0
- package/dist/bn.es-CYlBkxc5.mjs +57 -0
- package/dist/bn.es-ClbAZ4WP.js +5 -0
- package/dist/bs.es-KjOcbE96.js +5 -0
- package/dist/bs.es-yMnaKmdi.mjs +57 -0
- package/dist/ca.es-BaGTENcW.js +5 -0
- package/dist/ca.es-DIhlxmQc.mjs +67 -0
- package/dist/cs.es-BN8oxRXQ.mjs +57 -0
- package/dist/cs.es-ChOlHqBr.js +5 -0
- package/dist/da.es-DJB5lAli.mjs +57 -0
- package/dist/da.es-DOFXbf8-.js +5 -0
- package/dist/de.es-DwE82Kaw.js +5 -0
- package/dist/de.es-glb8GeJh.mjs +57 -0
- package/dist/drag-and-drop.es-4ttM1tRs.js +5 -0
- package/dist/drag-and-drop.es-Ckzp6XEn.mjs +183 -0
- package/dist/el.es-CNrCgzYI.js +5 -0
- package/dist/el.es-_bBZf22h.mjs +76 -0
- package/dist/en.es-CV9nmQGr.mjs +57 -0
- package/dist/en.es-CgL601qd.js +5 -0
- package/dist/es.es-CZjcWK54.mjs +57 -0
- package/dist/es.es-IdFGKY7Q.js +5 -0
- package/dist/et.es-BygWmV3P.js +5 -0
- package/dist/et.es-CjvQAzNF.mjs +57 -0
- package/dist/fa.es-DW_0SmsT.js +5 -0
- package/dist/fa.es-DykeFwDA.mjs +57 -0
- package/dist/fi.es-Bl7Pp7AO.mjs +57 -0
- package/dist/fi.es-pgfJlZ8i.js +5 -0
- package/dist/fr.es-CNKVhFfO.mjs +57 -0
- package/dist/fr.es-OENguFuM.js +5 -0
- package/dist/he.es-bixEnAeH.js +5 -0
- package/dist/he.es-nF4GFhjH.mjs +57 -0
- package/dist/hisonvue.cjs.js +1 -0
- package/dist/hisonvue.css +1 -0
- package/dist/hisonvue.d.ts +19934 -0
- package/dist/hisonvue.es.js +114 -0
- package/dist/hr.es-CkRAP94O.js +5 -0
- package/dist/hr.es-QFfz660j.mjs +57 -0
- package/dist/hu.es-Ck2rE01V.mjs +57 -0
- package/dist/hu.es-DG6HeiQJ.js +5 -0
- package/dist/id.es-D4tPi6wP.js +5 -0
- package/dist/id.es-Je7FEUJ5.mjs +57 -0
- package/dist/index-BmKMHsSZ.js +153 -0
- package/dist/index-DUh7pai4.mjs +19976 -0
- package/dist/is.es-CDFqLYCV.js +5 -0
- package/dist/is.es-bzprHvXI.mjs +57 -0
- package/dist/it.es-BHgrw_C6.js +5 -0
- package/dist/it.es-CJtfqmNS.mjs +57 -0
- package/dist/ja.es-BaiGjqZ6.mjs +57 -0
- package/dist/ja.es-D-lxWwyb.js +5 -0
- package/dist/ka.es-CnnB6q4A.js +5 -0
- package/dist/ka.es-x9QJo_dl.mjs +57 -0
- package/dist/ko.es-6c447eTS.mjs +57 -0
- package/dist/ko.es-b18aaB3V.js +5 -0
- package/dist/lt.es-2twYdvmJ.mjs +57 -0
- package/dist/lt.es-BY9UQ6wZ.js +5 -0
- package/dist/mn.es-BLQRG1uu.mjs +57 -0
- package/dist/mn.es-YFS7gSdf.js +5 -0
- package/dist/nl.es-BEx-4hnj.js +5 -0
- package/dist/nl.es-bB1qWR_S.mjs +57 -0
- package/dist/no.es-BQnRWlWR.js +5 -0
- package/dist/no.es-CWDVXpTf.mjs +57 -0
- package/dist/pl.es-CKCsZ_02.js +5 -0
- package/dist/pl.es-Dzct23w9.mjs +57 -0
- package/dist/pt-br.es-BeBuiitI.mjs +57 -0
- package/dist/pt-br.es-oH7qh6Fd.js +5 -0
- package/dist/pt-pt.es-BeBuiitI.mjs +57 -0
- package/dist/pt-pt.es-DLk5I0ej.js +5 -0
- package/dist/ro.es-DfMVJ30M.mjs +57 -0
- package/dist/ro.es-DgTen1Dh.js +5 -0
- package/dist/ru.es-Bv9UvrBe.mjs +67 -0
- package/dist/ru.es-jGIQfREl.js +5 -0
- package/dist/scrollManager-BGnq4wyt.mjs +14 -0
- package/dist/scrollManager-CEEWQwoK.js +1 -0
- package/dist/setButtonCssEvent-B9WTs2X7.js +1 -0
- package/dist/setButtonCssEvent-dBs1GcAh.mjs +70 -0
- package/dist/sk.es-CUOTpLuL.mjs +57 -0
- package/dist/sk.es-D2bhVb26.js +5 -0
- package/dist/sl.es-DeIGgZbR.mjs +57 -0
- package/dist/sl.es-TV8Uraa1.js +5 -0
- package/dist/sq.es-CQJJrZHv.mjs +67 -0
- package/dist/sq.es-Cc65zxbr.js +5 -0
- package/dist/sr.es-CKS0AkiW.mjs +57 -0
- package/dist/sr.es-D5VNA_GW.js +5 -0
- package/dist/sv.es-ChHQRrAe.mjs +57 -0
- package/dist/sv.es-dBeK_DZs.js +5 -0
- package/dist/tr.es-B3v90gVv.mjs +57 -0
- package/dist/tr.es-BUz4S13G.js +5 -0
- package/dist/uk.es-B8uaeLcK.js +5 -0
- package/dist/uk.es-CiR4NnbN.mjs +67 -0
- package/dist/vi.es-2OFMtbQI.js +5 -0
- package/dist/vi.es-DFDi5l7p.mjs +67 -0
- package/dist/zh-cn.es-9cbEAuAi.mjs +67 -0
- package/dist/zh-cn.es-fDHCbCIg.js +5 -0
- package/dist/zh-hk.es-COzeh5F8.js +5 -0
- package/dist/zh-hk.es-z0tio4jE.mjs +67 -0
- package/nuxt/module.mjs +39 -0
- package/nuxt/plugin.mjs +21 -0
- package/package.json +53 -0
|
@@ -0,0 +1,3387 @@
|
|
|
1
|
+
import { resolveComponent as ae, createElementBlock as m, openBlock as v, normalizeClass as V, createVNode as We, createCommentVNode as D, createSlots as Le, withCtx as T, renderSlot as k, createTextVNode as x, toDisplayString as E, createElementVNode as H, Transition as Ye, createBlock as G, normalizeProps as ze, mergeProps as Re, normalizeStyle as z, Fragment as L, renderList as N, resolveDynamicComponent as at, TransitionGroup as ft, withKeys as nt, withModifiers as oe, defineComponent as wt, ref as b, useSlots as Dt, computed as Ie, onMounted as gt, onBeforeUnmount as pt, watch as p, nextTick as Je, guardReactiveProps as bt } from "vue";
|
|
2
|
+
import { H as Ze, k as kt, g as Ct, u as _t, l as P, n as ue, m as de, e as Tt, t as Mt, a as St, b as Qe, h as C, o as Ve, p as $e, q as R, s as Ae, v as je, r as Et, c as Ht, d as Ot } from "./index-DUh7pai4.mjs";
|
|
3
|
+
import { _ as Wt } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
|
|
4
|
+
var Vt = Object.defineProperty, At = (t, e, s) => e in t ? Vt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s, Z = (t, e, s) => At(t, typeof e != "symbol" ? e + "" : e, s);
|
|
5
|
+
const jt = (t, e, s) => {
|
|
6
|
+
const l = t[e];
|
|
7
|
+
return l ? typeof l == "function" ? l() : Promise.resolve(l) : new Promise((r, i) => {
|
|
8
|
+
(typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
|
|
9
|
+
i.bind(
|
|
10
|
+
null,
|
|
11
|
+
new Error(
|
|
12
|
+
"Unknown variable dynamic import: " + e + (e.split("/").length !== s ? ". Note that variables only represent file names one level deep." : "")
|
|
13
|
+
)
|
|
14
|
+
)
|
|
15
|
+
);
|
|
16
|
+
});
|
|
17
|
+
};
|
|
18
|
+
let Ee, et, tt, U, He = {}, ce = {};
|
|
19
|
+
class Ft {
|
|
20
|
+
constructor(e, s = !1) {
|
|
21
|
+
Z(this, "texts", {}), Z(this, "dateToMinutes", (l) => l.getHours() * 60 + l.getMinutes()), U = this, this._texts = e, !s && Date && !Date.prototype.addDays && this._initDatePrototypes();
|
|
22
|
+
}
|
|
23
|
+
_initDatePrototypes() {
|
|
24
|
+
Date.prototype.addDays = function(e) {
|
|
25
|
+
return U.addDays(this, e);
|
|
26
|
+
}, Date.prototype.subtractDays = function(e) {
|
|
27
|
+
return U.subtractDays(this, e);
|
|
28
|
+
}, Date.prototype.addHours = function(e) {
|
|
29
|
+
return U.addHours(this, e);
|
|
30
|
+
}, Date.prototype.subtractHours = function(e) {
|
|
31
|
+
return U.subtractHours(this, e);
|
|
32
|
+
}, Date.prototype.addMinutes = function(e) {
|
|
33
|
+
return U.addMinutes(this, e);
|
|
34
|
+
}, Date.prototype.subtractMinutes = function(e) {
|
|
35
|
+
return U.subtractMinutes(this, e);
|
|
36
|
+
}, Date.prototype.getWeek = function() {
|
|
37
|
+
return U.getWeek(this);
|
|
38
|
+
}, Date.prototype.isToday = function() {
|
|
39
|
+
return U.isToday(this);
|
|
40
|
+
}, Date.prototype.isLeapYear = function() {
|
|
41
|
+
return U.isLeapYear(this);
|
|
42
|
+
}, Date.prototype.format = function(e = "YYYY-MM-DD") {
|
|
43
|
+
return U.formatDate(this, e);
|
|
44
|
+
}, Date.prototype.formatTime = function(e = "HH:mm") {
|
|
45
|
+
return U.formatTime(this, e);
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
removePrototypes() {
|
|
49
|
+
delete Date.prototype.addDays, delete Date.prototype.subtractDays, delete Date.prototype.addHours, delete Date.prototype.subtractHours, delete Date.prototype.addMinutes, delete Date.prototype.subtractMinutes, delete Date.prototype.getWeek, delete Date.prototype.isToday, delete Date.prototype.isLeapYear, delete Date.prototype.format, delete Date.prototype.formatTime;
|
|
50
|
+
}
|
|
51
|
+
updateTexts(e) {
|
|
52
|
+
this._texts = e;
|
|
53
|
+
}
|
|
54
|
+
// Cache Today's date (to a maximum) for better isToday() performances. Formatted without leading 0.
|
|
55
|
+
// We still need to update Today's date when Today changes without page refresh.
|
|
56
|
+
_todayFormatted() {
|
|
57
|
+
return et !== (/* @__PURE__ */ new Date()).getDate() && (Ee = /* @__PURE__ */ new Date(), et = Ee.getDate(), tt = `${Ee.getFullYear()}-${Ee.getMonth()}-${Ee.getDate()}`), tt;
|
|
58
|
+
}
|
|
59
|
+
// UTILITIES.
|
|
60
|
+
// ====================================================================
|
|
61
|
+
addDays(e, s) {
|
|
62
|
+
const l = new Date(e.valueOf());
|
|
63
|
+
return l.setDate(l.getDate() + s), l;
|
|
64
|
+
}
|
|
65
|
+
subtractDays(e, s) {
|
|
66
|
+
const l = new Date(e.valueOf());
|
|
67
|
+
return l.setDate(l.getDate() - s), l;
|
|
68
|
+
}
|
|
69
|
+
addHours(e, s) {
|
|
70
|
+
const l = new Date(e.valueOf());
|
|
71
|
+
return l.setHours(l.getHours() + s), l;
|
|
72
|
+
}
|
|
73
|
+
subtractHours(e, s) {
|
|
74
|
+
const l = new Date(e.valueOf());
|
|
75
|
+
return l.setHours(l.getHours() - s), l;
|
|
76
|
+
}
|
|
77
|
+
addMinutes(e, s) {
|
|
78
|
+
const l = new Date(e.valueOf());
|
|
79
|
+
return l.setMinutes(l.getMinutes() + s), l;
|
|
80
|
+
}
|
|
81
|
+
subtractMinutes(e, s) {
|
|
82
|
+
const l = new Date(e.valueOf());
|
|
83
|
+
return l.setMinutes(l.getMinutes() - s), l;
|
|
84
|
+
}
|
|
85
|
+
getWeek(e) {
|
|
86
|
+
const s = new Date(Date.UTC(e.getFullYear(), e.getMonth(), e.getDate())), l = s.getUTCDay() || 7;
|
|
87
|
+
s.setUTCDate(s.getUTCDate() + 4 - l);
|
|
88
|
+
const r = new Date(Date.UTC(s.getUTCFullYear(), 0, 1));
|
|
89
|
+
return Math.ceil(((s - r) / 864e5 + 1) / 7);
|
|
90
|
+
}
|
|
91
|
+
isToday(e) {
|
|
92
|
+
return `${e.getFullYear()}-${e.getMonth()}-${e.getDate()}` === this._todayFormatted();
|
|
93
|
+
}
|
|
94
|
+
isLeapYear(e) {
|
|
95
|
+
const s = e.getFullYear();
|
|
96
|
+
return !(s % 400) || s % 100 && !(s % 4);
|
|
97
|
+
}
|
|
98
|
+
// Returns today if it's FirstDayOfWeek (Monday or Sunday) or previous FirstDayOfWeek otherwise.
|
|
99
|
+
getPreviousFirstDayOfWeek(e = null, s) {
|
|
100
|
+
const l = e && new Date(e.valueOf()) || /* @__PURE__ */ new Date(), r = s ? 7 : 6;
|
|
101
|
+
return l.setDate(l.getDate() - (l.getDay() + r) % 7), l;
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* Converts a string to a Javascript Date object. If a Date object is passed, return it as is.
|
|
105
|
+
*
|
|
106
|
+
* @param {String | Date} date the string to convert to Date.
|
|
107
|
+
* @return {Date} the equivalent Javascript Date object.
|
|
108
|
+
*/
|
|
109
|
+
stringToDate(e) {
|
|
110
|
+
return e instanceof Date ? e : (e.length === 10 && (e += " 00:00"), new Date(e.replace(/-/g, "/")));
|
|
111
|
+
}
|
|
112
|
+
/**
|
|
113
|
+
* Count the number of days this date range spans onto.
|
|
114
|
+
* E.g. countDays(2019-11-02 18:00, 2019-11-03 02:00) = 2
|
|
115
|
+
*
|
|
116
|
+
* @param {String | Date} start the start date
|
|
117
|
+
* @param {String | Date} end the end date
|
|
118
|
+
* @return {Integer} The number of days this date range involves
|
|
119
|
+
*/
|
|
120
|
+
countDays(e, s) {
|
|
121
|
+
typeof e == "string" && (e = e.replace(/-/g, "/")), typeof s == "string" && (s = s.replace(/-/g, "/")), e = new Date(e).setHours(0, 0, 0, 0), s = new Date(s).setHours(0, 0, 1, 0);
|
|
122
|
+
const l = (new Date(s).getTimezoneOffset() - new Date(e).getTimezoneOffset()) * 60 * 1e3;
|
|
123
|
+
return Math.ceil((s - e - l) / (24 * 3600 * 1e3));
|
|
124
|
+
}
|
|
125
|
+
/**
|
|
126
|
+
* Take 2 dates and check if within the same time step (useful in overlapping events).
|
|
127
|
+
*
|
|
128
|
+
* @return {Boolean} `true` if their time is included in the same time step,
|
|
129
|
+
* this means these 2 dates are very close.
|
|
130
|
+
*/
|
|
131
|
+
datesInSameTimeStep(e, s, l) {
|
|
132
|
+
return Math.abs(e.getTime() - s.getTime()) <= l * 60 * 1e3;
|
|
133
|
+
}
|
|
134
|
+
// ====================================================================
|
|
135
|
+
// FORMATTERS.
|
|
136
|
+
// ====================================================================
|
|
137
|
+
/**
|
|
138
|
+
* Formats a date/time to the given format and returns the formatted string.
|
|
139
|
+
*
|
|
140
|
+
* @param {Date} date a JavaScript Date object to format.
|
|
141
|
+
* @param {String} format the wanted format.
|
|
142
|
+
* @param {Object} texts Optional: the localized texts object to override the vue-cal one in this._texts.
|
|
143
|
+
* This becomes useful when showing multiple instances with different languages,
|
|
144
|
+
* like in the documentation page.
|
|
145
|
+
* @return {String} the formatted date.
|
|
146
|
+
*/
|
|
147
|
+
formatDate(e, s = "YYYY-MM-DD", l = null) {
|
|
148
|
+
if (l || (l = this._texts), s || (s = "YYYY-MM-DD"), s === "YYYY-MM-DD") return this.formatDateLite(e);
|
|
149
|
+
He = {}, ce = {};
|
|
150
|
+
const r = {
|
|
151
|
+
YYYY: () => this._hydrateDateObject(e, l).YYYY,
|
|
152
|
+
YY: () => this._hydrateDateObject(e, l).YY(),
|
|
153
|
+
M: () => this._hydrateDateObject(e, l).M,
|
|
154
|
+
MM: () => this._hydrateDateObject(e, l).MM(),
|
|
155
|
+
MMM: () => this._hydrateDateObject(e, l).MMM(),
|
|
156
|
+
MMMM: () => this._hydrateDateObject(e, l).MMMM(),
|
|
157
|
+
MMMMG: () => this._hydrateDateObject(e, l).MMMMG(),
|
|
158
|
+
D: () => this._hydrateDateObject(e, l).D,
|
|
159
|
+
DD: () => this._hydrateDateObject(e, l).DD(),
|
|
160
|
+
S: () => this._hydrateDateObject(e, l).S(),
|
|
161
|
+
d: () => this._hydrateDateObject(e, l).d,
|
|
162
|
+
dd: () => this._hydrateDateObject(e, l).dd(),
|
|
163
|
+
ddd: () => this._hydrateDateObject(e, l).ddd(),
|
|
164
|
+
dddd: () => this._hydrateDateObject(e, l).dddd(),
|
|
165
|
+
HH: () => this._hydrateTimeObject(e, l).HH,
|
|
166
|
+
H: () => this._hydrateTimeObject(e, l).H,
|
|
167
|
+
hh: () => this._hydrateTimeObject(e, l).hh,
|
|
168
|
+
h: () => this._hydrateTimeObject(e, l).h,
|
|
169
|
+
am: () => this._hydrateTimeObject(e, l).am,
|
|
170
|
+
AM: () => this._hydrateTimeObject(e, l).AM,
|
|
171
|
+
mm: () => this._hydrateTimeObject(e, l).mm,
|
|
172
|
+
m: () => this._hydrateTimeObject(e, l).m
|
|
173
|
+
};
|
|
174
|
+
return s.replace(/(\{[a-zA-Z]+\}|[a-zA-Z]+)/g, (i, o) => {
|
|
175
|
+
const n = r[o.replace(/\{|\}/g, "")];
|
|
176
|
+
return n !== void 0 ? n() : o;
|
|
177
|
+
});
|
|
178
|
+
}
|
|
179
|
+
// More performant function to convert a Date to `YYYY-MM-DD` formatted string only.
|
|
180
|
+
formatDateLite(e) {
|
|
181
|
+
const s = e.getMonth() + 1, l = e.getDate();
|
|
182
|
+
return `${e.getFullYear()}-${s < 10 ? "0" : ""}${s}-${l < 10 ? "0" : ""}${l}`;
|
|
183
|
+
}
|
|
184
|
+
/**
|
|
185
|
+
* Formats a time (from Date or number of mins) to the given format and returns the formatted string.
|
|
186
|
+
*
|
|
187
|
+
* @param {Date | Number} date a JavaScript Date object or a time in minutes.
|
|
188
|
+
* @param {String} format the wanted format.
|
|
189
|
+
* @param {Object} texts Optional: the localized texts object to override the vue-cal one in this._texts.
|
|
190
|
+
* This becomes useful when showing multiple instances with different languages,
|
|
191
|
+
* like in the documentation page.
|
|
192
|
+
* @param {Boolean} round if time is 23:59:59, rounds up to 24:00 for formatting only.
|
|
193
|
+
* @return {String} the formatted time.
|
|
194
|
+
*/
|
|
195
|
+
formatTime(e, s = "HH:mm", l = null, r = !1) {
|
|
196
|
+
let i = !1;
|
|
197
|
+
if (r) {
|
|
198
|
+
const [h, d, c] = [e.getHours(), e.getMinutes(), e.getSeconds()];
|
|
199
|
+
h + d + c === 141 && (i = !0);
|
|
200
|
+
}
|
|
201
|
+
if (e instanceof Date && s === "HH:mm") return i ? "24:00" : this.formatTimeLite(e);
|
|
202
|
+
ce = {}, l || (l = this._texts);
|
|
203
|
+
const o = this._hydrateTimeObject(e, l), n = s.replace(/(\{[a-zA-Z]+\}|[a-zA-Z]+)/g, (h, d) => {
|
|
204
|
+
const c = o[d.replace(/\{|\}/g, "")];
|
|
205
|
+
return c !== void 0 ? c : d;
|
|
206
|
+
});
|
|
207
|
+
return i ? n.replace("23:59", "24:00") : n;
|
|
208
|
+
}
|
|
209
|
+
/**
|
|
210
|
+
* Formats a time to 'HH:mm' from a Date and returns the formatted string.
|
|
211
|
+
*
|
|
212
|
+
* @param {Date} date a JavaScript Date object to format.
|
|
213
|
+
* @return {String} the formatted time.
|
|
214
|
+
*/
|
|
215
|
+
formatTimeLite(e) {
|
|
216
|
+
const s = e.getHours(), l = e.getMinutes();
|
|
217
|
+
return `${(s < 10 ? "0" : "") + s}:${(l < 10 ? "0" : "") + l}`;
|
|
218
|
+
}
|
|
219
|
+
_nth(e) {
|
|
220
|
+
if (e > 3 && e < 21) return "th";
|
|
221
|
+
switch (e % 10) {
|
|
222
|
+
case 1:
|
|
223
|
+
return "st";
|
|
224
|
+
case 2:
|
|
225
|
+
return "nd";
|
|
226
|
+
case 3:
|
|
227
|
+
return "rd";
|
|
228
|
+
default:
|
|
229
|
+
return "th";
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
_hydrateDateObject(e, s) {
|
|
233
|
+
if (He.D) return He;
|
|
234
|
+
const l = e.getFullYear(), r = e.getMonth() + 1, i = e.getDate(), n = (e.getDay() - 1 + 7) % 7;
|
|
235
|
+
return He = {
|
|
236
|
+
// Year.
|
|
237
|
+
YYYY: l,
|
|
238
|
+
// 2019.
|
|
239
|
+
YY: () => l.toString().substring(2),
|
|
240
|
+
// 19.
|
|
241
|
+
// Month.
|
|
242
|
+
M: r,
|
|
243
|
+
// 1 to 12.
|
|
244
|
+
MM: () => (r < 10 ? "0" : "") + r,
|
|
245
|
+
// 01 to 12.
|
|
246
|
+
MMM: () => s.months[r - 1].substring(0, 3),
|
|
247
|
+
// Jan to Dec.
|
|
248
|
+
MMMM: () => s.months[r - 1],
|
|
249
|
+
// January to December.
|
|
250
|
+
MMMMG: () => (s.monthsGenitive || s.months)[r - 1],
|
|
251
|
+
// January to December in genitive form (Greek...)
|
|
252
|
+
// Day.
|
|
253
|
+
D: i,
|
|
254
|
+
// 1 to 31.
|
|
255
|
+
DD: () => (i < 10 ? "0" : "") + i,
|
|
256
|
+
// 01 to 31.
|
|
257
|
+
S: () => this._nth(i),
|
|
258
|
+
// st, nd, rd, th.
|
|
259
|
+
// Day of the week.
|
|
260
|
+
d: n + 1,
|
|
261
|
+
// 1 to 7 with 7 = Sunday.
|
|
262
|
+
dd: () => s.weekDays[n][0],
|
|
263
|
+
// M to S.
|
|
264
|
+
ddd: () => s.weekDays[n].substr(0, 3),
|
|
265
|
+
// Mon to Sun.
|
|
266
|
+
dddd: () => s.weekDays[n]
|
|
267
|
+
// Monday to Sunday.
|
|
268
|
+
}, He;
|
|
269
|
+
}
|
|
270
|
+
_hydrateTimeObject(e, s) {
|
|
271
|
+
if (ce.am) return ce;
|
|
272
|
+
let l, r;
|
|
273
|
+
e instanceof Date ? (l = e.getHours(), r = e.getMinutes()) : (l = Math.floor(e / 60), r = Math.floor(e % 60));
|
|
274
|
+
const i = l % 12 ? l % 12 : 12, o = (s || { am: "am", pm: "pm" })[l === 24 || l < 12 ? "am" : "pm"];
|
|
275
|
+
return ce = {
|
|
276
|
+
H: l,
|
|
277
|
+
h: i,
|
|
278
|
+
HH: (l < 10 ? "0" : "") + l,
|
|
279
|
+
hh: (i < 10 ? "0" : "") + i,
|
|
280
|
+
am: o,
|
|
281
|
+
AM: o.toUpperCase(),
|
|
282
|
+
m: r,
|
|
283
|
+
mm: (r < 10 ? "0" : "") + r
|
|
284
|
+
}, ce;
|
|
285
|
+
}
|
|
286
|
+
// ====================================================================
|
|
287
|
+
}
|
|
288
|
+
const Lt = 24 * 60;
|
|
289
|
+
class Yt {
|
|
290
|
+
constructor(e) {
|
|
291
|
+
Z(this, "_vuecal", null), Z(this, "selectCell", (s = !1, l, r) => {
|
|
292
|
+
this._vuecal.$emit("cell-click", r ? { date: l, split: r } : l), this._vuecal.clickToNavigate || s ? this._vuecal.switchToNarrowerView() : this._vuecal.dblclickToNavigate && "ontouchstart" in window && (this._vuecal.domEvents.dblTapACell.taps++, setTimeout(() => this._vuecal.domEvents.dblTapACell.taps = 0, this._vuecal.domEvents.dblTapACell.timeout), this._vuecal.domEvents.dblTapACell.taps >= 2 && (this._vuecal.domEvents.dblTapACell.taps = 0, this._vuecal.switchToNarrowerView(), this._vuecal.$emit("cell-dblclick", r ? { date: l, split: r } : l)));
|
|
293
|
+
}), Z(this, "keyPressEnterCell", (s, l) => {
|
|
294
|
+
this._vuecal.$emit("cell-keypress-enter", l ? { date: s, split: l } : s), this._vuecal.switchToNarrowerView();
|
|
295
|
+
}), Z(this, "getPosition", (s) => {
|
|
296
|
+
const { left: l, top: r } = this._vuecal.cellsEl.getBoundingClientRect(), { clientX: i, clientY: o } = "ontouchstart" in window && s.touches ? s.touches[0] : s;
|
|
297
|
+
return { x: i - l, y: o - r };
|
|
298
|
+
}), Z(this, "minutesAtCursor", (s) => {
|
|
299
|
+
let l = 0, r = { x: 0, y: 0 };
|
|
300
|
+
const { timeStep: i, timeCellHeight: o, timeFrom: n } = this._vuecal.$props;
|
|
301
|
+
return typeof s == "number" ? l = s : typeof s == "object" && (r = this.getPosition(s), l = Math.round(r.y * i / parseInt(o) + n)), { minutes: Math.max(Math.min(l, Lt), 0), cursorCoords: r };
|
|
302
|
+
}), this._vuecal = e;
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
const Nt = 2, Pe = 24 * 60;
|
|
306
|
+
let M, S, xe;
|
|
307
|
+
class Bt {
|
|
308
|
+
constructor(e, s) {
|
|
309
|
+
Z(this, "_vuecal", null), Z(this, "eventDefaults", {
|
|
310
|
+
_eid: null,
|
|
311
|
+
start: "",
|
|
312
|
+
// Externally given formatted date & time or Date object.
|
|
313
|
+
startTimeMinutes: 0,
|
|
314
|
+
end: "",
|
|
315
|
+
// Externally given formatted date & time or Date object.
|
|
316
|
+
endTimeMinutes: 0,
|
|
317
|
+
title: "",
|
|
318
|
+
content: "",
|
|
319
|
+
background: !1,
|
|
320
|
+
allDay: !1,
|
|
321
|
+
segments: null,
|
|
322
|
+
repeat: null,
|
|
323
|
+
daysCount: 1,
|
|
324
|
+
deletable: !0,
|
|
325
|
+
deleting: !1,
|
|
326
|
+
titleEditable: !0,
|
|
327
|
+
resizable: !0,
|
|
328
|
+
resizing: !1,
|
|
329
|
+
draggable: !0,
|
|
330
|
+
dragging: !1,
|
|
331
|
+
draggingStatic: !1,
|
|
332
|
+
// Controls the CSS class of the static clone while dragging.
|
|
333
|
+
focused: !1,
|
|
334
|
+
class: ""
|
|
335
|
+
}), this._vuecal = e, M = s;
|
|
336
|
+
}
|
|
337
|
+
/**
|
|
338
|
+
* Create an event at the given date and time, and allow overriding
|
|
339
|
+
* event attributes through the eventOptions object.
|
|
340
|
+
*
|
|
341
|
+
* @param {Date | String} dateTime The date and time of the new event start.
|
|
342
|
+
* @param {Number} duration the event duration in minutes.
|
|
343
|
+
* @param {Object} eventOptions some options to override the `eventDefaults` - optional.
|
|
344
|
+
*/
|
|
345
|
+
createAnEvent(e, s, l) {
|
|
346
|
+
if (typeof e == "string" && (e = M.stringToDate(e)), !(e instanceof Date)) return !1;
|
|
347
|
+
const r = M.dateToMinutes(e);
|
|
348
|
+
s = s * 1 || Nt * 60;
|
|
349
|
+
const i = r + s, o = M.addMinutes(new Date(e), s);
|
|
350
|
+
l.end && (typeof l.end == "string" && (l.end = M.stringToDate(l.end)), l.endTimeMinutes = M.dateToMinutes(l.end));
|
|
351
|
+
const n = {
|
|
352
|
+
...this.eventDefaults,
|
|
353
|
+
_eid: `${this._vuecal._.uid}_${this._vuecal.eventIdIncrement++}`,
|
|
354
|
+
start: e,
|
|
355
|
+
startTimeMinutes: r,
|
|
356
|
+
end: o,
|
|
357
|
+
endTimeMinutes: i,
|
|
358
|
+
segments: null,
|
|
359
|
+
...l
|
|
360
|
+
};
|
|
361
|
+
if (!(typeof this._vuecal.onEventCreate == "function" && !this._vuecal.onEventCreate(n, () => this.deleteAnEvent(n))))
|
|
362
|
+
return n.startDateF !== n.endDateF && (n.daysCount = M.countDays(n.start, n.end)), this._vuecal.mutableEvents.push(n), this._vuecal.addEventsToView([n]), this._vuecal.emitWithEvent("event-create", n), this._vuecal.$emit("event-change", { event: this._vuecal.cleanupEvent(n), originalEvent: null }), n;
|
|
363
|
+
}
|
|
364
|
+
/**
|
|
365
|
+
* Add an event segment (= day) to a multiple-day event.
|
|
366
|
+
*
|
|
367
|
+
* @param {Object} e the multiple-day event to add segment in.
|
|
368
|
+
*/
|
|
369
|
+
addEventSegment(e) {
|
|
370
|
+
e.segments || (e.segments = {}, e.segments[M.formatDateLite(e.start)] = {
|
|
371
|
+
start: e.start,
|
|
372
|
+
startTimeMinutes: e.startTimeMinutes,
|
|
373
|
+
endTimeMinutes: Pe,
|
|
374
|
+
isFirstDay: !0,
|
|
375
|
+
isLastDay: !1
|
|
376
|
+
});
|
|
377
|
+
const s = e.segments[M.formatDateLite(e.end)];
|
|
378
|
+
s && (s.isLastDay = !1, s.endTimeMinutes = Pe);
|
|
379
|
+
const l = M.addDays(e.end, 1), r = M.formatDateLite(l);
|
|
380
|
+
return l.setHours(0, 0, 0, 0), e.segments[r] = {
|
|
381
|
+
start: l,
|
|
382
|
+
startTimeMinutes: 0,
|
|
383
|
+
endTimeMinutes: e.endTimeMinutes,
|
|
384
|
+
isFirstDay: !1,
|
|
385
|
+
isLastDay: !0
|
|
386
|
+
}, e.end = M.addMinutes(l, e.endTimeMinutes), e.daysCount = Object.keys(e.segments).length, r;
|
|
387
|
+
}
|
|
388
|
+
/**
|
|
389
|
+
* Remove an event segment (= day) from a multiple-day event.
|
|
390
|
+
*
|
|
391
|
+
* @param {Object} e the multiple-day event to remove segments from.
|
|
392
|
+
*/
|
|
393
|
+
removeEventSegment(e) {
|
|
394
|
+
let s = Object.keys(e.segments).length;
|
|
395
|
+
if (s <= 1) return M.formatDateLite(e.end);
|
|
396
|
+
delete e.segments[M.formatDateLite(e.end)], s--;
|
|
397
|
+
const l = M.subtractDays(e.end, 1), r = M.formatDateLite(l), i = e.segments[r];
|
|
398
|
+
return s ? i && (i.isLastDay = !0, i.endTimeMinutes = e.endTimeMinutes) : e.segments = null, e.daysCount = s || 1, e.end = l, r;
|
|
399
|
+
}
|
|
400
|
+
/**
|
|
401
|
+
* Create 1 segment per day of the given event, but only within the current view.
|
|
402
|
+
* (It won't create segments for all the days in view that are not in the event!)
|
|
403
|
+
*
|
|
404
|
+
* An event segment is a piece of event per day that contains more day-specific data.
|
|
405
|
+
*
|
|
406
|
+
* @param {Object} e the multiple-day event to create segments for.
|
|
407
|
+
* @param {Date} viewStartDate the starting date of the view.
|
|
408
|
+
* @param {Date} viewEndDate the ending date of the view.
|
|
409
|
+
*/
|
|
410
|
+
createEventSegments(e, s, l) {
|
|
411
|
+
const r = s.getTime(), i = l.getTime();
|
|
412
|
+
let o = e.start.getTime(), n = e.end.getTime(), h = !1, d, c, y;
|
|
413
|
+
for (!e.end.getHours() && !e.end.getMinutes() && (n -= 1e3), e.segments = {}, e.repeat ? (d = r, c = Math.min(
|
|
414
|
+
i,
|
|
415
|
+
e.repeat.until ? M.stringToDate(e.repeat.until).getTime() : i
|
|
416
|
+
)) : (d = Math.max(r, o), c = Math.min(i, n)); d <= c; ) {
|
|
417
|
+
let w = !1;
|
|
418
|
+
const A = M.addDays(new Date(d), 1).setHours(0, 0, 0, 0);
|
|
419
|
+
let g, Y, j, _;
|
|
420
|
+
if (e.repeat) {
|
|
421
|
+
const B = new Date(d), O = M.formatDateLite(B);
|
|
422
|
+
(h || e.occurrences && e.occurrences[O]) && (h || (o = e.occurrences[O].start, y = new Date(o).setHours(0, 0, 0, 0), n = e.occurrences[O].end), h = !0, w = !0), g = d === y, Y = O === M.formatDateLite(new Date(n)), j = new Date(g ? o : d), _ = M.formatDateLite(j), Y && (h = !1);
|
|
423
|
+
} else
|
|
424
|
+
w = !0, g = d === o, Y = c === n && A > c, j = g ? e.start : new Date(d), _ = M.formatDateLite(g ? e.start : j);
|
|
425
|
+
w && (e.segments[_] = {
|
|
426
|
+
start: j,
|
|
427
|
+
startTimeMinutes: g ? e.startTimeMinutes : 0,
|
|
428
|
+
endTimeMinutes: Y ? e.endTimeMinutes : Pe,
|
|
429
|
+
isFirstDay: g,
|
|
430
|
+
isLastDay: Y
|
|
431
|
+
}), d = A;
|
|
432
|
+
}
|
|
433
|
+
return e;
|
|
434
|
+
}
|
|
435
|
+
/**
|
|
436
|
+
* Delete an event.
|
|
437
|
+
*
|
|
438
|
+
* @param {Object} event the calendar event to delete.
|
|
439
|
+
*/
|
|
440
|
+
deleteAnEvent(e) {
|
|
441
|
+
this._vuecal.emitWithEvent("event-delete", e), this._vuecal.mutableEvents = this._vuecal.mutableEvents.filter((s) => s._eid !== e._eid), this._vuecal.view.events = this._vuecal.view.events.filter((s) => s._eid !== e._eid);
|
|
442
|
+
}
|
|
443
|
+
// EVENT OVERLAPS.
|
|
444
|
+
// ===================================================================
|
|
445
|
+
// Will recalculate all the overlaps of the current cell OR split.
|
|
446
|
+
// cellEvents will contain only the current split events if in a split.
|
|
447
|
+
checkCellOverlappingEvents(e, s) {
|
|
448
|
+
xe = e.slice(0), S = {}, e.forEach((r) => {
|
|
449
|
+
xe.shift(), S[r._eid] || (S[r._eid] = { overlaps: [], start: r.start, position: 0 }), S[r._eid].position = 0, xe.forEach((i) => {
|
|
450
|
+
S[i._eid] || (S[i._eid] = { overlaps: [], start: i.start, position: 0 });
|
|
451
|
+
const o = this.eventInRange(i, r.start, r.end), n = s.overlapsPerTimeStep ? M.datesInSameTimeStep(r.start, i.start, s.timeStep) : 1;
|
|
452
|
+
if (!r.background && !r.allDay && !i.background && !i.allDay && o && n)
|
|
453
|
+
S[r._eid].overlaps.push(i._eid), S[r._eid].overlaps = [...new Set(S[r._eid].overlaps)], S[i._eid].overlaps.push(r._eid), S[i._eid].overlaps = [...new Set(S[i._eid].overlaps)], S[i._eid].position++;
|
|
454
|
+
else {
|
|
455
|
+
let h, d;
|
|
456
|
+
(h = (S[r._eid] || { overlaps: [] }).overlaps.indexOf(i._eid)) > -1 && S[r._eid].overlaps.splice(h, 1), (d = (S[i._eid] || { overlaps: [] }).overlaps.indexOf(r._eid)) > -1 && S[i._eid].overlaps.splice(d, 1), S[i._eid].position--;
|
|
457
|
+
}
|
|
458
|
+
});
|
|
459
|
+
});
|
|
460
|
+
let l = 0;
|
|
461
|
+
for (const r in S) {
|
|
462
|
+
const i = S[r], o = i.overlaps.map((n) => ({ id: n, start: S[n].start }));
|
|
463
|
+
o.push({ id: r, start: i.start }), o.sort((n, h) => n.start < h.start ? -1 : n.start > h.start ? 1 : n.id > h.id ? -1 : 1), i.position = o.findIndex((n) => n.id === r), l = Math.max(this.getOverlapsStreak(i, S), l);
|
|
464
|
+
}
|
|
465
|
+
return [S, l];
|
|
466
|
+
}
|
|
467
|
+
/**
|
|
468
|
+
* Overlaps streak is the longest horizontal set of simultaneous events.
|
|
469
|
+
* This is determining the width of each events in this streak.
|
|
470
|
+
* E.g. 3 overlapping events [1, 2, 3]; 1 overlaps 2 & 3; 2 & 3 don't overlap;
|
|
471
|
+
* => streak = 2; each width = 50% not 33%.
|
|
472
|
+
*
|
|
473
|
+
* @param {Object} event The current event we are checking among all the events of the current cell.
|
|
474
|
+
* @param {Object} cellOverlaps An indexed array of all the events overlaps for the current cell.
|
|
475
|
+
* @return {Number} The number of simultaneous event for this event.
|
|
476
|
+
*/
|
|
477
|
+
getOverlapsStreak(e, s = {}) {
|
|
478
|
+
let l = e.overlaps.length + 1, r = [];
|
|
479
|
+
return e.overlaps.forEach((i) => {
|
|
480
|
+
r.includes(i) || e.overlaps.filter((n) => n !== i).forEach((n) => {
|
|
481
|
+
s[n].overlaps.includes(i) || r.push(n);
|
|
482
|
+
});
|
|
483
|
+
}), r = [...new Set(r)], l -= r.length, l;
|
|
484
|
+
}
|
|
485
|
+
/**
|
|
486
|
+
* Tells whether an event is in a given date range, even partially.
|
|
487
|
+
*
|
|
488
|
+
* @param {Object} event The event to test.
|
|
489
|
+
* @param {Date} start The start of range date object.
|
|
490
|
+
* @param {Date} end The end of range date object.
|
|
491
|
+
* @return {Boolean} true if in range, even partially.
|
|
492
|
+
*/
|
|
493
|
+
eventInRange(e, s, l) {
|
|
494
|
+
if (e.allDay || !this._vuecal.time) {
|
|
495
|
+
const o = new Date(e.start).setHours(0, 0, 0, 0);
|
|
496
|
+
return new Date(e.end).setHours(23, 59, 0, 0) >= new Date(s).setHours(0, 0, 0, 0) && o <= new Date(l).setHours(0, 0, 0, 0);
|
|
497
|
+
}
|
|
498
|
+
const r = e.start.getTime(), i = e.end.getTime();
|
|
499
|
+
return r < l.getTime() && i > s.getTime();
|
|
500
|
+
}
|
|
501
|
+
}
|
|
502
|
+
const It = { class: "vuecal__flex vuecal__weekdays-headings" }, Pt = ["onClick"], xt = {
|
|
503
|
+
class: "vuecal__flex weekday-label",
|
|
504
|
+
grow: ""
|
|
505
|
+
}, zt = { class: "full" }, Rt = { class: "small" }, Ut = { class: "xsmall" }, qt = { key: 0 }, Kt = {
|
|
506
|
+
key: 0,
|
|
507
|
+
class: "vuecal__flex vuecal__split-days-headers",
|
|
508
|
+
grow: ""
|
|
509
|
+
};
|
|
510
|
+
function Xt(t, e, s, l, r, i) {
|
|
511
|
+
return v(), m("div", It, [
|
|
512
|
+
(v(!0), m(L, null, N(i.headings, (o, n) => (v(), m(L, { key: n }, [
|
|
513
|
+
o.hide ? D("", !0) : (v(), m("div", {
|
|
514
|
+
key: 0,
|
|
515
|
+
class: V(["vuecal__flex vuecal__heading", { today: o.today, clickable: i.cellHeadingsClickable }]),
|
|
516
|
+
style: z(i.weekdayCellStyles),
|
|
517
|
+
onClick: (h) => i.view.id === "week" && i.selectCell(o.date, h),
|
|
518
|
+
onDblclick: e[0] || (e[0] = (h) => i.view.id === "week" && i.vuecal.dblclickToNavigate && s.switchToNarrowerView())
|
|
519
|
+
}, [
|
|
520
|
+
We(Ye, {
|
|
521
|
+
name: `slide-fade--${s.transitionDirection}`,
|
|
522
|
+
appear: i.vuecal.transitions
|
|
523
|
+
}, {
|
|
524
|
+
default: T(() => [
|
|
525
|
+
(v(), m("div", {
|
|
526
|
+
class: "vuecal__flex",
|
|
527
|
+
column: "",
|
|
528
|
+
key: i.vuecal.transitions ? `${n}-${o.dayOfMonth}` : !1
|
|
529
|
+
}, [
|
|
530
|
+
H("div", xt, [
|
|
531
|
+
k(t.$slots, "weekday-heading", {
|
|
532
|
+
heading: i.cleanupHeading(o),
|
|
533
|
+
view: i.view
|
|
534
|
+
}, () => [
|
|
535
|
+
H("span", zt, E(o.full), 1),
|
|
536
|
+
H("span", Rt, E(o.small), 1),
|
|
537
|
+
H("span", Ut, E(o.xsmall), 1),
|
|
538
|
+
o.dayOfMonth ? (v(), m("span", qt, " " + E(o.dayOfMonth), 1)) : D("", !0)
|
|
539
|
+
])
|
|
540
|
+
]),
|
|
541
|
+
i.vuecal.hasSplits && i.vuecal.stickySplitLabels ? (v(), m("div", Kt, [
|
|
542
|
+
(v(!0), m(L, null, N(i.vuecal.daySplits, (h, d) => (v(), m("div", {
|
|
543
|
+
class: V(["day-split-header", h.class || !1]),
|
|
544
|
+
key: d
|
|
545
|
+
}, [
|
|
546
|
+
k(t.$slots, "split-label", {
|
|
547
|
+
split: h,
|
|
548
|
+
view: i.view
|
|
549
|
+
}, () => [
|
|
550
|
+
x(E(h.label), 1)
|
|
551
|
+
])
|
|
552
|
+
], 2))), 128))
|
|
553
|
+
])) : D("", !0)
|
|
554
|
+
]))
|
|
555
|
+
]),
|
|
556
|
+
_: 2
|
|
557
|
+
}, 1032, ["name", "appear"])
|
|
558
|
+
], 46, Pt))
|
|
559
|
+
], 64))), 128))
|
|
560
|
+
]);
|
|
561
|
+
}
|
|
562
|
+
const he = (t, e) => {
|
|
563
|
+
const s = t.__vccOpts || t;
|
|
564
|
+
for (const [l, r] of e)
|
|
565
|
+
s[l] = r;
|
|
566
|
+
return s;
|
|
567
|
+
}, Gt = {
|
|
568
|
+
inject: ["vuecal", "utils", "view"],
|
|
569
|
+
props: {
|
|
570
|
+
transitionDirection: { type: String, default: "right" },
|
|
571
|
+
weekDays: { type: Array, default: () => [] },
|
|
572
|
+
switchToNarrowerView: { type: Function, default: () => {
|
|
573
|
+
} }
|
|
574
|
+
},
|
|
575
|
+
methods: {
|
|
576
|
+
selectCell(t, e) {
|
|
577
|
+
t.getTime() !== this.view.selectedDate.getTime() && (this.view.selectedDate = t), this.utils.cell.selectCell(!1, t, e);
|
|
578
|
+
},
|
|
579
|
+
cleanupHeading: (t) => ({
|
|
580
|
+
label: t.full,
|
|
581
|
+
date: t.date,
|
|
582
|
+
...t.today ? { today: t.today } : {}
|
|
583
|
+
})
|
|
584
|
+
},
|
|
585
|
+
computed: {
|
|
586
|
+
headings() {
|
|
587
|
+
if (!["month", "week"].includes(this.view.id)) return [];
|
|
588
|
+
let t = !1;
|
|
589
|
+
return this.weekDays.map((s, l) => {
|
|
590
|
+
const r = this.utils.date.addDays(this.view.startDate, this.vuecal.startWeekOnSunday && this.vuecal.hideWeekends ? l - 1 : l);
|
|
591
|
+
return {
|
|
592
|
+
hide: s.hide,
|
|
593
|
+
full: s.label,
|
|
594
|
+
// If defined in i18n file, weekDaysShort overrides default truncation of
|
|
595
|
+
// week days when does not fit on screen or with small/xsmall options.
|
|
596
|
+
small: s.short || s.label.substr(0, 3),
|
|
597
|
+
xsmall: s.short || s.label.substr(0, 1),
|
|
598
|
+
// Only for week view.
|
|
599
|
+
...this.view.id === "week" ? {
|
|
600
|
+
dayOfMonth: r.getDate(),
|
|
601
|
+
date: r,
|
|
602
|
+
today: !t && this.utils.date.isToday(r) && !t++
|
|
603
|
+
} : {}
|
|
604
|
+
};
|
|
605
|
+
});
|
|
606
|
+
},
|
|
607
|
+
cellWidth() {
|
|
608
|
+
return 100 / (7 - this.weekDays.reduce((t, e) => t + e.hide, 0));
|
|
609
|
+
},
|
|
610
|
+
weekdayCellStyles() {
|
|
611
|
+
return {
|
|
612
|
+
...this.vuecal.hideWeekdays.length ? { width: `${this.cellWidth}%` } : {}
|
|
613
|
+
};
|
|
614
|
+
},
|
|
615
|
+
cellHeadingsClickable() {
|
|
616
|
+
return this.view.id === "week" && (this.vuecal.clickToNavigate || this.vuecal.dblclickToNavigate);
|
|
617
|
+
}
|
|
618
|
+
}
|
|
619
|
+
}, rt = /* @__PURE__ */ he(Gt, [["render", Xt]]), Jt = { class: "vuecal__header" }, Zt = {
|
|
620
|
+
key: 0,
|
|
621
|
+
class: "vuecal__flex vuecal__menu",
|
|
622
|
+
role: "tablist",
|
|
623
|
+
"aria-label": "Calendar views navigation"
|
|
624
|
+
}, Qt = ["onDragenter", "onDragleave", "onClick", "aria-label"], $t = {
|
|
625
|
+
key: 1,
|
|
626
|
+
class: "vuecal__title-bar"
|
|
627
|
+
}, ei = ["aria-label"], ti = {
|
|
628
|
+
class: "vuecal__flex vuecal__title",
|
|
629
|
+
grow: ""
|
|
630
|
+
}, ii = ["aria-label"], si = {
|
|
631
|
+
key: 0,
|
|
632
|
+
class: "vuecal__flex vuecal__split-days-headers"
|
|
633
|
+
};
|
|
634
|
+
function li(t, e, s, l, r, i) {
|
|
635
|
+
const o = ae("weekdays-headings");
|
|
636
|
+
return v(), m("div", Jt, [
|
|
637
|
+
s.options.hideViewSelector ? D("", !0) : (v(), m("div", Zt, [
|
|
638
|
+
(v(!0), m(L, null, N(s.viewProps.views, (n, h) => (v(), m(L, { key: h }, [
|
|
639
|
+
n.enabled ? (v(), m("button", {
|
|
640
|
+
key: 0,
|
|
641
|
+
class: V(["vuecal__view-btn", { "vuecal__view-btn--active": i.view.id === h, "vuecal__view-btn--highlighted": t.highlightedControl === h }]),
|
|
642
|
+
type: "button",
|
|
643
|
+
onDragenter: (d) => s.editEvents.drag && i.dnd && i.dnd.viewSelectorDragEnter(d, h, t.$data),
|
|
644
|
+
onDragleave: (d) => s.editEvents.drag && i.dnd && i.dnd.viewSelectorDragLeave(d, h, t.$data),
|
|
645
|
+
onClick: (d) => i.switchView(h, null, !0),
|
|
646
|
+
"aria-label": `${n.label} view`
|
|
647
|
+
}, E(n.label), 43, Qt)) : D("", !0)
|
|
648
|
+
], 64))), 128))
|
|
649
|
+
])),
|
|
650
|
+
s.options.hideTitleBar ? D("", !0) : (v(), m("div", $t, [
|
|
651
|
+
H("button", {
|
|
652
|
+
class: V(["vuecal__arrow vuecal__arrow--prev", { "vuecal__arrow--highlighted": t.highlightedControl === "previous" }]),
|
|
653
|
+
type: "button",
|
|
654
|
+
onClick: e[0] || (e[0] = (...n) => i.previous && i.previous(...n)),
|
|
655
|
+
onDragenter: e[1] || (e[1] = (n) => s.editEvents.drag && i.dnd && i.dnd.viewSelectorDragEnter(n, "previous", t.$data)),
|
|
656
|
+
onDragleave: e[2] || (e[2] = (n) => s.editEvents.drag && i.dnd && i.dnd.viewSelectorDragLeave(n, "previous", t.$data)),
|
|
657
|
+
"aria-label": `Previous ${i.view.id}`
|
|
658
|
+
}, [
|
|
659
|
+
k(t.$slots, "arrow-prev")
|
|
660
|
+
], 42, ei),
|
|
661
|
+
H("div", ti, [
|
|
662
|
+
We(Ye, {
|
|
663
|
+
name: s.options.transitions ? `slide-fade--${i.transitionDirection}` : ""
|
|
664
|
+
}, {
|
|
665
|
+
default: T(() => [
|
|
666
|
+
(v(), G(at(i.broaderView ? "button" : "span"), {
|
|
667
|
+
type: !!i.broaderView && "button",
|
|
668
|
+
key: `${i.view.id}${i.view.startDate.toString()}`,
|
|
669
|
+
onClick: e[3] || (e[3] = (n) => !!i.broaderView && i.switchToBroaderView()),
|
|
670
|
+
"aria-label": !!i.broaderView && `Go to ${i.broaderView} view`
|
|
671
|
+
}, {
|
|
672
|
+
default: T(() => [
|
|
673
|
+
k(t.$slots, "title")
|
|
674
|
+
]),
|
|
675
|
+
_: 3
|
|
676
|
+
}, 8, ["type", "aria-label"]))
|
|
677
|
+
]),
|
|
678
|
+
_: 3
|
|
679
|
+
}, 8, ["name"])
|
|
680
|
+
]),
|
|
681
|
+
s.options.todayButton ? (v(), m("button", {
|
|
682
|
+
key: 0,
|
|
683
|
+
class: V(["vuecal__today-btn", { "vuecal__today-btn--highlighted": t.highlightedControl === "today" }]),
|
|
684
|
+
type: "button",
|
|
685
|
+
onClick: e[4] || (e[4] = (...n) => i.goToToday && i.goToToday(...n)),
|
|
686
|
+
onDragenter: e[5] || (e[5] = (n) => s.editEvents.drag && i.dnd && i.dnd.viewSelectorDragEnter(n, "today", t.$data)),
|
|
687
|
+
onDragleave: e[6] || (e[6] = (n) => s.editEvents.drag && i.dnd && i.dnd.viewSelectorDragLeave(n, "today", t.$data)),
|
|
688
|
+
"aria-label": "Today"
|
|
689
|
+
}, [
|
|
690
|
+
k(t.$slots, "today-button")
|
|
691
|
+
], 34)) : D("", !0),
|
|
692
|
+
H("button", {
|
|
693
|
+
class: V(["vuecal__arrow vuecal__arrow--next", { "vuecal__arrow--highlighted": t.highlightedControl === "next" }]),
|
|
694
|
+
type: "button",
|
|
695
|
+
onClick: e[7] || (e[7] = (...n) => i.next && i.next(...n)),
|
|
696
|
+
onDragenter: e[8] || (e[8] = (n) => s.editEvents.drag && i.dnd && i.dnd.viewSelectorDragEnter(n, "next", t.$data)),
|
|
697
|
+
onDragleave: e[9] || (e[9] = (n) => s.editEvents.drag && i.dnd && i.dnd.viewSelectorDragLeave(n, "next", t.$data)),
|
|
698
|
+
"aria-label": `Next ${i.view.id}`
|
|
699
|
+
}, [
|
|
700
|
+
k(t.$slots, "arrow-next")
|
|
701
|
+
], 42, ii)
|
|
702
|
+
])),
|
|
703
|
+
s.viewProps.weekDaysInHeader ? (v(), G(o, {
|
|
704
|
+
key: 2,
|
|
705
|
+
"week-days": s.weekDays,
|
|
706
|
+
"transition-direction": i.transitionDirection,
|
|
707
|
+
"switch-to-narrower-view": s.switchToNarrowerView
|
|
708
|
+
}, Le({ _: 2 }, [
|
|
709
|
+
t.$slots["weekday-heading"] ? {
|
|
710
|
+
name: "weekday-heading",
|
|
711
|
+
fn: T(({ heading: n, view: h }) => [
|
|
712
|
+
k(t.$slots, "weekday-heading", {
|
|
713
|
+
heading: n,
|
|
714
|
+
view: h
|
|
715
|
+
})
|
|
716
|
+
]),
|
|
717
|
+
key: "0"
|
|
718
|
+
} : void 0,
|
|
719
|
+
t.$slots["split-label"] ? {
|
|
720
|
+
name: "split-label",
|
|
721
|
+
fn: T(({ split: n }) => [
|
|
722
|
+
k(t.$slots, "split-label", {
|
|
723
|
+
split: n,
|
|
724
|
+
view: i.view
|
|
725
|
+
})
|
|
726
|
+
]),
|
|
727
|
+
key: "1"
|
|
728
|
+
} : void 0
|
|
729
|
+
]), 1032, ["week-days", "transition-direction", "switch-to-narrower-view"])) : D("", !0),
|
|
730
|
+
We(Ye, {
|
|
731
|
+
name: `slide-fade--${i.transitionDirection}`
|
|
732
|
+
}, {
|
|
733
|
+
default: T(() => [
|
|
734
|
+
i.showDaySplits ? (v(), m("div", si, [
|
|
735
|
+
(v(!0), m(L, null, N(s.daySplits, (n, h) => (v(), m("div", {
|
|
736
|
+
class: V(["day-split-header", n.class || !1]),
|
|
737
|
+
key: h
|
|
738
|
+
}, [
|
|
739
|
+
k(t.$slots, "split-label", {
|
|
740
|
+
split: n,
|
|
741
|
+
view: i.view.id
|
|
742
|
+
}, () => [
|
|
743
|
+
x(E(n.label), 1)
|
|
744
|
+
])
|
|
745
|
+
], 2))), 128))
|
|
746
|
+
])) : D("", !0)
|
|
747
|
+
]),
|
|
748
|
+
_: 3
|
|
749
|
+
}, 8, ["name"])
|
|
750
|
+
]);
|
|
751
|
+
}
|
|
752
|
+
const ai = {
|
|
753
|
+
inject: ["vuecal", "previous", "next", "switchView", "updateSelectedDate", "modules", "view"],
|
|
754
|
+
components: { WeekdaysHeadings: rt },
|
|
755
|
+
props: {
|
|
756
|
+
// Vuecal main component options (props).
|
|
757
|
+
options: { type: Object, default: () => ({}) },
|
|
758
|
+
editEvents: { type: Object, required: !0 },
|
|
759
|
+
hasSplits: { type: [Boolean, Number], default: !1 },
|
|
760
|
+
daySplits: { type: Array, default: () => [] },
|
|
761
|
+
viewProps: { type: Object, default: () => ({}) },
|
|
762
|
+
weekDays: { type: Array, default: () => [] },
|
|
763
|
+
switchToNarrowerView: { type: Function, default: () => {
|
|
764
|
+
} }
|
|
765
|
+
},
|
|
766
|
+
data: () => ({
|
|
767
|
+
highlightedControl: null
|
|
768
|
+
}),
|
|
769
|
+
methods: {
|
|
770
|
+
goToToday() {
|
|
771
|
+
this.updateSelectedDate(new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0)));
|
|
772
|
+
},
|
|
773
|
+
switchToBroaderView() {
|
|
774
|
+
this.transitionDirection = "left", this.broaderView && this.switchView(this.broaderView);
|
|
775
|
+
}
|
|
776
|
+
},
|
|
777
|
+
computed: {
|
|
778
|
+
transitionDirection: {
|
|
779
|
+
get() {
|
|
780
|
+
return this.vuecal.transitionDirection;
|
|
781
|
+
},
|
|
782
|
+
set(t) {
|
|
783
|
+
this.vuecal.transitionDirection = t;
|
|
784
|
+
}
|
|
785
|
+
},
|
|
786
|
+
broaderView() {
|
|
787
|
+
const { enabledViews: t } = this.vuecal;
|
|
788
|
+
return t[t.indexOf(this.view.id) - 1];
|
|
789
|
+
},
|
|
790
|
+
showDaySplits() {
|
|
791
|
+
return this.view.id === "day" && this.hasSplits && this.options.stickySplitLabels && !this.options.minSplitWidth;
|
|
792
|
+
},
|
|
793
|
+
// Drag & drop module.
|
|
794
|
+
dnd() {
|
|
795
|
+
return this.modules.dnd;
|
|
796
|
+
}
|
|
797
|
+
}
|
|
798
|
+
}, ni = /* @__PURE__ */ he(ai, [["render", li]]), ri = ["draggable"];
|
|
799
|
+
function oi(t, e, s, l, r, i) {
|
|
800
|
+
return v(), m("div", {
|
|
801
|
+
class: V(["vuecal__event", i.eventClasses]),
|
|
802
|
+
style: z(i.eventStyles),
|
|
803
|
+
tabindex: "0",
|
|
804
|
+
onFocus: e[4] || (e[4] = (...o) => i.focusEvent && i.focusEvent(...o)),
|
|
805
|
+
onKeypress: e[5] || (e[5] = nt(oe((...o) => i.onEnterKeypress && i.onEnterKeypress(...o), ["stop"]), ["enter"])),
|
|
806
|
+
onMouseenter: e[6] || (e[6] = (...o) => i.onMouseEnter && i.onMouseEnter(...o)),
|
|
807
|
+
onMouseleave: e[7] || (e[7] = (...o) => i.onMouseLeave && i.onMouseLeave(...o)),
|
|
808
|
+
onTouchstart: e[8] || (e[8] = oe((...o) => i.onTouchStart && i.onTouchStart(...o), ["stop"])),
|
|
809
|
+
onMousedown: e[9] || (e[9] = (o) => i.onMouseDown(o)),
|
|
810
|
+
onMouseup: e[10] || (e[10] = (...o) => i.onMouseUp && i.onMouseUp(...o)),
|
|
811
|
+
onTouchend: e[11] || (e[11] = (...o) => i.onMouseUp && i.onMouseUp(...o)),
|
|
812
|
+
onTouchmove: e[12] || (e[12] = (...o) => i.onTouchMove && i.onTouchMove(...o)),
|
|
813
|
+
onDblclick: e[13] || (e[13] = (...o) => i.onDblClick && i.onDblClick(...o)),
|
|
814
|
+
draggable: i.draggable,
|
|
815
|
+
onDragstart: e[14] || (e[14] = (o) => i.draggable && i.onDragStart(o)),
|
|
816
|
+
onDragend: e[15] || (e[15] = (o) => i.draggable && i.onDragEnd())
|
|
817
|
+
}, [
|
|
818
|
+
i.vuecal.editEvents.delete && s.event.deletable ? (v(), m("div", {
|
|
819
|
+
key: 0,
|
|
820
|
+
class: "vuecal__event-delete",
|
|
821
|
+
onClick: e[0] || (e[0] = oe((...o) => i.deleteEvent && i.deleteEvent(...o), ["stop"])),
|
|
822
|
+
onTouchstart: e[1] || (e[1] = oe((...o) => i.touchDeleteEvent && i.touchDeleteEvent(...o), ["stop"]))
|
|
823
|
+
}, E(i.vuecal.texts.deleteEvent), 33)) : D("", !0),
|
|
824
|
+
k(t.$slots, "event", {
|
|
825
|
+
event: s.event,
|
|
826
|
+
view: i.view.id
|
|
827
|
+
}),
|
|
828
|
+
i.resizable ? (v(), m("div", {
|
|
829
|
+
key: 1,
|
|
830
|
+
class: "vuecal__event-resize-handle",
|
|
831
|
+
contenteditable: "false",
|
|
832
|
+
onMousedown: e[2] || (e[2] = oe((...o) => i.onResizeHandleMouseDown && i.onResizeHandleMouseDown(...o), ["stop", "prevent"])),
|
|
833
|
+
onTouchstart: e[3] || (e[3] = oe((...o) => i.onResizeHandleMouseDown && i.onResizeHandleMouseDown(...o), ["stop", "prevent"]))
|
|
834
|
+
}, null, 32)) : D("", !0)
|
|
835
|
+
], 46, ri);
|
|
836
|
+
}
|
|
837
|
+
const ui = {
|
|
838
|
+
inject: ["vuecal", "utils", "modules", "view", "domEvents", "editEvents"],
|
|
839
|
+
props: {
|
|
840
|
+
cellFormattedDate: { type: String, default: "" },
|
|
841
|
+
event: { type: Object, default: () => ({}) },
|
|
842
|
+
cellEvents: { type: Array, default: () => [] },
|
|
843
|
+
overlaps: { type: Array, default: () => [] },
|
|
844
|
+
// If multiple simultaneous events, the events are placed from left to right from the
|
|
845
|
+
// one starting first to the last. (See utils/event.js > checkCellOverlappingEvents)
|
|
846
|
+
eventPosition: { type: Number, default: 0 },
|
|
847
|
+
overlapsStreak: { type: Number, default: 0 },
|
|
848
|
+
allDay: { type: Boolean, default: !1 }
|
|
849
|
+
// Is the event displayed in the all-day bar.
|
|
850
|
+
},
|
|
851
|
+
data: () => ({
|
|
852
|
+
// Event touch detection with 30px threshold.
|
|
853
|
+
touch: {
|
|
854
|
+
dragThreshold: 30,
|
|
855
|
+
// px.
|
|
856
|
+
startX: 0,
|
|
857
|
+
startY: 0,
|
|
858
|
+
// Detect if the event touch start + touch end was a drag or a tap.
|
|
859
|
+
// If it was a drag, don't call the event-click handler.
|
|
860
|
+
dragged: !1
|
|
861
|
+
}
|
|
862
|
+
}),
|
|
863
|
+
methods: {
|
|
864
|
+
/**
|
|
865
|
+
* On event mousedown.
|
|
866
|
+
* Do not prevent propagation to trigger cell mousedown which highlights the cell if not highlighted.
|
|
867
|
+
*/
|
|
868
|
+
onMouseDown(t, e = !1) {
|
|
869
|
+
if ("ontouchstart" in window && !e) return !1;
|
|
870
|
+
const { clickHoldAnEvent: s, focusAnEvent: l, resizeAnEvent: r, dragAnEvent: i } = this.domEvents;
|
|
871
|
+
if (l._eid === this.event._eid && s._eid === this.event._eid)
|
|
872
|
+
return !0;
|
|
873
|
+
this.focusEvent(), s._eid = null, this.vuecal.editEvents.delete && this.event.deletable && (s.timeoutId = setTimeout(() => {
|
|
874
|
+
!r._eid && !i._eid && (s._eid = this.event._eid, this.event.deleting = !0);
|
|
875
|
+
}, s.timeout));
|
|
876
|
+
},
|
|
877
|
+
/**
|
|
878
|
+
* The mouseup handler is global (whole document) and initialized in index.vue on mounted.
|
|
879
|
+
* It handles the mouseup on cell, events, and everything.
|
|
880
|
+
* All mouseup on event, should be put there to avoid conflicts with other cases.
|
|
881
|
+
* This function is also called on touchend on the event.
|
|
882
|
+
*/
|
|
883
|
+
onMouseUp(t) {
|
|
884
|
+
this.domEvents.focusAnEvent._eid === this.event._eid && !this.touch.dragged && (this.domEvents.focusAnEvent.mousedUp = !0), this.touch.dragged = !1;
|
|
885
|
+
},
|
|
886
|
+
onMouseEnter(t) {
|
|
887
|
+
t.preventDefault(), this.vuecal.emitWithEvent("event-mouse-enter", this.event);
|
|
888
|
+
},
|
|
889
|
+
onMouseLeave(t) {
|
|
890
|
+
t.preventDefault(), this.vuecal.emitWithEvent("event-mouse-leave", this.event);
|
|
891
|
+
},
|
|
892
|
+
// Detect if user taps on an event or drags it. If dragging, don't fire the event-click handler (if any).
|
|
893
|
+
onTouchMove(t) {
|
|
894
|
+
if (typeof this.vuecal.onEventClick != "function") return;
|
|
895
|
+
const { clientX: e, clientY: s } = t.touches[0], { startX: l, startY: r, dragThreshold: i } = this.touch;
|
|
896
|
+
(Math.abs(e - l) > i || Math.abs(s - r) > i) && (this.touch.dragged = !0);
|
|
897
|
+
},
|
|
898
|
+
onTouchStart(t) {
|
|
899
|
+
this.touch.startX = t.touches[0].clientX, this.touch.startY = t.touches[0].clientY, this.onMouseDown(t, !0);
|
|
900
|
+
},
|
|
901
|
+
onEnterKeypress(t) {
|
|
902
|
+
if (typeof this.vuecal.onEventClick == "function") return this.vuecal.onEventClick(this.event, t);
|
|
903
|
+
},
|
|
904
|
+
onDblClick(t) {
|
|
905
|
+
if (typeof this.vuecal.onEventDblclick == "function") return this.vuecal.onEventDblclick(this.event, t);
|
|
906
|
+
},
|
|
907
|
+
onDragStart(t) {
|
|
908
|
+
this.dnd && this.dnd.eventDragStart(t, this.event);
|
|
909
|
+
},
|
|
910
|
+
onDragEnd() {
|
|
911
|
+
this.dnd && this.dnd.eventDragEnd(this.event);
|
|
912
|
+
},
|
|
913
|
+
onResizeHandleMouseDown() {
|
|
914
|
+
this.focusEvent(), this.domEvents.dragAnEvent._eid = null, this.domEvents.resizeAnEvent = Object.assign(this.domEvents.resizeAnEvent, {
|
|
915
|
+
_eid: this.event._eid,
|
|
916
|
+
start: (this.segment || this.event).start,
|
|
917
|
+
split: this.event.split || null,
|
|
918
|
+
segment: !!this.segment && this.utils.date.formatDateLite(this.segment.start),
|
|
919
|
+
originalEnd: new Date((this.segment || this.event).end),
|
|
920
|
+
originalEndTimeMinutes: this.event.endTimeMinutes
|
|
921
|
+
}), this.event.resizing = !0;
|
|
922
|
+
},
|
|
923
|
+
deleteEvent(t = !1) {
|
|
924
|
+
if ("ontouchstart" in window && !t) return !1;
|
|
925
|
+
this.utils.event.deleteAnEvent(this.event);
|
|
926
|
+
},
|
|
927
|
+
touchDeleteEvent(t) {
|
|
928
|
+
this.deleteEvent(!0);
|
|
929
|
+
},
|
|
930
|
+
cancelDeleteEvent() {
|
|
931
|
+
this.event.deleting = !1;
|
|
932
|
+
},
|
|
933
|
+
focusEvent() {
|
|
934
|
+
const { focusAnEvent: t } = this.domEvents, e = t._eid;
|
|
935
|
+
if (e !== this.event._eid) {
|
|
936
|
+
if (e) {
|
|
937
|
+
const s = this.view.events.find((l) => l._eid === e);
|
|
938
|
+
s && (s.focused = !1);
|
|
939
|
+
}
|
|
940
|
+
this.vuecal.cancelDelete(), this.vuecal.emitWithEvent("event-focus", this.event), t._eid = this.event._eid, this.event.focused = !0;
|
|
941
|
+
}
|
|
942
|
+
}
|
|
943
|
+
},
|
|
944
|
+
computed: {
|
|
945
|
+
eventDimensions() {
|
|
946
|
+
const { startTimeMinutes: t, endTimeMinutes: e } = this.segment || this.event;
|
|
947
|
+
let s = t - this.vuecal.timeFrom;
|
|
948
|
+
const l = Math.max(Math.round(s * this.vuecal.timeCellHeight / this.vuecal.timeStep), 0);
|
|
949
|
+
s = Math.min(e, this.vuecal.timeTo) - this.vuecal.timeFrom;
|
|
950
|
+
const r = Math.round(s * this.vuecal.timeCellHeight / this.vuecal.timeStep), i = Math.max(r - l, 5);
|
|
951
|
+
return { top: l, height: i };
|
|
952
|
+
},
|
|
953
|
+
eventStyles() {
|
|
954
|
+
if (this.event.allDay || !this.vuecal.time || !this.event.endTimeMinutes || this.view.id === "month" || this.allDay) return {};
|
|
955
|
+
let t = 100 / Math.min(this.overlaps.length + 1, this.overlapsStreak), e = 100 / (this.overlaps.length + 1) * this.eventPosition;
|
|
956
|
+
this.vuecal.minEventWidth && t < this.vuecal.minEventWidth && (t = this.vuecal.minEventWidth, e = (100 - this.vuecal.minEventWidth) / this.overlaps.length * this.eventPosition);
|
|
957
|
+
const { top: s, height: l } = this.eventDimensions;
|
|
958
|
+
return {
|
|
959
|
+
top: `${s}px`,
|
|
960
|
+
height: `${l}px`,
|
|
961
|
+
width: `${t}%`,
|
|
962
|
+
left: this.event.left && `${this.event.left}px` || `${e}%`
|
|
963
|
+
};
|
|
964
|
+
},
|
|
965
|
+
// Don't rely on global variables otherwise whenever it would change all the events would be redrawn.
|
|
966
|
+
eventClasses() {
|
|
967
|
+
const { isFirstDay: t, isLastDay: e } = this.segment || {};
|
|
968
|
+
return {
|
|
969
|
+
[this.event.class]: !!this.event.class,
|
|
970
|
+
"vuecal__event--focus": this.event.focused,
|
|
971
|
+
"vuecal__event--resizing": this.event.resizing,
|
|
972
|
+
"vuecal__event--background": this.event.background,
|
|
973
|
+
"vuecal__event--deletable": this.event.deleting,
|
|
974
|
+
"vuecal__event--all-day": this.event.allDay,
|
|
975
|
+
// Only apply the dragging class on the event copy that is being dragged.
|
|
976
|
+
"vuecal__event--dragging": !this.event.draggingStatic && this.event.dragging,
|
|
977
|
+
// Only apply the static class on the event original that remains static while a copy is being dragged.
|
|
978
|
+
// Sometimes when dragging fast the static class would get stuck and events stays invisible,
|
|
979
|
+
// So if dragging is false disable the static class as well.
|
|
980
|
+
"vuecal__event--static": this.event.dragging && this.event.draggingStatic,
|
|
981
|
+
// Multiple days events.
|
|
982
|
+
"vuecal__event--multiple-days": !!this.segment,
|
|
983
|
+
"event-start": this.segment && t && !e,
|
|
984
|
+
"event-middle": this.segment && !t && !e,
|
|
985
|
+
"event-end": this.segment && e && !t
|
|
986
|
+
};
|
|
987
|
+
},
|
|
988
|
+
// When multiple-day events, a segment is a portion of event spanning on 1 day.
|
|
989
|
+
segment() {
|
|
990
|
+
return this.event.segments && this.event.segments[this.cellFormattedDate] || null;
|
|
991
|
+
},
|
|
992
|
+
draggable() {
|
|
993
|
+
const { draggable: t, background: e, daysCount: s } = this.event;
|
|
994
|
+
return this.vuecal.editEvents.drag && t && !e && s === 1;
|
|
995
|
+
},
|
|
996
|
+
resizable() {
|
|
997
|
+
const { editEvents: t, time: e } = this.vuecal;
|
|
998
|
+
return t.resize && this.event.resizable && e && !this.allDay && (!this.segment || this.segment && this.segment.isLastDay) && this.view.id !== "month";
|
|
999
|
+
},
|
|
1000
|
+
// Drag & drop module.
|
|
1001
|
+
dnd() {
|
|
1002
|
+
return this.modules.dnd;
|
|
1003
|
+
}
|
|
1004
|
+
}
|
|
1005
|
+
}, di = /* @__PURE__ */ he(ui, [["render", oi]]), ci = ["data-split", "aria-label", "onTouchstart", "onMousedown", "onDragover", "onDrop"], hi = {
|
|
1006
|
+
key: 0,
|
|
1007
|
+
class: "cell-time-labels"
|
|
1008
|
+
}, vi = ["innerHTML"], mi = {
|
|
1009
|
+
key: 2,
|
|
1010
|
+
class: "vuecal__cell-events"
|
|
1011
|
+
}, yi = ["title"];
|
|
1012
|
+
function fi(t, e, s, l, r, i) {
|
|
1013
|
+
const o = ae("event");
|
|
1014
|
+
return v(), G(ft, {
|
|
1015
|
+
class: V(["vuecal__cell", i.cellClasses]),
|
|
1016
|
+
name: `slide-fade--${i.transitionDirection}`,
|
|
1017
|
+
tag: "div",
|
|
1018
|
+
appear: s.options.transitions,
|
|
1019
|
+
style: z(i.cellStyles)
|
|
1020
|
+
}, {
|
|
1021
|
+
default: T(() => [
|
|
1022
|
+
(v(!0), m(L, null, N(i.splitsCount ? i.splits : 1, (n, h) => (v(), m("div", {
|
|
1023
|
+
class: V(["vuecal__flex vuecal__cell-content", i.splitsCount && i.splitClasses(n)]),
|
|
1024
|
+
key: s.options.transitions ? `${i.view.id}-${s.data.content}-${h}` : h,
|
|
1025
|
+
"data-split": i.splitsCount ? n.id : !1,
|
|
1026
|
+
column: "",
|
|
1027
|
+
tabindex: "0",
|
|
1028
|
+
"aria-label": s.data.content,
|
|
1029
|
+
onFocus: e[0] || (e[0] = (d) => i.onCellFocus(d)),
|
|
1030
|
+
onKeypress: e[1] || (e[1] = nt((d) => i.onCellkeyPressEnter(d), ["enter"])),
|
|
1031
|
+
onTouchstart: (d) => !i.isDisabled && i.onCellTouchStart(d, i.splitsCount ? n.id : null),
|
|
1032
|
+
onMousedown: (d) => !i.isDisabled && i.onCellMouseDown(d, i.splitsCount ? n.id : null),
|
|
1033
|
+
onClick: e[2] || (e[2] = (d) => !i.isDisabled && i.onCellClick(d)),
|
|
1034
|
+
onDblclick: e[3] || (e[3] = (d) => !i.isDisabled && i.onCellDblClick(d)),
|
|
1035
|
+
onContextmenu: e[4] || (e[4] = (d) => !i.isDisabled && s.options.cellContextmenu && i.onCellContextMenu(d)),
|
|
1036
|
+
onDragenter: e[5] || (e[5] = (d) => !i.isDisabled && s.editEvents.drag && i.dnd && i.dnd.cellDragEnter(d, t.$data, s.data.startDate)),
|
|
1037
|
+
onDragover: (d) => !i.isDisabled && s.editEvents.drag && i.dnd && i.dnd.cellDragOver(d, t.$data, s.data.startDate, i.splitsCount ? n.id : null),
|
|
1038
|
+
onDragleave: e[6] || (e[6] = (d) => !i.isDisabled && s.editEvents.drag && i.dnd && i.dnd.cellDragLeave(d, t.$data, s.data.startDate)),
|
|
1039
|
+
onDrop: (d) => !i.isDisabled && s.editEvents.drag && i.dnd && i.dnd.cellDragDrop(d, t.$data, s.data.startDate, i.splitsCount ? n.id : null)
|
|
1040
|
+
}, [
|
|
1041
|
+
s.options.showTimeInCells && s.options.time && i.isWeekOrDayView && !s.allDay ? (v(), m("div", hi, [
|
|
1042
|
+
(v(!0), m(L, null, N(i.vuecal.timeCells, (d, c) => (v(), m("span", {
|
|
1043
|
+
class: "cell-time-label",
|
|
1044
|
+
key: c
|
|
1045
|
+
}, E(d.label), 1))), 128))
|
|
1046
|
+
])) : D("", !0),
|
|
1047
|
+
i.isWeekOrDayView && !s.allDay && i.specialHours.length ? (v(!0), m(L, { key: 1 }, N(i.specialHours, (d, c) => (v(), m("div", {
|
|
1048
|
+
class: V(["vuecal__special-hours", `vuecal__special-hours--day${d.day} ${d.class}`]),
|
|
1049
|
+
style: z(`height: ${d.height}px;top: ${d.top}px`)
|
|
1050
|
+
}, [
|
|
1051
|
+
d.label ? (v(), m("div", {
|
|
1052
|
+
key: 0,
|
|
1053
|
+
class: "special-hours-label",
|
|
1054
|
+
innerHTML: d.label
|
|
1055
|
+
}, null, 8, vi)) : D("", !0)
|
|
1056
|
+
], 6))), 256)) : D("", !0),
|
|
1057
|
+
k(t.$slots, "cell-content", {
|
|
1058
|
+
events: i.events,
|
|
1059
|
+
selectCell: (d) => i.selectCell(d, !0),
|
|
1060
|
+
split: i.splitsCount ? n : !1
|
|
1061
|
+
}),
|
|
1062
|
+
i.eventsCount && (i.isWeekOrDayView || i.view.id === "month" && s.options.eventsOnMonthView) ? (v(), m("div", mi, [
|
|
1063
|
+
(v(!0), m(L, null, N(i.splitsCount ? n.events : i.events, (d, c) => (v(), G(o, {
|
|
1064
|
+
key: c,
|
|
1065
|
+
"cell-formatted-date": s.data.formattedDate,
|
|
1066
|
+
event: d,
|
|
1067
|
+
"all-day": s.allDay,
|
|
1068
|
+
"cell-events": i.splitsCount ? n.events : i.events,
|
|
1069
|
+
overlaps: ((i.splitsCount ? n.overlaps[d._eid] : t.cellOverlaps[d._eid]) || []).overlaps,
|
|
1070
|
+
"event-position": ((i.splitsCount ? n.overlaps[d._eid] : t.cellOverlaps[d._eid]) || []).position,
|
|
1071
|
+
"overlaps-streak": i.splitsCount ? n.overlapsStreak : t.cellOverlapsStreak
|
|
1072
|
+
}, {
|
|
1073
|
+
event: T(({ event: y, view: w }) => [
|
|
1074
|
+
k(t.$slots, "event", {
|
|
1075
|
+
view: w,
|
|
1076
|
+
event: y
|
|
1077
|
+
})
|
|
1078
|
+
]),
|
|
1079
|
+
_: 2
|
|
1080
|
+
}, 1032, ["cell-formatted-date", "event", "all-day", "cell-events", "overlaps", "event-position", "overlaps-streak"]))), 128))
|
|
1081
|
+
])) : D("", !0)
|
|
1082
|
+
], 42, ci))), 128)),
|
|
1083
|
+
i.timelineVisible ? (v(), m("div", {
|
|
1084
|
+
class: "vuecal__now-line",
|
|
1085
|
+
style: z(`top: ${i.todaysTimePosition}px`),
|
|
1086
|
+
key: s.options.transitions ? `${i.view.id}-now-line` : "now-line",
|
|
1087
|
+
title: i.utils.date.formatTime(i.vuecal.now)
|
|
1088
|
+
}, null, 12, yi)) : D("", !0)
|
|
1089
|
+
]),
|
|
1090
|
+
_: 3
|
|
1091
|
+
}, 8, ["class", "name", "appear", "style"]);
|
|
1092
|
+
}
|
|
1093
|
+
const wi = {
|
|
1094
|
+
inject: ["vuecal", "utils", "modules", "view", "domEvents"],
|
|
1095
|
+
components: { Event: di },
|
|
1096
|
+
props: {
|
|
1097
|
+
// Vue-cal main component options (props).
|
|
1098
|
+
options: { type: Object, default: () => ({}) },
|
|
1099
|
+
editEvents: { type: Object, required: !0 },
|
|
1100
|
+
data: { type: Object, required: !0 },
|
|
1101
|
+
cellSplits: { type: Array, default: () => [] },
|
|
1102
|
+
minTimestamp: { type: [Number, null], default: null },
|
|
1103
|
+
maxTimestamp: { type: [Number, null], default: null },
|
|
1104
|
+
cellWidth: { type: [Number, Boolean], default: !1 },
|
|
1105
|
+
allDay: { type: Boolean, default: !1 }
|
|
1106
|
+
},
|
|
1107
|
+
data: () => ({
|
|
1108
|
+
cellOverlaps: {},
|
|
1109
|
+
cellOverlapsStreak: 1,
|
|
1110
|
+
// Largest amount of simultaneous events in cell.
|
|
1111
|
+
// On mouse down, save the time at cursor so it can be reused on cell focus event
|
|
1112
|
+
// where there is no cursor coords.
|
|
1113
|
+
timeAtCursor: null,
|
|
1114
|
+
highlighted: !1,
|
|
1115
|
+
// On event drag over.
|
|
1116
|
+
highlightedSplit: null
|
|
1117
|
+
}),
|
|
1118
|
+
methods: {
|
|
1119
|
+
getSplitAtCursor({ target: t }) {
|
|
1120
|
+
let s = t.classList.contains("vuecal__cell-split") ? t : this.vuecal.findAncestor(t, "vuecal__cell-split");
|
|
1121
|
+
return s && (s = s.attributes["data-split"].value, parseInt(s).toString() === s.toString() && (s = parseInt(s))), s || null;
|
|
1122
|
+
},
|
|
1123
|
+
splitClasses(t) {
|
|
1124
|
+
return {
|
|
1125
|
+
"vuecal__cell-split": !0,
|
|
1126
|
+
"vuecal__cell-split--highlighted": this.highlightedSplit === t.id,
|
|
1127
|
+
[t.class]: !!t.class
|
|
1128
|
+
};
|
|
1129
|
+
},
|
|
1130
|
+
checkCellOverlappingEvents() {
|
|
1131
|
+
this.options.time && this.eventsCount && !this.splitsCount && (this.eventsCount === 1 ? (this.cellOverlaps = [], this.cellOverlapsStreak = 1) : [this.cellOverlaps, this.cellOverlapsStreak] = this.utils.event.checkCellOverlappingEvents(this.events, this.options));
|
|
1132
|
+
},
|
|
1133
|
+
isDOMElementAnEvent(t) {
|
|
1134
|
+
return this.vuecal.isDOMElementAnEvent(t);
|
|
1135
|
+
},
|
|
1136
|
+
/**
|
|
1137
|
+
* Select a cell and go to narrower view on double click or single click according to vuecalProps option.
|
|
1138
|
+
*/
|
|
1139
|
+
selectCell(t, e = !1) {
|
|
1140
|
+
const s = this.splitsCount ? this.getSplitAtCursor(t) : null;
|
|
1141
|
+
this.utils.cell.selectCell(e, this.timeAtCursor, s), this.timeAtCursor = null;
|
|
1142
|
+
},
|
|
1143
|
+
onCellkeyPressEnter(t) {
|
|
1144
|
+
this.isSelected || this.onCellFocus(t);
|
|
1145
|
+
const e = this.splitsCount ? this.getSplitAtCursor(t) : null;
|
|
1146
|
+
this.utils.cell.keyPressEnterCell(this.timeAtCursor, e), this.timeAtCursor = null;
|
|
1147
|
+
},
|
|
1148
|
+
/**
|
|
1149
|
+
* On cell focus, from tab key or from mousedown, highlight the cell and emit
|
|
1150
|
+
* the cell-focus event with the date of the cell start when focusing from tab or
|
|
1151
|
+
* the date & time at cursor if click/touch.
|
|
1152
|
+
*/
|
|
1153
|
+
onCellFocus(t) {
|
|
1154
|
+
if (!this.isSelected && !this.isDisabled) {
|
|
1155
|
+
this.isSelected = this.data.startDate;
|
|
1156
|
+
const e = this.splitsCount ? this.getSplitAtCursor(t) : null, s = this.timeAtCursor || this.data.startDate;
|
|
1157
|
+
this.vuecal.$emit("cell-focus", e ? { date: s, split: e } : s);
|
|
1158
|
+
}
|
|
1159
|
+
},
|
|
1160
|
+
onCellMouseDown(t, e = null, s = !1) {
|
|
1161
|
+
if ("ontouchstart" in window && !s) return !1;
|
|
1162
|
+
this.isSelected || this.onCellFocus(t);
|
|
1163
|
+
const { clickHoldACell: l, focusAnEvent: r } = this.domEvents;
|
|
1164
|
+
this.domEvents.cancelClickEventCreation = !1, l.eventCreated = !1, this.timeAtCursor = new Date(this.data.startDate);
|
|
1165
|
+
const { minutes: i, cursorCoords: { y: o } } = this.vuecal.minutesAtCursor(t);
|
|
1166
|
+
this.timeAtCursor.setMinutes(i);
|
|
1167
|
+
const n = this.isDOMElementAnEvent(t.target);
|
|
1168
|
+
!n && r._eid && ((this.view.events.find((h) => h._eid === r._eid) || {}).focused = !1), this.editEvents.create && !n && this.setUpEventCreation(t, o);
|
|
1169
|
+
},
|
|
1170
|
+
setUpEventCreation(t, e) {
|
|
1171
|
+
if (this.options.dragToCreateEvent && ["week", "day"].includes(this.view.id)) {
|
|
1172
|
+
const { dragCreateAnEvent: s } = this.domEvents;
|
|
1173
|
+
if (s.startCursorY = e, s.split = this.splitsCount ? this.getSplitAtCursor(t) : null, s.start = this.timeAtCursor, this.options.snapToTime) {
|
|
1174
|
+
let l = this.timeAtCursor.getHours() * 60 + this.timeAtCursor.getMinutes();
|
|
1175
|
+
const r = l + this.options.snapToTime / 2;
|
|
1176
|
+
l = r - r % this.options.snapToTime, s.start.setHours(0, l, 0, 0);
|
|
1177
|
+
}
|
|
1178
|
+
} else this.options.cellClickHold && ["month", "week", "day"].includes(this.view.id) && this.setUpCellHoldTimer(t);
|
|
1179
|
+
},
|
|
1180
|
+
// When click & holding a cell, and if allowed, set a timeout to create an event (can be cancelled).
|
|
1181
|
+
setUpCellHoldTimer(t) {
|
|
1182
|
+
const { clickHoldACell: e } = this.domEvents;
|
|
1183
|
+
e.cellId = `${this.vuecal._.uid}_${this.data.formattedDate}`, e.split = this.splitsCount ? this.getSplitAtCursor(t) : null, e.timeoutId = setTimeout(() => {
|
|
1184
|
+
if (e.cellId && !this.domEvents.cancelClickEventCreation) {
|
|
1185
|
+
const { _eid: s } = this.utils.event.createAnEvent(
|
|
1186
|
+
this.timeAtCursor,
|
|
1187
|
+
null,
|
|
1188
|
+
e.split ? { split: e.split } : {}
|
|
1189
|
+
);
|
|
1190
|
+
e.eventCreated = s;
|
|
1191
|
+
}
|
|
1192
|
+
}, e.timeout);
|
|
1193
|
+
},
|
|
1194
|
+
onCellTouchStart(t, e = null) {
|
|
1195
|
+
this.onCellMouseDown(t, e, !0);
|
|
1196
|
+
},
|
|
1197
|
+
onCellClick(t) {
|
|
1198
|
+
this.isDOMElementAnEvent(t.target) || this.selectCell(t);
|
|
1199
|
+
},
|
|
1200
|
+
onCellDblClick(t) {
|
|
1201
|
+
const e = new Date(this.data.startDate);
|
|
1202
|
+
e.setMinutes(this.vuecal.minutesAtCursor(t).minutes);
|
|
1203
|
+
const s = this.splitsCount ? this.getSplitAtCursor(t) : null;
|
|
1204
|
+
this.vuecal.$emit("cell-dblclick", s ? { date: e, split: s } : e), this.options.dblclickToNavigate && this.vuecal.switchToNarrowerView();
|
|
1205
|
+
},
|
|
1206
|
+
onCellContextMenu(t) {
|
|
1207
|
+
t.stopPropagation(), t.preventDefault();
|
|
1208
|
+
const e = new Date(this.data.startDate), { cursorCoords: s, minutes: l } = this.vuecal.minutesAtCursor(t);
|
|
1209
|
+
e.setMinutes(l);
|
|
1210
|
+
const r = this.splitsCount ? this.getSplitAtCursor(t) : null;
|
|
1211
|
+
this.vuecal.$emit("cell-contextmenu", { date: e, ...s, ...r || {}, e: t });
|
|
1212
|
+
}
|
|
1213
|
+
},
|
|
1214
|
+
computed: {
|
|
1215
|
+
// Drag & drop module.
|
|
1216
|
+
dnd() {
|
|
1217
|
+
return this.modules.dnd;
|
|
1218
|
+
},
|
|
1219
|
+
nowInMinutes() {
|
|
1220
|
+
return this.utils.date.dateToMinutes(this.vuecal.now);
|
|
1221
|
+
},
|
|
1222
|
+
isBeforeMinDate() {
|
|
1223
|
+
return this.minTimestamp !== null && this.minTimestamp > this.data.endDate.getTime();
|
|
1224
|
+
},
|
|
1225
|
+
isAfterMaxDate() {
|
|
1226
|
+
return this.maxTimestamp && this.maxTimestamp < this.data.startDate.getTime();
|
|
1227
|
+
},
|
|
1228
|
+
// Is the current cell disabled or not.
|
|
1229
|
+
isDisabled() {
|
|
1230
|
+
const { disableDays: t } = this.options, { isYearsOrYearView: e } = this.vuecal;
|
|
1231
|
+
return t.length && t.includes(this.data.formattedDate) && !e ? !0 : this.isBeforeMinDate || this.isAfterMaxDate;
|
|
1232
|
+
},
|
|
1233
|
+
// Is the current cell selected or not.
|
|
1234
|
+
isSelected: {
|
|
1235
|
+
get() {
|
|
1236
|
+
let t = !1;
|
|
1237
|
+
const { selectedDate: e } = this.view;
|
|
1238
|
+
return this.view.id === "years" ? t = e.getFullYear() === this.data.startDate.getFullYear() : this.view.id === "year" ? t = e.getFullYear() === this.data.startDate.getFullYear() && e.getMonth() === this.data.startDate.getMonth() : t = e.getTime() === this.data.startDate.getTime(), t;
|
|
1239
|
+
},
|
|
1240
|
+
set(t) {
|
|
1241
|
+
this.view.selectedDate = t, this.vuecal.$emit("update:selected-date", this.view.selectedDate);
|
|
1242
|
+
}
|
|
1243
|
+
},
|
|
1244
|
+
// Cache result for performance.
|
|
1245
|
+
isWeekOrDayView() {
|
|
1246
|
+
return ["week", "day"].includes(this.view.id);
|
|
1247
|
+
},
|
|
1248
|
+
transitionDirection() {
|
|
1249
|
+
return this.vuecal.transitionDirection;
|
|
1250
|
+
},
|
|
1251
|
+
specialHours() {
|
|
1252
|
+
return this.data.specialHours.map((t) => {
|
|
1253
|
+
let { from: e, to: s } = t;
|
|
1254
|
+
return e = Math.max(e, this.options.timeFrom), s = Math.min(s, this.options.timeTo), {
|
|
1255
|
+
...t,
|
|
1256
|
+
height: (s - e) * this.timeScale,
|
|
1257
|
+
top: (e - this.options.timeFrom) * this.timeScale
|
|
1258
|
+
};
|
|
1259
|
+
});
|
|
1260
|
+
},
|
|
1261
|
+
events() {
|
|
1262
|
+
const { startDate: t, endDate: e } = this.data;
|
|
1263
|
+
let s = [];
|
|
1264
|
+
if (!(["years", "year"].includes(this.view.id) && !this.options.eventsCountOnYearView)) {
|
|
1265
|
+
if (s = this.view.events.slice(0), this.view.id === "month" && s.push(...this.view.outOfScopeEvents), s = s.filter((l) => this.utils.event.eventInRange(l, t, e)), this.options.showAllDayEvents && this.view.id !== "month" && (s = s.filter((l) => !!l.allDay === this.allDay)), this.options.time && this.isWeekOrDayView && !this.allDay) {
|
|
1266
|
+
const { timeFrom: l, timeTo: r } = this.options;
|
|
1267
|
+
s = s.filter((i) => {
|
|
1268
|
+
const o = i.daysCount > 1 && i.segments[this.data.formattedDate] || {}, n = i.daysCount === 1 && i.startTimeMinutes < r && i.endTimeMinutes > l, h = i.daysCount > 1 && o.startTimeMinutes < r && o.endTimeMinutes > l;
|
|
1269
|
+
return i.allDay || n || h || !1;
|
|
1270
|
+
});
|
|
1271
|
+
}
|
|
1272
|
+
this.options.time && this.isWeekOrDayView && !(this.options.showAllDayEvents && this.allDay) && s.sort((l, r) => l.start < r.start ? -1 : 1), this.cellSplits.length || this.$nextTick(this.checkCellOverlappingEvents);
|
|
1273
|
+
}
|
|
1274
|
+
return s;
|
|
1275
|
+
},
|
|
1276
|
+
eventsCount() {
|
|
1277
|
+
return this.events.length;
|
|
1278
|
+
},
|
|
1279
|
+
splits() {
|
|
1280
|
+
return this.cellSplits.map((t, e) => {
|
|
1281
|
+
const s = this.events.filter((i) => i.split === t.id), [l, r] = this.utils.event.checkCellOverlappingEvents(s.filter((i) => !i.background && !i.allDay), this.options);
|
|
1282
|
+
return {
|
|
1283
|
+
...t,
|
|
1284
|
+
overlaps: l,
|
|
1285
|
+
overlapsStreak: r,
|
|
1286
|
+
events: s
|
|
1287
|
+
};
|
|
1288
|
+
});
|
|
1289
|
+
},
|
|
1290
|
+
splitsCount() {
|
|
1291
|
+
return this.splits.length;
|
|
1292
|
+
},
|
|
1293
|
+
cellClasses() {
|
|
1294
|
+
return {
|
|
1295
|
+
[this.data.class]: !!this.data.class,
|
|
1296
|
+
"vuecal__cell--current": this.data.current,
|
|
1297
|
+
// E.g. Current year in years view.
|
|
1298
|
+
"vuecal__cell--today": this.data.today,
|
|
1299
|
+
"vuecal__cell--out-of-scope": this.data.outOfScope,
|
|
1300
|
+
"vuecal__cell--before-min": this.isDisabled && this.isBeforeMinDate,
|
|
1301
|
+
"vuecal__cell--after-max": this.isDisabled && this.isAfterMaxDate,
|
|
1302
|
+
"vuecal__cell--disabled": this.isDisabled,
|
|
1303
|
+
"vuecal__cell--selected": this.isSelected,
|
|
1304
|
+
"vuecal__cell--highlighted": this.highlighted,
|
|
1305
|
+
"vuecal__cell--has-splits": this.splitsCount,
|
|
1306
|
+
"vuecal__cell--has-events": this.eventsCount
|
|
1307
|
+
};
|
|
1308
|
+
},
|
|
1309
|
+
cellStyles() {
|
|
1310
|
+
return {
|
|
1311
|
+
// cellWidth is only applied when hiding weekdays on month and week views.
|
|
1312
|
+
...this.cellWidth ? { width: `${this.cellWidth}%` } : {}
|
|
1313
|
+
};
|
|
1314
|
+
},
|
|
1315
|
+
timelineVisible() {
|
|
1316
|
+
const { time: t, timeTo: e } = this.options;
|
|
1317
|
+
return this.data.today && this.isWeekOrDayView && t && !this.allDay && this.nowInMinutes <= e;
|
|
1318
|
+
},
|
|
1319
|
+
todaysTimePosition() {
|
|
1320
|
+
if (!this.data.today || !this.options.time) return;
|
|
1321
|
+
const t = this.nowInMinutes - this.options.timeFrom;
|
|
1322
|
+
return Math.round(t * this.timeScale);
|
|
1323
|
+
},
|
|
1324
|
+
timeScale() {
|
|
1325
|
+
return this.options.timeCellHeight / this.options.timeStep;
|
|
1326
|
+
}
|
|
1327
|
+
}
|
|
1328
|
+
}, ot = /* @__PURE__ */ he(wi, [["render", fi]]), Di = {
|
|
1329
|
+
key: 0,
|
|
1330
|
+
class: "vuecal__all-day-text",
|
|
1331
|
+
style: { width: "3em" }
|
|
1332
|
+
};
|
|
1333
|
+
function gi(t, e, s, l, r, i) {
|
|
1334
|
+
const o = ae("vuecal-cell");
|
|
1335
|
+
return v(), m("div", {
|
|
1336
|
+
class: "vuecal__flex vuecal__all-day",
|
|
1337
|
+
style: z(s.cellOrSplitMinWidth && { height: s.height })
|
|
1338
|
+
}, [
|
|
1339
|
+
s.cellOrSplitMinWidth ? D("", !0) : (v(), m("div", Di, [
|
|
1340
|
+
H("span", null, E(s.label), 1)
|
|
1341
|
+
])),
|
|
1342
|
+
H("div", {
|
|
1343
|
+
class: V(["vuecal__flex vuecal__cells", `${i.view.id}-view`]),
|
|
1344
|
+
grow: "",
|
|
1345
|
+
style: z(s.cellOrSplitMinWidth ? `min-width: ${s.cellOrSplitMinWidth}px` : "")
|
|
1346
|
+
}, [
|
|
1347
|
+
(v(!0), m(L, null, N(s.cells, (n, h) => (v(), G(o, {
|
|
1348
|
+
key: h,
|
|
1349
|
+
options: s.options,
|
|
1350
|
+
"edit-events": i.editEvents,
|
|
1351
|
+
data: n,
|
|
1352
|
+
"all-day": !0,
|
|
1353
|
+
"cell-width": s.options.hideWeekdays.length && (i.vuecal.isWeekView || i.vuecal.isMonthView) && i.vuecal.cellWidth,
|
|
1354
|
+
"min-timestamp": s.options.minTimestamp,
|
|
1355
|
+
"max-timestamp": s.options.maxTimestamp,
|
|
1356
|
+
"cell-splits": s.daySplits
|
|
1357
|
+
}, {
|
|
1358
|
+
event: T(({ event: d, view: c }) => [
|
|
1359
|
+
k(t.$slots, "event", {
|
|
1360
|
+
view: c,
|
|
1361
|
+
event: d
|
|
1362
|
+
})
|
|
1363
|
+
]),
|
|
1364
|
+
_: 2
|
|
1365
|
+
}, 1032, ["options", "edit-events", "data", "cell-width", "min-timestamp", "max-timestamp", "cell-splits"]))), 128))
|
|
1366
|
+
], 6)
|
|
1367
|
+
], 4);
|
|
1368
|
+
}
|
|
1369
|
+
const pi = {
|
|
1370
|
+
inject: ["vuecal", "view", "editEvents"],
|
|
1371
|
+
components: { "vuecal-cell": ot },
|
|
1372
|
+
props: {
|
|
1373
|
+
// Vue-cal main component options (props).
|
|
1374
|
+
options: { type: Object, required: !0 },
|
|
1375
|
+
cells: { type: Array, required: !0 },
|
|
1376
|
+
label: { type: String, required: !0 },
|
|
1377
|
+
daySplits: { type: Array, default: () => [] },
|
|
1378
|
+
shortEvents: { type: Boolean, default: !0 },
|
|
1379
|
+
height: { type: String, default: "" },
|
|
1380
|
+
cellOrSplitMinWidth: { type: Number, default: null }
|
|
1381
|
+
},
|
|
1382
|
+
computed: {
|
|
1383
|
+
hasCellOrSplitWidth() {
|
|
1384
|
+
return !!(this.options.minCellWidth || this.daySplits.length && this.options.minSplitWidth);
|
|
1385
|
+
}
|
|
1386
|
+
}
|
|
1387
|
+
}, bi = /* @__PURE__ */ he(pi, [["render", gi]]), ki = ["lang"], Ci = { class: "default" }, _i = {
|
|
1388
|
+
key: 0,
|
|
1389
|
+
class: "vuecal__flex vuecal__body",
|
|
1390
|
+
grow: ""
|
|
1391
|
+
}, Ti = ["onBlur", "innerHTML"], Mi = ["innerHTML"], Si = ["innerHTML"], Ei = {
|
|
1392
|
+
class: "vuecal__flex",
|
|
1393
|
+
row: "",
|
|
1394
|
+
grow: ""
|
|
1395
|
+
}, Hi = {
|
|
1396
|
+
key: 0,
|
|
1397
|
+
class: "vuecal__time-column"
|
|
1398
|
+
}, Oi = { class: "vuecal__time-cell-label" }, Wi = {
|
|
1399
|
+
key: 1,
|
|
1400
|
+
class: "vuecal__flex vuecal__week-numbers",
|
|
1401
|
+
column: ""
|
|
1402
|
+
}, Vi = ["wrap", "column"], Ai = ["onBlur", "innerHTML"], ji = ["innerHTML"], Fi = ["innerHTML"], Li = ["wrap"], Yi = ["innerHTML"], Ni = ["innerHTML"], Bi = {
|
|
1403
|
+
key: 2,
|
|
1404
|
+
class: "vuecal__cell-events-count"
|
|
1405
|
+
}, Ii = {
|
|
1406
|
+
key: 3,
|
|
1407
|
+
class: "vuecal__no-event"
|
|
1408
|
+
}, Pi = ["onBlur", "innerHTML"], xi = ["innerHTML"], zi = {
|
|
1409
|
+
key: 2,
|
|
1410
|
+
class: "vuecal__event-time"
|
|
1411
|
+
}, Ri = { key: 0 }, Ui = {
|
|
1412
|
+
key: 1,
|
|
1413
|
+
class: "days-to-end"
|
|
1414
|
+
}, qi = ["innerHTML"], Ki = {
|
|
1415
|
+
key: 0,
|
|
1416
|
+
class: "vuecal__scrollbar-check"
|
|
1417
|
+
};
|
|
1418
|
+
function Xi(t, e, s, l, r, i) {
|
|
1419
|
+
const o = ae("vuecal-header"), n = ae("all-day-bar"), h = ae("weekdays-headings"), d = ae("vuecal-cell");
|
|
1420
|
+
return v(), m("div", {
|
|
1421
|
+
class: V(["vuecal__flex vuecal", i.cssClasses]),
|
|
1422
|
+
column: "",
|
|
1423
|
+
ref: "vuecal",
|
|
1424
|
+
lang: s.locale
|
|
1425
|
+
}, [
|
|
1426
|
+
We(o, {
|
|
1427
|
+
options: t.$props,
|
|
1428
|
+
"edit-events": i.editEvents,
|
|
1429
|
+
"view-props": { views: i.views, weekDaysInHeader: i.weekDaysInHeader },
|
|
1430
|
+
"week-days": i.weekDays,
|
|
1431
|
+
"has-splits": i.hasSplits,
|
|
1432
|
+
"day-splits": i.daySplits,
|
|
1433
|
+
"switch-to-narrower-view": i.switchToNarrowerView
|
|
1434
|
+
}, Le({
|
|
1435
|
+
"arrow-prev": T(() => [
|
|
1436
|
+
k(t.$slots, "arrow-prev", {}, () => [
|
|
1437
|
+
e[0] || (e[0] = x(" ")),
|
|
1438
|
+
e[1] || (e[1] = H("i", { class: "angle" }, null, -1)),
|
|
1439
|
+
e[2] || (e[2] = x(" "))
|
|
1440
|
+
])
|
|
1441
|
+
]),
|
|
1442
|
+
"arrow-next": T(() => [
|
|
1443
|
+
k(t.$slots, "arrow-next", {}, () => [
|
|
1444
|
+
e[3] || (e[3] = x(" ")),
|
|
1445
|
+
e[4] || (e[4] = H("i", { class: "angle" }, null, -1)),
|
|
1446
|
+
e[5] || (e[5] = x(" "))
|
|
1447
|
+
])
|
|
1448
|
+
]),
|
|
1449
|
+
"today-button": T(() => [
|
|
1450
|
+
k(t.$slots, "today-button", {}, () => [
|
|
1451
|
+
H("span", Ci, E(r.texts.today), 1)
|
|
1452
|
+
])
|
|
1453
|
+
]),
|
|
1454
|
+
title: T(() => [
|
|
1455
|
+
k(t.$slots, "title", {
|
|
1456
|
+
title: i.viewTitle,
|
|
1457
|
+
view: r.view
|
|
1458
|
+
}, () => [
|
|
1459
|
+
x(E(i.viewTitle), 1)
|
|
1460
|
+
])
|
|
1461
|
+
]),
|
|
1462
|
+
_: 2
|
|
1463
|
+
}, [
|
|
1464
|
+
t.$slots["weekday-heading"] ? {
|
|
1465
|
+
name: "weekday-heading",
|
|
1466
|
+
fn: T(({ heading: c, view: y }) => [
|
|
1467
|
+
k(t.$slots, "weekday-heading", {
|
|
1468
|
+
heading: c,
|
|
1469
|
+
view: y
|
|
1470
|
+
})
|
|
1471
|
+
]),
|
|
1472
|
+
key: "0"
|
|
1473
|
+
} : void 0,
|
|
1474
|
+
t.$slots["split-label"] ? {
|
|
1475
|
+
name: "split-label",
|
|
1476
|
+
fn: T(({ split: c }) => [
|
|
1477
|
+
k(t.$slots, "split-label", {
|
|
1478
|
+
split: c,
|
|
1479
|
+
view: r.view.id
|
|
1480
|
+
})
|
|
1481
|
+
]),
|
|
1482
|
+
key: "1"
|
|
1483
|
+
} : void 0
|
|
1484
|
+
]), 1032, ["options", "edit-events", "view-props", "week-days", "has-splits", "day-splits", "switch-to-narrower-view"]),
|
|
1485
|
+
s.hideBody ? D("", !0) : (v(), m("div", _i, [
|
|
1486
|
+
We(Ye, {
|
|
1487
|
+
name: `slide-fade--${r.transitionDirection}`,
|
|
1488
|
+
appear: s.transitions
|
|
1489
|
+
}, {
|
|
1490
|
+
default: T(() => [
|
|
1491
|
+
(v(), m("div", {
|
|
1492
|
+
class: "vuecal__flex",
|
|
1493
|
+
style: { "min-width": "100%" },
|
|
1494
|
+
key: s.transitions ? r.view.id : !1,
|
|
1495
|
+
column: ""
|
|
1496
|
+
}, [
|
|
1497
|
+
s.showAllDayEvents && i.hasTimeColumn && (!i.cellOrSplitMinWidth || i.isDayView && !s.minSplitWidth) ? (v(), G(n, ze(Re({ key: 0 }, i.allDayBar)), {
|
|
1498
|
+
event: T(({ event: c, view: y }) => [
|
|
1499
|
+
k(t.$slots, "event", {
|
|
1500
|
+
view: y,
|
|
1501
|
+
event: c
|
|
1502
|
+
}, () => [
|
|
1503
|
+
i.editEvents.title && c.titleEditable ? (v(), m("div", {
|
|
1504
|
+
key: 0,
|
|
1505
|
+
class: "vuecal__event-title vuecal__event-title--edit",
|
|
1506
|
+
contenteditable: "",
|
|
1507
|
+
onBlur: (w) => i.onEventTitleBlur(w, c),
|
|
1508
|
+
innerHTML: c.title
|
|
1509
|
+
}, null, 40, Ti)) : c.title ? (v(), m("div", {
|
|
1510
|
+
key: 1,
|
|
1511
|
+
class: "vuecal__event-title",
|
|
1512
|
+
innerHTML: c.title
|
|
1513
|
+
}, null, 8, Mi)) : D("", !0),
|
|
1514
|
+
c.content && !i.hasShortEvents && !i.isShortMonthView ? (v(), m("div", {
|
|
1515
|
+
key: 2,
|
|
1516
|
+
class: "vuecal__event-content",
|
|
1517
|
+
innerHTML: c.content
|
|
1518
|
+
}, null, 8, Si)) : D("", !0)
|
|
1519
|
+
])
|
|
1520
|
+
]),
|
|
1521
|
+
_: 3
|
|
1522
|
+
}, 16)) : D("", !0),
|
|
1523
|
+
H("div", {
|
|
1524
|
+
class: V(["vuecal__bg", { vuecal__flex: !i.hasTimeColumn }]),
|
|
1525
|
+
column: ""
|
|
1526
|
+
}, [
|
|
1527
|
+
H("div", Ei, [
|
|
1528
|
+
i.hasTimeColumn ? (v(), m("div", Hi, [
|
|
1529
|
+
s.showAllDayEvents && i.cellOrSplitMinWidth && !(i.isDayView && !s.minSplitWidth) ? (v(), m("div", {
|
|
1530
|
+
key: 0,
|
|
1531
|
+
class: "vuecal__all-day-text",
|
|
1532
|
+
style: z({ height: i.allDayBar.height })
|
|
1533
|
+
}, [
|
|
1534
|
+
H("span", null, E(r.texts.allDay), 1)
|
|
1535
|
+
], 4)) : D("", !0),
|
|
1536
|
+
(v(!0), m(L, null, N(i.timeCells, (c, y) => (v(), m("div", {
|
|
1537
|
+
class: "vuecal__time-cell",
|
|
1538
|
+
key: y,
|
|
1539
|
+
style: z(`height: ${s.timeCellHeight}px`)
|
|
1540
|
+
}, [
|
|
1541
|
+
k(t.$slots, "time-cell", {
|
|
1542
|
+
hours: c.hours,
|
|
1543
|
+
minutes: c.minutes
|
|
1544
|
+
}, () => [
|
|
1545
|
+
e[6] || (e[6] = H("span", { class: "vuecal__time-cell-line" }, null, -1)),
|
|
1546
|
+
H("span", Oi, E(c.label), 1)
|
|
1547
|
+
])
|
|
1548
|
+
], 4))), 128))
|
|
1549
|
+
])) : D("", !0),
|
|
1550
|
+
s.showWeekNumbers && i.isMonthView ? (v(), m("div", Wi, [
|
|
1551
|
+
(v(), m(L, null, N(6, (c) => H("div", {
|
|
1552
|
+
class: "vuecal__flex vuecal__week-number-cell",
|
|
1553
|
+
key: c,
|
|
1554
|
+
grow: ""
|
|
1555
|
+
}, [
|
|
1556
|
+
k(t.$slots, "week-number-cell", {
|
|
1557
|
+
week: i.getWeekNumber(c - 1)
|
|
1558
|
+
}, () => [
|
|
1559
|
+
x(E(i.getWeekNumber(c - 1)), 1)
|
|
1560
|
+
])
|
|
1561
|
+
])), 64))
|
|
1562
|
+
])) : D("", !0),
|
|
1563
|
+
H("div", {
|
|
1564
|
+
class: V(["vuecal__flex vuecal__cells", `${r.view.id}-view`]),
|
|
1565
|
+
grow: "",
|
|
1566
|
+
wrap: !i.cellOrSplitMinWidth || !i.isWeekView,
|
|
1567
|
+
column: !!i.cellOrSplitMinWidth
|
|
1568
|
+
}, [
|
|
1569
|
+
i.cellOrSplitMinWidth && i.isWeekView ? (v(), G(h, {
|
|
1570
|
+
key: 0,
|
|
1571
|
+
"transition-direction": r.transitionDirection,
|
|
1572
|
+
"week-days": i.weekDays,
|
|
1573
|
+
"switch-to-narrower-view": i.switchToNarrowerView,
|
|
1574
|
+
style: z(i.cellOrSplitMinWidth ? `min-width: ${i.cellOrSplitMinWidth}px` : "")
|
|
1575
|
+
}, Le({ _: 2 }, [
|
|
1576
|
+
t.$slots["weekday-heading"] ? {
|
|
1577
|
+
name: "weekday-heading",
|
|
1578
|
+
fn: T(({ heading: c, view: y }) => [
|
|
1579
|
+
k(t.$slots, "weekday-heading", {
|
|
1580
|
+
heading: c,
|
|
1581
|
+
view: y
|
|
1582
|
+
})
|
|
1583
|
+
]),
|
|
1584
|
+
key: "0"
|
|
1585
|
+
} : void 0,
|
|
1586
|
+
t.$slots["split-label"] ? {
|
|
1587
|
+
name: "split-label",
|
|
1588
|
+
fn: T(({ split: c }) => [
|
|
1589
|
+
k(t.$slots, "split-label", {
|
|
1590
|
+
split: c,
|
|
1591
|
+
view: r.view.id
|
|
1592
|
+
})
|
|
1593
|
+
]),
|
|
1594
|
+
key: "1"
|
|
1595
|
+
} : void 0
|
|
1596
|
+
]), 1032, ["transition-direction", "week-days", "switch-to-narrower-view", "style"])) : i.hasSplits && s.stickySplitLabels && s.minSplitWidth ? (v(), m("div", {
|
|
1597
|
+
key: 1,
|
|
1598
|
+
class: "vuecal__flex vuecal__split-days-headers",
|
|
1599
|
+
style: z(i.cellOrSplitMinWidth ? `min-width: ${i.cellOrSplitMinWidth}px` : "")
|
|
1600
|
+
}, [
|
|
1601
|
+
(v(!0), m(L, null, N(i.daySplits, (c, y) => (v(), m("div", {
|
|
1602
|
+
class: V(["day-split-header", c.class || !1]),
|
|
1603
|
+
key: y
|
|
1604
|
+
}, [
|
|
1605
|
+
k(t.$slots, "split-label", {
|
|
1606
|
+
split: c,
|
|
1607
|
+
view: r.view.id
|
|
1608
|
+
}, () => [
|
|
1609
|
+
x(E(c.label), 1)
|
|
1610
|
+
])
|
|
1611
|
+
], 2))), 128))
|
|
1612
|
+
], 4)) : D("", !0),
|
|
1613
|
+
s.showAllDayEvents && i.hasTimeColumn && (i.isWeekView && i.cellOrSplitMinWidth || i.isDayView && i.hasSplits && s.minSplitWidth) ? (v(), G(n, ze(Re({ key: 2 }, i.allDayBar)), {
|
|
1614
|
+
event: T(({ event: c, view: y }) => [
|
|
1615
|
+
k(t.$slots, "event", {
|
|
1616
|
+
view: y,
|
|
1617
|
+
event: c
|
|
1618
|
+
}, () => [
|
|
1619
|
+
i.editEvents.title && c.titleEditable ? (v(), m("div", {
|
|
1620
|
+
key: 0,
|
|
1621
|
+
class: "vuecal__event-title vuecal__event-title--edit",
|
|
1622
|
+
contenteditable: "",
|
|
1623
|
+
onBlur: (w) => i.onEventTitleBlur(w, c),
|
|
1624
|
+
innerHTML: c.title
|
|
1625
|
+
}, null, 40, Ai)) : c.title ? (v(), m("div", {
|
|
1626
|
+
key: 1,
|
|
1627
|
+
class: "vuecal__event-title",
|
|
1628
|
+
innerHTML: c.title
|
|
1629
|
+
}, null, 8, ji)) : D("", !0),
|
|
1630
|
+
c.content && !i.hasShortEvents && !i.isShortMonthView ? (v(), m("div", {
|
|
1631
|
+
key: 2,
|
|
1632
|
+
class: "vuecal__event-content",
|
|
1633
|
+
innerHTML: c.content
|
|
1634
|
+
}, null, 8, Fi)) : D("", !0)
|
|
1635
|
+
])
|
|
1636
|
+
]),
|
|
1637
|
+
_: 3
|
|
1638
|
+
}, 16)) : D("", !0),
|
|
1639
|
+
H("div", {
|
|
1640
|
+
class: "vuecal__flex",
|
|
1641
|
+
ref: (c) => r.cellsEl = c,
|
|
1642
|
+
grow: "",
|
|
1643
|
+
wrap: !i.cellOrSplitMinWidth || !i.isWeekView,
|
|
1644
|
+
style: z(i.cellOrSplitMinWidth ? `min-width: ${i.cellOrSplitMinWidth}px` : "")
|
|
1645
|
+
}, [
|
|
1646
|
+
(v(!0), m(L, null, N(i.viewCells, (c, y) => (v(), G(d, {
|
|
1647
|
+
key: y,
|
|
1648
|
+
options: t.$props,
|
|
1649
|
+
"edit-events": i.editEvents,
|
|
1650
|
+
data: c,
|
|
1651
|
+
"cell-width": s.hideWeekdays.length && (i.isWeekView || i.isMonthView) && i.cellWidth,
|
|
1652
|
+
"min-timestamp": i.minTimestamp,
|
|
1653
|
+
"max-timestamp": i.maxTimestamp,
|
|
1654
|
+
"cell-splits": i.hasSplits && i.daySplits || []
|
|
1655
|
+
}, {
|
|
1656
|
+
"cell-content": T(({ events: w, split: A, selectCell: g }) => [
|
|
1657
|
+
k(t.$slots, "cell-content", {
|
|
1658
|
+
cell: c,
|
|
1659
|
+
view: r.view,
|
|
1660
|
+
goNarrower: g,
|
|
1661
|
+
events: w
|
|
1662
|
+
}, () => [
|
|
1663
|
+
A && !s.stickySplitLabels ? (v(), m("div", {
|
|
1664
|
+
key: 0,
|
|
1665
|
+
class: "split-label",
|
|
1666
|
+
innerHTML: A.label
|
|
1667
|
+
}, null, 8, Yi)) : D("", !0),
|
|
1668
|
+
c.content ? (v(), m("div", {
|
|
1669
|
+
key: 1,
|
|
1670
|
+
class: "vuecal__cell-date",
|
|
1671
|
+
innerHTML: c.content
|
|
1672
|
+
}, null, 8, Ni)) : D("", !0),
|
|
1673
|
+
(i.isMonthView && !s.eventsOnMonthView || i.isYearsOrYearView && s.eventsCountOnYearView) && w.length ? (v(), m("div", Bi, [
|
|
1674
|
+
k(t.$slots, "events-count", {
|
|
1675
|
+
view: r.view,
|
|
1676
|
+
events: w
|
|
1677
|
+
}, () => [
|
|
1678
|
+
x(E(w.length), 1)
|
|
1679
|
+
])
|
|
1680
|
+
])) : D("", !0),
|
|
1681
|
+
!i.cellOrSplitHasEvents(w, A) && i.isWeekOrDayView ? (v(), m("div", Ii, [
|
|
1682
|
+
k(t.$slots, "no-event", {}, () => [
|
|
1683
|
+
x(E(r.texts.noEvent), 1)
|
|
1684
|
+
])
|
|
1685
|
+
])) : D("", !0)
|
|
1686
|
+
])
|
|
1687
|
+
]),
|
|
1688
|
+
event: T(({ event: w, view: A }) => [
|
|
1689
|
+
k(t.$slots, "event", {
|
|
1690
|
+
view: A,
|
|
1691
|
+
event: w
|
|
1692
|
+
}, () => [
|
|
1693
|
+
i.editEvents.title && w.titleEditable ? (v(), m("div", {
|
|
1694
|
+
key: 0,
|
|
1695
|
+
class: "vuecal__event-title vuecal__event-title--edit",
|
|
1696
|
+
contenteditable: "",
|
|
1697
|
+
onBlur: (g) => i.onEventTitleBlur(g, w),
|
|
1698
|
+
innerHTML: w.title
|
|
1699
|
+
}, null, 40, Pi)) : w.title ? (v(), m("div", {
|
|
1700
|
+
key: 1,
|
|
1701
|
+
class: "vuecal__event-title",
|
|
1702
|
+
innerHTML: w.title
|
|
1703
|
+
}, null, 8, xi)) : D("", !0),
|
|
1704
|
+
s.time && !w.allDay && !(i.isMonthView && (w.allDay || s.showAllDayEvents === "short")) && !i.isShortMonthView ? (v(), m("div", zi, [
|
|
1705
|
+
x(E(r.utils.date.formatTime(w.start, i.TimeFormat)), 1),
|
|
1706
|
+
w.endTimeMinutes ? (v(), m("span", Ri, " - " + E(r.utils.date.formatTime(w.end, i.TimeFormat, null, !0)), 1)) : D("", !0),
|
|
1707
|
+
w.daysCount > 1 && (w.segments[c.formattedDate] || {}).isFirstDay ? (v(), m("small", Ui, " +" + E(w.daysCount - 1) + E((r.texts.day[0] || "").toLowerCase()), 1)) : D("", !0)
|
|
1708
|
+
])) : D("", !0),
|
|
1709
|
+
w.content && !(i.isMonthView && w.allDay && s.showAllDayEvents === "short") && !i.isShortMonthView ? (v(), m("div", {
|
|
1710
|
+
key: 3,
|
|
1711
|
+
class: "vuecal__event-content",
|
|
1712
|
+
innerHTML: w.content
|
|
1713
|
+
}, null, 8, qi)) : D("", !0)
|
|
1714
|
+
])
|
|
1715
|
+
]),
|
|
1716
|
+
"no-event": T(() => [
|
|
1717
|
+
k(t.$slots, "no-event", {}, () => [
|
|
1718
|
+
x(E(r.texts.noEvent), 1)
|
|
1719
|
+
])
|
|
1720
|
+
]),
|
|
1721
|
+
_: 2
|
|
1722
|
+
}, 1032, ["options", "edit-events", "data", "cell-width", "min-timestamp", "max-timestamp", "cell-splits"]))), 128))
|
|
1723
|
+
], 12, Li)
|
|
1724
|
+
], 10, Vi)
|
|
1725
|
+
])
|
|
1726
|
+
], 2)
|
|
1727
|
+
]))
|
|
1728
|
+
]),
|
|
1729
|
+
_: 3
|
|
1730
|
+
}, 8, ["name", "appear"]),
|
|
1731
|
+
r.ready ? D("", !0) : (v(), m("div", Ki, e[7] || (e[7] = [
|
|
1732
|
+
H("div", null, null, -1)
|
|
1733
|
+
])))
|
|
1734
|
+
]))
|
|
1735
|
+
], 10, ki);
|
|
1736
|
+
}
|
|
1737
|
+
const Oe = 24 * 60, Fe = {
|
|
1738
|
+
weekDays: Array(7).fill(""),
|
|
1739
|
+
weekDaysShort: [],
|
|
1740
|
+
months: Array(12).fill(""),
|
|
1741
|
+
years: "",
|
|
1742
|
+
year: "",
|
|
1743
|
+
month: "",
|
|
1744
|
+
week: "",
|
|
1745
|
+
day: "",
|
|
1746
|
+
today: "",
|
|
1747
|
+
noEvent: "",
|
|
1748
|
+
allDay: "",
|
|
1749
|
+
deleteEvent: "",
|
|
1750
|
+
createEvent: "",
|
|
1751
|
+
dateFormat: "dddd MMMM D, YYYY",
|
|
1752
|
+
am: "am",
|
|
1753
|
+
pm: "pm"
|
|
1754
|
+
}, it = ["years", "year", "month", "week", "day"], st = new Ft(Fe), Gi = {
|
|
1755
|
+
name: "vue-cal",
|
|
1756
|
+
components: { "vuecal-cell": ot, "vuecal-header": ni, WeekdaysHeadings: rt, AllDayBar: bi },
|
|
1757
|
+
// By Vue design, passing props loses the reactivity unless it's a method or reactive OBJECT.
|
|
1758
|
+
provide() {
|
|
1759
|
+
return {
|
|
1760
|
+
vuecal: this,
|
|
1761
|
+
utils: this.utils,
|
|
1762
|
+
modules: this.modules,
|
|
1763
|
+
// Methods.
|
|
1764
|
+
previous: this.previous,
|
|
1765
|
+
next: this.next,
|
|
1766
|
+
switchView: this.switchView,
|
|
1767
|
+
updateSelectedDate: this.updateSelectedDate,
|
|
1768
|
+
editEvents: this.editEvents,
|
|
1769
|
+
// Objects.
|
|
1770
|
+
view: this.view,
|
|
1771
|
+
domEvents: this.domEvents
|
|
1772
|
+
};
|
|
1773
|
+
},
|
|
1774
|
+
props: {
|
|
1775
|
+
activeView: { type: String, default: "week" },
|
|
1776
|
+
// Only used if there are daySplits with minSplitWidth, to add the same height top spacer on time column.
|
|
1777
|
+
allDayBarHeight: { type: [String, Number], default: "25px" },
|
|
1778
|
+
cellClickHold: { type: Boolean, default: !0 },
|
|
1779
|
+
cellContextmenu: { type: Boolean, default: !1 },
|
|
1780
|
+
clickToNavigate: { type: Boolean, default: !1 },
|
|
1781
|
+
dblclickToNavigate: { type: Boolean, default: !0 },
|
|
1782
|
+
disableDatePrototypes: { type: Boolean, default: !1 },
|
|
1783
|
+
disableDays: { type: Array, default: () => [] },
|
|
1784
|
+
disableViews: { type: Array, default: () => [] },
|
|
1785
|
+
dragToCreateEvent: { type: Boolean, default: !0 },
|
|
1786
|
+
// Start a drag creation after dragging a certain amount of pixels.
|
|
1787
|
+
// This prevents drag creation by mistake when you want to navigate.
|
|
1788
|
+
dragToCreateThreshold: { type: Number, default: 15 },
|
|
1789
|
+
editableEvents: { type: [Boolean, Object], default: !1 },
|
|
1790
|
+
events: { type: Array, default: () => [] },
|
|
1791
|
+
eventsCountOnYearView: { type: Boolean, default: !1 },
|
|
1792
|
+
eventsOnMonthView: { type: [Boolean, String], default: !1 },
|
|
1793
|
+
hideBody: { type: Boolean, default: !1 },
|
|
1794
|
+
hideTitleBar: { type: Boolean, default: !1 },
|
|
1795
|
+
hideViewSelector: { type: Boolean, default: !1 },
|
|
1796
|
+
hideWeekdays: { type: Array, default: () => [] },
|
|
1797
|
+
hideWeekends: { type: Boolean, default: !1 },
|
|
1798
|
+
locale: { type: [String, Object], default: "en" },
|
|
1799
|
+
maxDate: { type: [String, Date], default: "" },
|
|
1800
|
+
minCellWidth: { type: Number, default: 0 },
|
|
1801
|
+
minDate: { type: [String, Date], default: "" },
|
|
1802
|
+
minEventWidth: { type: Number, default: 0 },
|
|
1803
|
+
minSplitWidth: { type: Number, default: 0 },
|
|
1804
|
+
onEventClick: { type: [Function, null], default: null },
|
|
1805
|
+
onEventCreate: { type: [Function, null], default: null },
|
|
1806
|
+
onEventDblclick: { type: [Function, null], default: null },
|
|
1807
|
+
overlapsPerTimeStep: { type: Boolean, default: !1 },
|
|
1808
|
+
resizeX: { type: Boolean, default: !1 },
|
|
1809
|
+
selectedDate: { type: [String, Date], default: "" },
|
|
1810
|
+
showAllDayEvents: { type: [Boolean, String], default: !1 },
|
|
1811
|
+
showTimeInCells: { type: Boolean, default: !1 },
|
|
1812
|
+
showWeekNumbers: { type: [Boolean, String], default: !1 },
|
|
1813
|
+
snapToTime: { type: Number, default: 0 },
|
|
1814
|
+
small: { type: Boolean, default: !1 },
|
|
1815
|
+
specialHours: { type: Object, default: () => ({}) },
|
|
1816
|
+
splitDays: { type: Array, default: () => [] },
|
|
1817
|
+
startWeekOnSunday: { type: Boolean, default: !1 },
|
|
1818
|
+
stickySplitLabels: { type: Boolean, default: !1 },
|
|
1819
|
+
time: { type: Boolean, default: !0 },
|
|
1820
|
+
timeCellHeight: { type: Number, default: 40 },
|
|
1821
|
+
// In pixels.
|
|
1822
|
+
timeFormat: { type: String, default: "" },
|
|
1823
|
+
timeFrom: { type: Number, default: 0 },
|
|
1824
|
+
// In minutes.
|
|
1825
|
+
timeStep: { type: Number, default: 60 },
|
|
1826
|
+
// In minutes.
|
|
1827
|
+
timeTo: { type: Number, default: Oe },
|
|
1828
|
+
// In minutes.
|
|
1829
|
+
todayButton: { type: Boolean, default: !1 },
|
|
1830
|
+
transitions: { type: Boolean, default: !0 },
|
|
1831
|
+
twelveHour: { type: Boolean, default: !1 },
|
|
1832
|
+
watchRealTime: { type: Boolean, default: !1 },
|
|
1833
|
+
// Expensive, so only trigger on demand.
|
|
1834
|
+
xsmall: { type: Boolean, default: !1 }
|
|
1835
|
+
},
|
|
1836
|
+
data() {
|
|
1837
|
+
return {
|
|
1838
|
+
ready: !1,
|
|
1839
|
+
// Is vue-cal ready.
|
|
1840
|
+
// Make texts reactive before a locale is loaded.
|
|
1841
|
+
texts: { ...Fe },
|
|
1842
|
+
utils: {
|
|
1843
|
+
// Remove prototypes ASAP if the user wants so.
|
|
1844
|
+
date: (this.disableDatePrototypes ? st.removePrototypes() : !1) || st,
|
|
1845
|
+
cell: null,
|
|
1846
|
+
// Note: Destructuring class method loses the `this` context and Vue Cal becomes inaccessible
|
|
1847
|
+
// from the event utils function. Don't do:
|
|
1848
|
+
// const { eventInRange, createEventSegments } = this.utils.event
|
|
1849
|
+
event: null
|
|
1850
|
+
},
|
|
1851
|
+
modules: { dnd: null },
|
|
1852
|
+
cellsEl: null,
|
|
1853
|
+
// At any time this object will be filled with current view, visible events and selected date.
|
|
1854
|
+
view: {
|
|
1855
|
+
id: "",
|
|
1856
|
+
title: "",
|
|
1857
|
+
startDate: null,
|
|
1858
|
+
endDate: null,
|
|
1859
|
+
firstCellDate: null,
|
|
1860
|
+
lastCellDate: null,
|
|
1861
|
+
selectedDate: null,
|
|
1862
|
+
// All the events are stored in the mutableEvents array, but subset of visible ones are passed
|
|
1863
|
+
// Into the current view for fast lookup and manipulation.
|
|
1864
|
+
events: []
|
|
1865
|
+
},
|
|
1866
|
+
eventIdIncrement: 1,
|
|
1867
|
+
// Internal unique id.
|
|
1868
|
+
// Preset at now date on load, but updated every minute if watchRealTime,
|
|
1869
|
+
// or updated at least on each cells rerender, in order to keep Today's date accurate.
|
|
1870
|
+
now: /* @__PURE__ */ new Date(),
|
|
1871
|
+
// Useful when watchRealTime = true, 2 timeouts: 1 to snap to round minutes, then 1 every minute.
|
|
1872
|
+
timeTickerIds: [null, null],
|
|
1873
|
+
// All the possible events/cells interractions:
|
|
1874
|
+
// e.g. focus, click, click & hold, resize, drag & drop (coming).
|
|
1875
|
+
domEvents: {
|
|
1876
|
+
resizeAnEvent: {
|
|
1877
|
+
_eid: null,
|
|
1878
|
+
// Only one at a time.
|
|
1879
|
+
start: null,
|
|
1880
|
+
split: null,
|
|
1881
|
+
segment: null,
|
|
1882
|
+
originalEndTimeMinutes: 0,
|
|
1883
|
+
originalEnd: null,
|
|
1884
|
+
end: null,
|
|
1885
|
+
startCell: null,
|
|
1886
|
+
endCell: null
|
|
1887
|
+
},
|
|
1888
|
+
dragAnEvent: {
|
|
1889
|
+
// Only one at a time, only needed for vuecal dragging-event class.
|
|
1890
|
+
_eid: null
|
|
1891
|
+
},
|
|
1892
|
+
dragCreateAnEvent: {
|
|
1893
|
+
startCursorY: null,
|
|
1894
|
+
start: null,
|
|
1895
|
+
// The cell date where we start the drag.
|
|
1896
|
+
split: null,
|
|
1897
|
+
event: null
|
|
1898
|
+
},
|
|
1899
|
+
focusAnEvent: {
|
|
1900
|
+
_eid: null,
|
|
1901
|
+
// Only one at a time.
|
|
1902
|
+
// Useful to detect a full click (mousedown + mouseup on same event).
|
|
1903
|
+
// E.g. Only call onEventClick function (if any) on full click.
|
|
1904
|
+
mousedUp: !1
|
|
1905
|
+
},
|
|
1906
|
+
clickHoldAnEvent: {
|
|
1907
|
+
_eid: null,
|
|
1908
|
+
// Only one at a time.
|
|
1909
|
+
timeout: 1200,
|
|
1910
|
+
// Hold for 1.2s to delete an event.
|
|
1911
|
+
timeoutId: null
|
|
1912
|
+
},
|
|
1913
|
+
dblTapACell: {
|
|
1914
|
+
taps: 0,
|
|
1915
|
+
timeout: 500
|
|
1916
|
+
// Allowed latency between first and second click.
|
|
1917
|
+
},
|
|
1918
|
+
clickHoldACell: {
|
|
1919
|
+
cellId: null,
|
|
1920
|
+
split: null,
|
|
1921
|
+
timeout: 1200,
|
|
1922
|
+
// Hold for 1.2s to create an event.
|
|
1923
|
+
timeoutId: null,
|
|
1924
|
+
eventCreated: !1
|
|
1925
|
+
},
|
|
1926
|
+
// A single click can trigger event creation if the user decides so.
|
|
1927
|
+
// But prevent this to happen on click & hold, on event click and on resize event.
|
|
1928
|
+
cancelClickEventCreation: !1
|
|
1929
|
+
},
|
|
1930
|
+
// The events source of truth.
|
|
1931
|
+
// An array of mutable events updated each time given external events array changes.
|
|
1932
|
+
mutableEvents: [],
|
|
1933
|
+
// Transition when switching view. left when going toward the past, right when going toward future.
|
|
1934
|
+
transitionDirection: "right"
|
|
1935
|
+
};
|
|
1936
|
+
},
|
|
1937
|
+
methods: {
|
|
1938
|
+
/**
|
|
1939
|
+
* Only import locale on demand to keep a small library weight.
|
|
1940
|
+
*
|
|
1941
|
+
* @param {String|Object} locale the language user whishes to have on vue-cal.
|
|
1942
|
+
*/
|
|
1943
|
+
async loadLocale(t) {
|
|
1944
|
+
if (typeof this.locale == "object") {
|
|
1945
|
+
this.texts = Object.assign({}, Fe, t), this.utils.date.updateTexts(this.texts);
|
|
1946
|
+
return;
|
|
1947
|
+
}
|
|
1948
|
+
const e = await jt(/* @__PURE__ */ Object.assign({ "./i18n/ar.json": () => import("./ar.es-XxSuE68c.mjs"), "./i18n/bg.json": () => import("./bg.es-BJ7fu6yy.mjs"), "./i18n/bn.json": () => import("./bn.es-CYlBkxc5.mjs"), "./i18n/bs.json": () => import("./bs.es-yMnaKmdi.mjs"), "./i18n/ca.json": () => import("./ca.es-DIhlxmQc.mjs"), "./i18n/cs.json": () => import("./cs.es-BN8oxRXQ.mjs"), "./i18n/da.json": () => import("./da.es-DJB5lAli.mjs"), "./i18n/de.json": () => import("./de.es-glb8GeJh.mjs"), "./i18n/el.json": () => import("./el.es-_bBZf22h.mjs"), "./i18n/en.json": () => import("./en.es-CV9nmQGr.mjs"), "./i18n/es.json": () => import("./es.es-CZjcWK54.mjs"), "./i18n/et.json": () => import("./et.es-CjvQAzNF.mjs"), "./i18n/fa.json": () => import("./fa.es-DykeFwDA.mjs"), "./i18n/fi.json": () => import("./fi.es-Bl7Pp7AO.mjs"), "./i18n/fr.json": () => import("./fr.es-CNKVhFfO.mjs"), "./i18n/he.json": () => import("./he.es-nF4GFhjH.mjs"), "./i18n/hr.json": () => import("./hr.es-QFfz660j.mjs"), "./i18n/hu.json": () => import("./hu.es-Ck2rE01V.mjs"), "./i18n/id.json": () => import("./id.es-Je7FEUJ5.mjs"), "./i18n/is.json": () => import("./is.es-bzprHvXI.mjs"), "./i18n/it.json": () => import("./it.es-CJtfqmNS.mjs"), "./i18n/ja.json": () => import("./ja.es-BaiGjqZ6.mjs"), "./i18n/ka.json": () => import("./ka.es-x9QJo_dl.mjs"), "./i18n/ko.json": () => import("./ko.es-6c447eTS.mjs"), "./i18n/lt.json": () => import("./lt.es-2twYdvmJ.mjs"), "./i18n/mn.json": () => import("./mn.es-BLQRG1uu.mjs"), "./i18n/nl.json": () => import("./nl.es-bB1qWR_S.mjs"), "./i18n/no.json": () => import("./no.es-CWDVXpTf.mjs"), "./i18n/pl.json": () => import("./pl.es-Dzct23w9.mjs"), "./i18n/pt-br.json": () => import("./pt-br.es-BeBuiitI.mjs"), "./i18n/pt-pt.json": () => import("./pt-pt.es-BeBuiitI.mjs"), "./i18n/ro.json": () => import("./ro.es-DfMVJ30M.mjs"), "./i18n/ru.json": () => import("./ru.es-Bv9UvrBe.mjs"), "./i18n/sk.json": () => import("./sk.es-CUOTpLuL.mjs"), "./i18n/sl.json": () => import("./sl.es-DeIGgZbR.mjs"), "./i18n/sq.json": () => import("./sq.es-CQJJrZHv.mjs"), "./i18n/sr.json": () => import("./sr.es-CKS0AkiW.mjs"), "./i18n/sv.json": () => import("./sv.es-ChHQRrAe.mjs"), "./i18n/tr.json": () => import("./tr.es-B3v90gVv.mjs"), "./i18n/uk.json": () => import("./uk.es-CiR4NnbN.mjs"), "./i18n/vi.json": () => import("./vi.es-DFDi5l7p.mjs"), "./i18n/zh-cn.json": () => import("./zh-cn.es-9cbEAuAi.mjs"), "./i18n/zh-hk.json": () => import("./zh-hk.es-z0tio4jE.mjs") }), `./i18n/${t}.json`, 3);
|
|
1949
|
+
this.texts = Object.assign({}, Fe, e), this.utils.date.updateTexts(this.texts);
|
|
1950
|
+
},
|
|
1951
|
+
/**
|
|
1952
|
+
* Only import drag and drop module on demand to keep a small library weight.
|
|
1953
|
+
*/
|
|
1954
|
+
loadDragAndDrop() {
|
|
1955
|
+
import("./drag-and-drop.es-Ckzp6XEn.mjs").then((t) => {
|
|
1956
|
+
const { DragAndDrop: e } = t;
|
|
1957
|
+
this.modules.dnd = new e(this);
|
|
1958
|
+
}).catch(() => console.warn("Vue Cal: Missing drag & drop module."));
|
|
1959
|
+
},
|
|
1960
|
+
/**
|
|
1961
|
+
* Checks that the given view is in the array of valid views or use 'week' otherwise.
|
|
1962
|
+
* Then check the view is enabled or use the first enabled view instead.
|
|
1963
|
+
* Raises error and warning if needed.
|
|
1964
|
+
*
|
|
1965
|
+
* @param {String} view The view to validate.
|
|
1966
|
+
* @return {String} a valid view.
|
|
1967
|
+
*/
|
|
1968
|
+
validateView(t) {
|
|
1969
|
+
return it.includes(t) || (console.error(`Vue Cal: invalid active-view parameter provided: "${t}".
|
|
1970
|
+
A valid view must be one of: ${it.join(", ")}.`), t = "week"), this.enabledViews.includes(t) || (console.warn(`Vue Cal: the provided active-view "${t}" is disabled. Using the "${this.enabledViews[0]}" view instead.`), t = this.enabledViews[0]), t;
|
|
1971
|
+
},
|
|
1972
|
+
/**
|
|
1973
|
+
* On click/dblclick of a cell go to a narrower view if available.
|
|
1974
|
+
* E.g. Click on month cell takes you to week view if not hidden, otherwise on day view if not hidden.
|
|
1975
|
+
*
|
|
1976
|
+
* @param {String | Date} date A starting date for the view, if none, fallbacks to the selected date,
|
|
1977
|
+
* If also empty fallbacks to the current view start date.
|
|
1978
|
+
*/
|
|
1979
|
+
switchToNarrowerView(t = null) {
|
|
1980
|
+
this.transitionDirection = "right";
|
|
1981
|
+
const e = this.enabledViews[this.enabledViews.indexOf(this.view.id) + 1];
|
|
1982
|
+
e && this.switchView(e, t);
|
|
1983
|
+
},
|
|
1984
|
+
/**
|
|
1985
|
+
* Switches to the specified view on view selector click, or programmatically form external call (via $refs).
|
|
1986
|
+
* If a date is given, it will be selected and if the view does not contain it, it will go to that date.
|
|
1987
|
+
*
|
|
1988
|
+
* @param {String} view the view to go to. Among `years`, `year`, `month`, `week`, `day`.
|
|
1989
|
+
* @param {String | Date} date A starting date for the view, if none, fallbacks to the selected date,
|
|
1990
|
+
* If also empty fallbacks to the current view start date.
|
|
1991
|
+
* @param {Boolean} fromViewSelector to know if the caller is the built-in view selector.
|
|
1992
|
+
*/
|
|
1993
|
+
switchView(t, e = null, s = !1) {
|
|
1994
|
+
t = this.validateView(t);
|
|
1995
|
+
const l = this.utils.date, r = this.view.startDate && this.view.startDate.getTime();
|
|
1996
|
+
if (this.transitions && s) {
|
|
1997
|
+
if (this.view.id === t) return;
|
|
1998
|
+
const n = this.enabledViews;
|
|
1999
|
+
this.transitionDirection = n.indexOf(this.view.id) > n.indexOf(t) ? "left" : "right";
|
|
2000
|
+
}
|
|
2001
|
+
const i = this.view.id;
|
|
2002
|
+
switch (this.view.events = [], this.view.id = t, this.view.firstCellDate = null, this.view.lastCellDate = null, e || (e = this.view.selectedDate || this.view.startDate), t) {
|
|
2003
|
+
case "years": {
|
|
2004
|
+
this.view.startDate = new Date(Math.floor(e.getFullYear() / 25) * 25 || 2e3, 0, 1), this.view.endDate = new Date(this.view.startDate.getFullYear() + 25, 0, 1), this.view.endDate.setSeconds(-1);
|
|
2005
|
+
break;
|
|
2006
|
+
}
|
|
2007
|
+
case "year": {
|
|
2008
|
+
this.view.startDate = new Date(e.getFullYear(), 0, 1), this.view.endDate = new Date(e.getFullYear() + 1, 0, 1), this.view.endDate.setSeconds(-1);
|
|
2009
|
+
break;
|
|
2010
|
+
}
|
|
2011
|
+
case "month": {
|
|
2012
|
+
this.view.startDate = new Date(e.getFullYear(), e.getMonth(), 1), this.view.endDate = new Date(e.getFullYear(), e.getMonth() + 1, 1), this.view.endDate.setSeconds(-1);
|
|
2013
|
+
let n = new Date(this.view.startDate);
|
|
2014
|
+
if (n.getDay() !== (this.startWeekOnSunday ? 0 : 1) && (n = l.getPreviousFirstDayOfWeek(n, this.startWeekOnSunday)), this.view.firstCellDate = n, this.view.lastCellDate = l.addDays(n, 41), this.view.lastCellDate.setHours(23, 59, 59, 0), this.hideWeekends) {
|
|
2015
|
+
if ([0, 6].includes(this.view.firstCellDate.getDay())) {
|
|
2016
|
+
const h = this.view.firstCellDate.getDay() === 6 && !this.startWeekOnSunday ? 2 : 1;
|
|
2017
|
+
this.view.firstCellDate = l.addDays(this.view.firstCellDate, h);
|
|
2018
|
+
}
|
|
2019
|
+
if ([0, 6].includes(this.view.startDate.getDay())) {
|
|
2020
|
+
const h = this.view.startDate.getDay() === 6 ? 2 : 1;
|
|
2021
|
+
this.view.startDate = l.addDays(this.view.startDate, h);
|
|
2022
|
+
}
|
|
2023
|
+
if ([0, 6].includes(this.view.lastCellDate.getDay())) {
|
|
2024
|
+
const h = this.view.lastCellDate.getDay() === 0 && !this.startWeekOnSunday ? 2 : 1;
|
|
2025
|
+
this.view.lastCellDate = l.subtractDays(this.view.lastCellDate, h);
|
|
2026
|
+
}
|
|
2027
|
+
if ([0, 6].includes(this.view.endDate.getDay())) {
|
|
2028
|
+
const h = this.view.endDate.getDay() === 0 ? 2 : 1;
|
|
2029
|
+
this.view.endDate = l.subtractDays(this.view.endDate, h);
|
|
2030
|
+
}
|
|
2031
|
+
}
|
|
2032
|
+
break;
|
|
2033
|
+
}
|
|
2034
|
+
case "week": {
|
|
2035
|
+
e = l.getPreviousFirstDayOfWeek(e, this.startWeekOnSunday);
|
|
2036
|
+
const n = this.hideWeekends ? 5 : 7;
|
|
2037
|
+
this.view.startDate = this.hideWeekends && this.startWeekOnSunday ? l.addDays(e, 1) : e, this.view.startDate.setHours(0, 0, 0, 0), this.view.endDate = l.addDays(e, n), this.view.endDate.setSeconds(-1);
|
|
2038
|
+
break;
|
|
2039
|
+
}
|
|
2040
|
+
case "day": {
|
|
2041
|
+
this.view.startDate = e, this.view.startDate.setHours(0, 0, 0, 0), this.view.endDate = new Date(e), this.view.endDate.setHours(23, 59, 59, 0);
|
|
2042
|
+
break;
|
|
2043
|
+
}
|
|
2044
|
+
}
|
|
2045
|
+
this.addEventsToView();
|
|
2046
|
+
const o = this.view.startDate && this.view.startDate.getTime();
|
|
2047
|
+
if (!(i === t && o === r) && (this.$emit("update:activeView", t), this.ready)) {
|
|
2048
|
+
const n = this.view.startDate, h = {
|
|
2049
|
+
view: t,
|
|
2050
|
+
startDate: n,
|
|
2051
|
+
endDate: this.view.endDate,
|
|
2052
|
+
...this.isMonthView ? {
|
|
2053
|
+
firstCellDate: this.view.firstCellDate,
|
|
2054
|
+
lastCellDate: this.view.lastCellDate,
|
|
2055
|
+
outOfScopeEvents: this.view.outOfScopeEvents.map(this.cleanupEvent)
|
|
2056
|
+
} : {},
|
|
2057
|
+
events: this.view.events.map(this.cleanupEvent),
|
|
2058
|
+
...this.isWeekView ? { week: l.getWeek(this.startWeekOnSunday ? l.addDays(n, 1) : n) } : {}
|
|
2059
|
+
};
|
|
2060
|
+
this.$emit("view-change", h);
|
|
2061
|
+
}
|
|
2062
|
+
},
|
|
2063
|
+
/**
|
|
2064
|
+
* Shorthand function for external call (via $refs).
|
|
2065
|
+
*/
|
|
2066
|
+
previous() {
|
|
2067
|
+
this.previousNext(!1);
|
|
2068
|
+
},
|
|
2069
|
+
/**
|
|
2070
|
+
* Shorthand function for external call (via $refs).
|
|
2071
|
+
*/
|
|
2072
|
+
next() {
|
|
2073
|
+
this.previousNext();
|
|
2074
|
+
},
|
|
2075
|
+
/**
|
|
2076
|
+
* On click on previous or next arrow, update the calendar visible date range.
|
|
2077
|
+
*
|
|
2078
|
+
* @param {Boolean} next
|
|
2079
|
+
*/
|
|
2080
|
+
previousNext(t = !0) {
|
|
2081
|
+
const e = this.utils.date;
|
|
2082
|
+
this.transitionDirection = t ? "right" : "left";
|
|
2083
|
+
const s = t ? 1 : -1;
|
|
2084
|
+
let l = null;
|
|
2085
|
+
const { startDate: r, id: i } = this.view;
|
|
2086
|
+
switch (i) {
|
|
2087
|
+
case "years":
|
|
2088
|
+
l = new Date(r.getFullYear() + 25 * s, 0, 1);
|
|
2089
|
+
break;
|
|
2090
|
+
case "year":
|
|
2091
|
+
l = new Date(r.getFullYear() + 1 * s, 1, 1);
|
|
2092
|
+
break;
|
|
2093
|
+
case "month":
|
|
2094
|
+
l = new Date(r.getFullYear(), r.getMonth() + 1 * s, 1);
|
|
2095
|
+
break;
|
|
2096
|
+
case "week":
|
|
2097
|
+
l = e[t ? "addDays" : "subtractDays"](e.getPreviousFirstDayOfWeek(r, this.startWeekOnSunday), 7);
|
|
2098
|
+
break;
|
|
2099
|
+
case "day":
|
|
2100
|
+
l = e[t ? "addDays" : "subtractDays"](r, 1);
|
|
2101
|
+
const o = l.getDay(), n = this.startWeekOnSunday ? o : (o || 7) - 1;
|
|
2102
|
+
if (this.weekDays[n].hide) {
|
|
2103
|
+
const d = this.weekDays.map((y, w) => ({ ...y, i: w }));
|
|
2104
|
+
let c = 0;
|
|
2105
|
+
t ? ([...d.slice(n), ...d].find((y) => (c++, !y.hide)).i, c--) : [...d, ...d.slice(0, n)].reverse().find((y) => (c++, !y.hide)).i, l = e[t ? "addDays" : "subtractDays"](l, c);
|
|
2106
|
+
}
|
|
2107
|
+
break;
|
|
2108
|
+
}
|
|
2109
|
+
l && this.switchView(i, l);
|
|
2110
|
+
},
|
|
2111
|
+
/**
|
|
2112
|
+
* Add events (subset from mutableEvents) to the current view (in `this.view.events`).
|
|
2113
|
+
* This is done for performance, so that all the cells have a quick lookup of only what's needed.
|
|
2114
|
+
*
|
|
2115
|
+
* @param {Array} events
|
|
2116
|
+
*/
|
|
2117
|
+
addEventsToView(t = []) {
|
|
2118
|
+
const e = this.utils.event, { startDate: s, endDate: l, firstCellDate: r, lastCellDate: i } = this.view;
|
|
2119
|
+
if (t.length || (this.view.events = []), t = t.length ? t : [...this.mutableEvents], !t || this.isYearsOrYearView && !this.eventsCountOnYearView) return;
|
|
2120
|
+
let o = t.filter((n) => e.eventInRange(n, s, l));
|
|
2121
|
+
!this.isYearsOrYearView && !(this.isMonthView && !this.eventsOnMonthView) && (o = o.map((n) => n.daysCount > 1 ? e.createEventSegments(n, r || s, i || l) : n)), this.view.events.push(...o), this.isMonthView && (this.view.outOfScopeEvents = [], t.forEach((n) => {
|
|
2122
|
+
(e.eventInRange(n, r, s) || e.eventInRange(n, l, i)) && (this.view.events.some((h) => h._eid === n._eid) || this.view.outOfScopeEvents.push(n));
|
|
2123
|
+
}));
|
|
2124
|
+
},
|
|
2125
|
+
/**
|
|
2126
|
+
* find a DOM ancestor of a given DOM node `el` matching given class name.
|
|
2127
|
+
*
|
|
2128
|
+
* @param {Object} el a DOM node to find ancestor from.
|
|
2129
|
+
* @param {String} Class the CSS class name of the ancestor.
|
|
2130
|
+
* @return {Object} The matched DOM node or null if no match.
|
|
2131
|
+
*/
|
|
2132
|
+
findAncestor(t, e) {
|
|
2133
|
+
for (; (t = t.parentElement) && !t.classList.contains(e); )
|
|
2134
|
+
;
|
|
2135
|
+
return t;
|
|
2136
|
+
},
|
|
2137
|
+
/**
|
|
2138
|
+
* Tells whether a clicked DOM node is or is within a calendar event.
|
|
2139
|
+
*
|
|
2140
|
+
* @param {Object} el a DOM node to check if event.
|
|
2141
|
+
* @return {Boolean} true if the given DOM node is - or is in - an event.
|
|
2142
|
+
*/
|
|
2143
|
+
isDOMElementAnEvent(t) {
|
|
2144
|
+
return t.classList.contains("vuecal__event") || this.findAncestor(t, "vuecal__event");
|
|
2145
|
+
},
|
|
2146
|
+
/**
|
|
2147
|
+
* Capture mousemove anywhere in the page.
|
|
2148
|
+
* If resizing an event was started earlier, this will update event end.
|
|
2149
|
+
* If resizing was not started, this method is calculation is avoided with a premature return.
|
|
2150
|
+
* Notes: Event resizing is started in cell component (onMouseDown) but place onMouseMove & onMouseUp
|
|
2151
|
+
* handlers in the single-instance parent for performance.
|
|
2152
|
+
*
|
|
2153
|
+
* @param {Object} e the native DOM event object.
|
|
2154
|
+
*/
|
|
2155
|
+
onMouseMove(t) {
|
|
2156
|
+
const { resizeAnEvent: e, dragAnEvent: s, dragCreateAnEvent: l } = this.domEvents;
|
|
2157
|
+
e._eid === null && s._eid === null && !l.start || (t.preventDefault(), e._eid ? this.eventResizing(t) : this.dragToCreateEvent && l.start && this.eventDragCreation(t));
|
|
2158
|
+
},
|
|
2159
|
+
/**
|
|
2160
|
+
* Capture mouseup anywhere in the page, not only on a cell or event.
|
|
2161
|
+
* Then end up any resize, drag & drop, click & hold or event or cell.
|
|
2162
|
+
* Notes: Mouseup can never cancel a click with preventDefault or stopPropagation,
|
|
2163
|
+
* But it always happens before the click event.
|
|
2164
|
+
*
|
|
2165
|
+
* @param {Object} e the native DOM event object.
|
|
2166
|
+
*/
|
|
2167
|
+
onMouseUp(t) {
|
|
2168
|
+
const {
|
|
2169
|
+
focusAnEvent: e,
|
|
2170
|
+
resizeAnEvent: s,
|
|
2171
|
+
clickHoldAnEvent: l,
|
|
2172
|
+
clickHoldACell: r,
|
|
2173
|
+
dragCreateAnEvent: i
|
|
2174
|
+
} = this.domEvents, { _eid: o } = l, { _eid: n } = s;
|
|
2175
|
+
let h = !1;
|
|
2176
|
+
const { event: d, start: c } = i, y = this.isDOMElementAnEvent(t.target), w = e.mousedUp;
|
|
2177
|
+
if (e.mousedUp = !1, y && (this.domEvents.cancelClickEventCreation = !0), r.eventCreated) return;
|
|
2178
|
+
if (n) {
|
|
2179
|
+
const { originalEnd: g, originalEndTimeMinutes: Y, endTimeMinutes: j } = s, _ = this.view.events.find((B) => B._eid === s._eid);
|
|
2180
|
+
if (h = j && j !== Y, _ && _.end.getTime() !== g.getTime()) {
|
|
2181
|
+
const B = this.mutableEvents.find((Q) => Q._eid === s._eid);
|
|
2182
|
+
B.endTimeMinutes = _.endTimeMinutes, B.end = _.end;
|
|
2183
|
+
const O = this.cleanupEvent(_), q = {
|
|
2184
|
+
...this.cleanupEvent(_),
|
|
2185
|
+
end: g,
|
|
2186
|
+
endTimeMinutes: _.originalEndTimeMinutes
|
|
2187
|
+
};
|
|
2188
|
+
this.$emit("event-duration-change", { event: O, oldDate: s.originalEnd, originalEvent: q }), this.$emit("event-change", { event: O, originalEvent: q });
|
|
2189
|
+
}
|
|
2190
|
+
_ && (_.resizing = !1), s._eid = null, s.start = null, s.split = null, s.segment = null, s.originalEndTimeMinutes = null, s.originalEnd = null, s.endTimeMinutes = null, s.startCell = null, s.endCell = null;
|
|
2191
|
+
} else c && (d && (this.emitWithEvent("event-drag-create", d), i.event.resizing = !1), i.start = null, i.split = null, i.event = null);
|
|
2192
|
+
!y && !n && this.unfocusEvent(), l.timeoutId && !o && (clearTimeout(l.timeoutId), l.timeoutId = null), r.timeoutId && (clearTimeout(r.timeoutId), r.timeoutId = null);
|
|
2193
|
+
const A = typeof this.onEventClick == "function";
|
|
2194
|
+
if (w && !h && !o && !d && A) {
|
|
2195
|
+
let g = this.view.events.find((Y) => Y._eid === e._eid);
|
|
2196
|
+
return !g && this.isMonthView && (g = this.view.outOfScopeEvents.find((Y) => Y._eid === e._eid)), g && this.onEventClick(g, t);
|
|
2197
|
+
}
|
|
2198
|
+
},
|
|
2199
|
+
/**
|
|
2200
|
+
* Capture `escape` keypress when delete button is visible, and cancel deletion.
|
|
2201
|
+
*
|
|
2202
|
+
* @param {Object} e the native DOM event object.
|
|
2203
|
+
*/
|
|
2204
|
+
onKeyUp(t) {
|
|
2205
|
+
t.keyCode === 27 && this.cancelDelete();
|
|
2206
|
+
},
|
|
2207
|
+
/**
|
|
2208
|
+
* On mousemove while resising an event.
|
|
2209
|
+
*
|
|
2210
|
+
* @param {Object} e the native DOM event object.
|
|
2211
|
+
*/
|
|
2212
|
+
eventResizing(t) {
|
|
2213
|
+
const { resizeAnEvent: e } = this.domEvents, s = this.view.events.find((d) => d._eid === e._eid) || { segments: {} }, { minutes: l, cursorCoords: r } = this.minutesAtCursor(t), i = s.segments && s.segments[e.segment], { date: o, event: n } = this.utils, h = Math.max(l, this.timeFrom + 1, (i || s).startTimeMinutes + 1);
|
|
2214
|
+
if (s.endTimeMinutes = e.endTimeMinutes = h, this.snapToTime) {
|
|
2215
|
+
const d = s.endTimeMinutes + this.snapToTime / 2;
|
|
2216
|
+
s.endTimeMinutes = d - d % this.snapToTime;
|
|
2217
|
+
}
|
|
2218
|
+
if (i && (i.endTimeMinutes = s.endTimeMinutes), s.end.setHours(0, s.endTimeMinutes, s.endTimeMinutes === Oe ? -1 : 0, 0), this.resizeX && this.isWeekView) {
|
|
2219
|
+
s.daysCount = o.countDays(s.start, s.end);
|
|
2220
|
+
const d = this.cellsEl, c = d.offsetWidth / d.childElementCount, y = Math.floor(r.x / c);
|
|
2221
|
+
if (e.startCell === null && (e.startCell = y - (s.daysCount - 1)), e.endCell !== y) {
|
|
2222
|
+
e.endCell = y;
|
|
2223
|
+
const w = o.addDays(s.start, y - e.startCell), A = Math.max(o.countDays(s.start, w), 1);
|
|
2224
|
+
if (A !== s.daysCount) {
|
|
2225
|
+
let g = null;
|
|
2226
|
+
A > s.daysCount ? g = n.addEventSegment(s) : g = n.removeEventSegment(s), e.segment = g, s.endTimeMinutes += 1e-3;
|
|
2227
|
+
}
|
|
2228
|
+
}
|
|
2229
|
+
}
|
|
2230
|
+
this.$emit("event-resizing", { _eid: s._eid, end: s.end, endTimeMinutes: s.endTimeMinutes });
|
|
2231
|
+
},
|
|
2232
|
+
/**
|
|
2233
|
+
* On mousemove while dragging to create an event.
|
|
2234
|
+
*
|
|
2235
|
+
* @param {Object} e the native DOM event object.
|
|
2236
|
+
*/
|
|
2237
|
+
eventDragCreation(t) {
|
|
2238
|
+
const { dragCreateAnEvent: e } = this.domEvents, { start: s, startCursorY: l, split: r } = e, i = new Date(s), { minutes: o, cursorCoords: { y: n } } = this.minutesAtCursor(t);
|
|
2239
|
+
if (!(!e.event && Math.abs(l - n) < this.dragToCreateThreshold))
|
|
2240
|
+
if (e.event) {
|
|
2241
|
+
if (i.setHours(0, o, o === Oe ? -1 : 0, 0), this.snapToTime) {
|
|
2242
|
+
let c = i.getHours() * 60 + i.getMinutes();
|
|
2243
|
+
const y = c + this.snapToTime / 2;
|
|
2244
|
+
c = y - y % this.snapToTime, i.setHours(0, c, 0, 0);
|
|
2245
|
+
}
|
|
2246
|
+
const h = s < i, { event: d } = e;
|
|
2247
|
+
d.start = h ? s : i, d.end = h ? i : s, d.startTimeMinutes = d.start.getHours() * 60 + d.start.getMinutes(), d.endTimeMinutes = d.end.getHours() * 60 + d.end.getMinutes();
|
|
2248
|
+
} else {
|
|
2249
|
+
if (e.event = this.utils.event.createAnEvent(s, 1, { split: r }), !e.event) {
|
|
2250
|
+
e.start = null, e.split = null, e.event = null;
|
|
2251
|
+
return;
|
|
2252
|
+
}
|
|
2253
|
+
e.event.resizing = !0;
|
|
2254
|
+
}
|
|
2255
|
+
},
|
|
2256
|
+
/**
|
|
2257
|
+
* Unfocus an event (e.g. when clicking outside of focused event).
|
|
2258
|
+
*/
|
|
2259
|
+
unfocusEvent() {
|
|
2260
|
+
const { focusAnEvent: t, clickHoldAnEvent: e } = this.domEvents, s = this.view.events.find((l) => l._eid === (t._eid || e._eid));
|
|
2261
|
+
t._eid = null, e._eid = null, s && (s.focused = !1, s.deleting = !1);
|
|
2262
|
+
},
|
|
2263
|
+
/**
|
|
2264
|
+
* Cancel an event deletion (e.g. when clicking outside of visible delete button).
|
|
2265
|
+
*/
|
|
2266
|
+
cancelDelete() {
|
|
2267
|
+
const { clickHoldAnEvent: t } = this.domEvents;
|
|
2268
|
+
if (t._eid) {
|
|
2269
|
+
const e = this.view.events.find((s) => s._eid === t._eid);
|
|
2270
|
+
e && (e.deleting = !1), t._eid = null, t.timeoutId = null;
|
|
2271
|
+
}
|
|
2272
|
+
},
|
|
2273
|
+
/**
|
|
2274
|
+
* After editing an event title (if `this.editable`), save the new string into the event object
|
|
2275
|
+
* and emit event to the outside world.
|
|
2276
|
+
*
|
|
2277
|
+
* @param {Object} e the native DOM event object.
|
|
2278
|
+
* @param {Object} event the vue-cal event object.
|
|
2279
|
+
*/
|
|
2280
|
+
onEventTitleBlur(t, e) {
|
|
2281
|
+
if (e.title === t.target.innerHTML) return;
|
|
2282
|
+
const s = e.title;
|
|
2283
|
+
e.title = t.target.innerHTML;
|
|
2284
|
+
const l = this.cleanupEvent(e);
|
|
2285
|
+
this.$emit("event-title-change", { event: l, oldTitle: s }), this.$emit("event-change", { event: l, originalEvent: { ...l, title: s } });
|
|
2286
|
+
},
|
|
2287
|
+
/**
|
|
2288
|
+
* The `mutableEvents` array of events is the source of truth.
|
|
2289
|
+
* It is first populated from the `events` prop and every time the `events` prop changes.
|
|
2290
|
+
* When the user updates an event through interractions, the event gets updated here.
|
|
2291
|
+
* Notes: mutableEvents couldn't be a computed variable based on this.events, because we add
|
|
2292
|
+
* items to the array. (Cannot mutate props)
|
|
2293
|
+
*/
|
|
2294
|
+
updateMutableEvents() {
|
|
2295
|
+
const t = this.utils.date;
|
|
2296
|
+
this.mutableEvents = [], this.events.forEach((e) => {
|
|
2297
|
+
const s = typeof e.start == "string" ? t.stringToDate(e.start) : e.start, l = t.formatDateLite(s), r = t.dateToMinutes(s);
|
|
2298
|
+
let i = null;
|
|
2299
|
+
typeof e.end == "string" && e.end.includes("24:00") ? (i = new Date(e.end.replace(" 24:00", "")), i.setHours(23, 59, 59, 0)) : i = typeof e.end == "string" ? t.stringToDate(e.end) : e.end;
|
|
2300
|
+
let o = t.formatDateLite(i), n = t.dateToMinutes(i);
|
|
2301
|
+
(!n || n === Oe) && (!this.time || typeof e.end == "string" && e.end.length === 10 ? i.setHours(23, 59, 59, 0) : i.setSeconds(i.getSeconds() - 1), o = t.formatDateLite(i), n = Oe);
|
|
2302
|
+
const h = l !== o;
|
|
2303
|
+
e = Object.assign({ ...this.utils.event.eventDefaults }, e, {
|
|
2304
|
+
// Keep the event ids scoped to this calendar instance.
|
|
2305
|
+
_eid: `${this._.uid}_${this.eventIdIncrement++}`,
|
|
2306
|
+
segments: h ? {} : null,
|
|
2307
|
+
start: s,
|
|
2308
|
+
startTimeMinutes: r,
|
|
2309
|
+
end: i,
|
|
2310
|
+
endTimeMinutes: n,
|
|
2311
|
+
daysCount: h ? t.countDays(s, i) : 1,
|
|
2312
|
+
class: e.class
|
|
2313
|
+
}), this.mutableEvents.push(e);
|
|
2314
|
+
});
|
|
2315
|
+
},
|
|
2316
|
+
/**
|
|
2317
|
+
* Get the number of minutes from the top to the mouse cursor.
|
|
2318
|
+
*
|
|
2319
|
+
* @param {Object} e the native DOM event object.
|
|
2320
|
+
* @return {Object} containing { minutes: {Number}, cursorCoords: { x: {Number}, y: {Number} } }
|
|
2321
|
+
*/
|
|
2322
|
+
minutesAtCursor(t) {
|
|
2323
|
+
return this.utils.cell.minutesAtCursor(t);
|
|
2324
|
+
},
|
|
2325
|
+
/**
|
|
2326
|
+
* Creates a new event in vue-cal memory (in the mutableEvents array) starting at the given date & time.
|
|
2327
|
+
* Proxy method to allow call from cell click & hold or external call (via $refs).
|
|
2328
|
+
* Notes: Event duration is by default 2 hours. You can override the event end through eventOptions.
|
|
2329
|
+
*
|
|
2330
|
+
* @param {String | Date} dateTime date & time at which the event will start.
|
|
2331
|
+
* @param {Number} duration the event duration in minutes.
|
|
2332
|
+
* @param {Object} eventOptions an object of options to override the event creation defaults.
|
|
2333
|
+
* (can be any key allowed in an event object)
|
|
2334
|
+
* @return {Object} the created event.
|
|
2335
|
+
*/
|
|
2336
|
+
createEvent(t, e, s = {}) {
|
|
2337
|
+
return this.utils.event.createAnEvent(t, e, s);
|
|
2338
|
+
},
|
|
2339
|
+
/**
|
|
2340
|
+
* Remove all the vue-cal private vars from the event (before returning it through $emit()).
|
|
2341
|
+
*
|
|
2342
|
+
* @param {Object} event the event object to cleanup.
|
|
2343
|
+
*/
|
|
2344
|
+
cleanupEvent(t) {
|
|
2345
|
+
return t = { ...t }, [
|
|
2346
|
+
"segments",
|
|
2347
|
+
"deletable",
|
|
2348
|
+
"deleting",
|
|
2349
|
+
"titleEditable",
|
|
2350
|
+
"resizable",
|
|
2351
|
+
"resizing",
|
|
2352
|
+
"draggable",
|
|
2353
|
+
"dragging",
|
|
2354
|
+
"draggingStatic",
|
|
2355
|
+
"focused"
|
|
2356
|
+
].forEach((s) => {
|
|
2357
|
+
s in t && delete t[s];
|
|
2358
|
+
}), t.repeat || delete t.repeat, t;
|
|
2359
|
+
},
|
|
2360
|
+
/**
|
|
2361
|
+
* Emits an event (custom DOM event) to the outside world.
|
|
2362
|
+
* This event has an event name and a clean calendar event as a parameter.
|
|
2363
|
+
*
|
|
2364
|
+
* @param {String} eventName the name of the custom emitted event (e.g. `event-focus`).
|
|
2365
|
+
* @param {Object} event the event to return to the outside world.
|
|
2366
|
+
*/
|
|
2367
|
+
emitWithEvent(t, e) {
|
|
2368
|
+
this.$emit(t, this.cleanupEvent(e));
|
|
2369
|
+
},
|
|
2370
|
+
/**
|
|
2371
|
+
* Update the selected date:
|
|
2372
|
+
* - on created, from given selectedDate prop
|
|
2373
|
+
* - on click/dblClick of another cell
|
|
2374
|
+
* - from external call (via $refs)
|
|
2375
|
+
* - when the given selectedDate prop changes.
|
|
2376
|
+
* If date is not in the view, the view will change to show it.
|
|
2377
|
+
*
|
|
2378
|
+
* @param {String | Date} date The date to select.
|
|
2379
|
+
*/
|
|
2380
|
+
updateSelectedDate(t) {
|
|
2381
|
+
if (t && typeof t == "string" ? t = this.utils.date.stringToDate(t) : t = new Date(t), t && t instanceof Date) {
|
|
2382
|
+
const { selectedDate: e } = this.view;
|
|
2383
|
+
e && (this.transitionDirection = e.getTime() > t.getTime() ? "left" : "right"), t.setHours(0, 0, 0, 0), (!e || e.getTime() !== t.getTime()) && (this.view.selectedDate = t), this.switchView(this.view.id);
|
|
2384
|
+
}
|
|
2385
|
+
this.$emit("update:selected-date", this.view.selectedDate);
|
|
2386
|
+
},
|
|
2387
|
+
/**
|
|
2388
|
+
* Double checks the week number is correct. Read below to understand!
|
|
2389
|
+
* this is a wrapper around the `getWeek()` function for performance:
|
|
2390
|
+
* As this is called multiple times from the template and cannot be in computed since there is
|
|
2391
|
+
* a parameter, this wrapper function avoids the `getWeek()` function call 5 times out of 6
|
|
2392
|
+
* using the computed `firstCellDateWeekNumber`.
|
|
2393
|
+
*
|
|
2394
|
+
* Reason why:
|
|
2395
|
+
* Getting the week number is not that straightforward as there might be a 53rd week in the year.
|
|
2396
|
+
* Whenever the year starts on a Thursday or any leap year starting on a Wednesday, this week will be 53.
|
|
2397
|
+
*
|
|
2398
|
+
* @param {Number} weekFromFirstCell Number from 0 to 6.
|
|
2399
|
+
*/
|
|
2400
|
+
getWeekNumber(t) {
|
|
2401
|
+
const e = this.utils.date, l = this.firstCellDateWeekNumber + t, r = this.startWeekOnSunday ? 1 : 0;
|
|
2402
|
+
return l > 52 ? e.getWeek(e.addDays(this.view.firstCellDate, 7 * t + r)) : l;
|
|
2403
|
+
},
|
|
2404
|
+
/**
|
|
2405
|
+
* Only if watchRealTime is true.
|
|
2406
|
+
* Pull the current time from user machine every minute to keep vue-cal accurate even when idle.
|
|
2407
|
+
* This will redraw the now line every minute and ensure that Today's date is always accurate.
|
|
2408
|
+
*/
|
|
2409
|
+
timeTick() {
|
|
2410
|
+
this.now = /* @__PURE__ */ new Date(), this.timeTickerIds[1] = setTimeout(this.timeTick, 60 * 1e3);
|
|
2411
|
+
},
|
|
2412
|
+
/**
|
|
2413
|
+
* Updates the localized texts in use in the Date prototypes. (E.g. new Date().format())
|
|
2414
|
+
* Callable from outside of Vue Cal.
|
|
2415
|
+
*/
|
|
2416
|
+
updateDateTexts() {
|
|
2417
|
+
this.utils.date.updateTexts(this.texts);
|
|
2418
|
+
},
|
|
2419
|
+
/**
|
|
2420
|
+
* On Windows devices, the .vuecal__bg's vertical scrollbar takes space and pushes the content.
|
|
2421
|
+
* This function will also push the weekdays-headings and all-day bar to have them properly aligned.
|
|
2422
|
+
* The calculated style will be placed in the document head in a style tag so it's only done once
|
|
2423
|
+
* (the scrollbar width never changes).
|
|
2424
|
+
* Ref. https://github.com/antoniandre/vue-cal-v4/issues/221
|
|
2425
|
+
*/
|
|
2426
|
+
alignWithScrollbar() {
|
|
2427
|
+
if (document.getElementById("vuecal-align-with-scrollbar")) return;
|
|
2428
|
+
const t = this.$refs.vuecal.getElementsByClassName("vuecal__scrollbar-check")[0], e = t.offsetWidth - t.children[0].offsetWidth;
|
|
2429
|
+
if (e) {
|
|
2430
|
+
const s = document.createElement("style");
|
|
2431
|
+
s.id = "vuecal-align-with-scrollbar", s.type = "text/css", s.innerHTML = `.vuecal--view-with-time .vuecal__weekdays-headings,.vuecal--view-with-time .vuecal__all-day {padding-right: ${e}px}`, document.head.appendChild(s);
|
|
2432
|
+
}
|
|
2433
|
+
},
|
|
2434
|
+
/**
|
|
2435
|
+
* Tells wether there are events in the given cell or split and returns a Boolean.
|
|
2436
|
+
* This function simplifies the template.
|
|
2437
|
+
*
|
|
2438
|
+
* @param {Array} events The cell events.
|
|
2439
|
+
* @param {Object|Boolean} split The current split object if any or false.
|
|
2440
|
+
* @return {Boolean} true if there are events, false otherwise.
|
|
2441
|
+
*/
|
|
2442
|
+
cellOrSplitHasEvents(t, e = null) {
|
|
2443
|
+
return t.length && (!e && t.length || e && t.some((s) => s.split === e.id));
|
|
2444
|
+
}
|
|
2445
|
+
},
|
|
2446
|
+
created() {
|
|
2447
|
+
this.utils.cell = new Yt(this), this.utils.event = new Bt(this, this.utils.date), this.loadLocale(this.locale), this.editEvents.drag && this.loadDragAndDrop(), this.updateMutableEvents(this.events), this.view.id = this.currentView, this.selectedDate ? this.updateSelectedDate(this.selectedDate) : (this.view.selectedDate = /* @__PURE__ */ new Date(), this.switchView(this.currentView)), this.time && this.watchRealTime && (this.timeTickerIds[0] = setTimeout(this.timeTick, (60 - this.now.getSeconds()) * 1e3));
|
|
2448
|
+
},
|
|
2449
|
+
mounted() {
|
|
2450
|
+
const t = this.utils.date, e = "ontouchstart" in window, { resize: s, drag: l, create: r, delete: i, title: o } = this.editEvents, n = this.onEventClick && typeof this.onEventClick == "function";
|
|
2451
|
+
(s || l || r || i || o || n) && window.addEventListener(e ? "touchend" : "mouseup", this.onMouseUp), (s || l || r && this.dragToCreateEvent) && window.addEventListener(e ? "touchmove" : "mousemove", this.onMouseMove, { passive: !1 }), o && window.addEventListener("keyup", this.onKeyUp), e && (this.$refs.vuecal.oncontextmenu = function(c) {
|
|
2452
|
+
c.preventDefault(), c.stopPropagation();
|
|
2453
|
+
}), this.hideBody || this.alignWithScrollbar();
|
|
2454
|
+
const h = this.view.startDate, d = {
|
|
2455
|
+
view: this.view.id,
|
|
2456
|
+
startDate: h,
|
|
2457
|
+
endDate: this.view.endDate,
|
|
2458
|
+
...this.isMonthView ? { firstCellDate: this.view.firstCellDate, lastCellDate: this.view.lastCellDate } : {},
|
|
2459
|
+
events: this.view.events.map(this.cleanupEvent),
|
|
2460
|
+
...this.isWeekView ? { week: t.getWeek(this.startWeekOnSunday ? t.addDays(h, 1) : h) } : {}
|
|
2461
|
+
};
|
|
2462
|
+
this.$emit("ready", d), this.ready = !0;
|
|
2463
|
+
},
|
|
2464
|
+
beforeUnmount() {
|
|
2465
|
+
const t = "ontouchstart" in window;
|
|
2466
|
+
window.removeEventListener(t ? "touchmove" : "mousemove", this.onMouseMove, { passive: !1 }), window.removeEventListener(t ? "touchend" : "mouseup", this.onMouseUp), window.removeEventListener("keyup", this.onKeyUp), this.timeTickerIds[0] && clearTimeout(this.timeTickerIds[0]), this.timeTickerIds[1] && clearTimeout(this.timeTickerIds[1]), this.timeTickerIds = [null, null];
|
|
2467
|
+
},
|
|
2468
|
+
computed: {
|
|
2469
|
+
editEvents() {
|
|
2470
|
+
return this.editableEvents && typeof this.editableEvents == "object" ? {
|
|
2471
|
+
title: !!this.editableEvents.title,
|
|
2472
|
+
drag: !!this.editableEvents.drag,
|
|
2473
|
+
resize: !!this.editableEvents.resize,
|
|
2474
|
+
create: !!this.editableEvents.create,
|
|
2475
|
+
delete: !!this.editableEvents.delete
|
|
2476
|
+
} : {
|
|
2477
|
+
title: !!this.editableEvents,
|
|
2478
|
+
drag: !!this.editableEvents,
|
|
2479
|
+
resize: !!this.editableEvents,
|
|
2480
|
+
create: !!this.editableEvents,
|
|
2481
|
+
delete: !!this.editableEvents
|
|
2482
|
+
};
|
|
2483
|
+
},
|
|
2484
|
+
views() {
|
|
2485
|
+
return {
|
|
2486
|
+
years: { label: this.texts.years, enabled: !this.disableViews.includes("years") },
|
|
2487
|
+
year: { label: this.texts.year, enabled: !this.disableViews.includes("year") },
|
|
2488
|
+
month: { label: this.texts.month, enabled: !this.disableViews.includes("month") },
|
|
2489
|
+
week: { label: this.texts.week, enabled: !this.disableViews.includes("week") },
|
|
2490
|
+
day: { label: this.texts.day, enabled: !this.disableViews.includes("day") }
|
|
2491
|
+
};
|
|
2492
|
+
},
|
|
2493
|
+
currentView() {
|
|
2494
|
+
return this.validateView(this.activeView);
|
|
2495
|
+
},
|
|
2496
|
+
enabledViews() {
|
|
2497
|
+
return Object.keys(this.views).filter((t) => this.views[t].enabled);
|
|
2498
|
+
},
|
|
2499
|
+
hasTimeColumn() {
|
|
2500
|
+
return this.time && this.isWeekOrDayView;
|
|
2501
|
+
},
|
|
2502
|
+
isShortMonthView() {
|
|
2503
|
+
return this.isMonthView && this.eventsOnMonthView === "short";
|
|
2504
|
+
},
|
|
2505
|
+
firstCellDateWeekNumber() {
|
|
2506
|
+
const t = this.utils.date, e = this.view.firstCellDate;
|
|
2507
|
+
return t.getWeek(this.startWeekOnSunday ? t.addDays(e, 1) : e);
|
|
2508
|
+
},
|
|
2509
|
+
// For week & day views.
|
|
2510
|
+
timeCells() {
|
|
2511
|
+
const t = [];
|
|
2512
|
+
for (let e = this.timeFrom, s = this.timeTo; e < s; e += this.timeStep)
|
|
2513
|
+
t.push({
|
|
2514
|
+
hours: Math.floor(e / 60),
|
|
2515
|
+
minutes: e % 60,
|
|
2516
|
+
label: this.utils.date.formatTime(e, this.TimeFormat),
|
|
2517
|
+
// The texts (3rd param) are given on Vue Cal init.
|
|
2518
|
+
value: e
|
|
2519
|
+
});
|
|
2520
|
+
return t;
|
|
2521
|
+
},
|
|
2522
|
+
TimeFormat() {
|
|
2523
|
+
return this.timeFormat || (this.twelveHour ? "h:mm{am}" : "HH:mm");
|
|
2524
|
+
},
|
|
2525
|
+
// Filter out the day splits that are hidden.
|
|
2526
|
+
daySplits() {
|
|
2527
|
+
return (this.splitDays.filter((t) => !t.hide) || []).map((t, e) => ({ ...t, id: t.id || e + 1 }));
|
|
2528
|
+
},
|
|
2529
|
+
// Whether the current view has days splits.
|
|
2530
|
+
hasSplits() {
|
|
2531
|
+
return this.daySplits.length && this.isWeekOrDayView;
|
|
2532
|
+
},
|
|
2533
|
+
hasShortEvents() {
|
|
2534
|
+
return this.showAllDayEvents === "short";
|
|
2535
|
+
},
|
|
2536
|
+
// Returns the min cell width or the min split width if any.
|
|
2537
|
+
cellOrSplitMinWidth() {
|
|
2538
|
+
let t = null;
|
|
2539
|
+
return this.hasSplits && this.minSplitWidth ? t = this.visibleDaysCount * this.minSplitWidth * this.daySplits.length : this.minCellWidth && this.isWeekView && (t = this.visibleDaysCount * this.minCellWidth), t;
|
|
2540
|
+
},
|
|
2541
|
+
allDayBar() {
|
|
2542
|
+
let t = this.allDayBarHeight || null;
|
|
2543
|
+
return t && !isNaN(t) && (t += "px"), {
|
|
2544
|
+
cells: this.viewCells,
|
|
2545
|
+
options: this.$props,
|
|
2546
|
+
label: this.texts.allDay,
|
|
2547
|
+
shortEvents: this.hasShortEvents,
|
|
2548
|
+
daySplits: this.hasSplits && this.daySplits || [],
|
|
2549
|
+
cellOrSplitMinWidth: this.cellOrSplitMinWidth,
|
|
2550
|
+
height: t
|
|
2551
|
+
};
|
|
2552
|
+
},
|
|
2553
|
+
minTimestamp() {
|
|
2554
|
+
let t = null;
|
|
2555
|
+
return this.minDate && typeof this.minDate == "string" ? t = this.utils.date.stringToDate(this.minDate) : this.minDate && this.minDate instanceof Date && (t = this.minDate), t ? t.getTime() : null;
|
|
2556
|
+
},
|
|
2557
|
+
maxTimestamp() {
|
|
2558
|
+
let t = null;
|
|
2559
|
+
return this.maxDate && typeof this.maxDate == "string" ? t = this.utils.date.stringToDate(this.maxDate) : this.maxDate && this.maxDate instanceof Date && (t = this.maxDate), t ? t.getTime() : null;
|
|
2560
|
+
},
|
|
2561
|
+
weekDays() {
|
|
2562
|
+
let { weekDays: t, weekDaysShort: e = [] } = this.texts;
|
|
2563
|
+
return t = t.slice(0).map((s, l) => ({
|
|
2564
|
+
label: s,
|
|
2565
|
+
...e.length ? { short: e[l] } : {},
|
|
2566
|
+
hide: this.hideWeekends && l >= 5 || this.hideWeekdays.length && this.hideWeekdays.includes(l + 1)
|
|
2567
|
+
})), this.startWeekOnSunday && t.unshift(t.pop()), t;
|
|
2568
|
+
},
|
|
2569
|
+
weekDaysInHeader() {
|
|
2570
|
+
return this.isMonthView || // hasSplits check is important here in case the user toggles the splits but keep minSplitWidth.
|
|
2571
|
+
this.isWeekView && !this.minCellWidth && !(this.hasSplits && this.minSplitWidth);
|
|
2572
|
+
},
|
|
2573
|
+
months() {
|
|
2574
|
+
return this.texts.months.map((t) => ({ label: t }));
|
|
2575
|
+
},
|
|
2576
|
+
// Validate and fill up the special hours object once for all at root level and not in cell.
|
|
2577
|
+
specialDayHours() {
|
|
2578
|
+
return !this.specialHours || !Object.keys(this.specialHours).length ? {} : Array(7).fill("").map((t, e) => {
|
|
2579
|
+
let s = this.specialHours[e + 1] || [];
|
|
2580
|
+
return Array.isArray(s) || (s = [s]), t = [], s.forEach(({ from: l, to: r, class: i, label: o }, n) => {
|
|
2581
|
+
t[n] = {
|
|
2582
|
+
day: e + 1,
|
|
2583
|
+
from: [null, void 0].includes(l) ? null : l * 1,
|
|
2584
|
+
to: [null, void 0].includes(r) ? null : r * 1,
|
|
2585
|
+
class: i || "",
|
|
2586
|
+
label: o || ""
|
|
2587
|
+
};
|
|
2588
|
+
}), t;
|
|
2589
|
+
});
|
|
2590
|
+
},
|
|
2591
|
+
viewTitle() {
|
|
2592
|
+
const t = this.utils.date;
|
|
2593
|
+
let e = "";
|
|
2594
|
+
const s = this.view.startDate, l = s.getFullYear(), r = s.getMonth();
|
|
2595
|
+
switch (this.view.id) {
|
|
2596
|
+
case "years": {
|
|
2597
|
+
e = this.texts.years;
|
|
2598
|
+
break;
|
|
2599
|
+
}
|
|
2600
|
+
case "year": {
|
|
2601
|
+
e = l;
|
|
2602
|
+
break;
|
|
2603
|
+
}
|
|
2604
|
+
case "month": {
|
|
2605
|
+
e = `${this.months[r].label} ${l}`;
|
|
2606
|
+
break;
|
|
2607
|
+
}
|
|
2608
|
+
case "week": {
|
|
2609
|
+
const i = this.view.endDate, o = s.getFullYear();
|
|
2610
|
+
let n = this.texts.months[s.getMonth()];
|
|
2611
|
+
this.xsmall && (n = n.substring(0, 3));
|
|
2612
|
+
let h = `${n} ${o}`;
|
|
2613
|
+
if (i.getMonth() !== s.getMonth()) {
|
|
2614
|
+
const d = i.getFullYear();
|
|
2615
|
+
let c = this.texts.months[i.getMonth()];
|
|
2616
|
+
this.xsmall && (c = c.substring(0, 3)), o === d ? h = `${n} - ${c} ${o}` : this.small ? h = `${n.substring(0, 3)} ${o} - ${c.substring(0, 3)} ${d}` : h = `${n} ${o} - ${c} ${d}`;
|
|
2617
|
+
}
|
|
2618
|
+
e = `${this.texts.week} ${t.getWeek(this.startWeekOnSunday ? t.addDays(s, 1) : s)} (${h})`;
|
|
2619
|
+
break;
|
|
2620
|
+
}
|
|
2621
|
+
case "day": {
|
|
2622
|
+
e = this.utils.date.formatDate(s, this.texts.dateFormat, this.texts);
|
|
2623
|
+
break;
|
|
2624
|
+
}
|
|
2625
|
+
}
|
|
2626
|
+
return e;
|
|
2627
|
+
},
|
|
2628
|
+
viewCells() {
|
|
2629
|
+
const t = this.utils.date;
|
|
2630
|
+
let e = [], s = null, l = !1;
|
|
2631
|
+
this.watchRealTime || (this.now = /* @__PURE__ */ new Date());
|
|
2632
|
+
const r = this.now;
|
|
2633
|
+
switch (this.view.id) {
|
|
2634
|
+
case "years": {
|
|
2635
|
+
s = this.view.startDate.getFullYear(), e = Array.apply(null, Array(25)).map((i, o) => {
|
|
2636
|
+
const n = new Date(s + o, 0, 1), h = new Date(s + o + 1, 0, 1);
|
|
2637
|
+
return h.setSeconds(-1), {
|
|
2638
|
+
startDate: n,
|
|
2639
|
+
formattedDate: t.formatDateLite(n),
|
|
2640
|
+
endDate: h,
|
|
2641
|
+
content: s + o,
|
|
2642
|
+
current: s + o === r.getFullYear()
|
|
2643
|
+
};
|
|
2644
|
+
});
|
|
2645
|
+
break;
|
|
2646
|
+
}
|
|
2647
|
+
case "year": {
|
|
2648
|
+
s = this.view.startDate.getFullYear(), e = Array.apply(null, Array(12)).map((i, o) => {
|
|
2649
|
+
const n = new Date(s, o, 1), h = new Date(s, o + 1, 1);
|
|
2650
|
+
return h.setSeconds(-1), {
|
|
2651
|
+
startDate: n,
|
|
2652
|
+
formattedDate: t.formatDateLite(n),
|
|
2653
|
+
endDate: h,
|
|
2654
|
+
content: this.xsmall ? this.months[o].label.substr(0, 3) : this.months[o].label,
|
|
2655
|
+
current: o === r.getMonth() && s === r.getFullYear()
|
|
2656
|
+
};
|
|
2657
|
+
});
|
|
2658
|
+
break;
|
|
2659
|
+
}
|
|
2660
|
+
case "month": {
|
|
2661
|
+
const i = this.view.startDate.getMonth(), o = new Date(this.view.firstCellDate);
|
|
2662
|
+
l = !1, e = Array.apply(null, Array(42)).map((n, h) => {
|
|
2663
|
+
const d = t.addDays(o, h), c = new Date(d);
|
|
2664
|
+
c.setHours(23, 59, 59, 0);
|
|
2665
|
+
const y = !l && t.isToday(d) && !l++;
|
|
2666
|
+
return {
|
|
2667
|
+
startDate: d,
|
|
2668
|
+
formattedDate: t.formatDateLite(d),
|
|
2669
|
+
endDate: c,
|
|
2670
|
+
content: d.getDate(),
|
|
2671
|
+
today: y,
|
|
2672
|
+
outOfScope: d.getMonth() !== i,
|
|
2673
|
+
class: `vuecal__cell--day${d.getDay() || 7}`
|
|
2674
|
+
};
|
|
2675
|
+
}), (this.hideWeekends || this.hideWeekdays.length) && (e = e.filter((n) => {
|
|
2676
|
+
const h = n.startDate.getDay() || 7;
|
|
2677
|
+
return !(this.hideWeekends && h >= 6 || this.hideWeekdays.length && this.hideWeekdays.includes(h));
|
|
2678
|
+
}));
|
|
2679
|
+
break;
|
|
2680
|
+
}
|
|
2681
|
+
case "week": {
|
|
2682
|
+
l = !1;
|
|
2683
|
+
const i = this.view.startDate, o = this.weekDays;
|
|
2684
|
+
e = o.map((n, h) => {
|
|
2685
|
+
const d = t.addDays(i, this.startWeekOnSunday && this.hideWeekends ? h - 1 : h), c = new Date(d);
|
|
2686
|
+
c.setHours(23, 59, 59, 0);
|
|
2687
|
+
const y = (d.getDay() || 7) - 1;
|
|
2688
|
+
return {
|
|
2689
|
+
startDate: d,
|
|
2690
|
+
formattedDate: t.formatDateLite(d),
|
|
2691
|
+
endDate: c,
|
|
2692
|
+
// To increase performance skip checking isToday if today already found.
|
|
2693
|
+
today: !l && t.isToday(d) && !l++,
|
|
2694
|
+
specialHours: this.specialDayHours[y] || []
|
|
2695
|
+
};
|
|
2696
|
+
}).filter((n, h) => !o[h].hide);
|
|
2697
|
+
break;
|
|
2698
|
+
}
|
|
2699
|
+
case "day": {
|
|
2700
|
+
const i = this.view.startDate, o = new Date(this.view.startDate);
|
|
2701
|
+
o.setHours(23, 59, 59, 0);
|
|
2702
|
+
const n = (i.getDay() || 7) - 1;
|
|
2703
|
+
e = [{
|
|
2704
|
+
startDate: i,
|
|
2705
|
+
formattedDate: t.formatDateLite(i),
|
|
2706
|
+
endDate: o,
|
|
2707
|
+
today: t.isToday(i),
|
|
2708
|
+
specialHours: this.specialDayHours[n] || []
|
|
2709
|
+
}];
|
|
2710
|
+
break;
|
|
2711
|
+
}
|
|
2712
|
+
}
|
|
2713
|
+
return e;
|
|
2714
|
+
},
|
|
2715
|
+
// Only when hiding weekdays on month and week views.
|
|
2716
|
+
visibleDaysCount() {
|
|
2717
|
+
return this.isDayView ? 1 : 7 - this.weekDays.reduce((t, e) => t + e.hide, 0);
|
|
2718
|
+
},
|
|
2719
|
+
cellWidth() {
|
|
2720
|
+
return 100 / this.visibleDaysCount;
|
|
2721
|
+
},
|
|
2722
|
+
cssClasses() {
|
|
2723
|
+
const { resizeAnEvent: t, dragAnEvent: e, dragCreateAnEvent: s } = this.domEvents;
|
|
2724
|
+
return {
|
|
2725
|
+
[`vuecal--${this.view.id}-view`]: !0,
|
|
2726
|
+
[`vuecal--${this.locale}`]: this.locale,
|
|
2727
|
+
"vuecal--no-time": !this.time,
|
|
2728
|
+
"vuecal--view-with-time": this.hasTimeColumn,
|
|
2729
|
+
"vuecal--week-numbers": this.showWeekNumbers && this.isMonthView,
|
|
2730
|
+
"vuecal--twelve-hour": this.twelveHour,
|
|
2731
|
+
"vuecal--click-to-navigate": this.clickToNavigate,
|
|
2732
|
+
"vuecal--hide-weekends": this.hideWeekends,
|
|
2733
|
+
"vuecal--split-days": this.hasSplits,
|
|
2734
|
+
"vuecal--sticky-split-labels": this.hasSplits && this.stickySplitLabels,
|
|
2735
|
+
"vuecal--overflow-x": this.minCellWidth && this.isWeekView || this.hasSplits && this.minSplitWidth,
|
|
2736
|
+
"vuecal--small": this.small,
|
|
2737
|
+
"vuecal--xsmall": this.xsmall,
|
|
2738
|
+
"vuecal--resizing-event": t._eid,
|
|
2739
|
+
"vuecal--drag-creating-event": s.event,
|
|
2740
|
+
"vuecal--dragging-event": e._eid,
|
|
2741
|
+
"vuecal--events-on-month-view": this.eventsOnMonthView,
|
|
2742
|
+
"vuecal--short-events": this.isMonthView && this.eventsOnMonthView === "short",
|
|
2743
|
+
"vuecal--has-touch": typeof window < "u" && "ontouchstart" in window
|
|
2744
|
+
};
|
|
2745
|
+
},
|
|
2746
|
+
isYearsOrYearView() {
|
|
2747
|
+
return ["years", "year"].includes(this.view.id);
|
|
2748
|
+
},
|
|
2749
|
+
isYearsView() {
|
|
2750
|
+
return this.view.id === "years";
|
|
2751
|
+
},
|
|
2752
|
+
isYearView() {
|
|
2753
|
+
return this.view.id === "year";
|
|
2754
|
+
},
|
|
2755
|
+
isMonthView() {
|
|
2756
|
+
return this.view.id === "month";
|
|
2757
|
+
},
|
|
2758
|
+
isWeekOrDayView() {
|
|
2759
|
+
return ["week", "day"].includes(this.view.id);
|
|
2760
|
+
},
|
|
2761
|
+
isWeekView() {
|
|
2762
|
+
return this.view.id === "week";
|
|
2763
|
+
},
|
|
2764
|
+
isDayView() {
|
|
2765
|
+
return this.view.id === "day";
|
|
2766
|
+
}
|
|
2767
|
+
},
|
|
2768
|
+
watch: {
|
|
2769
|
+
events: {
|
|
2770
|
+
// To be able to detect an event attribute change, it has to be first initialized with a value.
|
|
2771
|
+
handler(t, e) {
|
|
2772
|
+
this.updateMutableEvents(t), this.addEventsToView();
|
|
2773
|
+
},
|
|
2774
|
+
deep: !0
|
|
2775
|
+
},
|
|
2776
|
+
locale(t) {
|
|
2777
|
+
this.loadLocale(t);
|
|
2778
|
+
},
|
|
2779
|
+
selectedDate(t) {
|
|
2780
|
+
this.updateSelectedDate(t);
|
|
2781
|
+
},
|
|
2782
|
+
activeView(t) {
|
|
2783
|
+
this.switchView(t);
|
|
2784
|
+
}
|
|
2785
|
+
}
|
|
2786
|
+
}, lt = /* @__PURE__ */ he(Gi, [["render", Xi]]), Ji = {
|
|
2787
|
+
/**
|
|
2788
|
+
* Unique identifier for the calendar component.
|
|
2789
|
+
* - Use `hison.component.getCalendar(id)` to access methods at runtime.
|
|
2790
|
+
* - ⚠️ Duplicate `id` values will throw an error at mount time.
|
|
2791
|
+
*/
|
|
2792
|
+
id: { type: String, required: !1 },
|
|
2793
|
+
/**
|
|
2794
|
+
* Custom class applied to the calendar (string / array / object all supported).
|
|
2795
|
+
* - Works with responsive classes like `hison-col-*`, `hison-size-*`, etc.
|
|
2796
|
+
*/
|
|
2797
|
+
class: {
|
|
2798
|
+
type: [String, Array, Object],
|
|
2799
|
+
required: !1
|
|
2800
|
+
},
|
|
2801
|
+
/**
|
|
2802
|
+
* Inline style for the calendar (string, object, or an array of objects).
|
|
2803
|
+
*/
|
|
2804
|
+
style: {
|
|
2805
|
+
type: [String, Object, Array],
|
|
2806
|
+
required: !1
|
|
2807
|
+
},
|
|
2808
|
+
/**
|
|
2809
|
+
* Controls visibility of the calendar.
|
|
2810
|
+
* - true: visible / false: display: none
|
|
2811
|
+
*/
|
|
2812
|
+
visible: { type: Boolean, default: !0 },
|
|
2813
|
+
/**
|
|
2814
|
+
* Whether the calendar is disabled (selection blocked + dimmed style).
|
|
2815
|
+
*/
|
|
2816
|
+
disable: { type: Boolean, default: !1 },
|
|
2817
|
+
/**
|
|
2818
|
+
* Initially selected date.
|
|
2819
|
+
* - String (e.g. '2025-01-01') or Date
|
|
2820
|
+
*/
|
|
2821
|
+
selectedDate: {
|
|
2822
|
+
type: [String, Date],
|
|
2823
|
+
default: () => /* @__PURE__ */ new Date()
|
|
2824
|
+
},
|
|
2825
|
+
/**
|
|
2826
|
+
* Array of calendar events to display.
|
|
2827
|
+
*/
|
|
2828
|
+
events: {
|
|
2829
|
+
type: Array,
|
|
2830
|
+
default: () => []
|
|
2831
|
+
},
|
|
2832
|
+
/**
|
|
2833
|
+
* Weekend header background color (CSS color).
|
|
2834
|
+
*/
|
|
2835
|
+
weekendColor: { type: String, required: !1 },
|
|
2836
|
+
/**
|
|
2837
|
+
* Weekend day indexes (0..6). Example: [0,6] for Sun/Sat.
|
|
2838
|
+
*/
|
|
2839
|
+
weekendDays: {
|
|
2840
|
+
type: Array,
|
|
2841
|
+
required: !1,
|
|
2842
|
+
validator: (t) => Array.isArray(t) && t.every((e) => Number.isInteger(e) && e >= 0 && e <= 6)
|
|
2843
|
+
},
|
|
2844
|
+
/**
|
|
2845
|
+
* Whether to highlight today's cell background.
|
|
2846
|
+
*/
|
|
2847
|
+
showTodayColor: { type: Boolean, default: !0 },
|
|
2848
|
+
/**
|
|
2849
|
+
* Selected date cell background color (CSS color).
|
|
2850
|
+
*/
|
|
2851
|
+
selectedColor: { type: String, required: !1 },
|
|
2852
|
+
/**
|
|
2853
|
+
* Time highlight blocks per day.
|
|
2854
|
+
*/
|
|
2855
|
+
specialTime: {
|
|
2856
|
+
type: Object,
|
|
2857
|
+
required: !1
|
|
2858
|
+
},
|
|
2859
|
+
/**
|
|
2860
|
+
* Min height (px) for date cells in 'month' view.
|
|
2861
|
+
*/
|
|
2862
|
+
dateCellMinHeight: { type: Number, required: !1 },
|
|
2863
|
+
/**
|
|
2864
|
+
* Max height (px) for date cells in 'month' view (enables scroll).
|
|
2865
|
+
*/
|
|
2866
|
+
dateCellMaxHeight: { type: Number, required: !1 },
|
|
2867
|
+
/**
|
|
2868
|
+
* Disabled (non-selectable) date strings. Example: ['2025-06-26']
|
|
2869
|
+
*/
|
|
2870
|
+
disableDays: {
|
|
2871
|
+
type: Array,
|
|
2872
|
+
required: !1,
|
|
2873
|
+
default: void 0
|
|
2874
|
+
},
|
|
2875
|
+
/**
|
|
2876
|
+
* Controls how events are shown in the month view.
|
|
2877
|
+
* - false : show only count
|
|
2878
|
+
* - 'short': show titles only
|
|
2879
|
+
* - true or any other string: show full details
|
|
2880
|
+
*/
|
|
2881
|
+
eventsOnMonthView: {
|
|
2882
|
+
type: [String, Boolean],
|
|
2883
|
+
default: !1
|
|
2884
|
+
},
|
|
2885
|
+
/**
|
|
2886
|
+
* Weekday indexes (0..6) to hide.
|
|
2887
|
+
*/
|
|
2888
|
+
hideWeekdays: {
|
|
2889
|
+
type: Array,
|
|
2890
|
+
required: !1,
|
|
2891
|
+
validator: (t) => Array.isArray(t) && t.every((e) => Number.isInteger(e) && e >= 0 && e <= 6)
|
|
2892
|
+
},
|
|
2893
|
+
/**
|
|
2894
|
+
* Whether to hide weekends (Sat/Sun).
|
|
2895
|
+
*/
|
|
2896
|
+
hideWeekends: { type: Boolean, default: !1 },
|
|
2897
|
+
/**
|
|
2898
|
+
* Calendar locale. Example: 'en', 'ko', 'fr'.
|
|
2899
|
+
*/
|
|
2900
|
+
locale: { type: String, default: "en" },
|
|
2901
|
+
/**
|
|
2902
|
+
* Max selectable date (string or Date).
|
|
2903
|
+
*/
|
|
2904
|
+
maxDate: { type: [String, Date], required: !1 },
|
|
2905
|
+
/**
|
|
2906
|
+
* Min selectable date (string or Date).
|
|
2907
|
+
*/
|
|
2908
|
+
minDate: { type: [String, Date], required: !1 },
|
|
2909
|
+
/**
|
|
2910
|
+
* Week starts on Sunday (true) or Monday (false).
|
|
2911
|
+
*/
|
|
2912
|
+
startWeekOnSunday: { type: Boolean, default: !1 },
|
|
2913
|
+
/**
|
|
2914
|
+
* Whether to display time-axis in week/day view.
|
|
2915
|
+
*/
|
|
2916
|
+
time: { type: Boolean, default: !0 },
|
|
2917
|
+
/**
|
|
2918
|
+
* Time cell height in week/day view (px).
|
|
2919
|
+
*/
|
|
2920
|
+
timeCellHeight: { type: Number, required: !1 },
|
|
2921
|
+
/**
|
|
2922
|
+
* Time label format (overrides twelveHour if provided).
|
|
2923
|
+
* - Accepts enum or literal string (with Volar completion).
|
|
2924
|
+
*/
|
|
2925
|
+
timeFormat: {
|
|
2926
|
+
type: String,
|
|
2927
|
+
required: !1,
|
|
2928
|
+
validator: (t) => t == null || kt.includes(t)
|
|
2929
|
+
},
|
|
2930
|
+
/**
|
|
2931
|
+
* Time axis start (minutes from 0..1440).
|
|
2932
|
+
*/
|
|
2933
|
+
timeFrom: {
|
|
2934
|
+
type: Number,
|
|
2935
|
+
required: !1,
|
|
2936
|
+
validator: (t) => t == null || Number.isFinite(t) && t >= 0 && t <= 1440
|
|
2937
|
+
},
|
|
2938
|
+
/**
|
|
2939
|
+
* Time axis step (minutes).
|
|
2940
|
+
*/
|
|
2941
|
+
timeStep: {
|
|
2942
|
+
type: Number,
|
|
2943
|
+
required: !1,
|
|
2944
|
+
validator: (t) => t == null || Number.isFinite(t) && t > 0 && t <= 1440
|
|
2945
|
+
},
|
|
2946
|
+
/**
|
|
2947
|
+
* Time axis end (minutes from 0..1440).
|
|
2948
|
+
*/
|
|
2949
|
+
timeTo: {
|
|
2950
|
+
type: Number,
|
|
2951
|
+
required: !1,
|
|
2952
|
+
validator: (t) => t == null || Number.isFinite(t) && t >= 0 && t <= 1440
|
|
2953
|
+
},
|
|
2954
|
+
/**
|
|
2955
|
+
* Hide title bar (month/year & nav).
|
|
2956
|
+
*/
|
|
2957
|
+
hideTitleBar: { type: Boolean, default: !1 },
|
|
2958
|
+
/**
|
|
2959
|
+
* Use 12-hour clock with AM/PM labels.
|
|
2960
|
+
* - Ignored if `timeFormat` is set.
|
|
2961
|
+
*/
|
|
2962
|
+
twelveHour: { type: Boolean, default: !1 },
|
|
2963
|
+
/**
|
|
2964
|
+
* Initial view mode of the calendar.
|
|
2965
|
+
* - Accepts enum or literal ('day' | 'week' | 'month' | 'year' | 'years')
|
|
2966
|
+
*/
|
|
2967
|
+
activeView: {
|
|
2968
|
+
type: String,
|
|
2969
|
+
required: !1,
|
|
2970
|
+
validator: (t) => t == null || Ze.includes(t)
|
|
2971
|
+
},
|
|
2972
|
+
/**
|
|
2973
|
+
* List of views to disable in navigation.
|
|
2974
|
+
* - All values must be in ('day'|'week'|'month'|'year'|'years')
|
|
2975
|
+
*/
|
|
2976
|
+
disableViews: {
|
|
2977
|
+
type: Array,
|
|
2978
|
+
required: !1,
|
|
2979
|
+
validator: (t) => t == null || Array.isArray(t) && t.every((e) => Ze.includes(e))
|
|
2980
|
+
}
|
|
2981
|
+
}, Zi = wt({
|
|
2982
|
+
name: "HCalendar",
|
|
2983
|
+
components: { VueCal: lt },
|
|
2984
|
+
props: Ji,
|
|
2985
|
+
emits: [
|
|
2986
|
+
"responsive-change",
|
|
2987
|
+
"cell-click",
|
|
2988
|
+
"view-change",
|
|
2989
|
+
"mounted"
|
|
2990
|
+
],
|
|
2991
|
+
setup(t, { emit: e, attrs: s }) {
|
|
2992
|
+
const l = t.id || Ct(), r = `hcalendar:${l}`, i = b(null), o = b(null), n = _t(), h = Dt(), d = Ie(() => Object.keys(h)), c = b(t.visible), y = b(t.disable), w = Ie(() => c.value ? "" : "hison-display-none"), A = Ie(() => y.value ? "hison-disable-calendar" : ""), g = b(P.utils.getJSDateObject(t.selectedDate) ?? /* @__PURE__ */ new Date()), Y = g.value, j = b(t.events ?? []), _ = b(t.weekendColor ? ue(t.weekendColor) : void 0), B = b(t.weekendDays), O = b(t.selectedColor ? ue(t.selectedColor) : void 0), q = b(t.showTodayColor), Q = b(t.specialTime ?? {}), ne = b(t.dateCellMinHeight), ee = b(t.dateCellMaxHeight), ve = b(t.disableDays), me = b(t.eventsOnMonthView), ye = b(t.hideWeekdays), fe = b(t.hideWeekends), we = b(t.locale), K = b(
|
|
2993
|
+
y.value ? "100-01-01" : t.maxDate
|
|
2994
|
+
), te = b(t.minDate), re = b(t.startWeekOnSunday), De = b(t.time), ge = b(t.timeCellHeight), pe = b(t.timeFormat), be = b(t.timeFrom), ke = b(t.timeStep), Ce = b(t.timeTo), _e = b(t.hideTitleBar), Te = b(t.twelveHour), Ne = b(t.activeView), Me = b(t.disableViews), X = b([]), ie = () => {
|
|
2995
|
+
var a;
|
|
2996
|
+
if (X.value = Tt(Mt(t.class) || "", n.value), St(X.value, "col") === -1 && X.value.push("hison-col-12"), Qe(X.value, "size", C.componentStyle.size), Qe(X.value, "color", "primary"), (a = i.value) != null && a.$el) {
|
|
2997
|
+
const u = i.value.$el;
|
|
2998
|
+
let f = Ve(X.value, "color");
|
|
2999
|
+
const W = Ve(X.value, "size");
|
|
3000
|
+
switch ((!f || !$e(f)) && (f = "primary"), u.style.setProperty("--vuecal-filled-back-color", C.componentStyle.componentColor[`${f}`].buttonColor), u.style.setProperty("--vuecal-filled-font-color", C.componentStyle.componentColor[`${f}`].filledTextColor), C.componentStyle.invertColor ? (u.style.setProperty("--vuecal-empty-back-color", C.componentStyle.emptyInvertColor), u.style.setProperty("--vuecal-empty-font-color", C.componentStyle.emptyTextInvertColor), u.style.setProperty("--vuecal-empty-disabled-color", R(C.componentStyle.emptyTextInvertColor, 0.3)), u.style.setProperty("--vuecal-empty-out-of-scope-font-color", R(C.componentStyle.emptyTextInvertColor, 0.5)), u.style.setProperty("--vuecal-selected-back-color", O.value ? Ae(O.value) : R(C.componentStyle.componentColor[`${f}`].buttonColor, 0.5)), u.style.setProperty("--vuecal-weekend-back-color", _.value ? Ae(_.value) : null), u.style.setProperty("--vuecal-today-back-color", q.value ? R(C.componentStyle.componentColor[`${f}`].buttonColor, 0.3) : C.componentStyle.emptyInvertColor)) : (u.style.setProperty("--vuecal-empty-back-color", C.componentStyle.emptyColor), u.style.setProperty("--vuecal-empty-font-color", C.componentStyle.emptyTextColor), u.style.setProperty("--vuecal-empty-disabled-color", R(C.componentStyle.emptyTextColor, 0.3)), u.style.setProperty("--vuecal-empty-out-of-scope-font-color", R(C.componentStyle.emptyTextColor, 0.5)), u.style.setProperty("--vuecal-selected-back-color", O.value ? O.value : R(C.componentStyle.componentColor[`${f}`].buttonColor, 0.5)), u.style.setProperty("--vuecal-weekend-back-color", _.value ? _.value : null), u.style.setProperty("--vuecal-today-back-color", q.value ? R(C.componentStyle.componentColor[`${f}`].buttonColor, 0.3) : C.componentStyle.emptyColor)), W) {
|
|
3001
|
+
case je.xl:
|
|
3002
|
+
u.style.setProperty("--vuecal-header-font-size", "0.9em"), u.style.setProperty("--vuecal-title-button-font-size", "1em"), u.style.setProperty("--vuecal-body-font-size", "0.9em"), u.style.setProperty("--vuecal-no-event-font-size", "0.8em");
|
|
3003
|
+
break;
|
|
3004
|
+
case je.l:
|
|
3005
|
+
u.style.setProperty("--vuecal-header-font-size", "0.75em"), u.style.setProperty("--vuecal-title-button-font-size", "1em"), u.style.setProperty("--vuecal-body-font-size", "0.9em"), u.style.setProperty("--vuecal-no-event-font-size", "0.8em");
|
|
3006
|
+
break;
|
|
3007
|
+
case je.m:
|
|
3008
|
+
u.style.setProperty("--vuecal-header-font-size", "0.7em"), u.style.setProperty("--vuecal-title-button-font-size", "0.6em"), u.style.setProperty("--vuecal-body-font-size", "0.8em"), u.style.setProperty("--vuecal-no-event-font-size", "0.7em");
|
|
3009
|
+
break;
|
|
3010
|
+
case je.s:
|
|
3011
|
+
u.style.setProperty("--vuecal-header-font-size", "0.6em"), u.style.setProperty("--vuecal-title-button-font-size", "0.5em"), u.style.setProperty("--vuecal-body-font-size", "0.8em"), u.style.setProperty("--vuecal-no-event-font-size", "0.7em");
|
|
3012
|
+
break;
|
|
3013
|
+
}
|
|
3014
|
+
u.style.setProperty("--calendar-clickable-cursor", y.value ? "not-allowed" : null);
|
|
3015
|
+
}
|
|
3016
|
+
}, ut = (a) => {
|
|
3017
|
+
const u = /pm/i.test(a), f = /am/i.test(a), W = a.replace(/[^\d:]/g, "").trim();
|
|
3018
|
+
let F = 0, J = 0;
|
|
3019
|
+
if (W.includes(":")) {
|
|
3020
|
+
const [I, le] = W.split(":");
|
|
3021
|
+
F = parseInt(I, 10), J = parseInt(le, 10);
|
|
3022
|
+
} else {
|
|
3023
|
+
const I = parseInt(W, 10);
|
|
3024
|
+
I <= 12 && (f || u) || I <= 23 ? F = I : J = I;
|
|
3025
|
+
}
|
|
3026
|
+
return u && F < 12 && (F += 12), f && F === 12 && (F = 0), F * 60 + J;
|
|
3027
|
+
}, $ = (a) => {
|
|
3028
|
+
if (!i.value) return;
|
|
3029
|
+
const u = i.value.$el, f = a ?? P.utils.getJSDateObject(g.value);
|
|
3030
|
+
if (Q.value && f) {
|
|
3031
|
+
const W = f.getDay(), F = Q.value[W], J = u.querySelectorAll(".vuecal__time-cell");
|
|
3032
|
+
J.length > 0 && F && Array.isArray(F) ? J.forEach((I) => {
|
|
3033
|
+
const le = I.querySelector(".vuecal__time-cell-label");
|
|
3034
|
+
if (le) {
|
|
3035
|
+
const ht = le.textContent, Xe = ut(ht);
|
|
3036
|
+
let Be = "";
|
|
3037
|
+
F.some(({ from: vt, to: mt, className: yt }) => {
|
|
3038
|
+
const Ge = vt <= Xe && Xe <= mt;
|
|
3039
|
+
return Ge && (Be = yt ?? ""), Ge;
|
|
3040
|
+
}) && I.classList.add(Be || "special_time");
|
|
3041
|
+
}
|
|
3042
|
+
}) : J.forEach((I) => {
|
|
3043
|
+
I.classList.forEach((le) => {
|
|
3044
|
+
le !== "vuecal__time-cell" && I.classList.remove(le);
|
|
3045
|
+
});
|
|
3046
|
+
});
|
|
3047
|
+
}
|
|
3048
|
+
}, se = (a) => {
|
|
3049
|
+
if (a === de.month || a === de.week) {
|
|
3050
|
+
const u = i.value.$el, f = B.value ? B.value : re.value ? [0, 6] : [5, 6], W = u.querySelectorAll(".vuecal__heading");
|
|
3051
|
+
W.length > 0 && W.forEach((F, J) => {
|
|
3052
|
+
f.includes(J) ? F.classList.add("weekend") : F.classList.remove("weekend");
|
|
3053
|
+
});
|
|
3054
|
+
}
|
|
3055
|
+
}, Se = (a) => {
|
|
3056
|
+
const u = i.value.$el;
|
|
3057
|
+
u.style.setProperty("--vuecal-cell-content-min_heihgt", a === "month" && ne.value ? ne.value + "px" : null), u.style.setProperty("--vuecal-cell-content-max_heihgt", a === "month" && ee.value ? ee.value + "px" : null), u.style.setProperty("--vuecal-cell-content-overflow", a === "month" && ee.value ? "auto" : null);
|
|
3058
|
+
}, Ue = (a) => {
|
|
3059
|
+
if (!i.value) return;
|
|
3060
|
+
const u = a ?? i.value.view.id;
|
|
3061
|
+
_.value && Je(() => se(u)), Se(u);
|
|
3062
|
+
}, dt = (a) => {
|
|
3063
|
+
Ue(a.view), a.view === de.day ? $(a.startDate) : a.view === de.week && $(), Ne.value = a.view, e("view-change", a);
|
|
3064
|
+
}, ct = (a) => {
|
|
3065
|
+
var f;
|
|
3066
|
+
const u = a instanceof Date ? a : a.date;
|
|
3067
|
+
y.value ? (g.value = Y, (f = i.value) == null || f.updateSelectedDate(Y)) : (g.value = u, e("cell-click", u));
|
|
3068
|
+
}, qe = () => {
|
|
3069
|
+
C.component.calendarList[l] && C.component.calendarList[l].isHisonvueComponent && console.warn(`[Hisonvue] The calendar ID is at risk of being duplicated. ${l}`), Et(r, () => {
|
|
3070
|
+
Ke(), Je(qe);
|
|
3071
|
+
}), i.value && (ie(), $(), Ue(), o.value = {
|
|
3072
|
+
isHisonvueComponent: !0,
|
|
3073
|
+
getId: () => l,
|
|
3074
|
+
getType: () => "calendar",
|
|
3075
|
+
isDisable: () => y.value,
|
|
3076
|
+
setDisable: (a) => {
|
|
3077
|
+
y.value = a, y.value ? K.value = "100-01-01" : K.value = t.maxDate;
|
|
3078
|
+
},
|
|
3079
|
+
isVisible: () => c.value,
|
|
3080
|
+
setVisible: (a) => {
|
|
3081
|
+
c.value = a;
|
|
3082
|
+
},
|
|
3083
|
+
getSelectedDate: (a, u) => a ? g.value : P.utils.getDateWithFormat(g.value, u ?? P.getDatetimeFormat()),
|
|
3084
|
+
setSelectedDate: (a) => {
|
|
3085
|
+
const u = P.utils.getJSDateObject(a);
|
|
3086
|
+
u && (g.value = u);
|
|
3087
|
+
},
|
|
3088
|
+
getEvents: () => j.value,
|
|
3089
|
+
setEvents: (a) => {
|
|
3090
|
+
j.value = a;
|
|
3091
|
+
},
|
|
3092
|
+
getSpecialTime: () => Q.value,
|
|
3093
|
+
setSpecialTime: (a) => {
|
|
3094
|
+
Q.value = a;
|
|
3095
|
+
},
|
|
3096
|
+
getWeekendColor: () => _.value,
|
|
3097
|
+
setWeekendColor: (a) => {
|
|
3098
|
+
if (_.value = ue(a), !i.value) return;
|
|
3099
|
+
const u = i.value.$el;
|
|
3100
|
+
u && (C.componentStyle.invertColor ? u.style.setProperty("--vuecal-weekend-back-color", _.value ? Ae(_.value) : null) : u.style.setProperty("--vuecal-weekend-back-color", _.value ? _.value : null), se(i.value.view.id));
|
|
3101
|
+
},
|
|
3102
|
+
getWeekendDays: () => B.value,
|
|
3103
|
+
setWeekendDays: (a) => {
|
|
3104
|
+
B.value = a, se(i.value.view.id);
|
|
3105
|
+
},
|
|
3106
|
+
isShowTodayColor: () => q.value,
|
|
3107
|
+
setShowTodayColor: (a) => {
|
|
3108
|
+
if (q.value = a, !i.value) return;
|
|
3109
|
+
const u = i.value.$el;
|
|
3110
|
+
if (!u) return;
|
|
3111
|
+
let f = Ve(X.value, "color");
|
|
3112
|
+
(!f || !$e(f)) && (f = "primary"), C.componentStyle.invertColor ? u.style.setProperty("--vuecal-today-back-color", q.value ? R(C.componentStyle.componentColor[`${f}`].buttonColor, 0.3) : C.componentStyle.emptyInvertColor) : u.style.setProperty("--vuecal-today-back-color", q.value ? R(C.componentStyle.componentColor[`${f}`].buttonColor, 0.3) : C.componentStyle.emptyColor);
|
|
3113
|
+
},
|
|
3114
|
+
getSelectedColor: () => O.value,
|
|
3115
|
+
setSelectedColor: (a) => {
|
|
3116
|
+
if (O.value = ue(a), !i.value) return;
|
|
3117
|
+
const u = i.value.$el;
|
|
3118
|
+
if (!u) return;
|
|
3119
|
+
let f = Ve(X.value, "color");
|
|
3120
|
+
C.componentStyle.invertColor ? u.style.setProperty("--vuecal-selected-back-color", O.value ? Ae(O.value) : R(C.componentStyle.componentColor[`${f}`].buttonColor, 0.5)) : u.style.setProperty("--vuecal-selected-back-color", O.value ? O.value : R(C.componentStyle.componentColor[`${f}`].buttonColor, 0.5));
|
|
3121
|
+
},
|
|
3122
|
+
getDateCellMinHeight: () => ne.value,
|
|
3123
|
+
setDateCellMinHeight: (a) => {
|
|
3124
|
+
ne.value = a, Se(i.value.view.id);
|
|
3125
|
+
},
|
|
3126
|
+
getDateCellMaxHeight: () => ee.value,
|
|
3127
|
+
setDateCellMaxHeight: (a) => {
|
|
3128
|
+
ee.value = a, Se(i.value.view.id);
|
|
3129
|
+
},
|
|
3130
|
+
getDisableDays: () => ve.value,
|
|
3131
|
+
setDisableDays: (a) => {
|
|
3132
|
+
ve.value = a;
|
|
3133
|
+
},
|
|
3134
|
+
getEventsOnMonthView: () => me.value,
|
|
3135
|
+
setEventsOnMonthView: (a) => {
|
|
3136
|
+
me.value = a;
|
|
3137
|
+
},
|
|
3138
|
+
getHideWeekdays: () => ye.value,
|
|
3139
|
+
setHideWeekdays: (a) => {
|
|
3140
|
+
ye.value = a;
|
|
3141
|
+
},
|
|
3142
|
+
getHideWeekends: () => fe.value,
|
|
3143
|
+
setHideWeekends: (a) => {
|
|
3144
|
+
fe.value = a;
|
|
3145
|
+
},
|
|
3146
|
+
getLocale: () => we.value,
|
|
3147
|
+
setLocale: (a) => {
|
|
3148
|
+
we.value = a;
|
|
3149
|
+
},
|
|
3150
|
+
getMaxDate: (a) => {
|
|
3151
|
+
if (K.value)
|
|
3152
|
+
return a ? y.value ? new Date(100, 0, 1) : P.utils.getJSDateObject(K.value) : y.value ? "100-01-01" : P.utils.getDateWithFormat(K.value, P.getDateFormat());
|
|
3153
|
+
},
|
|
3154
|
+
setMaxDate: (a) => {
|
|
3155
|
+
K.value = a;
|
|
3156
|
+
},
|
|
3157
|
+
getMinDate: (a) => {
|
|
3158
|
+
if (te.value)
|
|
3159
|
+
return a ? P.utils.getJSDateObject(te.value) : P.utils.getDateWithFormat(te.value, P.getDateFormat());
|
|
3160
|
+
},
|
|
3161
|
+
setMinDate: (a) => {
|
|
3162
|
+
te.value = a;
|
|
3163
|
+
},
|
|
3164
|
+
isStartWeekOnSunday: () => re.value,
|
|
3165
|
+
setStartWeekOnSunday: (a) => {
|
|
3166
|
+
re.value = a, se(i.value.view.id);
|
|
3167
|
+
},
|
|
3168
|
+
isShowTimeCell: () => De.value,
|
|
3169
|
+
setShowTimeCell: (a) => {
|
|
3170
|
+
De.value = a;
|
|
3171
|
+
},
|
|
3172
|
+
getTimeCellHeight: () => ge.value,
|
|
3173
|
+
setTimeCellHeight: (a) => {
|
|
3174
|
+
ge.value = a;
|
|
3175
|
+
},
|
|
3176
|
+
getTimeFormat: () => pe.value,
|
|
3177
|
+
setTimeFormat: (a) => {
|
|
3178
|
+
pe.value = a;
|
|
3179
|
+
},
|
|
3180
|
+
getTimeFrom: () => be.value,
|
|
3181
|
+
setTimeFrom: (a) => {
|
|
3182
|
+
be.value = a;
|
|
3183
|
+
},
|
|
3184
|
+
getTimeStep: () => ke.value,
|
|
3185
|
+
setTimeStep: (a) => {
|
|
3186
|
+
ke.value = a;
|
|
3187
|
+
},
|
|
3188
|
+
getTimeTo: () => Ce.value,
|
|
3189
|
+
setTimeTo: (a) => {
|
|
3190
|
+
Ce.value = a;
|
|
3191
|
+
},
|
|
3192
|
+
isHideTitleBar: () => _e.value,
|
|
3193
|
+
setHideTitleBar: (a) => {
|
|
3194
|
+
_e.value = a;
|
|
3195
|
+
},
|
|
3196
|
+
isTwelveHour: () => Te.value,
|
|
3197
|
+
setTwelveHour: (a) => {
|
|
3198
|
+
Te.value = a;
|
|
3199
|
+
},
|
|
3200
|
+
getActiveView: () => i.value.view.id,
|
|
3201
|
+
setActiveView: (a) => {
|
|
3202
|
+
i.value.switchView(a);
|
|
3203
|
+
},
|
|
3204
|
+
getDisableViews: () => Me.value,
|
|
3205
|
+
setDisableViews: (a) => {
|
|
3206
|
+
if (Me.value = a, a.includes(i.value.view.id)) {
|
|
3207
|
+
const u = ["years", "year", "month", "week", "day"].filter((f) => !a.includes(f));
|
|
3208
|
+
i.value.switchView(u[0]);
|
|
3209
|
+
}
|
|
3210
|
+
},
|
|
3211
|
+
reload: () => Ht(r)
|
|
3212
|
+
}, C.component.calendarList[l] = o.value, e("mounted", o.value));
|
|
3213
|
+
}, Ke = () => {
|
|
3214
|
+
Ot(r), delete C.component.calendarList[l];
|
|
3215
|
+
};
|
|
3216
|
+
return gt(qe), pt(Ke), p(n, (a) => {
|
|
3217
|
+
ie(), e("responsive-change", a);
|
|
3218
|
+
}), p(() => g.value, () => {
|
|
3219
|
+
$();
|
|
3220
|
+
}), p(() => t.selectedDate, (a) => {
|
|
3221
|
+
g.value = P.utils.getJSDateObject(a) ?? /* @__PURE__ */ new Date(), $();
|
|
3222
|
+
}), p(() => t.events, (a) => {
|
|
3223
|
+
j.value = a;
|
|
3224
|
+
}), p(() => t.visible, (a) => {
|
|
3225
|
+
a !== c.value && (c.value = !!a);
|
|
3226
|
+
}), p(() => t.disable, (a) => {
|
|
3227
|
+
const u = !!a;
|
|
3228
|
+
u !== y.value && (y.value = u, K.value = u ? "100-01-01" : t.maxDate, ie());
|
|
3229
|
+
}), p(() => g.value, () => $()), p(() => t.selectedDate, (a) => {
|
|
3230
|
+
const u = P.utils.getJSDateObject(a) ?? /* @__PURE__ */ new Date();
|
|
3231
|
+
+u != +g.value && (g.value = u, $());
|
|
3232
|
+
}), p(() => t.events, (a) => {
|
|
3233
|
+
a !== j.value && (j.value = a ?? []);
|
|
3234
|
+
}), p(() => t.weekendColor, (a) => {
|
|
3235
|
+
var f, W;
|
|
3236
|
+
const u = a ? ue(a) : void 0;
|
|
3237
|
+
u !== _.value && (_.value = u, ie(), (W = (f = i.value) == null ? void 0 : f.view) != null && W.id && se(i.value.view.id));
|
|
3238
|
+
}), p(() => t.weekendDays, (a) => {
|
|
3239
|
+
var u, f;
|
|
3240
|
+
a && a !== B.value && (B.value = a, (f = (u = i.value) == null ? void 0 : u.view) != null && f.id && se(i.value.view.id));
|
|
3241
|
+
}), p(() => t.selectedColor, (a) => {
|
|
3242
|
+
const u = a ? ue(a) : void 0;
|
|
3243
|
+
u !== O.value && (O.value = u, ie());
|
|
3244
|
+
}), p(() => t.showTodayColor, (a) => {
|
|
3245
|
+
const u = !!a;
|
|
3246
|
+
u !== q.value && (q.value = u, ie());
|
|
3247
|
+
}), p(() => t.specialTime, (a) => {
|
|
3248
|
+
a !== Q.value && (Q.value = a ?? {}, $());
|
|
3249
|
+
}), p(() => t.dateCellMinHeight, (a) => {
|
|
3250
|
+
var u, f;
|
|
3251
|
+
a !== ne.value && (ne.value = a, Se(((f = (u = i.value) == null ? void 0 : u.view) == null ? void 0 : f.id) || de.month));
|
|
3252
|
+
}), p(() => t.dateCellMaxHeight, (a) => {
|
|
3253
|
+
var u, f;
|
|
3254
|
+
a !== ee.value && (ee.value = a, Se(((f = (u = i.value) == null ? void 0 : u.view) == null ? void 0 : f.id) || de.month));
|
|
3255
|
+
}), p(() => t.disableDays, (a) => {
|
|
3256
|
+
a !== ve.value && (ve.value = a);
|
|
3257
|
+
}), p(() => t.eventsOnMonthView, (a) => {
|
|
3258
|
+
a !== me.value && (me.value = a);
|
|
3259
|
+
}), p(() => t.hideWeekdays, (a) => {
|
|
3260
|
+
a !== ye.value && (ye.value = a);
|
|
3261
|
+
}), p(() => t.hideWeekends, (a) => {
|
|
3262
|
+
const u = !!a;
|
|
3263
|
+
u !== fe.value && (fe.value = u);
|
|
3264
|
+
}), p(() => t.locale, (a) => {
|
|
3265
|
+
a && a !== we.value && (we.value = a);
|
|
3266
|
+
}), p(() => t.maxDate, (a) => {
|
|
3267
|
+
!y.value && a !== K.value && (K.value = a);
|
|
3268
|
+
}), p(() => t.minDate, (a) => {
|
|
3269
|
+
a !== te.value && (te.value = a);
|
|
3270
|
+
}), p(() => t.startWeekOnSunday, (a) => {
|
|
3271
|
+
var f, W;
|
|
3272
|
+
const u = !!a;
|
|
3273
|
+
u !== re.value && (re.value = u, (W = (f = i.value) == null ? void 0 : f.view) != null && W.id && se(i.value.view.id));
|
|
3274
|
+
}), p(() => t.time, (a) => {
|
|
3275
|
+
const u = !!a;
|
|
3276
|
+
u !== De.value && (De.value = u);
|
|
3277
|
+
}), p(() => t.timeCellHeight, (a) => {
|
|
3278
|
+
a !== ge.value && (ge.value = a);
|
|
3279
|
+
}), p(() => t.timeFormat, (a) => {
|
|
3280
|
+
a && a !== pe.value && (pe.value = a);
|
|
3281
|
+
}), p(() => t.timeFrom, (a) => {
|
|
3282
|
+
const u = Number(a);
|
|
3283
|
+
(a == null || Number.isFinite(u) && u >= 0 && u <= 1440) && a !== be.value && (be.value = a);
|
|
3284
|
+
}), p(() => t.timeStep, (a) => {
|
|
3285
|
+
const u = Number(a);
|
|
3286
|
+
(a == null || Number.isFinite(u) && u > 0 && u <= 1440) && a !== ke.value && (ke.value = a);
|
|
3287
|
+
}), p(() => t.timeTo, (a) => {
|
|
3288
|
+
const u = Number(a);
|
|
3289
|
+
(a == null || Number.isFinite(u) && u >= 0 && u <= 1440) && a !== Ce.value && (Ce.value = a);
|
|
3290
|
+
}), p(() => t.hideTitleBar, (a) => {
|
|
3291
|
+
const u = !!a;
|
|
3292
|
+
u !== _e.value && (_e.value = u);
|
|
3293
|
+
}), p(() => t.twelveHour, (a) => {
|
|
3294
|
+
const u = !!a;
|
|
3295
|
+
u !== Te.value && (Te.value = u);
|
|
3296
|
+
}), p(() => t.activeView, (a) => {
|
|
3297
|
+
var u, f, W;
|
|
3298
|
+
a && a !== ((f = (u = i.value) == null ? void 0 : u.view) == null ? void 0 : f.id) && (Ne.value = a, (W = i.value) == null || W.switchView(a));
|
|
3299
|
+
}), p(() => t.disableViews, (a) => {
|
|
3300
|
+
if (a !== Me.value && (Me.value = a, i.value && Array.isArray(a) && a.includes(i.value.view.id))) {
|
|
3301
|
+
const u = ["years", "year", "month", "week", "day"].find((f) => !a.includes(f));
|
|
3302
|
+
u && i.value.switchView(u);
|
|
3303
|
+
}
|
|
3304
|
+
}), p(() => t.class, () => ie()), {
|
|
3305
|
+
VueCal: lt,
|
|
3306
|
+
attrs: s,
|
|
3307
|
+
props: t,
|
|
3308
|
+
calendarRef: i,
|
|
3309
|
+
visibleClass: w,
|
|
3310
|
+
disableClass: A,
|
|
3311
|
+
responsiveClassList: X,
|
|
3312
|
+
slotNames: d,
|
|
3313
|
+
selectedDate: g,
|
|
3314
|
+
events: j,
|
|
3315
|
+
disableDays: ve,
|
|
3316
|
+
eventsOnMonthView: me,
|
|
3317
|
+
hideWeekdays: ye,
|
|
3318
|
+
hideWeekends: fe,
|
|
3319
|
+
locale: we,
|
|
3320
|
+
maxDate: K,
|
|
3321
|
+
minDate: te,
|
|
3322
|
+
startWeekOnSunday: re,
|
|
3323
|
+
time: De,
|
|
3324
|
+
timeCellHeight: ge,
|
|
3325
|
+
timeFormat: pe,
|
|
3326
|
+
timeFrom: be,
|
|
3327
|
+
timeStep: ke,
|
|
3328
|
+
timeTo: Ce,
|
|
3329
|
+
hideTitleBar: _e,
|
|
3330
|
+
twelveHour: Te,
|
|
3331
|
+
activeView: Ne,
|
|
3332
|
+
disableViews: Me,
|
|
3333
|
+
onViewChange: dt,
|
|
3334
|
+
onCellClick: ct
|
|
3335
|
+
};
|
|
3336
|
+
}
|
|
3337
|
+
});
|
|
3338
|
+
function Qi(t, e, s, l, r, i) {
|
|
3339
|
+
return v(), m("div", {
|
|
3340
|
+
class: V([
|
|
3341
|
+
"hison-calendar",
|
|
3342
|
+
"hison-wrapper",
|
|
3343
|
+
...t.responsiveClassList,
|
|
3344
|
+
t.visibleClass,
|
|
3345
|
+
t.disableClass
|
|
3346
|
+
]),
|
|
3347
|
+
style: z(t.props.style)
|
|
3348
|
+
}, [
|
|
3349
|
+
(v(), G(at(t.VueCal), Re({ ref: "calendarRef" }, t.attrs, {
|
|
3350
|
+
"selected-date": t.selectedDate,
|
|
3351
|
+
events: t.events,
|
|
3352
|
+
"dblclick-to-create": !1,
|
|
3353
|
+
"editable-events": !1,
|
|
3354
|
+
"disable-days": t.disableDays,
|
|
3355
|
+
"events-on-month-view": t.eventsOnMonthView,
|
|
3356
|
+
"hide-weekdays": t.hideWeekdays,
|
|
3357
|
+
"hide-weekends": t.hideWeekends,
|
|
3358
|
+
locale: t.locale,
|
|
3359
|
+
"max-date": t.maxDate,
|
|
3360
|
+
"min-date": t.minDate,
|
|
3361
|
+
"start-week-on-sunday": t.startWeekOnSunday,
|
|
3362
|
+
time: t.time,
|
|
3363
|
+
"time-cell-height": t.timeCellHeight,
|
|
3364
|
+
"time-format": t.timeFormat,
|
|
3365
|
+
"time-from": t.timeFrom,
|
|
3366
|
+
"time-step": t.timeStep,
|
|
3367
|
+
"time-to": t.timeTo,
|
|
3368
|
+
"hide-title-bar": t.hideTitleBar,
|
|
3369
|
+
"twelve-hour": t.twelveHour,
|
|
3370
|
+
"active-view": t.activeView,
|
|
3371
|
+
"disable-views": t.disableViews,
|
|
3372
|
+
onViewChange: t.onViewChange,
|
|
3373
|
+
onCellClick: t.onCellClick
|
|
3374
|
+
}), Le({ _: 2 }, [
|
|
3375
|
+
N(t.slotNames, (o) => ({
|
|
3376
|
+
name: o,
|
|
3377
|
+
fn: T((n) => [
|
|
3378
|
+
k(t.$slots, o, ze(bt(n)), void 0, !0)
|
|
3379
|
+
])
|
|
3380
|
+
}))
|
|
3381
|
+
]), 1040, ["selected-date", "events", "disable-days", "events-on-month-view", "hide-weekdays", "hide-weekends", "locale", "max-date", "min-date", "start-week-on-sunday", "time", "time-cell-height", "time-format", "time-from", "time-step", "time-to", "hide-title-bar", "twelve-hour", "active-view", "disable-views", "onViewChange", "onCellClick"]))
|
|
3382
|
+
], 6);
|
|
3383
|
+
}
|
|
3384
|
+
const ss = /* @__PURE__ */ Wt(Zi, [["render", Qi], ["__scopeId", "data-v-4c9eb363"]]);
|
|
3385
|
+
export {
|
|
3386
|
+
ss as default
|
|
3387
|
+
};
|