@progress/kendo-vue-scheduler 3.2.7 → 3.2.9-dev.202205051307

package/dist/es/Scheduler.d.ts

@@ -71,6 +71,16 @@ export interface SchedulerProps {
      * For more information on customizing the scheduler tasks, refer to the [Task Customization]({% slug overview_tasks_scheduler %}) article.
      */
     task?: any;
+    /**
+     *
+     *  Represents component based on the DateHeaderCellProps.
+     */
+    dateHeaderCell?: any;
+    /**
+     *
+     *  Represents component based on the TimeHeaderCellProps.
+     */
+    timeHeaderCell?: any;
     /**
      * Overrides the default viewTask. Specifying the `viewTask` property of a specific view will override this property.
      * Currently, the `viewTask` is being used in the [AgendaView]({% slug agenda_view_scheduler %}) only.
@@ -131,6 +141,10 @@ export interface SchedulerProps {
     editSlot?: any;
     /** @hidden */
     form?: any;
+    /** @hidden */
+    dialogProps?: any;
+    /** @hidden */
+    formProps?: any;
     /**
      * Sets the currently visible views.
      */

package/dist/es/Scheduler.js

@@ -101,7 +101,9 @@ var SchedulerVue2 = {
     },
     defaultDate: {
       type: Date,
-      default: new Date()
+      default: function _default() {
+        return new Date();
+      }
     },
     validator: {
       type: Function,
@@ -118,8 +120,15 @@ var SchedulerVue2 = {
     header: [String, Function, Object],
     footer: [String, Function, Object],
     slotRender: [String, Function, Object],
+    viewSlot: [String, Function, Object],
     item: [String, Function, Object],
-    task: [String, Function, Object]
+    viewItem: [String, Function, Object],
+    task: [String, Function, Object],
+    form: [String, Function, Object],
+    dialogProps: Object,
+    formProps: Object,
+    dateHeaderCell: [String, Function, Object],
+    timeHeaderCell: [String, Function, Object]
   },
   computed: {
     wrapperClassName: function wrapperClassName() {
@@ -183,7 +192,7 @@ var SchedulerVue2 = {
         orientation: this.$props.group && this.$props.group.orientation ? this.$props.group.orientation : 'horizontal',
         dateFormat: dateFormat,
         shortDateFormat: shortDateFormat,
-        scheduler: null,
+        scheduler: this,
         dataItems: this.dataItems
       }
     };
@@ -227,8 +236,15 @@ var SchedulerVue2 = {
     var header = templateRendering.call(this, view.header || this.$props.header, getListeners.call(this));
     var footer = templateRendering.call(this, view.footer || this.$props.footer, getListeners.call(this));
     var slotRender = templateRendering.call(this, view.slot || this.$props.slotRender, {});
+    var viewSlot = templateRendering.call(this, view.viewSlot || this.$props.viewSlot, {});
     var item = templateRendering.call(this, view.item || this.$props.item, {});
+    var viewItem = templateRendering.call(this, view.viewItem || this.$props.viewItem, {});
     var task = templateRendering.call(this, view.task || this.$props.task, {});
+    var dateHeaderCell = templateRendering.call(this, view.dateHeaderCell || this.$props.dateHeaderCell, {});
+    var timeHeaderCell = templateRendering.call(this, view.timeHeaderCell || this.$props.timeHeaderCell, {});
+    this.ks.form = templateRendering.call(this, view.form || this.$props.form, {});
+    this.ks.dialogProps = view.dialogProps || this.$props.dialogProps;
+    this.ks.formProps = view.formProps || this.$props.formProps;
     var ViewSelector = SchedulerViewSelector;
     var viewComponent = this.getViewComponentByName(this.ks.activeViewName || view.name);
 
@@ -239,8 +255,12 @@ var SchedulerVue2 = {
       defaultDate: undefined,
       dateRange: this.ks.dateRange,
       slotRender: slotRender,
+      viewSlot: viewSlot,
       item: item,
-      task: task
+      viewItem: viewItem,
+      task: task,
+      dateHeaderCell: dateHeaderCell,
+      timeHeaderCell: timeHeaderCell
     });
 
     var headerRender;

package/dist/es/components/CurrentTimeMarker.js

@@ -0,0 +1,160 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+import { cloneDate } from '@progress/kendo-date-math'; // import { useSchedulerElementContext, useSchedulerPropsContext, useSchedulerViewSlotsContext } from '../context';
+
+import { first, isInTimeRange, intersects } from '../utils';
+import { getRect } from '../views/common/utils';
+
+var combineWidths = function combineWidths(slots) {
+  var result = 0;
+  slots.forEach(function (slot) {
+    if (slot) {
+      var rect = getRect(slot.$el);
+      result += rect.width;
+    }
+  });
+  return result;
+};
+
+var combineHeights = function combineHeights(slots) {
+  var result = 0;
+  slots.forEach(function (slot) {
+    if (slot) {
+      var rect = getRect(slot.$el);
+      result += rect.height;
+    }
+  });
+  return result;
+};
+
+var setTime = function setTime(origin, candidate) {
+  var date = cloneDate(origin);
+  date.setHours(candidate.getHours(), candidate.getMinutes(), candidate.getSeconds(), candidate.getMilliseconds());
+  return date;
+}; // tslint:enable:max-line-length
+
+
+var CurrentTimeMarkerVue2 = {
+  name: 'KendoCurrentTimeMarker',
+  props: {
+    updateInterval: {
+      type: Number,
+      default: 60000
+    },
+    groupIndex: Number,
+    vertical: Boolean,
+    attachArrow: Object
+  },
+  inject: {
+    ks: {
+      default: null
+    },
+    bv: {
+      default: null
+    }
+  },
+  created: function created() {
+    this.interval = undefined;
+    this.arrowRef = null;
+    this.observer = null;
+    this.line = null;
+  },
+  data: function data() {
+    return {
+      show: false
+    };
+  },
+  mounted: function mounted() {
+    this.line = this.$el;
+    var that = this;
+    this.$nextTick(function () {
+      that.position();
+    });
+
+    if (!this.ks.scheduler || !this.ks.scheduler.$el || !window) {
+      return;
+    }
+
+    clearInterval(this.interval);
+    this.interval = window.setInterval(this.position, this.updateInterval);
+    this.observer = new window.ResizeObserver(this.position);
+    this.observer.observe(this.ks.scheduler.$el);
+  },
+  destroyed: !!gh ? undefined : function () {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _a;
+
+    var h = gh || createElement; //   const dir = useDir(line, schedulerProps.rtl === true ? 'rtl' : undefined);
+
+    return h("div", {
+      "class": "k-current-time",
+      style: (_a = {
+        transform: this.$props.vertical ? 'translateX(-50%)' : 'translateY(-50%)'
+      }, _a[this.$props.vertical ? 'width' : 'height'] = '1px', _a.visibility = !this.show ? 'hidden' : undefined, _a)
+    });
+  },
+  methods: {
+    position: function position() {
+      var _this = this;
+
+      if (!this.bv.slots) {
+        return;
+      }
+
+      var sameTimeSlots = this.bv.slots.filter(function (s) {
+        return (_this.$props.groupIndex === undefined || _this.$props.groupIndex === null || s.group.index === _this.$props.groupIndex) && (_this.$props.vertical ? intersects(new Date(), new Date(), s.start, s.end, true) : isInTimeRange(new Date(), s.start, s.end)) && !s.isAllDay;
+      });
+
+      if (sameTimeSlots && sameTimeSlots.length && this.line) {
+        var firstSlot = first(sameTimeSlots);
+
+        if (!firstSlot) {
+          return;
+        }
+
+        var size = this.$props.vertical ? combineHeights(sameTimeSlots) : combineWidths(sameTimeSlots);
+        var rect = getRect(firstSlot.$el);
+        var arrowRect = getRect(this.arrowRef);
+        var pxPerMillisecond = (this.$props.vertical ? rect.width : rect.height) / (firstSlot.end.getTime() - firstSlot.start.getTime());
+        var offset = (Date.now() - setTime(new Date(), firstSlot.start).getTime()) * pxPerMillisecond;
+        var rtl = this.$props.dir === 'rtl';
+        var top_1 = this.$props.vertical ? rect.top : rect.top + offset - arrowRect.height / 2;
+        var horizontalDimension = rtl ? 'right' : 'left';
+        var horizontalMeasure = this.$props.vertical ? rect[horizontalDimension] + offset - arrowRect.width / 2 : rect[horizontalDimension]; // if (this.$props.vertical) {
+        //     this.arrowRef.style[horizontalDimension] = `${horizontalMeasure}px`;
+        // } else {
+        //     this.arrowRef.style.top = `${top}px`;
+        // }
+
+        this.line.style[horizontalDimension] = horizontalMeasure + "px";
+        this.line.style.top = top_1 + "px";
+        this.line.style[this.$props.vertical ? 'height' : 'width'] = size - 1 + "px";
+        this.show = true;
+      } else {
+        this.show = false;
+      }
+    }
+  }
+};
+var CurrentTimeMarker = CurrentTimeMarkerVue2;
+export { CurrentTimeMarker, CurrentTimeMarkerVue2 };

package/dist/es/components/CurrentTimeMarkerArrow.d.ts

@@ -0,0 +1,43 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+declare type CurrentTimeMarkerArrowProps = {
+    updateInterval?: number;
+    groupIndex?: number | null;
+    vertical?: boolean;
+    attachArrow?: HTMLElement;
+};
+/**
+ * @hidden
+ */
+export interface CurrentTimeMarkerArrowState {
+    interval: number | undefined;
+    arrowRef: HTMLElement | null;
+}
+/**
+ * @hidden
+ */
+export interface CurrentTimeMarkerArrowComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface CurrentTimeMarkerArrowMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface CurrentTimeMarkerArrowData {
+}
+/**
+ * @hidden
+ */
+export interface CurrentTimeMarkerArrowAll extends Vue2type, CurrentTimeMarkerArrowMethods, CurrentTimeMarkerArrowData, CurrentTimeMarkerArrowComputed, CurrentTimeMarkerArrowState {
+}
+declare let CurrentTimeMarkerArrowVue2: ComponentOptions<CurrentTimeMarkerArrowAll, DefaultData<CurrentTimeMarkerArrowData>, DefaultMethods<CurrentTimeMarkerArrowAll>, CurrentTimeMarkerArrowComputed, RecordPropsDefinition<CurrentTimeMarkerArrowProps>>;
+declare const CurrentTimeMarkerArrow: DefineComponent<CurrentTimeMarkerArrowProps, any, CurrentTimeMarkerArrowData, CurrentTimeMarkerArrowComputed, CurrentTimeMarkerArrowMethods, {}, {}, {}, string, CurrentTimeMarkerArrowProps, CurrentTimeMarkerArrowProps, {}>;
+export { CurrentTimeMarkerArrow, CurrentTimeMarkerArrowVue2 };

package/dist/es/components/CurrentTimeMarkerArrow.js

@@ -0,0 +1,135 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+import { cloneDate } from '@progress/kendo-date-math';
+import { classNames } from '@progress/kendo-vue-common'; // import { useSchedulerElementContext, useSchedulerPropsContext, useSchedulerViewSlotsContext } from '../context';
+
+import { first, isInTimeRange, intersects } from '../utils';
+import { getRect } from '../views/common/utils';
+
+var setTime = function setTime(origin, candidate) {
+  var date = cloneDate(origin);
+  date.setHours(candidate.getHours(), candidate.getMinutes(), candidate.getSeconds(), candidate.getMilliseconds());
+  return date;
+}; // tslint:enable:max-line-length
+
+
+var CurrentTimeMarkerArrowVue2 = {
+  name: 'KendoCurrentTimeMarkerArrow',
+  props: {
+    updateInterval: {
+      type: Number,
+      default: 60000
+    },
+    groupIndex: Number,
+    vertical: Boolean,
+    attachArrow: Object
+  },
+  inject: {
+    ks: {
+      default: null
+    },
+    bv: {
+      default: null
+    }
+  },
+  created: function created() {
+    this.interval = undefined;
+    this.arrowRef = null;
+  },
+  data: function data() {
+    return {
+      show: false
+    };
+  },
+  mounted: function mounted() {
+    this.arrowRef = this.$el;
+    this.position();
+
+    if (!this.ks.scheduler || !this.ks.scheduler.$el || !window) {
+      return;
+    }
+
+    clearInterval(this.interval);
+    this.interval = window.setInterval(this.position, this.updateInterval);
+    this.observer = new window.ResizeObserver(this.position);
+    this.observer.observe(this.ks.scheduler.$el);
+  },
+  destroyed: !!gh ? undefined : function () {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement; //   const dir = useDir(line, schedulerProps.rtl === true ? 'rtl' : undefined);
+
+    return h("div", {
+      "class": classNames('k-current-time', {
+        'k-current-time-arrow-right': !this.$props.vertical && this.$props.dir !== 'rtl',
+        'k-current-time-arrow-left': !this.$props.vertical && this.$props.dir === 'rtl',
+        'k-current-time-arrow-down': this.$props.vertical
+      }),
+      style: {
+        transform: this.$props.vertical ? this.$props.dir === 'rtl' ? 'translateX(50%)' : 'translateX(-50%)' : 'translateY(-50%)',
+        visibility: !this.show ? 'hidden' : undefined
+      }
+    });
+  },
+  methods: {
+    position: function position() {
+      var _this = this;
+
+      if (!this.bv.slots) {
+        return;
+      }
+
+      var sameTimeSlots = this.bv.slots.filter(function (s) {
+        return (_this.$props.groupIndex === undefined || _this.$props.groupIndex === null || s.group.index === _this.$props.groupIndex) && (_this.$props.vertical ? intersects(new Date(), new Date(), s.start, s.end, true) : isInTimeRange(new Date(), s.start, s.end)) && !s.isAllDay;
+      });
+
+      if (sameTimeSlots && sameTimeSlots.length && this.$el) {
+        var firstSlot = first(sameTimeSlots);
+
+        if (!firstSlot) {
+          return;
+        }
+
+        var rect = getRect(firstSlot.$el);
+        var arrowRect = getRect(this.arrowRef);
+        var pxPerMillisecond = (this.$props.vertical ? rect.width : rect.height) / (firstSlot.end.getTime() - firstSlot.start.getTime());
+        var offset = (Date.now() - setTime(new Date(), firstSlot.start).getTime()) * pxPerMillisecond;
+        var rtl = this.$props.dir === 'rtl';
+        var top_1 = this.$props.vertical ? rect.top : rect.top + offset - arrowRect.height / 2;
+        var horizontalDimension = rtl ? 'right' : 'left';
+        var horizontalMeasure = this.$props.vertical ? rect[horizontalDimension] + offset - arrowRect.width / 2 : rect[horizontalDimension];
+
+        if (this.$props.vertical) {
+          this.arrowRef.style[horizontalDimension] = horizontalMeasure + "px";
+        } else {
+          this.arrowRef.style.top = top_1 + "px";
+        }
+
+        this.show = true;
+      } else {
+        this.show = false;
+      }
+    }
+  }
+};
+var CurrentTimeMarkerArrow = CurrentTimeMarkerArrowVue2;
+export { CurrentTimeMarkerArrow, CurrentTimeMarkerArrowVue2 };

package/dist/es/components/DateHeaderCell.js

@@ -3,7 +3,8 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var inject = allVue.inject;
-import { provideIntlService } from '@progress/kendo-vue-intl'; // tslint:enable:max-line-length
+import { provideIntlService } from '@progress/kendo-vue-intl';
+import { getTemplate } from '@progress/kendo-vue-common'; // tslint:enable:max-line-length
 
 var DateHeaderCellVue2 = {
   name: 'KendoDateHeaderCell',
@@ -35,11 +36,23 @@ var DateHeaderCellVue2 = {
   render: function render(createElement) {
     var h = gh || createElement;
     var intl = provideIntlService(this);
+    var renderAs;
+    var defaultRendering = intl.formatDate(this.$props.date, this.$props.format);
+    renderAs = getTemplate.call(this, {
+      h: h,
+      template: this.$props.as,
+      defaultRendering: defaultRendering,
+      additionalProps: {
+        default: defaultRendering,
+        date: this.$props.date,
+        format: this.$props.format
+      }
+    });
     return h("div", {
       "class": 'k-scheduler-cell k-heading-cell'
     }, [h("span", {
       "class": "k-link k-nav-day"
-    }, [intl.formatDate(this.$props.date, this.$props.format)])]);
+    }, [renderAs])]);
   }
 };
 var DateHeaderCell = DateHeaderCellVue2;

