@progress/kendo-vue-scheduler 9.3.0-develop.5 → 9.3.0-develop.6

package/Scheduler.mjs

@@ -5,33 +5,49 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as B, createVNode as n, h as w, isVNode as _ } from "vue";
-import { getToday as U, findMaster as p, setField as l, getField as a, toSchedulerGroups as G, getModelFields as D } from "./utils/main.mjs";
-import { canUseDOM as b, clone as c, validatePackage as K, shouldShowValidationUI as q, getLicenseMessage as J, templateRendering as d, getListeners as V, getTemplate as C, WatermarkOverlay as Q, isRtl as X } from "@progress/kendo-vue-common";
-import { SchedulerHeader as Y } from "./components/header/SchedulerHeader.mjs";
-import { SchedulerAdaptiveHeader as Z } from "./components/header/SchedulerAdaptiveHeader.mjs";
-import { provideIntlService as S, provideLocalizationService as ee } from "@progress/kendo-vue-intl";
-import { SchedulerNavigation as te } from "./components/header/navigation/SchedulerNavigation.mjs";
-import { addMonths as I, addDays as y } from "@progress/kendo-date-math";
-import { SchedulerFooter as ie } from "./components/footer/SchedulerFooter.mjs";
-import { ToolbarSpacer as $, Button as se } from "@progress/kendo-vue-buttons";
-import { NavigationDatePicker as ae } from "./components/header/navigation/NavigationDatePicker.mjs";
-import { ViewSelectorList as re } from "./components/header/view-selector/ViewSelectorList.mjs";
-import { BusinessHours as le } from "./components/footer/bussiness-hours/BusinessHours.mjs";
-import { today as R, messages as oe } from "./messages/main.mjs";
-import { packageMetadata as g } from "./package-metadata.mjs";
-import { AgendaView as ne } from "./views/agenda/AgendaView.mjs";
-import { TimelineView as he } from "./views/time/TimelineView.mjs";
-import { DayView as m } from "./views/day/DayView.mjs";
-import { WeekView as de } from "./views/week/WeekView.mjs";
-import { WorkWeekView as ce } from "./views/week/WorkWeekView.mjs";
-import { MonthView as ue } from "./views/month/MonthView.mjs";
-import { DATA_ACTION as v } from "./constants/main.mjs";
-import { useEditable as pe } from "./hooks/useEditable.mjs";
-function me(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !_(e);
+import { defineComponent as le, createVNode as d, h as R, isVNode as ce } from "vue";
+import { findMaster as v, setField as l, getField as r, toSchedulerGroups as he, getModelFields as P } from "./utils/main.mjs";
+import { canUseDOM as $, clone as w, validatePackage as de, shouldShowValidationUI as ue, getLicenseMessage as me, templateRendering as k, getListeners as M, getTemplate as W, WatermarkOverlay as pe, isRtl as fe } from "@progress/kendo-vue-common";
+import { SchedulerHeader as we } from "./components/header/SchedulerHeader.mjs";
+import { SchedulerAdaptiveHeader as ke } from "./components/header/SchedulerAdaptiveHeader.mjs";
+import { provideIntlService as L, provideLocalizationService as ge } from "@progress/kendo-vue-intl";
+import { ZonedDate as be, addMonths as H, addDays as A } from "@progress/kendo-date-math";
+import { SchedulerFooter as ve } from "./components/footer/SchedulerFooter.mjs";
+import { Button as V, ButtonGroup as De, ToolbarSpacer as z } from "@progress/kendo-vue-buttons";
+import { NavigationDatePicker as Se } from "./components/header/navigation/NavigationDatePicker.mjs";
+import { ViewSelectorList as Ie } from "./components/header/view-selector/ViewSelectorList.mjs";
+import { BusinessHours as Ce } from "./components/footer/bussiness-hours/BusinessHours.mjs";
+import { today as j, messages as C, previousTitle as B, nextTitle as U, newEvent as _, newEventLabel as K, toolbarLabel as G } from "./messages/main.mjs";
+import { packageMetadata as x } from "./package-metadata.mjs";
+import { AgendaView as Ve } from "./views/agenda/AgendaView.mjs";
+import { TimelineView as Ee } from "./views/time/TimelineView.mjs";
+import { DayView as y } from "./views/day/DayView.mjs";
+import { WeekView as ye } from "./views/week/WeekView.mjs";
+import { WorkWeekView as Re } from "./views/week/WorkWeekView.mjs";
+import { MonthView as $e } from "./views/month/MonthView.mjs";
+import { DATA_ACTION as O } from "./constants/main.mjs";
+import { plusIcon as xe, chevronRightIcon as Y, chevronLeftIcon as q } from "@progress/kendo-svg-icons";
+import { SchedulerForm as Oe } from "./components/SchedulerForm.mjs";
+import { parseRule as Te, serializeRule as Ne } from "@progress/kendo-recurrence";
+import { useEditable as Fe } from "./hooks/useEditable.mjs";
+function Z(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ce(e);
 }
-const P = "{0:D}", x = "{0:d}", We = /* @__PURE__ */ B({
+const J = "{0:D}", Q = "{0:d}", X = (e, i) => {
+  const s = Math.round(i / 864e5), t = Te({
+    recurrenceRule: e
+  });
+  if (s % 7 === 0 || (t == null ? void 0 : t.freq) !== "weekly" || !t.byWeekDay)
+    return e;
+  const a = Ne({
+    ...t,
+    byWeekDay: t.byWeekDay.map((o) => ({
+      ...o,
+      day: (o.day + s + 7) % 7
+    }))
+  });
+  return e.toUpperCase().includes("WKST=") ? a : a.replace(";WKST=SU", "");
+}, nt = /* @__PURE__ */ le({
   name: "KendoScheduler",
   emits: ["datechange", "viewchange", "datachange", "itemclick", "itemdoubleclick", "slotclick", "slotdoubleclick", "taskclick", "taskdoubleclick"],
   props: {
@@ -90,6 +106,11 @@ const P = "{0:D}", x = "{0:d}", We = /* @__PURE__ */ B({
     task: [String, Function, Object],
     form: [String, Function, Object],
     resizeHint: [String, Function, Object],
+    editItem: [String, Function, Object],
+    viewTask: [String, Function, Object],
+    editTask: [String, Function, Object],
+    editSlot: [String, Function, Object],
+    className: String,
     dialogProps: Object,
     formProps: Object,
     dateHeaderCell: [String, Function, Object],
@@ -106,22 +127,26 @@ const P = "{0:D}", x = "{0:d}", We = /* @__PURE__ */ B({
     isMobile() {
       return this.$props.adaptive && this.media === "mobile";
     },
+    canAdd() {
+      return typeof this.$props.editable == "object" ? this.$props.editable.add : !!this.$props.editable;
+    },
     wrapperClassName() {
       return {
         "k-rtl": this.isRtl,
         "k-scheduler": !0,
-        "k-scheduler-mobile": this.isMobile
+        "k-scheduler-mobile": this.isMobile,
+        [this.$props.className]: !!this.$props.className
       };
     },
     fields() {
-      return D(this.$props.modelFields).fields;
+      return P(this.$props.modelFields).fields;
     }
   },
   mounted() {
-    this.currentRtl = X(this.$el), this.calculateMedia(), this.$props.adaptive && b && window.ResizeObserver && (this.resizeObserver = new window.ResizeObserver(this.calculateMedia), this.resizeObserver.observe(this.$el));
+    this.currentRtl = fe(this.$el), this.calculateMedia(), this.$props.adaptive && $ && window.ResizeObserver && (this.resizeObserver = new window.ResizeObserver(this.calculateMedia), this.resizeObserver.observe(this.$el)), $ && window.ResizeObserver && (this.toolbarObserver = new window.ResizeObserver(this.measureToolbar), this.toolbarElement && this.toolbarObserver.observe(this.toolbarElement));
   },
   unmounted() {
-    this.resizeObserver && this.resizeObserver.disconnect();
+    this.resizeObserver && this.resizeObserver.disconnect(), this.toolbarObserver && this.toolbarObserver.disconnect();
   },
   provide() {
     return {
@@ -148,7 +173,7 @@ const P = "{0:D}", x = "{0:d}", We = /* @__PURE__ */ B({
     }
   },
   data() {
-    const e = S(this), i = this.$props.date || this.$props.defaultDate, s = this.$props.view || this.$props.defaultView || this.views[0] && this.views[0].name || "day", t = this.views.find((u) => u.name === s) || this.views[0] || n(m, null, null), r = this.getViewPropValue(t, "selectedDateFormat", s) || P, o = this.getViewPropValue(t, "selectedShortDateFormat", s) || x, h = this.getViewComponentByName(s).props.dateRange.default()({
+    const e = L(this), i = this.$props.date || this.$props.defaultDate, s = this.$props.view || this.$props.defaultView || this.views[0] && this.views[0].name || "day", t = this.views.find((c) => c.name === s) || this.views[0] || d(y, null, null), a = this.getViewPropValue(t, "selectedDateFormat", s) || J, o = this.getViewPropValue(t, "selectedShortDateFormat", s) || Q, n = this.getViewComponentByName(s).props.dateRange.default()({
       intl: e,
       date: i,
       timezone: this.$props.timezone,
@@ -158,6 +183,9 @@ const P = "{0:D}", x = "{0:d}", We = /* @__PURE__ */ B({
     });
     return {
       media: "desktop",
+      toolbarLevel: 0,
+      toolbarBreakpoints: [1 / 0, 1 / 0, 1 / 0],
+      newEventDialogItem: null,
       ks: {
         activeViewName: s,
         currentDate: i,
@@ -168,11 +196,11 @@ const P = "{0:D}", x = "{0:d}", We = /* @__PURE__ */ B({
         },
         views: this.views,
         view: t,
-        fields: D(this.$props.modelFields).fields,
-        groups: G(this.$props.group, this.$props.resources),
-        dateRange: h,
+        fields: P(this.$props.modelFields).fields,
+        groups: he(this.$props.group, this.$props.resources),
+        dateRange: n,
         orientation: this.$props.group && this.$props.group.orientation ? this.$props.group.orientation : "horizontal",
-        dateFormat: r,
+        dateFormat: a,
         shortDateFormat: o,
         scheduler: this,
         dataItems: this.dataItems
@@ -197,10 +225,10 @@ const P = "{0:D}", x = "{0:d}", We = /* @__PURE__ */ B({
     }
   },
   render() {
-    K(g), this.showLicenseWatermark = q(g), this.licenseMessage = J(g);
-    const e = this.views.find((L) => L.name === this.ks.activeViewName) || this.views[0] || n(m, null, null), i = this.getViewPropValue(this.ks.view, "slotDuration", this.ks.activeViewName), s = d.call(this, e.header || this.$props.header, V.call(this)), t = d.call(this, e.footer || this.$props.footer, V.call(this)), r = d.call(this, e.slot || this.$props.slotRender, {}), o = d.call(this, e.viewSlot || this.$props.viewSlot, {}), h = d.call(this, e.item || this.$props.item, {}), u = d.call(this, e.viewItem || this.$props.viewItem, {}), k = d.call(this, e.task || this.$props.task, {}), F = d.call(this, e.dateHeaderCell || this.$props.dateHeaderCell, {}), O = d.call(this, e.timeHeaderCell || this.$props.timeHeaderCell, {}), N = d.call(this, e.resizeHint || this.$props.resizeHint, {});
-    this.ks.form = d.call(this, e.form || this.$props.form, {}), this.ks.dialogProps = e.dialogProps || this.$props.dialogProps, this.ks.formProps = e.formProps || this.$props.formProps;
-    const E = pe(e.editable !== void 0 ? e.editable : this.$props.editable), M = this.getViewComponentByName(this.ks.activeViewName || e.name), H = {
+    de(x), this.showLicenseWatermark = ue(x), this.licenseMessage = me(x);
+    const e = this.views.find((oe) => oe.name === this.ks.activeViewName) || this.views[0] || d(y, null, null), i = this.getViewPropValue(this.ks.view, "slotDuration", this.ks.activeViewName), s = k.call(this, e.header || this.$props.header, M.call(this)), t = k.call(this, e.footer || this.$props.footer, M.call(this)), a = k.call(this, e.slot || this.$props.slotRender, {}), o = k.call(this, e.viewSlot || this.$props.viewSlot, {}), n = k.call(this, e.item || this.$props.item, {}), c = k.call(this, e.viewItem || this.$props.viewItem, {}), h = k.call(this, e.task || this.$props.task, {}), p = e.form || this.$props.form || Oe, f = k.call(this, e.dateHeaderCell || this.$props.dateHeaderCell, {}), u = k.call(this, e.timeHeaderCell || this.$props.timeHeaderCell, {}), m = k.call(this, e.resizeHint || this.$props.resizeHint, {});
+    this.ks.form = k.call(this, e.form || this.$props.form, {}), this.ks.dialogProps = e.dialogProps || this.$props.dialogProps, this.ks.formProps = e.formProps || this.$props.formProps;
+    const g = Fe(e.editable !== void 0 ? e.editable : this.$props.editable), S = this.getViewComponentByName(this.ks.activeViewName || e.name), E = {
       ...this.$props,
       ...this.ks.view,
       showWorkHours: this.ks.showWorkHours,
@@ -208,33 +236,71 @@ const P = "{0:D}", x = "{0:d}", We = /* @__PURE__ */ B({
       views: void 0,
       defaultDate: void 0,
       dateRange: this.ks.dateRange,
-      slotRender: r,
+      slotRender: a,
       viewSlot: o,
-      item: h,
-      viewItem: u,
-      task: k,
-      dateHeaderCell: F,
-      timeHeaderCell: O,
-      resizeHint: N,
-      editable: E
-    }, z = this.isMobile ? n(Z, {
+      item: n,
+      viewItem: c,
+      task: h,
+      dateHeaderCell: f,
+      timeHeaderCell: u,
+      resizeHint: m,
+      editable: g
+    }, b = ge(this), D = b.toLanguageString(j, C[j]), T = b.toLanguageString(B, C[B]), N = b.toLanguageString(U, C[U]), ee = b.toLanguageString(_, C[_]), te = b.toLanguageString(K, C[K]), F = b.toLanguageString(G, C[G]), I = this.toolbarLevel, ie = this.isMobile ? d(ke, {
       isRtl: this.isRtl,
       onPrevclick: this.handlePrevClick,
       onNextclick: this.handleNextClick
-    }, null) : n(Y, null, {
-      default: () => [n(te, {
-        isRtl: this.isRtl,
-        onPrevclick: this.handlePrevClick,
-        onNextclick: this.handleNextClick,
-        onTodayclick: this.handleTodayClick
-      }, null), n(ae, {
+    }, null) : d(we, {
+      ref: this.setToolbarRef,
+      ariaLabel: F
+    }, {
+      default: () => [this.canAdd && d(V, {
+        class: "k-toolbar-button",
+        themeColor: "primary",
+        svgIcon: xe,
+        "aria-label": te,
+        tabIndex: -1,
+        onClick: this.handleNewEventClick
+      }, {
+        default: () => [I < 2 && ee]
+      }), I < 2 && d(V, {
+        class: "k-toolbar-button",
+        fillMode: "flat",
+        tabIndex: -1,
+        title: D,
+        onClick: this.handleTodayClick
+      }, Z(D) ? D : {
+        default: () => [D]
+      }), I < 3 && d(De, {
+        class: "k-button-group-flat k-toolbar-button-group"
+      }, {
+        default: () => [d(V, {
+          fillMode: "flat",
+          tabIndex: -1,
+          svgIcon: this.isRtl ? Y : q,
+          "aria-label": T,
+          title: T,
+          onClick: this.handlePrevClick
+        }, null), d(V, {
+          fillMode: "flat",
+          tabIndex: -1,
+          svgIcon: this.isRtl ? q : Y,
+          "aria-label": N,
+          title: N,
+          onClick: this.handleNextClick
+        }, null)]
+      }), d(Se, {
         value: this.ks.currentDate,
-        onChange: this.handleDatePickerChange
-      }, null), n($, null, null), n(re, null, null)]
-    }), A = C.call(this, {
-      h: w,
+        onChange: this.handleDatePickerChange,
+        level: I
+      }, null), d(z, null, null), I === 1 && d("span", {
+        class: "k-separator"
+      }, null), d(Ie, {
+        level: I
+      }, null)]
+    }), se = W.call(this, {
+      h: R,
       template: s,
-      defaultRendering: z,
+      defaultRendering: ie,
       additionalProps: {
         currentDate: this.ks.currentDate
       },
@@ -244,31 +310,33 @@ const P = "{0:D}", x = "{0:d}", We = /* @__PURE__ */ B({
         todayclick: this.handleTodayClick,
         datepickerchange: this.handleDatePickerChange
       }
-    }), f = ee(this).toLanguageString(R, oe[R]), W = n(ie, null, {
-      default: () => [this.isMobile && n(se, {
+    }), re = d(ve, {
+      "aria-label": F
+    }, {
+      default: () => [this.isMobile && d(V, {
         class: "k-scheduler-today",
         tabIndex: -1,
         onClick: this.handleTodayClick
-      }, me(f) ? f : {
-        default: () => [f]
-      }), this.isMobile && n($, null, null), n(le, {
+      }, Z(D) ? D : {
+        default: () => [D]
+      }), this.isMobile && d(z, null, null), d(Ce, {
         slotDuration: i,
         onClick: this.handleShowWorkHoursClick
       }, null)]
-    }), T = C.call(this, {
-      h: w,
+    }), ae = W.call(this, {
+      h: R,
       template: t,
-      defaultRendering: W,
+      defaultRendering: re,
       additionalProps: {
         slotDuration: i
       },
       additionalListeners: {
         showworkhoursclick: this.handleShowWorkHoursClick
       }
-    }), j = this.showLicenseWatermark ? n(Q, {
+    }), ne = this.showLicenseWatermark ? d(pe, {
       message: this.licenseMessage
     }, null) : null;
-    return n("div", {
+    return d("div", {
       id: this.$props.id,
       style: {
         height: this.$props.height + "px"
@@ -281,27 +349,32 @@ const P = "{0:D}", x = "{0:d}", We = /* @__PURE__ */ B({
       "aria-labelledby": this.$props.ariaLabelledby,
       onFocusin: this.handleFocus,
       onFocusout: this.handleBlur
-    }, [A, w(M, {
-      key: this.ks.view.name,
+    }, [se, R(S, {
+      key: `${this.ks.view.name}-${this.ks.showWorkHours}`,
       onDataaction: this.handleDataAction,
-      ...H
-    }), T, j]);
+      ...E
+    }), !["agenda", "month"].includes(this.ks.activeViewName) && ae, ne, this.newEventDialogItem && d(p, {
+      dataItem: this.newEventDialogItem,
+      onSubmit: this.handleNewEventFormSubmit,
+      onCancel: this.handleNewEventFormCancel,
+      onClose: this.handleNewEventFormCancel
+    }, null)]);
   },
   methods: {
     getViewComponentByName(e) {
       switch (e.toLowerCase()) {
         case "week":
-          return de;
+          return ye;
         case "workweek":
-          return ce;
+          return Re;
         case "agenda":
-          return ne;
+          return Ve;
         case "timeline":
-          return he;
+          return Ee;
         case "month":
-          return ue;
+          return $e;
         default:
-          return m;
+          return y;
       }
     },
     getViewPropValue(e, i, s) {
@@ -320,6 +393,29 @@ const P = "{0:D}", x = "{0:d}", We = /* @__PURE__ */ B({
       };
       this.$emit("datachange", t);
     },
+    handleNewEventClick(e) {
+      e.preventDefault();
+      const i = /* @__PURE__ */ new Date(), s = this.getViewPropValue(this.ks.view, "slotDuration", this.ks.activeViewName) || 30, t = s * 60 * 1e3, a = i.getMinutes(), o = Math.ceil(a / s) * s;
+      let n = new Date(i);
+      n.setHours(i.getHours() + Math.floor(o / 60), o % 60, 0, 0);
+      const c = this.$props.dataItems || [], h = this.fields, p = (m, g) => c.some((S) => {
+        const E = r(S, h.start), b = r(S, h.end);
+        return !E || !b ? !1 : E.getTime() < g.getTime() && b.getTime() > m.getTime();
+      });
+      let f = new Date(n.getTime() + t);
+      for (let m = 0; m < 48 && p(n, f); m++)
+        n = new Date(n.getTime() + t), f = new Date(n.getTime() + t);
+      const u = {};
+      l(u, h.start, n), l(u, h.end, f), l(u, h.isAllDay, !1), l(u, h.title, ""), l(u, h.description, ""), this.newEventDialogItem = u;
+    },
+    handleNewEventFormSubmit(e) {
+      this.handleDataChange({
+        created: [e.value]
+      }), this.newEventDialogItem = null;
+    },
+    handleNewEventFormCancel() {
+      this.newEventDialogItem = null;
+    },
     handleCreate(e) {
       const i = [e.dataItem];
       this.handleDataChange({
@@ -329,29 +425,67 @@ const P = "{0:D}", x = "{0:d}", We = /* @__PURE__ */ B({
     handleUpdate(e) {
       const i = [], s = [];
       if (e.series)
-        if (Array.isArray(e.dataItem))
-          e.dataItem.map((t) => {
-            const r = c(p(e.dataItem, this.fields, this.dataItems)), o = c(t);
-            l(o, this.fields.originalStart, a(r, this.fields.originalStart)), l(o, this.fields.recurrenceId, a(r, this.fields.recurrenceId)), l(o, this.fields.recurrenceExceptions, a(r, this.fields.recurrenceExceptions)), s.push(o);
-          });
-        else {
-          const t = c(p(e.dataItem, this.fields, this.dataItems)), r = c(e.dataItem);
-          l(r, this.fields.originalStart, a(t, this.fields.originalStart)), l(r, this.fields.recurrenceId, a(t, this.fields.recurrenceId)), l(r, this.fields.recurrenceExceptions, a(t, this.fields.recurrenceExceptions)), s.push(r);
+        if (Array.isArray(e.dataItem)) {
+          const t = e.dataItem[0];
+          if (r(t, this.fields.recurrenceId) !== null && r(t, this.fields.recurrenceId) !== void 0) {
+            const o = w(v(t, this.fields, this.dataItems)), n = new Date(r(t, this.fields.originalStart)).getTime(), c = new Date(r(t, this.fields.start)).getTime(), h = new Date(r(t, this.fields.end)).getTime(), p = c - n, f = h - c, u = new Date(r(o, this.fields.start)).getTime();
+            l(o, this.fields.start, new Date(u + p)), l(o, this.fields.end, new Date(u + p + f));
+            const m = r(o, this.fields.recurrenceExceptions) || [];
+            if (m.length > 0 && p !== 0) {
+              const g = m.map((S) => new Date(new Date(S).getTime() + p));
+              l(o, this.fields.recurrenceExceptions, g);
+            }
+            l(o, this.fields.recurrenceRule, X(r(o, this.fields.recurrenceRule), p)), s.push(o);
+          } else
+            e.dataItem.forEach((o) => {
+              const n = w(v(o, this.fields, this.dataItems)), c = w(o);
+              l(c, this.fields.originalStart, r(n, this.fields.originalStart)), l(c, this.fields.recurrenceId, r(n, this.fields.recurrenceId));
+              const h = r(n, this.fields.recurrenceExceptions) || [], p = new Date(r(n, this.fields.start)).getTime(), u = new Date(r(c, this.fields.start)).getTime() - p;
+              if (h.length > 0 && u !== 0) {
+                const m = h.map((g) => new Date(new Date(g).getTime() + u));
+                l(c, this.fields.recurrenceExceptions, m);
+              } else
+                l(c, this.fields.recurrenceExceptions, h);
+              s.push(c);
+            });
+        } else if (r(e.dataItem, this.fields.recurrenceId) !== null && r(e.dataItem, this.fields.recurrenceId) !== void 0) {
+          const a = w(v(e.dataItem, this.fields, this.dataItems)), o = new Date(r(e.dataItem, this.fields.originalStart)).getTime(), n = new Date(r(e.dataItem, this.fields.start)).getTime(), c = new Date(r(e.dataItem, this.fields.end)).getTime(), h = n - o, p = c - n, f = new Date(r(a, this.fields.start)).getTime();
+          l(a, this.fields.start, new Date(f + h)), l(a, this.fields.end, new Date(f + h + p));
+          const u = r(a, this.fields.recurrenceExceptions) || [];
+          if (u.length > 0 && h !== 0) {
+            const m = u.map((g) => new Date(new Date(g).getTime() + h));
+            l(a, this.fields.recurrenceExceptions, m);
+          }
+          l(a, this.fields.recurrenceRule, X(r(a, this.fields.recurrenceRule), h)), s.push(a);
+        } else {
+          const a = w(e.dataItem);
+          if (r(a, this.fields.recurrenceRule)) {
+            const n = w(v(e.dataItem, this.fields, this.dataItems));
+            l(a, this.fields.originalStart, r(n, this.fields.originalStart)), l(a, this.fields.recurrenceId, r(n, this.fields.recurrenceId));
+            const c = r(n, this.fields.recurrenceExceptions) || [], h = new Date(r(n, this.fields.start)).getTime(), f = new Date(r(a, this.fields.start)).getTime() - h;
+            if (c.length > 0 && f !== 0) {
+              const u = c.map((m) => new Date(new Date(m).getTime() + f));
+              l(a, this.fields.recurrenceExceptions, u);
+            } else
+              l(a, this.fields.recurrenceExceptions, c);
+          } else
+            l(a, this.fields.recurrenceExceptions, null);
+          s.push(a);
         }
       else if (Array.isArray(e.dataItem))
-        e.dataItem.map((t) => {
-          const r = a(t, this.fields.recurrenceRule) !== null && a(t, this.fields.recurrenceRule) !== void 0;
-          if (a(t, this.fields.recurrenceId) !== null && a(t, this.fields.recurrenceId) !== void 0 && r) {
-            const h = c(p(t, this.fields, this.dataItems)), u = a(t, this.fields.originalStart), k = a(h, this.fields.recurrenceExceptions) || [];
-            l(h, this.fields.recurrenceExceptions, [...k, u]), l(t, this.fields.recurrenceRule, null), s.push(h), i.push(t);
+        e.dataItem.forEach((t) => {
+          const a = r(t, this.fields.recurrenceRule) !== null && r(t, this.fields.recurrenceRule) !== void 0;
+          if (r(t, this.fields.recurrenceId) !== null && r(t, this.fields.recurrenceId) !== void 0 && a) {
+            const n = w(v(t, this.fields, this.dataItems)), c = r(t, this.fields.originalStart), h = r(n, this.fields.recurrenceExceptions) || [];
+            l(n, this.fields.recurrenceExceptions, [...h, c]), l(t, this.fields.recurrenceRule, null), s.push(n), i.push(t);
           } else
             s.push(t);
         });
       else {
-        const t = a(e.dataItem, this.fields.recurrenceRule) !== null && a(e.dataItem, this.fields.recurrenceRule) !== void 0;
-        if (a(e.dataItem, this.fields.recurrenceId) !== null && a(e.dataItem, this.fields.recurrenceId) !== void 0 && t) {
-          const o = c(p(e.dataItem, this.fields, this.dataItems)), h = a(e.dataItem, this.fields.originalStart), u = a(o, this.fields.recurrenceExceptions) || [];
-          l(o, this.fields.recurrenceExceptions, [...u, h]), l(e.dataItem, this.fields.recurrenceRule, null), s.push(o), i.push(e.dataItem);
+        const t = r(e.dataItem, this.fields.recurrenceRule) !== null && r(e.dataItem, this.fields.recurrenceRule) !== void 0;
+        if (r(e.dataItem, this.fields.recurrenceId) !== null && r(e.dataItem, this.fields.recurrenceId) !== void 0 && t) {
+          const o = w(v(e.dataItem, this.fields, this.dataItems)), n = r(e.dataItem, this.fields.originalStart), c = r(o, this.fields.recurrenceExceptions) || [];
+          l(o, this.fields.recurrenceExceptions, [...c, n]), l(e.dataItem, this.fields.recurrenceRule, null), s.push(o), i.push(e.dataItem);
         } else
           s.push(e.dataItem);
       }
@@ -363,13 +497,13 @@ const P = "{0:D}", x = "{0:d}", We = /* @__PURE__ */ B({
     handleRemove(e) {
       const i = [], s = [];
       if (e.series) {
-        const t = c(p(e.dataItem, this.fields, this.dataItems)), r = c(e.dataItem);
-        l(r, this.fields.originalStart, a(t, this.fields.originalStart)), l(r, this.fields.recurrenceId, a(t, this.fields.recurrenceId)), l(r, this.fields.recurrenceRule, a(t, this.fields.recurrenceRule)), l(r, this.fields.recurrenceExceptions, a(t, this.fields.recurrenceExceptions)), s.push(r);
-      } else if (!(a(e.dataItem, this.fields.recurrenceRule) !== null && a(e.dataItem, this.fields.recurrenceRule) !== void 0))
+        const t = w(v(e.dataItem, this.fields, this.dataItems)), a = w(e.dataItem);
+        l(a, this.fields.originalStart, r(t, this.fields.originalStart)), l(a, this.fields.recurrenceId, r(t, this.fields.recurrenceId)), l(a, this.fields.recurrenceRule, r(t, this.fields.recurrenceRule)), l(a, this.fields.recurrenceExceptions, r(t, this.fields.recurrenceExceptions)), s.push(a);
+      } else if (!(r(e.dataItem, this.fields.recurrenceRule) !== null && r(e.dataItem, this.fields.recurrenceRule) !== void 0))
         s.push(e.dataItem);
       else {
-        const r = c(p(e.dataItem, this.fields, this.dataItems)), o = a(e.dataItem, this.fields.originalStart), h = a(r, this.fields.recurrenceExceptions) || [];
-        l(r, this.fields.recurrenceExceptions, [...h, o]), l(e.dataItem, this.fields.recurrenceRule, null), i.push(r);
+        const a = w(v(e.dataItem, this.fields, this.dataItems)), o = r(e.dataItem, this.fields.originalStart), n = r(a, this.fields.recurrenceExceptions) || [];
+        l(a, this.fields.recurrenceExceptions, [...n, o]), l(e.dataItem, this.fields.recurrenceRule, null), i.push(a);
       }
       this.handleDataChange({
         updated: i,
@@ -378,24 +512,28 @@ const P = "{0:D}", x = "{0:d}", We = /* @__PURE__ */ B({
     },
     handleDataAction(e) {
       switch (e.type) {
-        case v.create:
+        case O.create:
           this.handleCreate(e);
           break;
-        case v.update:
+        case O.update:
           this.handleUpdate(e);
           break;
-        case v.remove:
+        case O.remove:
           this.handleRemove(e);
           break;
       }
     },
     handleActiveViewNameChange(e, i) {
-      this.updatePassedState(e), this.$emit("viewchange", {
+      this.$props.view === void 0 && this.updatePassedState(e), this.$emit("viewchange", {
         viewName: e,
         ...i,
         target: this.ks.scheduler.$el
       });
     },
+    setToolbarRef(e) {
+      const i = (e == null ? void 0 : e.$el) || null;
+      i !== this.toolbarElement && (this.toolbarObserver && this.toolbarElement && this.toolbarObserver.unobserve(this.toolbarElement), this.toolbarElement = i, this.toolbarObserver && i && this.toolbarObserver.observe(i));
+    },
     handleDateChange(e, i) {
       this.setDate(e, {
         ...i,
@@ -411,18 +549,18 @@ const P = "{0:D}", x = "{0:d}", We = /* @__PURE__ */ B({
     },
     handleNextClick(e) {
       e.preventDefault();
-      const i = this.getViewPropValue(this.ks.view, "step", this.ks.activeViewName) || this.getViewPropValue(this.ks.view, "numberOfDays", this.ks.activeViewName) || 1, t = i > 27 ? I(this.ks.currentDate, Math.round(i / 27)) : y(this.ks.currentDate, i);
+      const i = this.getViewPropValue(this.ks.view, "step", this.ks.activeViewName) || this.getViewPropValue(this.ks.view, "numberOfDays", this.ks.activeViewName) || 1, t = i > 27 ? H(this.ks.currentDate, Math.round(i / 27)) : A(this.ks.currentDate, i);
       this.setDate(t, e);
     },
     handlePrevClick(e) {
       e.preventDefault();
-      const i = this.getViewPropValue(this.ks.view, "step", this.ks.activeViewName) || this.getViewPropValue(this.ks.view, "numberOfDays", this.ks.activeViewName) || 1, t = i > 27 ? I(this.ks.currentDate, -Math.round(i / 27)) : y(this.ks.currentDate, -i);
+      const i = this.getViewPropValue(this.ks.view, "step", this.ks.activeViewName) || this.getViewPropValue(this.ks.view, "numberOfDays", this.ks.activeViewName) || 1, t = i > 27 ? H(this.ks.currentDate, -Math.round(i / 27)) : A(this.ks.currentDate, -i);
       this.setDate(t, e);
     },
     handleTodayClick(e) {
       e.preventDefault();
-      const i = U();
-      this.setDate(i, e);
+      const i = be.fromLocalDate(/* @__PURE__ */ new Date(), this.ks.timezone);
+      this.setDate(new Date(i.getTime()), e);
     },
     handleShowWorkHoursClick() {
       this.ks.showWorkHours = !this.ks.showWorkHours;
@@ -452,14 +590,14 @@ const P = "{0:D}", x = "{0:d}", We = /* @__PURE__ */ B({
       this.$emit("taskdoubleclick", e);
     },
     setDate(e, i) {
-      this.ks.currentDate = e, this.updatePassedState(), this.$emit("datechange", {
+      this.$props.date === void 0 && (this.ks.currentDate = e, this.updatePassedState()), this.$emit("datechange", {
         date: e,
         event: i
       });
     },
     updatePassedState(e) {
-      const i = S(this), s = e || this.ks.activeViewName;
-      this.ks.activeViewName = s, this.ks.view = this.views.find((t) => t.name === s) || this.views[0] || n(m, null, null), this.ks.dateFormat = this.getViewPropValue(this.ks.view, "selectedDateFormat", s) || P, this.ks.shortDateFormat = this.getViewPropValue(this.ks.view, "selectedShortDateFormat", s) || x, this.ks.dateRange = this.getViewComponentByName(s).props.dateRange.default()({
+      const i = L(this), s = e || this.ks.activeViewName;
+      this.ks.activeViewName = s, this.ks.view = this.views.find((t) => t.name === s) || this.views[0] || d(y, null, null), this.ks.dateFormat = this.getViewPropValue(this.ks.view, "selectedDateFormat", s) || J, this.ks.shortDateFormat = this.getViewPropValue(this.ks.view, "selectedShortDateFormat", s) || Q, this.ks.dateRange = this.getViewComponentByName(s).props.dateRange.default()({
         intl: i,
         date: this.ks.currentDate,
         timezone: this.$props.timezone,
@@ -469,10 +607,24 @@ const P = "{0:D}", x = "{0:d}", We = /* @__PURE__ */ B({
       });
     },
     calculateMedia() {
-      b && window.matchMedia && (this.media = window.matchMedia("(min-width: 1024px)").matches ? "desktop" : "mobile");
+      $ && window.matchMedia && (this.media = window.matchMedia("(min-width: 1024px)").matches ? "desktop" : "mobile");
+    },
+    measureToolbar() {
+      const i = this.toolbarElement;
+      if (!i)
+        return;
+      const s = i.clientWidth;
+      if (!s)
+        return;
+      const t = parseInt(window.getComputedStyle(i).gap || "0", 10), a = Array.from(i.children), o = a.reduce((c, h) => c + h.offsetWidth, 0) + (a.length - 1) * t, n = this.toolbarLevel;
+      if (o > s && n < 3) {
+        this.toolbarBreakpoints[n] = s, this.toolbarLevel = n + 1;
+        return;
+      }
+      n > 0 && s > this.toolbarBreakpoints[n - 1] + 20 && (this.toolbarLevel = n - 1);
     }
   }
 });
 export {
-  We as Scheduler
+  nt as Scheduler
 };

package/components/BaseView.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("vue"),l=require("../hooks/use-items-selection.js"),i=require("../hooks/use-slots-selection.js"),o=require("@progress/kendo-vue-common"),s=require("../utils/main.js"),r=require("../hooks/use-slots-focus.js"),a=require("../hooks/use-items-focus.js"),d=require("../hooks/useCellSync.js"),h=c.defineComponent({name:"KendoBaseView",props:{viewProps:Object,baseSlots:Array,ranges:Array,id:String,isAgendaView:{type:Boolean,default:!1}},provide(){return{bv:this.bv,setItems:this.dispatchItems,setSlots:this.dispatchSlots,dispatchSelectedSlots:this.handleSchedulerSlotsSelectAction,dispatchSelectedItems:this.handleSchedulerItemsSelectAction,dispatchFocusedItems:this.setFocusedItems,dispatchFocusedSlots:this.setFocusedSlots}},data(){return{bv:{viewProps:this.viewProps,ranges:this.ranges,items:[],slots:[],focusedItems:[],focusedSlots:[],selectedItems:[],selectedSlots:[]}}},mounted(){this.syncCells()},updated(){this.syncCells()},render(){const e=o.getDefaultSlots(this);return c.createVNode("div",{class:"k-scheduler-layout k-scheduler-layout-flex",role:this.$props.isAgendaView?"grid":"presentation"},[e])},methods:{syncCells(){d.useCellSync({element:this.$el,selector:".k-group-cell",attribute:"data-depth-index",explicitDepth:!0}),d.useCellSync({element:this.$el,selector:".k-side-cell",attribute:"data-depth-index",explicitDepth:!1})},handleSchedulerItemsSelectAction(e,t){i.dispatchSelectedSlots.call(this,{type:i.SLOTS_SELECT_ACTION.reset}),l.dispatchSelectedItems.call(this,e,t)},handleSchedulerSlotsSelectAction(e,t){l.dispatchSelectedItems.call(this,{type:l.ITEMS_SELECT_ACTION.reset},t),i.dispatchSelectedSlots.call(this,e)},setFocusedItems(e,t){a.dispatchFocusedItems.call(this,e,t)},setFocusedSlots(e,t){r.dispatchFocusedSlots.call(this,e,t)},dispatchItems(e){let t;switch(e.type){case s.COLLECTION_ACTION.add:this.bv.items.push(e.item);break;case s.COLLECTION_ACTION.remove:t=this.bv.items.indexOf(e.item),this.bv.items.splice(t,1);break}},dispatchSlots(e){let t;switch(e.type){case s.COLLECTION_ACTION.add:this.bv.slots.push(e.item);break;case s.COLLECTION_ACTION.remove:t=this.bv.slots.indexOf(e.item),this.bv.slots.splice(t,1);break}}}});exports.BaseView=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("vue"),l=require("../hooks/use-items-selection.js"),i=require("../hooks/use-slots-selection.js"),o=require("@progress/kendo-vue-common"),s=require("../utils/main.js"),a=require("../hooks/use-slots-focus.js"),r=require("../hooks/use-items-focus.js"),d=require("../hooks/useCellSync.js"),h=c.defineComponent({name:"KendoBaseView",inheritAttrs:!1,props:{viewProps:Object,baseSlots:Array,ranges:Array,id:String,isAgendaView:{type:Boolean,default:!1}},provide(){return{bv:this.bv,setItems:this.dispatchItems,setSlots:this.dispatchSlots,dispatchSelectedSlots:this.handleSchedulerSlotsSelectAction,dispatchSelectedItems:this.handleSchedulerItemsSelectAction,dispatchFocusedItems:this.setFocusedItems,dispatchFocusedSlots:this.setFocusedSlots}},data(){return{bv:{viewProps:this.viewProps,ranges:this.ranges,items:[],slots:[],focusedItems:[],focusedSlots:[],selectedItems:[],selectedSlots:[]}}},mounted(){this.syncCells()},watch:{ranges(e){this.bv.ranges=e}},updated(){this.syncCells()},render(){const e=o.getDefaultSlots(this);return c.createVNode("div",{class:["k-scheduler-layout k-scheduler-layout-flex",this.$attrs.class],role:this.$props.isAgendaView?"grid":"none"},[e])},methods:{syncCells(){d.useCellSync({element:this.$el,selector:".k-group-cell",attribute:"data-depth-index",explicitDepth:!0}),d.useCellSync({element:this.$el,selector:".k-side-cell",attribute:"data-depth-index",explicitDepth:!1})},handleSchedulerItemsSelectAction(e,t){i.dispatchSelectedSlots.call(this,{type:i.SLOTS_SELECT_ACTION.reset}),l.dispatchSelectedItems.call(this,e,t)},handleSchedulerSlotsSelectAction(e,t){l.dispatchSelectedItems.call(this,{type:l.ITEMS_SELECT_ACTION.reset},t),i.dispatchSelectedSlots.call(this,e)},setFocusedItems(e,t){r.dispatchFocusedItems.call(this,e,t)},setFocusedSlots(e,t){a.dispatchFocusedSlots.call(this,e,t)},dispatchItems(e){let t;switch(e.type){case s.COLLECTION_ACTION.add:this.bv.items.push(e.item);break;case s.COLLECTION_ACTION.remove:t=this.bv.items.indexOf(e.item),this.bv.items.splice(t,1);break}},dispatchSlots(e){let t;switch(e.type){case s.COLLECTION_ACTION.add:this.bv.slots.push(e.item);break;case s.COLLECTION_ACTION.remove:t=this.bv.slots.indexOf(e.item),this.bv.slots.splice(t,1);break}}}});exports.BaseView=h;