@quoreadmin/ui 1.5.0 → 1.5.1

package/dist/index75.js

@@ -1,5 +1,5 @@
-import { defineComponent as ee, ref as O, computed as f, watch as te } from "vue";
-const B = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], E = [
+import { defineComponent as ae, ref as O, computed as D, watch as V } from "vue";
+const x = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], A = [
   "January",
   "February",
   "March",
@@ -12,7 +12,7 @@ const B = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], E = [
   "October",
   "November",
   "December"
-], M = [
+], S = [
   "Jan",
   "Feb",
   "Mar",
@@ -25,7 +25,7 @@ const B = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], E = [
   "Oct",
   "Nov",
   "Dec"
-], ne = ee({
+], le = ae({
   name: "QCalendar",
   props: {
     /** Currently selected date(s) - single Date or array for range */
@@ -38,10 +38,31 @@ const B = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], E = [
       type: Boolean,
       default: !1
     },
-    /** Number of months to display (for multi-view) */
-    numberOfMonths: {
-      type: Number,
-      default: 1
+    /** 
+     * Start date of the calendar view. 
+     * When provided with endDate, enables multi-month display.
+     * The calendar will show all weeks from startDate to endDate.
+     */
+    startDate: {
+      type: Date,
+      default: null
+    },
+    /**
+     * End date of the calendar view.
+     * When provided with startDate, enables multi-month display.
+     */
+    endDate: {
+      type: Date,
+      default: null
+    },
+    /**
+     * Which months to consider as "primary" (not greyed out).
+     * Array of {month, year} objects where month is 0-11.
+     * If not provided, derives from startDate/endDate range.
+     */
+    primaryMonths: {
+      type: Array,
+      default: null
     },
     /** Grey out dates that are not in the primary displayed month(s) */
     greyOutNonCurrentMonth: {
@@ -73,7 +94,7 @@ const B = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], E = [
       type: Function,
       default: () => !1
     },
-    /** Dates that should show an indicator dot */
+    /** Dates that should show an event indicator (green background) */
     indicatorDates: {
       type: Array,
       default: () => []
@@ -100,224 +121,206 @@ const B = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], E = [
       default: "en"
     },
     /** 
-     * Display multiple months in a single continuous vertical grid 
-     * instead of side-by-side. Works with numberOfMonths > 1.
+     * When true and startDate/endDate are provided, displays all months
+     * in a single continuous vertical grid instead of side-by-side.
      */
     continuous: {
       type: Boolean,
       default: !1
-    },
-    /**
-     * Number of months to consider as "primary" (not greyed out) in continuous mode.
-     * Defaults to 1, meaning only the first month is highlighted.
-     * Set to same as numberOfMonths to highlight all visible months.
-     */
-    primaryMonthCount: {
-      type: Number,
-      default: 1
     }
   },
   emits: ["update:modelValue", "date-click", "month-change", "view-change"],
-  setup(n, { emit: c }) {
-    const i = O("days"), o = O(/* @__PURE__ */ new Date()), y = O(null), d = O(Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 12) * 12), x = f(() => n.firstDayOfWeek === 0 ? ["Sun", ...B.slice(0, 6)] : B), H = f(() => E), J = f(() => M), w = f(() => {
-      const e = [], t = new Date(o.value);
-      for (let l = 0; l < n.numberOfMonths; l++) {
-        const u = new Date(t.getFullYear(), t.getMonth() + l, 1);
-        e.push(W(u));
-      }
+  setup(a, { emit: o }) {
+    const c = O("days"), r = O(/* @__PURE__ */ new Date()), m = O(null), w = O(Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 12) * 12), g = D(() => !!(a.startDate && a.endDate)), H = D(() => a.firstDayOfWeek === 0 ? ["Sun", ...x.slice(0, 6)] : x), J = D(() => A), I = D(() => S), Y = D(() => {
+      const e = /* @__PURE__ */ new Set();
+      if (a.primaryMonths && a.primaryMonths.length > 0)
+        a.primaryMonths.forEach((t) => {
+          e.add(`${t.year}-${t.month}`);
+        });
+      else if (g.value && a.startDate && a.endDate) {
+        const t = new Date(a.startDate.getFullYear(), a.startDate.getMonth(), 1), l = new Date(a.endDate.getFullYear(), a.endDate.getMonth(), 1);
+        for (; t <= l; )
+          e.add(`${t.getFullYear()}-${t.getMonth()}`), t.setMonth(t.getMonth() + 1);
+      } else
+        e.add(`${r.value.getFullYear()}-${r.value.getMonth()}`);
       return e;
-    }), _ = f(() => {
-      if (n.numberOfMonths === 1)
-        return `${E[o.value.getMonth()]} ${o.value.getFullYear()}`;
-      const e = w.value[0], t = w.value[w.value.length - 1];
-      return e.year === t.year ? `${M[e.month]}/${M[t.month]} ${e.year}` : `${M[e.month]} ${e.year} - ${M[t.month]} ${t.year}`;
-    }), j = f(() => {
+    }), P = D(() => {
       const e = [];
-      for (let t = 0; t < 12; t++)
-        e.push(d.value + t);
+      if (g.value && a.startDate && a.endDate && !a.continuous) {
+        const t = new Date(a.startDate.getFullYear(), a.startDate.getMonth(), 1), l = new Date(a.endDate.getFullYear(), a.endDate.getMonth(), 1);
+        for (; t <= l; )
+          e.push(b(new Date(t))), t.setMonth(t.getMonth() + 1);
+      } else a.continuous || e.push(b(new Date(r.value)));
       return e;
-    }), a = f(() => n.modelValue ? Array.isArray(n.modelValue) ? n.modelValue.filter((e) => e instanceof Date) : [n.modelValue] : []), S = f(() => {
-      const e = /* @__PURE__ */ new Set(), t = new Date(o.value), l = n.continuous ? n.primaryMonthCount : n.numberOfMonths;
-      for (let u = 0; u < l; u++) {
-        const s = new Date(t.getFullYear(), t.getMonth() + u, 1);
-        e.add(`${s.getFullYear()}-${s.getMonth()}`);
-      }
-      return e;
-    }), L = f(() => {
-      if (!n.continuous || n.numberOfMonths <= 1)
-        return { dates: [], primaryMonths: [] };
-      const e = [], t = new Date(o.value), l = new Date(t.getFullYear(), t.getMonth(), 1), u = new Date(t.getFullYear(), t.getMonth() + n.numberOfMonths, 0);
-      let s = l.getDay() - n.firstDayOfWeek;
-      s < 0 && (s += 7);
-      const v = new Date(l);
-      v.setDate(v.getDate() - s);
-      let h = u.getDay() - n.firstDayOfWeek;
-      h < 0 && (h += 7);
-      const N = 6 - h, m = new Date(u);
-      m.setDate(m.getDate() + N);
-      const r = new Date(v);
-      for (; r <= m; ) {
-        const D = S.value.has(
-          `${r.getFullYear()}-${r.getMonth()}`
+    }), _ = D(() => {
+      if (!a.continuous || !g.value || !a.startDate || !a.endDate)
+        return { dates: [] };
+      const e = [], t = new Date(a.startDate);
+      let l = t.getDay() - a.firstDayOfWeek;
+      l < 0 && (l += 7);
+      const u = new Date(t);
+      u.setDate(u.getDate() - l);
+      const i = new Date(a.endDate);
+      let f = i.getDay() - a.firstDayOfWeek;
+      f < 0 && (f += 7);
+      const v = 6 - f, F = new Date(i);
+      F.setDate(F.getDate() + v);
+      const h = new Date(u);
+      for (; h <= F; ) {
+        const s = Y.value.has(
+          `${h.getFullYear()}-${h.getMonth()}`
         );
-        e.push(I(new Date(r), D)), r.setDate(r.getDate() + 1);
+        e.push($(new Date(h), s)), h.setDate(h.getDate() + 1);
       }
-      return {
-        dates: e,
-        primaryMonths: Array.from(S.value).map((D) => {
-          const [, T] = D.split("-");
-          return parseInt(T, 10);
-        })
-      };
-    }), g = (e, t) => e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear(), F = (e) => g(e, /* @__PURE__ */ new Date()), Y = (e) => a.value.some((t) => g(t, e)), k = (e) => {
-      if (!n.range || a.value.length < 2) {
-        if (n.range && a.value.length === 1 && y.value) {
-          const u = a.value[0], s = y.value, [v, h] = u < s ? [u, s] : [s, u];
-          return e > v && e < h;
+      return { dates: e };
+    }), L = D(() => {
+      if (g.value && a.startDate && a.endDate) {
+        const e = a.startDate.getMonth(), t = a.startDate.getFullYear(), l = a.endDate.getMonth(), u = a.endDate.getFullYear();
+        return t === u ? e === l ? `${A[e]} ${t}` : `${S[e]}/${S[l]} ${t}` : `${S[e]} ${t} - ${S[l]} ${u}`;
+      }
+      return `${A[r.value.getMonth()]} ${r.value.getFullYear()}`;
+    }), Q = D(() => {
+      const e = [];
+      for (let t = 0; t < 12; t++)
+        e.push(w.value + t);
+      return e;
+    }), n = D(() => a.modelValue ? Array.isArray(a.modelValue) ? a.modelValue.filter((e) => e instanceof Date) : [a.modelValue] : []), d = (e, t) => e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear(), R = (e) => d(e, /* @__PURE__ */ new Date()), T = (e) => n.value.some((t) => d(t, e)), C = (e) => {
+      if (!a.range || n.value.length < 2) {
+        if (a.range && n.value.length === 1 && m.value) {
+          const u = n.value[0], i = m.value, [f, v] = u < i ? [u, i] : [i, u];
+          return e > f && e < v;
         }
         return !1;
       }
-      const [t, l] = a.value[0] < a.value[1] ? [a.value[0], a.value[1]] : [a.value[1], a.value[0]];
+      const [t, l] = n.value[0] < n.value[1] ? [n.value[0], n.value[1]] : [n.value[1], n.value[0]];
       return e > t && e < l;
-    }, C = (e) => {
-      if (!n.range || a.value.length === 0) return !1;
-      if (a.value.length === 1) return g(e, a.value[0]);
-      const [t] = a.value[0] < a.value[1] ? [a.value[0], a.value[1]] : [a.value[1], a.value[0]];
-      return g(e, t);
-    }, R = (e) => {
-      if (!n.range || a.value.length < 2) return !1;
-      const [, t] = a.value[0] < a.value[1] ? [a.value[0], a.value[1]] : [a.value[1], a.value[0]];
-      return g(e, t);
-    }, A = (e) => !!(n.disabledDate(e) || n.minDate && e < n.minDate || n.maxDate && e > n.maxDate), $ = (e) => n.indicatorDates.some((t) => g(t, e)), W = (e) => {
-      const t = e.getMonth(), l = e.getFullYear(), u = [], s = new Date(l, t, 1), v = new Date(l, t + 1, 0);
-      let h = s.getDay() - n.firstDayOfWeek;
-      h < 0 && (h += 7);
-      const N = new Date(l, t, 0).getDate();
-      for (let r = h - 1; r >= 0; r--) {
-        const D = N - r, T = new Date(l, t - 1, D);
-        u.push(b(T, !1));
+    }, E = (e) => {
+      if (!a.range || n.value.length === 0) return !1;
+      if (n.value.length === 1) return d(e, n.value[0]);
+      const [t] = n.value[0] < n.value[1] ? [n.value[0], n.value[1]] : [n.value[1], n.value[0]];
+      return d(e, t);
+    }, N = (e) => {
+      if (!a.range || n.value.length < 2) return !1;
+      const [, t] = n.value[0] < n.value[1] ? [n.value[0], n.value[1]] : [n.value[1], n.value[0]];
+      return d(e, t);
+    }, W = (e) => !!(a.disabledDate(e) || a.minDate && e < a.minDate || a.maxDate && e > a.maxDate), B = (e) => a.indicatorDates.some((t) => d(t, e)), b = (e) => {
+      const t = e.getMonth(), l = e.getFullYear(), u = [], i = new Date(l, t, 1), f = new Date(l, t + 1, 0);
+      let v = i.getDay() - a.firstDayOfWeek;
+      v < 0 && (v += 7);
+      const F = new Date(l, t, 0).getDate();
+      for (let s = v - 1; s >= 0; s--) {
+        const y = F - s, M = new Date(l, t - 1, y), te = Y.value.has(`${M.getFullYear()}-${M.getMonth()}`);
+        u.push($(M, te));
       }
-      for (let r = 1; r <= v.getDate(); r++) {
-        const D = new Date(l, t, r);
-        u.push(b(D, !0));
+      for (let s = 1; s <= f.getDate(); s++) {
+        const y = new Date(l, t, s), M = Y.value.has(`${l}-${t}`);
+        u.push($(y, M));
       }
-      const m = 42 - u.length;
-      for (let r = 1; r <= m; r++) {
-        const D = new Date(l, t + 1, r);
-        u.push(b(D, !1));
+      const h = 42 - u.length;
+      for (let s = 1; s <= h; s++) {
+        const y = new Date(l, t + 1, s), M = Y.value.has(`${y.getFullYear()}-${y.getMonth()}`);
+        u.push($(y, M));
       }
       return { month: t, year: l, dates: u };
-    }, b = (e, t) => ({
+    }, $ = (e, t) => ({
       date: e,
       day: e.getDate(),
       month: e.getMonth(),
       year: e.getFullYear(),
       isCurrentMonth: t,
-      isToday: F(e),
-      isSelected: Y(e),
-      isInRange: k(e),
-      isRangeStart: C(e),
-      isRangeEnd: R(e),
-      isDisabled: A(e),
-      hasIndicator: $(e)
-    }), I = (e, t) => ({
-      date: e,
-      day: e.getDate(),
-      month: e.getMonth(),
-      year: e.getFullYear(),
-      isCurrentMonth: t,
-      // In continuous mode, "current month" means primary months
-      isToday: F(e),
-      isSelected: Y(e),
-      isInRange: k(e),
-      isRangeStart: C(e),
-      isRangeEnd: R(e),
-      isDisabled: A(e),
-      hasIndicator: $(e)
-    }), Q = () => {
-      const e = new Date(o.value);
-      e.setMonth(e.getMonth() - 1), o.value = e, c("month-change", e);
+      isToday: R(e),
+      isSelected: T(e),
+      isInRange: C(e),
+      isRangeStart: E(e),
+      isRangeEnd: N(e),
+      isDisabled: W(e),
+      hasIndicator: B(e)
+    }), j = () => {
+      const e = new Date(r.value);
+      e.setMonth(e.getMonth() - 1), r.value = e, o("month-change", e);
     }, K = () => {
-      const e = new Date(o.value);
-      e.setMonth(e.getMonth() + 1), o.value = e, c("month-change", e);
-    }, P = () => {
-      d.value -= 12;
+      const e = new Date(r.value);
+      e.setMonth(e.getMonth() + 1), r.value = e, o("month-change", e);
     }, q = () => {
-      d.value += 12;
+      w.value -= 12;
     }, z = () => {
-      n.headerClickable && (i.value === "days" ? i.value = "months" : i.value === "months" && (i.value = "years"), c("view-change", i.value));
-    }, G = (e) => {
-      const t = new Date(o.value);
-      t.setMonth(e), o.value = t, i.value = "days", c("view-change", i.value), c("month-change", t);
+      w.value += 12;
+    }, G = () => {
+      a.headerClickable && (c.value === "days" ? c.value = "months" : c.value === "months" && (c.value = "years"), o("view-change", c.value));
     }, U = (e) => {
-      const t = new Date(o.value);
-      t.setFullYear(e), o.value = t, d.value = Math.floor(e / 12) * 12, i.value = "months", c("view-change", i.value);
+      const t = new Date(r.value);
+      t.setMonth(e), r.value = t, c.value = "days", o("view-change", c.value), o("month-change", t);
     }, X = (e) => {
+      const t = new Date(r.value);
+      t.setFullYear(e), r.value = t, w.value = Math.floor(e / 12) * 12, c.value = "months", o("view-change", c.value);
+    }, Z = (e) => {
       if (e.isDisabled) return;
       const t = e.date;
-      if (c("date-click", t), n.range)
-        if (a.value.length === 0 || a.value.length === 2)
-          c("update:modelValue", [t]);
+      if (o("date-click", t), a.range)
+        if (n.value.length === 0 || n.value.length === 2)
+          o("update:modelValue", [t]);
         else {
-          const l = a.value[0], [u, s] = l < t ? [l, t] : [t, l];
-          c("update:modelValue", [u, s]);
+          const l = n.value[0], [u, i] = l < t ? [l, t] : [t, l];
+          o("update:modelValue", [u, i]);
         }
       else
-        c("update:modelValue", t);
-    }, Z = (e) => {
-      n.range && a.value.length === 1 && (y.value = e.date);
-    }, p = () => {
-      y.value = null;
-    }, V = (e) => {
-      o.value = new Date(e.getFullYear(), e.getMonth(), 1);
+        o("update:modelValue", t);
+    }, p = (e) => {
+      a.range && n.value.length === 1 && (m.value = e.date);
+    }, ee = () => {
+      m.value = null;
+    }, k = (e) => {
+      r.value = new Date(e.getFullYear(), e.getMonth(), 1);
     };
-    return te(() => n.modelValue, (e) => {
-      if (e) {
+    return V(() => a.modelValue, (e) => {
+      if (e && !g.value) {
         const t = Array.isArray(e) ? e[0] : e;
-        t && V(t);
+        t && k(t);
       }
+    }, { immediate: !0 }), V(() => a.startDate, (e) => {
+      e && g.value && k(e);
     }, { immediate: !0 }), {
       // Refs
-      currentView: i,
-      viewDate: o,
-      hoverDate: y,
-      yearRangeStart: d,
+      currentView: c,
+      viewDate: r,
+      hoverDate: m,
+      yearRangeStart: w,
       // Computed
-      daysOfWeek: x,
-      monthNames: H,
-      monthNamesShort: J,
-      displayedMonths: w,
-      headerTitle: _,
-      yearsInRange: j,
-      selectedDates: a,
-      primaryMonths: S,
-      continuousCalendarData: L,
+      isMultiMonth: g,
+      daysOfWeek: H,
+      monthNames: J,
+      monthNamesShort: I,
+      displayedMonths: P,
+      headerTitle: L,
+      yearsInRange: Q,
+      selectedDates: n,
+      primaryMonthsSet: Y,
+      continuousCalendarData: _,
       // Methods
-      isSameDay: g,
-      isToday: F,
-      isSelected: Y,
-      isInRange: k,
-      isRangeStart: C,
-      isRangeEnd: R,
-      isDisabled: A,
-      hasIndicator: $,
-      generateMonthData: W,
-      createDateObject: b,
-      createDateObjectForContinuous: I,
-      prevMonth: Q,
+      isSameDay: d,
+      isToday: R,
+      isSelected: T,
+      isInRange: C,
+      isRangeStart: E,
+      isRangeEnd: N,
+      isDisabled: W,
+      hasIndicator: B,
+      generateMonthData: b,
+      createDateObject: $,
+      prevMonth: j,
       nextMonth: K,
-      prevYearRange: P,
-      nextYearRange: q,
-      onHeaderClick: z,
-      selectMonth: G,
-      selectYear: U,
-      onDateClick: X,
-      onDateHover: Z,
-      onDateLeave: p,
-      goToDate: V
+      prevYearRange: q,
+      nextYearRange: z,
+      onHeaderClick: G,
+      selectMonth: U,
+      selectYear: X,
+      onDateClick: Z,
+      onDateHover: p,
+      onDateLeave: ee,
+      goToDate: k
     };
   }
 });
 export {
-  ne as default
+  le as default
 };

package/dist/src/components/calendar/calendar.d.ts

@@ -18,9 +18,12 @@ export interface CalendarMonth {
     year: number;
     dates: CalendarDate[];
 }
+export interface PrimaryMonth {
+    month: number;
+    year: number;
+}
 export interface ContinuousCalendarData {
     dates: CalendarDate[];
-    primaryMonths: number[];
 }
 export type CalendarView = 'days' | 'months' | 'years';
 declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
@@ -34,10 +37,31 @@ declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractProp
         type: BooleanConstructor;
         default: boolean;
     };
-    /** Number of months to display (for multi-view) */
-    numberOfMonths: {
-        type: NumberConstructor;
-        default: number;
+    /**
+     * Start date of the calendar view.
+     * When provided with endDate, enables multi-month display.
+     * The calendar will show all weeks from startDate to endDate.
+     */
+    startDate: {
+        type: PropType<Date | null>;
+        default: null;
+    };
+    /**
+     * End date of the calendar view.
+     * When provided with startDate, enables multi-month display.
+     */
+    endDate: {
+        type: PropType<Date | null>;
+        default: null;
+    };
+    /**
+     * Which months to consider as "primary" (not greyed out).
+     * Array of {month, year} objects where month is 0-11.
+     * If not provided, derives from startDate/endDate range.
+     */
+    primaryMonths: {
+        type: PropType<PrimaryMonth[]>;
+        default: null;
     };
     /** Grey out dates that are not in the primary displayed month(s) */
     greyOutNonCurrentMonth: {
@@ -69,7 +93,7 @@ declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractProp
         type: PropType<(date: Date) => boolean>;
         default: () => boolean;
     };
-    /** Dates that should show an indicator dot */
+    /** Dates that should show an event indicator (green background) */
     indicatorDates: {
         type: PropType<Date[]>;
         default: () => never[];
@@ -95,27 +119,19 @@ declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractProp
         default: string;
     };
     /**
-     * Display multiple months in a single continuous vertical grid
-     * instead of side-by-side. Works with numberOfMonths > 1.
+     * When true and startDate/endDate are provided, displays all months
+     * in a single continuous vertical grid instead of side-by-side.
      */
     continuous: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /**
-     * Number of months to consider as "primary" (not greyed out) in continuous mode.
-     * Defaults to 1, meaning only the first month is highlighted.
-     * Set to same as numberOfMonths to highlight all visible months.
-     */
-    primaryMonthCount: {
-        type: NumberConstructor;
-        default: number;
-    };
 }>, {
     currentView: import('vue').Ref<CalendarView, CalendarView>;
     viewDate: import('vue').Ref<Date, Date>;
     hoverDate: import('vue').Ref<Date | null, Date | null>;
     yearRangeStart: import('vue').Ref<number, number>;
+    isMultiMonth: import('vue').ComputedRef<boolean>;
     daysOfWeek: import('vue').ComputedRef<string[]>;
     monthNames: import('vue').ComputedRef<string[]>;
     monthNamesShort: import('vue').ComputedRef<string[]>;
@@ -123,7 +139,7 @@ declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractProp
     headerTitle: import('vue').ComputedRef<string>;
     yearsInRange: import('vue').ComputedRef<number[]>;
     selectedDates: import('vue').ComputedRef<Date[]>;
-    primaryMonths: import('vue').ComputedRef<Set<string>>;
+    primaryMonthsSet: import('vue').ComputedRef<Set<string>>;
     continuousCalendarData: import('vue').ComputedRef<ContinuousCalendarData>;
     isSameDay: (date1: Date, date2: Date) => boolean;
     isToday: (date: Date) => boolean;
@@ -135,7 +151,6 @@ declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractProp
     hasIndicator: (date: Date) => boolean;
     generateMonthData: (monthDate: Date) => CalendarMonth;
     createDateObject: (date: Date, isCurrentMonth: boolean) => CalendarDate;
-    createDateObjectForContinuous: (date: Date, isPrimaryMonth: boolean) => CalendarDate;
     prevMonth: () => void;
     nextMonth: () => void;
     prevYearRange: () => void;
@@ -158,10 +173,31 @@ declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractProp
         type: BooleanConstructor;
         default: boolean;
     };
-    /** Number of months to display (for multi-view) */
-    numberOfMonths: {
-        type: NumberConstructor;
-        default: number;
+    /**
+     * Start date of the calendar view.
+     * When provided with endDate, enables multi-month display.
+     * The calendar will show all weeks from startDate to endDate.
+     */
+    startDate: {
+        type: PropType<Date | null>;
+        default: null;
+    };
+    /**
+     * End date of the calendar view.
+     * When provided with startDate, enables multi-month display.
+     */
+    endDate: {
+        type: PropType<Date | null>;
+        default: null;
+    };
+    /**
+     * Which months to consider as "primary" (not greyed out).
+     * Array of {month, year} objects where month is 0-11.
+     * If not provided, derives from startDate/endDate range.
+     */
+    primaryMonths: {
+        type: PropType<PrimaryMonth[]>;
+        default: null;
     };
     /** Grey out dates that are not in the primary displayed month(s) */
     greyOutNonCurrentMonth: {
@@ -193,7 +229,7 @@ declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractProp
         type: PropType<(date: Date) => boolean>;
         default: () => boolean;
     };
-    /** Dates that should show an indicator dot */
+    /** Dates that should show an event indicator (green background) */
     indicatorDates: {
         type: PropType<Date[]>;
         default: () => never[];
@@ -219,22 +255,13 @@ declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractProp
         default: string;
     };
     /**
-     * Display multiple months in a single continuous vertical grid
-     * instead of side-by-side. Works with numberOfMonths > 1.
+     * When true and startDate/endDate are provided, displays all months
+     * in a single continuous vertical grid instead of side-by-side.
      */
     continuous: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /**
-     * Number of months to consider as "primary" (not greyed out) in continuous mode.
-     * Defaults to 1, meaning only the first month is highlighted.
-     * Set to same as numberOfMonths to highlight all visible months.
-     */
-    primaryMonthCount: {
-        type: NumberConstructor;
-        default: number;
-    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onDate-click"?: ((...args: any[]) => any) | undefined;
@@ -243,7 +270,9 @@ declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractProp
 }>, {
     modelValue: Date | Date[] | null;
     range: boolean;
-    numberOfMonths: number;
+    startDate: Date | null;
+    endDate: Date | null;
+    primaryMonths: PrimaryMonth[];
     greyOutNonCurrentMonth: boolean;
     showNavigation: boolean;
     showHeader: boolean;
@@ -256,7 +285,6 @@ declare const QCalendar: import('vue').DefineComponent<import('vue').ExtractProp
     firstDayOfWeek: number;
     locale: string;
     continuous: boolean;
-    primaryMonthCount: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export type QCalendarType = typeof QCalendar;
 export default QCalendar;