package/dist/es/components/SchedulerForm.d.ts

@@ -18,10 +18,6 @@ export interface SchedulerFormProps extends FormProps {
      * Specifies the `dataItem` to be visualized inside the form.
      */
     dataItem: DataItem;
-    /**
-     * Specifies the custom form.
-     */
-    renderForm: any;
     /**
      * Called when the `cancel` button is clicked.
      */
@@ -30,20 +26,6 @@ export interface SchedulerFormProps extends FormProps {
      * Called when the `close` button is clicked.
      */
     onClose?: (event: SchedulerFormStateChangeEvent<null>) => void;
-    /**
-     * Overrides the component used for visualizing the `editor`.
-     * The [SchedulerFormEditor]({% slug api_scheduler_schedulerFormEditor %}) component is used, by default.
-     *
-     * For more information, please refer to the [`Scheduler Form Customization`]({% slug overview_customization_form_scheduler %}) article.
-     */
-    editor?: any;
-    /**
-     * Overrides the component used for visualizing the `dialog`.
-     * The [Kendo UI for Vue Dialog]({% slug api_dialogs_dialog %}) component is used, by default.
-     *
-     * For more information, please refer to the [`Scheduler Form Customization`]({% slug overview_customization_form_scheduler %}) article.
-     */
-    dialog?: any;
 }
 /**
  * Represent the `ref` of the SchedulerForm component.