vue-simple-calendar - npm Package Compare versions

Comparing version 7.0.1 to 7.1.0

dist/src/CalendarView.vue.d.ts

@@ -30,2 +30,3 @@ import { ICalendarItem, INormalizedCalendarItem, DateTimeFormatOption } from "./ICalendarItem";
     enableHtmlTitles?: boolean | undefined;
+    monthNameOn1st?: boolean | undefined;
 }>, {
@@ -58,2 +59,3 @@ showDate: undefined;
     enableHtmlTitles: boolean;
+    monthNameOn1st: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -100,2 +102,3 @@ "period-changed": () => void;
     enableHtmlTitles?: boolean | undefined;
+    monthNameOn1st?: boolean | undefined;
 }>, {
@@ -128,2 +131,3 @@ showDate: undefined;
     enableHtmlTitles: boolean;
+    monthNameOn1st: boolean;
 }>>> & {
@@ -170,2 +174,3 @@ "onPeriod-changed"?: (() => any) | undefined;
     enableHtmlTitles: boolean;
+    monthNameOn1st: boolean;
 }, {}>, {
@@ -172,0 +177,0 @@ header?(_: {

dist/vue-simple-calendar.js

@@ -1,6 +0,6 @@
-var Te = Object.defineProperty;
-var Ye = (e, r, a) => r in e ? Te(e, r, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[r] = a;
-var Y = (e, r, a) => (Ye(e, typeof r != "symbol" ? r + "" : r, a), a);
-import { defineComponent as le, reactive as Ae, computed as D, watch as we, openBlock as h, createElementBlock as b, normalizeClass as F, unref as g, renderSlot as O, createElementVNode as y, createCommentVNode as oe, Fragment as A, renderList as w, toDisplayString as k, withModifiers as P, normalizeStyle as ie, createTextVNode as de } from "vue";
-const H = () => U(/* @__PURE__ */ new Date()), We = (e, r, a) => {
+var we = Object.defineProperty;
+var Ae = (e, r, a) => r in e ? we(e, r, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[r] = a;
+var Y = (e, r, a) => (Ae(e, typeof r != "symbol" ? r + "" : r, a), a);
+import { defineComponent as ue, reactive as We, computed as f, watch as Ne, openBlock as D, createElementBlock as v, normalizeClass as F, unref as g, renderSlot as C, createElementVNode as y, createCommentVNode as Q, Fragment as w, renderList as A, toDisplayString as k, withModifiers as P, createTextVNode as J, normalizeStyle as de } from "vue";
+const N = () => R(/* @__PURE__ */ new Date()), He = (e, r, a) => {
   switch (r) {
@@ -12,10 +12,10 @@ case "year":
     case "week":
-      return J(e, a);
+      return X(e, a);
     default:
       return e;
   }
-}, He = (e) => [...Array(7)].map((r, a) => L(e, a)), L = (e, r) => new Date(e.getFullYear(), e.getMonth(), e.getDate() + r, e.getHours(), e.getMinutes(), e.getSeconds()), J = (e, r) => L(e, (r - e.getDay() - 7) % -7), Ne = (e, r) => L(J(e, r), 7), W = (e) => new Date(e.getFullYear(), e.getMonth()), Be = (e) => Math.ceil(e.getDate() / 7), Ee = (e, r, a) => new Date(e.getFullYear() + (r == "year" ? a : 0), e.getMonth() + (r == "month" ? a : 0), e.getDate() + (r == "week" ? a * 7 : 0)), K = (e) => ("0" + String(e.getMonth() + 1)).slice(-2), X = (e) => ("0" + String(e.getDate())).slice(-2), ue = (e) => e.getFullYear() + "-" + K(e), Ue = (e) => ue(e) + "-" + X(e), Re = (e) => K(e) + "-" + X(e), Ve = (e, r, a) => {
+}, Be = (e) => [...Array(7)].map((r, a) => L(e, a)), L = (e, r) => new Date(e.getFullYear(), e.getMonth(), e.getDate() + r, e.getHours(), e.getMinutes(), e.getSeconds()), X = (e, r) => L(e, (r - e.getDay() - 7) % -7), Ee = (e, r) => L(X(e, r), 7), W = (e) => new Date(e.getFullYear(), e.getMonth()), Ue = (e) => Math.ceil(e.getDate() / 7), Re = (e, r, a) => new Date(e.getFullYear() + (r == "year" ? a : 0), e.getMonth() + (r == "month" ? a : 0), e.getDate() + (r == "week" ? a * 7 : 0)), Z = (e) => ("0" + String(e.getMonth() + 1)).slice(-2), x = (e) => ("0" + String(e.getDate())).slice(-2), ce = (e) => e.getFullYear() + "-" + Z(e), Ve = (e) => ce(e) + "-" + x(e), ze = (e) => Z(e) + "-" + x(e), je = (e, r, a) => {
   if (e.getHours() === 0 && e.getMinutes() === 0 && e.getSeconds() === 0)
     return "";
-  if (!R()) {
+  if (!V()) {
     var d = (/* @__PURE__ */ new Date()).getTimezoneOffset() * 6e4;
@@ -25,32 +25,32 @@ return new Date(e.getTime() - d).toISOString().slice(11, 16);
   return e.toLocaleTimeString(r, a);
-}, ze = (e, r, a, d) => {
-  const u = e.getFullYear() === r.getFullYear(), c = ge(e, r), M = !(a === "year") && !(a === "month");
-  let f = [];
-  return f.push(d[e.getMonth()]), M && (f.push(" "), f.push(e.getDate())), u || (f.push(M ? ", " : " "), f.push(e.getFullYear())), !c || !u ? (f.push(" – "), c || f.push(d[r.getMonth()]), M && f.push(" ")) : M && f.push(" – "), M ? (f.push(r.getDate()), f.push(", ")) : f.push(" "), f.push(r.getFullYear()), f.join("");
-}, ce = (e, r) => {
+}, qe = (e, r, a, d) => {
+  const u = e.getFullYear() === r.getFullYear(), c = me(e, r), M = !(a === "year") && !(a === "month");
+  let p = [];
+  return p.push(d[e.getMonth()]), M && (p.push(" "), p.push(e.getDate())), u || (p.push(M ? ", " : " "), p.push(e.getFullYear())), !c || !u ? (p.push(" – "), c || p.push(d[r.getMonth()]), M && p.push(" ")) : M && p.push(" – "), M ? (p.push(r.getDate()), p.push(", ")) : p.push(" "), p.push(r.getFullYear()), p.join("");
+}, ge = (e, r) => {
   const a = Date.UTC(r.getFullYear(), r.getMonth(), r.getDate()), d = Date.UTC(e.getFullYear(), e.getMonth(), e.getDate());
   return (a - d) / 864e5;
-}, je = (e, r) => !!e && !!r && ce(e, r) === 0, qe = (e, r) => !!e && !!r && e.getTime() === r.getTime(), ge = (e, r) => !!e && !!r && e.getFullYear() === r.getFullYear() && e.getMonth() === r.getMonth(), Ge = (e) => W(e) < W(H()), Qe = (e) => W(e) > W(H()), Je = (e) => U(e) > H(), Ke = (e) => U(e) < H(), Xe = (e) => e.getMonth() !== L(e, 7).getMonth(), Ze = (e) => e.getMonth() !== L(e, 1).getMonth(), me = (e) => {
+}, Ge = (e, r) => !!e && !!r && ge(e, r) === 0, Qe = (e, r) => !!e && !!r && e.getTime() === r.getTime(), me = (e, r) => !!e && !!r && e.getFullYear() === r.getFullYear() && e.getMonth() === r.getMonth(), Je = (e) => W(e) < W(N()), Ke = (e) => W(e) > W(N()), Xe = (e) => R(e) > N(), Ze = (e) => R(e) < N(), xe = (e) => e.getMonth() !== L(e, 7).getMonth(), _e = (e) => e.getMonth() !== L(e, 1).getMonth(), fe = (e) => {
   let r = [...Array(7)].map((a) => 0);
   return e.split(/\D/, 7).forEach((a, d) => r[d] = Number(a)), r[1]--, new Date(r[0], r[1], r[2], r[3], r[4], r[5], r[6]);
-}, Q = (e) => typeof e == "string" ? me(e) : new Date(e), U = (e) => {
+}, K = (e) => typeof e == "string" ? fe(e) : new Date(e), R = (e) => {
   const r = new Date(e);
   return r.setHours(0, 0, 0, 0), r;
-}, xe = (e) => e.substring(0, 2), R = () => typeof Intl < "u", _e = (e, r) => {
-  if (!R())
+}, et = (e) => e.substring(0, 2), V = () => typeof Intl < "u", tt = (e, r) => {
+  if (!V())
     return [...Array(12)].map((d) => "");
   const a = new Intl.DateTimeFormat(e, { month: r });
   return [...Array(12)].map((d, u) => a.format(new Date(2017, u, 1)));
-}, et = (e, r, a) => {
-  if (!R())
+}, at = (e, r, a) => {
+  if (!V())
     return [...Array(7)].map((u) => "");
   const d = new Intl.DateTimeFormat(e, { weekday: r });
   return [...Array(7)].map((u, c) => d.format(new Date(2017, 0, (c + 1 + a) % 7)));
-}, tt = () => typeof navigator > "u" ? "unk" : (navigator.languages && navigator.languages.length ? navigator.languages[0] : navigator.language).toLowerCase(), at = (e, r) => {
+}, rt = () => typeof navigator > "u" ? "unk" : (navigator.languages && navigator.languages.length ? navigator.languages[0] : navigator.language).toLowerCase(), nt = (e, r) => {
   const a = e.classes ? [...e.classes] : [];
   return r && a.push("isHovered"), {
     originalItem: e,
-    startDate: Q(e.startDate),
+    startDate: K(e.startDate),
     // For an item without an end date, the end date is the start date
-    endDate: Q(e.endDate || e.startDate),
+    endDate: K(e.endDate || e.startDate),
     classes: a,
@@ -66,40 +66,40 @@ // Items without a title are untitled
   };
-}, n = {
+}, o = {
   addDays: L,
   beginningOfMonth: W,
-  beginningOfPeriod: We,
-  beginningOfWeek: J,
-  dateOnly: U,
-  dayDiff: ce,
-  daysOfWeek: He,
-  endOfWeek: Ne,
-  formattedPeriod: ze,
-  formattedTime: Ve,
-  fromIsoStringToLocalDate: me,
-  getDefaultBrowserLocale: tt,
-  getFormattedMonthNames: _e,
-  getFormattedWeekdayNames: et,
-  incrementPeriod: Ee,
-  instanceOfMonth: Be,
-  isFutureMonth: Qe,
-  isInFuture: Je,
-  isInPast: Ke,
-  isLastDayOfMonth: Ze,
-  isLastInstanceOfMonth: Xe,
-  isoMonthDay: Re,
-  isoYearMonth: ue,
-  isoYearMonthDay: Ue,
-  isPastMonth: Ge,
-  isSameDate: je,
-  isSameDateTime: qe,
-  isSameMonth: ge,
-  languageCode: xe,
-  normalizeItem: at,
-  paddedDay: X,
-  paddedMonth: K,
-  supportsIntl: R,
-  today: H,
-  toLocalDate: Q
+  beginningOfPeriod: He,
+  beginningOfWeek: X,
+  dateOnly: R,
+  dayDiff: ge,
+  daysOfWeek: Be,
+  endOfWeek: Ee,
+  formattedPeriod: qe,
+  formattedTime: je,
+  fromIsoStringToLocalDate: fe,
+  getDefaultBrowserLocale: rt,
+  getFormattedMonthNames: tt,
+  getFormattedWeekdayNames: at,
+  incrementPeriod: Re,
+  instanceOfMonth: Ue,
+  isFutureMonth: Ke,
+  isInFuture: Xe,
+  isInPast: Ze,
+  isLastDayOfMonth: _e,
+  isLastInstanceOfMonth: xe,
+  isoMonthDay: ze,
+  isoYearMonth: ce,
+  isoYearMonthDay: Ve,
+  isPastMonth: Je,
+  isSameDate: Ge,
+  isSameDateTime: Qe,
+  isSameMonth: me,
+  languageCode: et,
+  normalizeItem: nt,
+  paddedDay: x,
+  paddedMonth: Z,
+  supportsIntl: V,
+  today: N,
+  toLocalDate: K
 };
-class rt {
+class ot {
   constructor() {
@@ -109,12 +109,15 @@ Y(this, "currentDragItem");
     Y(this, "currentHoveredItemId", "");
-    Y(this, "CalendarMath", n);
+    Y(this, "CalendarMath", o);
   }
 }
-const nt = { class: "cv-header-days" }, st = {
+const st = { class: "cv-header-days" }, it = {
   key: 0,
   class: "cv-weeknumber"
-}, ot = ["aria-multiselectable"], it = {
+}, lt = ["aria-multiselectable"], dt = {
   key: 0,
   class: "cv-weeknumber"
-}, lt = { class: "cv-weekdays" }, dt = ["draggable", "aria-grabbed", "aria-label", "aria-selected", "aria-dropeffect", "onClick", "onDragstart", "onDrop", "onDragover", "onDragenter", "onDragleave"], ut = { class: "cv-day-number" }, ct = ["draggable", "aria-grabbed", "title", "onDragstart", "onMouseenter", "onMouseleave", "onClick", "innerHTML"], gt = ["draggable", "aria-grabbed", "title", "onDragstart", "onMouseenter", "onMouseleave", "onClick"], Mt = /* @__PURE__ */ le({
+}, ut = { class: "cv-weekdays" }, ct = ["draggable", "aria-grabbed", "aria-label", "aria-selected", "aria-dropeffect", "onClick", "onDragstart", "onDrop", "onDragover", "onDragenter", "onDragleave"], gt = { class: "cv-day-number" }, mt = {
+  key: 0,
+  class: "cv-fom-name"
+}, ft = ["draggable", "aria-grabbed", "title", "onDragstart", "onMouseenter", "onMouseleave", "onClick", "innerHTML"], pt = ["draggable", "aria-grabbed", "title", "onDragstart", "onMouseenter", "onMouseleave", "onClick"], Ot = /* @__PURE__ */ ue({
   __name: "CalendarView",
@@ -147,20 +150,21 @@ props: {
     doEmitItemMouseEvents: { type: Boolean, default: !1 },
-    enableHtmlTitles: { type: Boolean, default: !0 }
+    enableHtmlTitles: { type: Boolean, default: !0 },
+    monthNameOn1st: { type: Boolean, default: !0 }
   },
   emits: ["period-changed", "click-date", "click-item", "item-mouseenter", "item-mouseleave", "drag-start", "drag-over-date", "drag-enter-date", "drag-leave-date", "drop-on-date", "date-selection", "date-selection-start", "date-selection-finish"],
   setup(e, { emit: r }) {
-    const a = e, d = r, u = Ae(new rt()), c = D(() => a.locale || n.getDefaultBrowserLocale()), I = D(() => a.showDate ? n.dateOnly(a.showDate) : n.today()), p = D(() => n.beginningOfPeriod(I.value, a.displayPeriodUom, a.startingDayOfWeek)), M = D(
-      () => n.addDays(n.incrementPeriod(p.value, a.displayPeriodUom, a.displayPeriodCount), -1)
-    ), f = D(() => {
-      const t = new Date(p.value.getFullYear(), 0, 1), o = n.addDays(t, (11 - t.getDay()) % 7), i = n.beginningOfPeriod(o, "week", a.startingDayOfWeek), m = n.beginningOfWeek(p.value, a.startingDayOfWeek);
-      return 1 + Math.floor(n.dayDiff(i, m) / 7);
-    }), N = D(() => n.beginningOfWeek(p.value, a.startingDayOfWeek)), V = D(() => n.endOfWeek(M.value, a.startingDayOfWeek)), fe = D(() => {
-      const t = Math.floor((n.dayDiff(N.value, V.value) + 1) / 7);
-      return [...Array(t)].map((o, i) => n.addDays(N.value, i * 7));
-    }), z = D(() => n.getFormattedMonthNames(c.value, a.monthNameFormat)), De = D(() => n.getFormattedWeekdayNames(c.value, a.weekdayNameFormat, a.startingDayOfWeek)), j = D(() => a.items ? a.items.map((t) => n.normalizeItem(t, t.id === u.currentHoveredItemId)) : []), q = D(() => n.beginningOfPeriod(n.today(), a.displayPeriodUom, a.startingDayOfWeek)), pe = D(
-      () => n.addDays(n.incrementPeriod(q.value, a.displayPeriodUom, a.displayPeriodCount), -1)
-    ), ve = D(() => n.formattedPeriod(p.value, M.value, a.displayPeriodUom, z.value)), he = D(() => {
-      const t = q.value, o = p.value;
-      return a.currentPeriodLabel ? a.currentPeriodLabel === "icons" ? a.currentPeriodLabelIcons[Math.sign(t.getTime() - o.getTime()) + 1] : a.currentPeriodLabel : n.formattedPeriod(t, pe.value, a.displayPeriodUom, z.value);
-    }), be = D(
+    const a = e, d = r, u = We(new ot()), c = f(() => a.locale || o.getDefaultBrowserLocale()), I = f(() => a.showDate ? o.dateOnly(a.showDate) : o.today()), h = f(() => o.beginningOfPeriod(I.value, a.displayPeriodUom, a.startingDayOfWeek)), M = f(
+      () => o.addDays(o.incrementPeriod(h.value, a.displayPeriodUom, a.displayPeriodCount), -1)
+    ), p = f(() => {
+      const t = new Date(h.value.getFullYear(), 0, 1), s = o.addDays(t, (11 - t.getDay()) % 7), i = o.beginningOfPeriod(s, "week", a.startingDayOfWeek), m = o.beginningOfWeek(h.value, a.startingDayOfWeek);
+      return 1 + Math.floor(o.dayDiff(i, m) / 7);
+    }), H = f(() => o.beginningOfWeek(h.value, a.startingDayOfWeek)), z = f(() => o.endOfWeek(M.value, a.startingDayOfWeek)), pe = f(() => {
+      const t = Math.floor((o.dayDiff(H.value, z.value) + 1) / 7);
+      return [...Array(t)].map((s, i) => o.addDays(H.value, i * 7));
+    }), B = f(() => o.getFormattedMonthNames(c.value, a.monthNameFormat)), De = f(() => o.getFormattedWeekdayNames(c.value, a.weekdayNameFormat, a.startingDayOfWeek)), j = f(() => a.items ? a.items.map((t) => o.normalizeItem(t, t.id === u.currentHoveredItemId)) : []), q = f(() => o.beginningOfPeriod(o.today(), a.displayPeriodUom, a.startingDayOfWeek)), ve = f(
+      () => o.addDays(o.incrementPeriod(q.value, a.displayPeriodUom, a.displayPeriodCount), -1)
+    ), he = f(() => o.formattedPeriod(h.value, M.value, a.displayPeriodUom, B.value)), be = f(() => {
+      const t = q.value, s = h.value;
+      return a.currentPeriodLabel ? a.currentPeriodLabel === "icons" ? a.currentPeriodLabelIcons[Math.sign(t.getTime() - s.getTime()) + 1] : a.currentPeriodLabel : o.formattedPeriod(t, ve.value, a.displayPeriodUom, B.value);
+    }), ye = f(() => a.monthNameOn1st && (a.displayPeriodUom !== "month" || a.displayPeriodCount > 1)), _ = (t) => ye.value && t.getDate() == 1 ? B.value[t.getMonth()] : "", Pe = f(
       () => ({
@@ -175,22 +179,22 @@ // Dates for UI navigation
         currentPeriod: q.value,
-        currentPeriodLabel: he.value,
+        currentPeriodLabel: be.value,
         // Dates for header display
-        periodStart: p.value,
+        periodStart: h.value,
         periodEnd: M.value,
         // Extra information that could be useful to a custom header
         displayLocale: c.value,
-        displayFirstDate: N.value,
-        displayLastDate: V.value,
-        monthNames: z.value,
+        displayFirstDate: H.value,
+        displayLastDate: z.value,
+        monthNames: B.value,
         fixedItems: j.value,
-        periodLabel: ve.value
+        periodLabel: he.value
       })
-    ), ye = D(() => ({
-      periodStart: p,
+    ), Me = f(() => ({
+      periodStart: h,
       periodEnd: M,
-      displayFirstDate: N,
-      displayLastDate: V
+      displayFirstDate: H,
+      displayLastDate: z
     }));
-    we(
-      () => ye,
+    Ne(
+      () => Me,
       (t) => {
@@ -201,34 +205,34 @@ a.periodChangedCallback && (d("period-changed"), a.periodChangedCallback(t, "watch"));
     );
-    const Pe = (t, o) => {
-      a.disablePast && n.isInPast(t) || a.disableFuture && n.isInFuture(t) || d("click-date", t, te(t, t), o);
-    }, Z = (t, o) => d("click-item", t, o), $ = (t) => "dow" + (t + a.startingDayOfWeek) % 7, S = (t) => {
-      const o = n.incrementPeriod(p.value, a.displayPeriodUom, t), i = n.incrementPeriod(o, a.displayPeriodUom, a.displayPeriodCount);
-      return a.disablePast && i <= n.today() || a.disableFuture && o > n.today() ? null : o;
-    }, x = (t, o) => {
-      u.currentHoveredItemId = t.id, a.doEmitItemMouseEvents && d("item-mouseenter", t, o);
-    }, _ = (t, o) => {
-      u.currentHoveredItemId = "", a.doEmitItemMouseEvents && d("item-mouseleave", t, o);
-    }, Me = (t, o) => {
-      var m, s;
+    const ke = (t, s) => {
+      a.disablePast && o.isInPast(t) || a.disableFuture && o.isInFuture(t) || d("click-date", t, ne(t, t), s);
+    }, ee = (t, s) => d("click-item", t, s), $ = (t) => "dow" + (t + a.startingDayOfWeek) % 7, S = (t) => {
+      const s = o.incrementPeriod(h.value, a.displayPeriodUom, t), i = o.incrementPeriod(s, a.displayPeriodUom, a.displayPeriodCount);
+      return a.disablePast && i <= o.today() || a.disableFuture && s > o.today() ? null : s;
+    }, te = (t, s) => {
+      u.currentHoveredItemId = t.id, a.doEmitItemMouseEvents && d("item-mouseenter", t, s);
+    }, ae = (t, s) => {
+      u.currentHoveredItemId = "", a.doEmitItemMouseEvents && d("item-mouseleave", t, s);
+    }, Ie = (t, s) => {
+      var m, n;
       if (!a.enableDateSelection)
         return !1;
-      (m = o.dataTransfer) == null || m.setData("text", t.toString());
+      (m = s.dataTransfer) == null || m.setData("text", t.toString());
       let i = new Image();
-      return i.src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==", (s = o.dataTransfer) == null || s.setDragImage(i, 10, 10), u.dateSelectionOrigin = t, d("date-selection-start", G(t), o), !0;
-    }, ee = (t, o) => {
+      return i.src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==", (n = s.dataTransfer) == null || n.setDragImage(i, 10, 10), u.dateSelectionOrigin = t, d("date-selection-start", G(t), s), !0;
+    }, re = (t, s) => {
       var i;
-      return a.enableDragDrop ? ((i = o.dataTransfer) == null || i.setData("text", t.id), u.currentDragItem = t, u.dateSelectionOrigin = void 0, d("drag-start", t, o), !0) : !1;
-    }, G = (t) => t <= u.dateSelectionOrigin ? [t, u.dateSelectionOrigin] : [u.dateSelectionOrigin, t], ke = (t, o) => {
-      a.enableDragDrop && d("drag-over-date", u.currentDragItem, t, o);
-    }, Ie = (t, o) => {
-      if (a.enableDateSelection && u.dateSelectionOrigin && d("date-selection", G(t), o), !a.enableDragDrop)
+      return a.enableDragDrop ? ((i = s.dataTransfer) == null || i.setData("text", t.id), u.currentDragItem = t, u.dateSelectionOrigin = void 0, d("drag-start", t, s), !0) : !1;
+    }, G = (t) => t <= u.dateSelectionOrigin ? [t, u.dateSelectionOrigin] : [u.dateSelectionOrigin, t], Oe = (t, s) => {
+      a.enableDragDrop && d("drag-over-date", u.currentDragItem, t, s);
+    }, Ce = (t, s) => {
+      if (a.enableDateSelection && u.dateSelectionOrigin && d("date-selection", G(t), s), !a.enableDragDrop)
         return;
-      d("drag-enter-date", u.currentDragItem, t, o), o.target.classList.add("draghover");
-    }, Ce = (t, o) => {
+      d("drag-enter-date", u.currentDragItem, t, s), s.target.classList.add("draghover");
+    }, Se = (t, s) => {
       if (a.enableDateSelection && a.selectionStart || !a.enableDragDrop)
         return;
-      d("drag-leave-date", u.currentDragItem, t, o), o.target.classList.remove("draghover");
-    }, Oe = (t, o) => {
+      d("drag-leave-date", u.currentDragItem, t, s), s.target.classList.remove("draghover");
+    }, Fe = (t, s) => {
       if (a.enableDateSelection && u.dateSelectionOrigin) {
-        d("date-selection-finish", G(t), o);
+        d("date-selection-finish", G(t), s);
         return;
@@ -238,57 +242,57 @@ }
         return;
-      d("drop-on-date", u.currentDragItem, t, o), o.target.classList.remove("draghover");
-    }, Se = (t, o) => t.startDate < o.startDate ? -1 : o.startDate < t.startDate ? 1 : t.endDate > o.endDate ? -1 : o.endDate > t.endDate ? 1 : t.id < o.id ? -1 : 1, Fe = (t) => te(t, n.addDays(t, 6)), te = (t, o) => j.value.filter((i) => i.endDate >= t && n.dateOnly(i.startDate) <= o, this).sort(Se), Le = (t) => !!j.value.find((o) => o.endDate >= t && n.dateOnly(o.startDate) <= t), ae = (t) => !(!a.selectionStart || !a.selectionEnd || t < n.dateOnly(a.selectionStart) || t > n.dateOnly(a.selectionEnd)), re = (t) => {
-      const o = Fe(t), i = [], m = [[], [], [], [], [], [], []];
-      if (!o)
+      d("drop-on-date", u.currentDragItem, t, s), s.target.classList.remove("draghover");
+    }, Le = (t, s) => t.startDate < s.startDate ? -1 : s.startDate < t.startDate ? 1 : t.endDate > s.endDate ? -1 : s.endDate > t.endDate ? 1 : t.id < s.id ? -1 : 1, $e = (t) => ne(t, o.addDays(t, 6)), ne = (t, s) => j.value.filter((i) => i.endDate >= t && o.dateOnly(i.startDate) <= s, this).sort(Le), Te = (t) => !!j.value.find((s) => s.endDate >= t && o.dateOnly(s.startDate) <= t), oe = (t) => !(!a.selectionStart || !a.selectionEnd || t < o.dateOnly(a.selectionStart) || t > o.dateOnly(a.selectionEnd)), se = (t) => {
+      const s = $e(t), i = [], m = [[], [], [], [], [], [], []];
+      if (!s)
         return i;
-      for (let s = 0; s < o.length; s++) {
-        const l = Object.assign({}, o[s], {
-          classes: [...o[s].classes],
+      for (let n = 0; n < s.length; n++) {
+        const l = Object.assign({}, s[n], {
+          classes: [...s[n].classes],
           itemRow: 0
-        }), v = l.startDate < t, T = v ? 0 : n.dayDiff(t, l.startDate), se = Math.max(1, Math.min(7 - T, n.dayDiff(n.addDays(t, T), l.endDate) + 1));
-        v && l.classes.push("continued"), n.dayDiff(t, l.endDate) > 6 && l.classes.push("toBeContinued"), n.isInPast(l.endDate) && l.classes.push("past"), l.originalItem.url && l.classes.push("hasUrl");
-        for (let C = 0; C < 7; C++)
-          if (C === T) {
-            let E = 0;
-            for (; m[C][E]; )
-              E++;
-            l.itemRow = E, m[C][E] = !0;
+        }), b = l.startDate < t, T = b ? 0 : o.dayDiff(t, l.startDate), le = Math.max(1, Math.min(7 - T, o.dayDiff(o.addDays(t, T), l.endDate) + 1));
+        b && l.classes.push("continued"), o.dayDiff(t, l.endDate) > 6 && l.classes.push("toBeContinued"), o.isInPast(l.endDate) && l.classes.push("past"), l.originalItem.url && l.classes.push("hasUrl");
+        for (let O = 0; O < 7; O++)
+          if (O === T) {
+            let U = 0;
+            for (; m[O][U]; )
+              U++;
+            l.itemRow = U, m[O][U] = !0;
           } else
-            C < T + se && (m[C][l.itemRow] = !0);
-        l.classes.push(`offset${T}`), l.classes.push(`span${se}`), i.push(l);
+            O < T + le && (m[O][l.itemRow] = !0);
+        l.classes.push(`offset${T}`), l.classes.push(`span${le}`), i.push(l);
       }
       return i;
-    }, $e = (t) => {
-      const o = '<span class="startTime">' + n.formattedTime(t.startDate, c.value, a.timeFormatOptions) + "</span>";
+    }, Ye = (t) => {
+      const s = '<span class="startTime">' + o.formattedTime(t.startDate, c.value, a.timeFormatOptions) + "</span>";
       let i = "";
-      return n.isSameDateTime(t.startDate, t.endDate) || (i = '<span class="endTime">' + n.formattedTime(t.endDate, c.value, a.timeFormatOptions) + "</span>"), o + i;
-    }, ne = (t) => a.showTimes ? $e(t) + " " + t.title : t.title, B = (t) => {
-      const o = t.itemRow, i = a.itemContentHeight, m = a.itemBorderHeight;
-      return `calc(${a.itemTop} + ${o}*${i} + ${o}*${m})`;
+      return o.isSameDateTime(t.startDate, t.endDate) || (i = '<span class="endTime">' + o.formattedTime(t.endDate, c.value, a.timeFormatOptions) + "</span>"), s + i;
+    }, ie = (t) => a.showTimes ? Ye(t) + " " + t.title : t.title, E = (t) => {
+      const s = t.itemRow, i = a.itemContentHeight, m = a.itemBorderHeight;
+      return `calc(${a.itemTop} + ${s}*${i} + ${s}*${m})`;
     };
-    return (t, o) => (h(), b("div", {
+    return (t, s) => (D(), v("div", {
       "aria-label": "Calendar",
       class: F([
         "cv-wrapper",
-        `locale-${g(n).languageCode(c.value)}`,
+        `locale-${g(o).languageCode(c.value)}`,
         `locale-${c.value}`,
-        `y${p.value.getFullYear()}`,
-        `m${g(n).paddedMonth(p.value)}`,
+        `y${h.value.getFullYear()}`,
+        `m${g(o).paddedMonth(h.value)}`,
         `period-${t.displayPeriodUom}`,
         `periodCount-${t.displayPeriodCount}`,
         {
-          past: g(n).isPastMonth(p.value),
-          future: g(n).isFutureMonth(p.value),
-          noIntl: !g(n).supportsIntl
+          past: g(o).isPastMonth(h.value),
+          future: g(o).isFutureMonth(h.value),
+          noIntl: !g(o).supportsIntl
         }
       ])
     }, [
-      O(t.$slots, "header", { headerProps: be.value }),
-      y("div", nt, [
-        t.displayWeekNumbers ? (h(), b("div", st)) : oe("", !0),
-        (h(!0), b(A, null, w(De.value, (i, m) => O(t.$slots, "day-header", {
+      C(t.$slots, "header", { headerProps: Pe.value }),
+      y("div", st, [
+        t.displayWeekNumbers ? (D(), v("div", it)) : Q("", !0),
+        (D(!0), v(w, null, A(De.value, (i, m) => C(t.$slots, "day-header", {
           index: $(m),
           label: i
         }, () => [
-          (h(), b("div", {
+          (D(), v("div", {
             key: $(m),
@@ -303,17 +307,17 @@ class: F([$(m), "cv-header-day"])
       }, [
-        (h(!0), b(A, null, w(fe.value, (i, m) => (h(), b("div", {
+        (D(!0), v(w, null, A(pe.value, (i, m) => (D(), v("div", {
           key: `${m}-week`,
-          class: F(["cv-week", `week${m + 1}`, `ws${g(n).isoYearMonthDay(i)}`])
+          class: F(["cv-week", `week${m + 1}`, `ws${g(o).isoYearMonthDay(i)}`])
         }, [
-          t.displayWeekNumbers ? (h(), b("div", it, [
-            O(t.$slots, "week-number", {
+          t.displayWeekNumbers ? (D(), v("div", dt, [
+            C(t.$slots, "week-number", {
               date: i,
-              numberInYear: f.value + m,
+              numberInYear: p.value + m,
               numberInPeriod: m + 1
             }, () => [
-              y("span", null, k(f.value + m), 1)
+              y("span", null, k(p.value + m), 1)
             ])
-          ])) : oe("", !0),
-          y("div", lt, [
-            (h(!0), b(A, null, w(g(n).daysOfWeek(i), (s, l) => (h(), b("div", {
+          ])) : Q("", !0),
+          y("div", ut, [
+            (D(!0), v(w, null, A(g(o).daysOfWeek(i), (n, l) => (D(), v("div", {
               key: $(l),
@@ -324,76 +328,79 @@ draggable: t.enableDateSelection,
                 $(l),
-                `d${g(n).isoYearMonthDay(s)}`,
-                `d${g(n).isoMonthDay(s)}`,
-                `d${g(n).paddedDay(s)}`,
-                `instance${g(n).instanceOfMonth(s)}`,
+                `d${g(o).isoYearMonthDay(n)}`,
+                `d${g(o).isoMonthDay(n)}`,
+                `d${g(o).paddedDay(n)}`,
+                `instance${g(o).instanceOfMonth(n)}`,
                 {
-                  today: g(n).isSameDate(s, g(n).today()),
-                  outsideOfMonth: !g(n).isSameMonth(s, I.value),
-                  past: g(n).isInPast(s),
-                  future: g(n).isInFuture(s),
-                  last: g(n).isLastDayOfMonth(s),
-                  lastInstance: g(n).isLastInstanceOfMonth(s),
-                  hasItems: Le(s),
-                  selectionStart: g(n).isSameDate(s, t.selectionStart),
-                  selectionEnd: g(n).isSameDate(s, t.selectionEnd)
+                  today: g(o).isSameDate(n, g(o).today()),
+                  outsideOfMonth: !g(o).isSameMonth(n, I.value),
+                  past: g(o).isInPast(n),
+                  future: g(o).isInFuture(n),
+                  last: g(o).isLastDayOfMonth(n),
+                  lastInstance: g(o).isLastInstanceOfMonth(n),
+                  hasItems: Te(n),
+                  selectionStart: g(o).isSameDate(n, t.selectionStart),
+                  selectionEnd: g(o).isSameDate(n, t.selectionEnd)
                 },
-                ...t.dateClasses && t.dateClasses[g(n).isoYearMonthDay(s)] || []
+                ...t.dateClasses && t.dateClasses[g(o).isoYearMonthDay(n)] || []
               ]),
-              "aria-grabbed": t.enableDateSelection ? ae(s) : void 0,
-              "aria-label": s.getDate().toString(),
-              "aria-selected": ae(s),
+              "aria-grabbed": t.enableDateSelection ? oe(n) : void 0,
+              "aria-label": n.getDate().toString(),
+              "aria-selected": oe(n),
               "aria-dropeffect": t.enableDragDrop && u.currentDragItem ? "move" : t.enableDateSelection && u.dateSelectionOrigin ? "execute" : "none",
-              onClick: (v) => Pe(s, v),
-              onDragstart: (v) => Me(s, v),
-              onDrop: P((v) => Oe(s, v), ["prevent"]),
-              onDragover: P((v) => ke(s, v), ["prevent"]),
-              onDragenter: P((v) => Ie(s, v), ["prevent"]),
-              onDragleave: P((v) => Ce(s, v), ["prevent"])
+              onClick: (b) => ke(n, b),
+              onDragstart: (b) => Ie(n, b),
+              onDrop: P((b) => Fe(n, b), ["prevent"]),
+              onDragover: P((b) => Oe(n, b), ["prevent"]),
+              onDragenter: P((b) => Ce(n, b), ["prevent"]),
+              onDragleave: P((b) => Se(n, b), ["prevent"])
             }, [
-              y("div", ut, k(s.getDate()), 1),
-              O(t.$slots, "day-content", { day: s })
-            ], 42, dt))), 128)),
-            a.enableHtmlTitles ? (h(!0), b(A, { key: 0 }, w(re(i), (s) => O(t.$slots, "item", {
-              value: s,
+              y("div", gt, [
+                _(n) ? (D(), v("span", mt, k(_(n)), 1)) : Q("", !0),
+                J(" " + k(n.getDate()), 1)
+              ]),
+              C(t.$slots, "day-content", { day: n })
+            ], 42, ct))), 128)),
+            a.enableHtmlTitles ? (D(!0), v(w, { key: 0 }, A(se(i), (n) => C(t.$slots, "item", {
+              value: n,
               weekStartDate: i,
-              top: B(s)
+              top: E(n)
             }, () => [
-              (h(), b("div", {
-                key: s.id,
+              (D(), v("div", {
+                key: n.id,
                 draggable: t.enableDragDrop,
-                "aria-grabbed": t.enableDragDrop ? s == u.currentDragItem : void 0,
-                class: F([s.classes, "cv-item"]),
-                title: s.tooltip || s.title,
-                style: ie(`top:${B(s)};${s.originalItem.style}`),
-                onDragstart: (l) => ee(s, l),
-                onMouseenter: (l) => x(s, l),
-                onMouseleave: (l) => _(s, l),
-                onClick: P((l) => Z(s, l), ["stop"]),
-                innerHTML: ne(s)
-              }, null, 46, ct))
-            ])), 256)) : (h(!0), b(A, { key: 1 }, w(re(i), (s) => O(t.$slots, "item", {
-              value: s,
+                "aria-grabbed": t.enableDragDrop ? n == u.currentDragItem : void 0,
+                class: F([n.classes, "cv-item"]),
+                title: n.tooltip || n.title,
+                style: de(`top:${E(n)};${n.originalItem.style}`),
+                onDragstart: (l) => re(n, l),
+                onMouseenter: (l) => te(n, l),
+                onMouseleave: (l) => ae(n, l),
+                onClick: P((l) => ee(n, l), ["stop"]),
+                innerHTML: ie(n)
+              }, null, 46, ft))
+            ])), 256)) : (D(!0), v(w, { key: 1 }, A(se(i), (n) => C(t.$slots, "item", {
+              value: n,
               weekStartDate: i,
-              top: B(s)
+              top: E(n)
             }, () => [
-              (h(), b("div", {
-                key: s.id,
+              (D(), v("div", {
+                key: n.id,
                 draggable: t.enableDragDrop,
-                "aria-grabbed": t.enableDragDrop ? s == u.currentDragItem : void 0,
-                class: F([s.classes, "cv-item"]),
-                title: s.tooltip || s.title,
-                style: ie(`top:${B(s)};${s.originalItem.style}`),
-                onDragstart: (l) => ee(s, l),
-                onMouseenter: (l) => x(s, l),
-                onMouseleave: (l) => _(s, l),
-                onClick: P((l) => Z(s, l), ["stop"])
-              }, k(ne(s)), 47, gt)),
-              de(" div> ")
+                "aria-grabbed": t.enableDragDrop ? n == u.currentDragItem : void 0,
+                class: F([n.classes, "cv-item"]),
+                title: n.tooltip || n.title,
+                style: de(`top:${E(n)};${n.originalItem.style}`),
+                onDragstart: (l) => re(n, l),
+                onMouseenter: (l) => te(n, l),
+                onMouseleave: (l) => ae(n, l),
+                onClick: P((l) => ee(n, l), ["stop"])
+              }, k(ie(n)), 47, pt)),
+              J(" div> ")
             ])), 256))
           ])
         ], 2))), 128))
-      ], 8, ot)
+      ], 8, lt)
     ], 2));
   }
-}), mt = { class: "cv-header" }, ft = { class: "cv-header-nav" }, Dt = ["disabled"], pt = ["disabled", "innerHTML"], vt = ["disabled"], ht = ["disabled"], bt = { class: "periodLabel" }, kt = /* @__PURE__ */ le({
+}), Dt = { class: "cv-header" }, vt = { class: "cv-header-nav" }, ht = ["disabled"], bt = ["disabled", "innerHTML"], yt = ["disabled"], Pt = ["disabled"], Mt = { class: "periodLabel" }, Ct = /* @__PURE__ */ ue({
   __name: "CalendarViewHeader",
@@ -413,4 +420,4 @@ props: {
     const a = r, d = (u) => a("input", u);
-    return (u, c) => (h(), b("div", mt, [
-      y("div", ft, [
+    return (u, c) => (D(), v("div", Dt, [
+      y("div", vt, [
         y("button", {
@@ -421,3 +428,3 @@ disabled: !e.headerProps.previousYear,
           onClick: c[0] || (c[0] = P((I) => d(e.headerProps.previousYear), ["prevent"]))
-        }, k(e.previousYearLabel), 9, Dt),
+        }, k(e.previousYearLabel), 9, ht),
         y("button", {
@@ -429,3 +436,3 @@ disabled: !e.headerProps.previousPeriod,
           innerHTML: e.previousPeriodLabel
-        }, null, 8, pt),
+        }, null, 8, bt),
         y("button", {
@@ -441,3 +448,3 @@ class: "currentPeriod",
           onClick: c[3] || (c[3] = P((I) => d(e.headerProps.nextPeriod), ["prevent"]))
-        }, k(e.nextPeriodLabel), 9, vt),
+        }, k(e.nextPeriodLabel), 9, yt),
         y("button", {
@@ -448,7 +455,7 @@ disabled: !e.headerProps.nextYear,
           onClick: c[4] || (c[4] = P((I) => d(e.headerProps.nextYear), ["prevent"]))
-        }, k(e.nextYearLabel), 9, ht)
+        }, k(e.nextYearLabel), 9, Pt)
       ]),
-      y("div", bt, [
-        O(u.$slots, "label", {}, () => [
-          de(k(e.headerProps.periodLabel), 1)
+      y("div", Mt, [
+        C(u.$slots, "label", {}, () => [
+          J(k(e.headerProps.periodLabel), 1)
         ])
@@ -460,5 +467,5 @@ ])
 export {
-  n as CalendarMath,
-  Mt as CalendarView,
-  kt as CalendarViewHeader
+  o as CalendarMath,
+  Ot as CalendarView,
+  Ct as CalendarViewHeader
 };

package.json

 {
 	"name": "vue-simple-calendar",
-	"version": "7.0.1",
+	"version": "7.1.0",
 	"private": false,
@@ -57,3 +57,3 @@ "type": "module",
 	"devDependencies": {
-		"@typescript-eslint/parser": "^6.19.0",
+		"@typescript-eslint/parser": "^6.20.0",
 		"@vitejs/plugin-vue": "^5.0.3",
@@ -65,11 +65,11 @@ "@vue/compiler-sfc": "^3.4.15",
 		"eslint-plugin-prettier": "^5.1.3",
-		"eslint-plugin-vue": "^9.20.1",
+		"eslint-plugin-vue": "^9.21.1",
 		"postcss": "^8.4.33",
 		"prettier": "^3.2.4",
 		"rollup-plugin-typescript2": "^0.36.0",
-		"stylelint": "^16.1.0",
+		"stylelint": "^16.2.1",
 		"stylelint-config-standard": "^36.0.0",
 		"typescript": "^5.3.3",
-		"vite": "^5.0.11",
-		"vite-plugin-dts": "^3.7.1"
+		"vite": "^5.0.12",
+		"vite-plugin-dts": "^3.7.2"
 	},
@@ -76,0 +76,0 @@ "eslintConfig": {

README.md

@@ -96,4 +96,4 @@ # VueSimpleCalendar
 - import the default theme or any other theme you want to use (CSS)
-- create the `calendar-view` component
-- create the `calendar-view-header` component as a child of the `calendar-view` if you want a header for the calendar
+- create the `CalendarView` component
+- create the `CalendarViewHeader` component as a child of the `CalendarView` if you want a header for the calendar
 - wire up the properties and events
@@ -103,7 +103,7 @@
 
-- Remember to use _kebab-case_ when specifying these properties using attributes on the `calendar-view` element (_e.g._, `<calendar-view month-name-format="long">`)
-- Remember to use _data binding_ (`:` prefix) for properties that should be a `Boolean`, `Number`, `Array`, or otherwise interpreted with JavaScript (_e.g._, `<calendar-view :show-times="true">`). You can omit the `:` for `String` properties with literal values.
+- Remember to use _kebab-case_ when specifying these properties using attributes on the `CalendarView` element (_e.g._, `<CalendarView month-name-format="long">`)
+- Remember to use _data binding_ (`:` prefix) for properties that should be a `Boolean`, `Number`, `Array`, or otherwise interpreted with JavaScript (_e.g._, `<CalendarView :show-times="true">`). You can omit the `:` for `String` properties with literal values.
 - The component will fill its parent's height and width, so be sure the parent has a minimum height that is appropriate for the number of weeks and average items per week being shown.
 - The default calendar header emits an `input` event when a user clicks a button in the header to move the calendar backward or forward through time. The event's argument is the new date to be shown. You have to handle this event and pass the date back to the calendar to change the view.
-- To minimize the impact of an ancestor element's layout on the calendar's functionality, it is **recommended** that the parent of the `<calendar-view>` component _only_ contain the component, and that the parent have the following styles (#71):
+- To minimize the impact of an ancestor element's layout on the calendar's functionality, it is **recommended** that the parent of the `<CalendarView>` component _only_ contain the component, and that the parent have the following styles (#71):
 
@@ -122,11 +122,10 @@ ```CSS
 		<h1>My Calendar</h1>
-		<calendar-view
+		<CalendarView
 			:show-date="showDate"
 			class="theme-default holiday-us-traditional holiday-us-official">
 			<template #header="{ headerProps }">
-				<calendar-view-header
-					:header-props="headerProps"
+				<CalendarViewHeader
 					@input="setShowDate" />
 			</template>
-		</calendar-view>
+		</CalendarView>
 	</div>
@@ -185,2 +184,3 @@ </template>
 - `enableHtmlTitles`: Allows the `title` property of your calendar items to contain HTML. **This is true by default.**
+- `monthNameOn1st`: Defaults to `true`. When you are _not_ using a single-month view, this will includ the name of the month with the day number on the 1st of each month.
 
@@ -269,8 +269,10 @@ | Important: if you put user-provided content in titles, you should either sanitize the HTML they provide, or disable this flag to prevent XSS vulnerabilities. |
 ```HTML
-<calendar-view :show-date="myShowDate">
-	<calendar-view-header slot="header" slot-scope="{ headerProps }" :header-props="headerProps" @input="setMyShowDate" />
-</calendar-view>
+<CalendarView :show-date="myShowDate">
+    <template #header="{ headerProps }"
+		<CalendarViewHeader :header-props @input="setMyShowDate" />
+	</template>
+</CalendarView>
 ```
 
-The parent `calendar-view` passes a property called `headerProps` to the header component. This property includes all of these values (basically, anything you would normally need to render a calendar header):
+The parent `CalendarView` passes a property called `headerProps` to the header component. This property includes all of these values (basically, anything you would normally need to render a calendar header):
 
@@ -310,3 +312,3 @@ - `periodStart`: the first date of the `displayPeriodUom` containing `showDate`
 
-The optional named slot `day-content` allows you to provide your own contents within the date cell. The day of the month is rendered in a separate (sibling) element with the class `cv-day-number`, so you should use CSS to hide this class if you want your slot to be the only content in the cell. Note that items are rendered _above_ the individual date cells, so your slot content will appear below any items on that day.
+The optional named slot `day-content` allows you to provide your own contents within the date cell. The day of the month (and, sometimes, the month name) is rendered in a separate (sibling) element with the class `cv-day-number`, so you should use CSS to hide this class if you want your slot to be the only content in the cell. Note that items are rendered _above_ the individual date cells, so your slot content will appear below any items on that day.
 
@@ -371,2 +373,3 @@ This slot passes one scoped variable: `day`, the date associated with the cell.
 					div cv-day-number
+						div cv-fom-name
 					DAYCONTENT
@@ -427,2 +430,10 @@ ITEM
 
+#### cv-day-number
+
+The day of the month for each cell. Parent of `cv-fom-name`.
+
+#### cv-fom-name
+
+On the 1st, includes the month name depending on the period and `monthNameOn1st` prop.
+
 #### dow*X*
@@ -429,0 +440,0 @@

No alert changes

Improved metrics

Total package byte prevSize

110629

increased by1.24%

Lines of code

1294

increased by0.94%

Number of lines in readme file

582

increased by1.93%

No dependency changes