@progress/kendo-vue-scheduler 3.5.0 → 3.5.1-dev.202208150613

package/dist/esm/items/SchedulerItem.js

@@ -0,0 +1,861 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var inject = allVue.inject;
+import { COLLECTION_ACTION, toSchedulerGroups } from '../utils.js';
+import { Draggable, getDefaultSlots, getTemplate } from '@progress/kendo-vue-common';
+import { provideIntlService, provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, deleteTitle } from '../messages.js';
+import { useEditable } from '../hooks.js';
+import { formatEventTime } from '../utils.js';
+import { SchedulerOccurrenceDialog } from '../components/SchedulerOccurrenceDialog.js';
+import { SchedulerRemoveDialog } from '../components/SchedulerRemoveDialog.js';
+import { SchedulerForm } from '../components/SchedulerForm.js';
+/**
+ * @hidden
+ */
+
+var SchedulerItemVue2 = {
+  name: 'KendoSchedulerItem',
+  inheritAttrs: false,
+  // @ts-ignore
+  emits: {
+    'focus': null,
+    'blur': null,
+    'mousedown': null,
+    'mouseup': null,
+    'mouseover': null,
+    'mouseout': null,
+    'mouseenter': null,
+    'mouseleave': null,
+    'click': null,
+    'doubleclick': null,
+    'removeclick': null,
+    'keydown': null,
+    'keypress': null,
+    'keyup': null,
+    'press': null,
+    'drag': null,
+    'release': null,
+    'resizepress': null,
+    'resizestartdrag': null,
+    'resizeenddrag': null,
+    'resizerelease': null
+  },
+  props: {
+    uid: [String, Number],
+    start: Date,
+    end: Date,
+    originalStart: Date,
+    startTimezone: String,
+    endTimezone: String,
+    isAllDay: Boolean,
+    title: String,
+    description: String,
+    occurrenceId: String,
+    recurrenceExceptions: Array,
+    recurrenceRule: String,
+    recurrenceId: [String, Number],
+    dataItem: Object,
+    head: Boolean,
+    tail: Boolean,
+    order: Number,
+    zonedStart: Object,
+    zonedEnd: Object,
+    slots: Array,
+    group: Object,
+    range: Object,
+    isException: Boolean,
+    isRecurring: Boolean,
+    id: String,
+    tabIndex: Number,
+    className: String,
+    itemStyle: Object,
+    editable: [Object, Boolean],
+    selected: Boolean,
+    vertical: Boolean,
+    dragHint: Boolean,
+    resizeHint: Boolean,
+    format: String,
+    maxSiblingsPerSlot: Number,
+    itemTitle: String,
+    formItem: Object,
+    dragItem: Object,
+    resizeItem: Object,
+    removeItem: Object,
+    showOccurrenceDialog: {
+      type: Boolean,
+      default: undefined
+    },
+    showRemoveDialog: {
+      type: Boolean,
+      default: undefined
+    }
+  },
+  inject: {
+    ks: {
+      default: null
+    },
+    bv: {
+      default: null
+    },
+    kendoLocalizationService: {
+      default: null
+    },
+    kendoIntlService: {
+      default: null
+    },
+    setItems: {
+      default: null
+    },
+    itemClick: {
+      default: null
+    },
+    itemDoubleClick: {
+      default: null
+    },
+    ksCancel: {
+      default: null
+    },
+    ksFormSubmit: {
+      default: null
+    },
+    ksOccurrenceClick: {
+      default: null
+    },
+    ksSeriesClick: {
+      default: null
+    },
+    ksRemoveConfirm: {
+      default: null
+    }
+  },
+  computed: {
+    currentEditable: function currentEditable() {
+      return useEditable(this.$props.editable);
+    },
+    resource: function resource() {
+      var _this = this;
+
+      var groupedWithColor = this.$props.group.resources.find(function (r) {
+        return Boolean(r.colorField && r[r.colorField] !== '' && r[r.colorField] !== undefined);
+      });
+      var nonGroupedWithColor = toSchedulerGroups(undefined, this.ks.props.resources)[0].resources.find(function (r) {
+        return Boolean(r.colorField && r[r.colorField] !== '' && r[r.colorField] !== undefined && _this.dataItem[r.field] === r.value);
+      });
+      return groupedWithColor || nonGroupedWithColor;
+    },
+    color: function color() {
+      return this.resource && this.resource.colorField && this.resource[this.resource.colorField];
+    },
+    currentTabIndex: function currentTabIndex() {
+      return this.$props.tabIndex !== undefined ? this.$props.tabIndex === null ? undefined : this.$props.tabIndex : this.$props.selected ? 0 : -1;
+    },
+    itemClassName: function itemClassName() {
+      var _a;
+
+      return _a = {
+        'k-event': !this.$props.resizeHint,
+        'k-selected': this.$props.selected && this.currentEditable.select,
+        'k-event-drag-hint': this.$props.dragHint,
+        'k-scheduler-marquee': this.$props.resizeHint,
+        'k-marquee': this.$props.resizeHint,
+        'k-first': this.$props.resizeHint && !this.$props.tail,
+        'k-last': this.$props.resizeHint && !this.$props.head
+      }, _a[this.$props.className] = this.$props.className, _a;
+    },
+    eventLabel: function eventLabel() {
+      return "".concat(formatEventTime(this.intl, this.$props.zonedStart, this.$props.zonedEnd, this.$props.isAllDay), ", ").concat(this.$props.title);
+    },
+    computedStyle: function computedStyle() {
+      return __assign({
+        cursor: 'pointer',
+        userSelect: 'none',
+        borderColor: !this.$props.resizeHint ? this.color : undefined,
+        backgroundColor: !this.$props.resizeHint ? this.color : undefined,
+        touchAction: 'none'
+      }, this.$props.itemStyle);
+    }
+  },
+  created: function created() {
+    this.setItems({
+      type: COLLECTION_ACTION.add,
+      item: this
+    });
+  },
+  mounted: function mounted() {
+    if (!this.element) {
+      this.element = this.$refs.draggable && this.$refs.draggable.element;
+    }
+  },
+  destroyed: !!isV3 ? undefined : function () {
+    this.setItems({
+      type: COLLECTION_ACTION.remove,
+      item: this
+    });
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    this.setItems({
+      type: COLLECTION_ACTION.remove,
+      item: this
+    });
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this2 = this;
+
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    this.intl = provideIntlService(this);
+    var localization = provideLocalizationService(this);
+    var deleteMessage = localization.toLanguageString(deleteTitle, messages[deleteTitle]);
+    var resizeHint = getTemplate.call(this, {
+      h: h,
+      template: this.bv.viewProps.resizeHint,
+      additionalProps: {
+        dataItem: this.dataItem,
+        color: this.color,
+        itemClassName: this.itemClassName
+      }
+    });
+    return (// @ts-ignore  function children
+      h(Draggable, {
+        onPress: this.handlePress,
+        on: this.v3 ? undefined : {
+          "press": this.handlePress,
+          "drag": this.handleDrag,
+          "release": this.handleRelease
+        },
+        onDrag: this.handleDrag,
+        onRelease: this.handleRelease,
+        ref: 'draggable'
+      }, this.v3 ? function () {
+        return [h("div", {
+          id: _this2.$props.id,
+          attrs: _this2.v3 ? undefined : {
+            id: _this2.$props.id,
+            tabindex: _this2.currentTabIndex,
+            // Aria
+            "aria-label": _this2.eventLabel,
+            "aria-selected": _this2.$props.selected // Focus
+            ,
+            "data-group-index": _this2.$props.group.index,
+            "data-range-index": _this2.$props.range.index
+          },
+          style: _this2.computedStyle,
+          tabindex: _this2.currentTabIndex,
+          "class": _this2.itemClassName,
+          "aria-label": _this2.eventLabel,
+          "aria-selected": _this2.$props.selected,
+          onFocusin: _this2.handleFocus,
+          on: _this2.v3 ? undefined : {
+            "focusin": _this2.handleFocus,
+            "blur": _this2.handleBlur,
+            "mouseup": _this2.handleMouseUp,
+            "mousedown": _this2.handleMouseDown,
+            "click": _this2.handleClick,
+            "mouseover": _this2.handleMouseOver,
+            "mouseout": _this2.handleMouseOut,
+            "mouseenter": _this2.handleMouseEnter,
+            "mouseleave": _this2.handleMouseLeave,
+            "dblclick": _this2.handleDoubleClick,
+            "keydown": _this2.handleKeyDown,
+            "keypress": _this2.handleKeyPress,
+            "keyup": _this2.handleKeyUp
+          },
+          onBlur: _this2.handleBlur // Mouse
+          ,
+          onMouseup: _this2.handleMouseUp,
+          onMousedown: _this2.handleMouseDown,
+          onClick: _this2.handleClick,
+          onMouseover: _this2.handleMouseOver,
+          onMouseout: _this2.handleMouseOut,
+          onMouseenter: _this2.handleMouseEnter,
+          onMouseleave: _this2.handleMouseLeave,
+          onDblclick: _this2.handleDoubleClick // Keyboard
+          ,
+          onKeydown: _this2.handleKeyDown,
+          onKeypress: _this2.handleKeyPress,
+          onKeyup: _this2.handleKeyUp,
+          "data-group-index": _this2.$props.group.index,
+          "data-range-index": _this2.$props.range.index
+        }, [!_this2.$props.resizeHint && h("span", {
+          "class": "k-event-actions"
+        }, [_this2.$props.tail && h("span", {
+          "class": "k-icon k-i-arrow-60-left"
+        }), _this2.$props.isRecurring && !_this2.$props.isException && h("span", {
+          "class": "k-icon k-i-reload"
+        }), !_this2.$props.isRecurring && _this2.$props.isException && h("span", {
+          "class": "k-icon k-i-non-recurrence"
+        })]), _this2.formItem && !_this2.showOccurrenceDialog && _this2.currentEditable.edit && h(SchedulerForm, {
+          dataItem: _this2.formItem,
+          attrs: _this2.v3 ? undefined : {
+            dataItem: _this2.formItem
+          },
+          onSubmit: _this2.ksFormSubmit,
+          on: _this2.v3 ? undefined : {
+            "submit": _this2.ksFormSubmit,
+            "close": _this2.ksCancel,
+            "cancel": _this2.ksCancel
+          },
+          onClose: _this2.ksCancel,
+          onCancel: _this2.ksCancel
+        }), _this2.showOccurrenceDialog && h(SchedulerOccurrenceDialog, {
+          dataItem: _this2.formItem || _this2.dragItem || _this2.resizeItem || _this2.removeItem,
+          attrs: _this2.v3 ? undefined : {
+            dataItem: _this2.formItem || _this2.dragItem || _this2.resizeItem || _this2.removeItem,
+            isRemove: !!_this2.removeItem
+          },
+          isRemove: !!_this2.removeItem,
+          onClose: _this2.ksCancel,
+          on: _this2.v3 ? undefined : {
+            "close": _this2.ksCancel,
+            "occurrenceclose": _this2.ksOccurrenceClick,
+            "seriesclose": _this2.ksSeriesClick
+          },
+          onOccurrenceclose: _this2.ksOccurrenceClick,
+          onSeriesclose: _this2.ksSeriesClick
+        }), _this2.showRemoveDialog && _this2.removeItem && _this2.currentEditable.remove && h(SchedulerRemoveDialog, {
+          dataItem: _this2.removeItem,
+          attrs: _this2.v3 ? undefined : {
+            dataItem: _this2.removeItem
+          },
+          onClose: _this2.ksCancel,
+          on: _this2.v3 ? undefined : {
+            "close": _this2.ksCancel,
+            "cancel": _this2.ksCancel,
+            "confirm": _this2.ksRemoveConfirm
+          },
+          onCancel: _this2.ksCancel,
+          onConfirm: _this2.ksRemoveConfirm
+        }), defaultSlot, !_this2.$props.resizeHint && h("span", {
+          "class": "k-event-actions"
+        }, [_this2.currentEditable.remove && h("a", {
+          tabindex: -1,
+          attrs: _this2.v3 ? undefined : {
+            tabindex: -1,
+            "aria-hidden": "true",
+            title: deleteMessage,
+            "aria-label": deleteMessage
+          },
+          "aria-hidden": "true",
+          "class": "k-link k-event-delete",
+          title: deleteMessage,
+          "aria-label": deleteMessage,
+          onClick: _this2.handleRemoveClick,
+          on: _this2.v3 ? undefined : {
+            "click": _this2.handleRemoveClick
+          }
+        }, [h("span", {
+          "class": "k-icon k-i-close"
+        })]), _this2.$props.head && h("span", {
+          "class": "k-icon k-i-arrow-60-right"
+        })]), _this2.currentEditable.resize && _this2.$props.vertical && [// @ts-ignore  function children
+        h(Draggable, {
+          onPress: _this2.handleResizePress,
+          on: _this2.v3 ? undefined : {
+            "press": _this2.handleResizePress,
+            "drag": _this2.handleResizeStartDrag,
+            "release": _this2.handleResizeRelease
+          },
+          onDrag: _this2.handleResizeStartDrag,
+          onRelease: _this2.handleResizeRelease
+        }, _this2.v3 ? function () {
+          return [h("span", {
+            "class": "k-resize-handle k-resize-n"
+          })];
+        } : [h("span", {
+          "class": "k-resize-handle k-resize-n"
+        })]), // @ts-ignore  function children
+        h(Draggable, {
+          onPress: _this2.handleResizePress,
+          on: _this2.v3 ? undefined : {
+            "press": _this2.handleResizePress,
+            "drag": _this2.handleResizeEndDrag,
+            "release": _this2.handleResizeRelease
+          },
+          onDrag: _this2.handleResizeEndDrag,
+          onRelease: _this2.handleResizeRelease
+        }, _this2.v3 ? function () {
+          return [h("span", {
+            "class": "k-resize-handle k-resize-s"
+          })];
+        } : [h("span", {
+          "class": "k-resize-handle k-resize-s"
+        })])], _this2.currentEditable.resize && !_this2.$props.vertical && [// @ts-ignore  function children
+        h(Draggable, {
+          onPress: _this2.handleResizePress,
+          on: _this2.v3 ? undefined : {
+            "press": _this2.handleResizePress,
+            "drag": _this2.handleResizeStartDrag,
+            "release": _this2.handleResizeRelease
+          },
+          onDrag: _this2.handleResizeStartDrag,
+          onRelease: _this2.handleResizeRelease
+        }, _this2.v3 ? function () {
+          return [h("span", {
+            "class": "k-resize-handle k-resize-w"
+          })];
+        } : [h("span", {
+          "class": "k-resize-handle k-resize-w"
+        })]), // @ts-ignore  function children
+        h(Draggable, {
+          onPress: _this2.handleResizePress,
+          on: _this2.v3 ? undefined : {
+            "press": _this2.handleResizePress,
+            "drag": _this2.handleResizeEndDrag,
+            "release": _this2.handleResizeRelease
+          },
+          onDrag: _this2.handleResizeEndDrag,
+          onRelease: _this2.handleResizeRelease
+        }, _this2.v3 ? function () {
+          return [h("span", {
+            "class": "k-resize-handle k-resize-e"
+          })];
+        } : [h("span", {
+          "class": "k-resize-handle k-resize-e"
+        })])], _this2.$props.resizeHint && _this2.bv.viewProps.resizeHint ? resizeHint : [h("div", {
+          "class": "k-marquee-color",
+          style: {
+            borderColor: _this2.color,
+            backgroundColor: _this2.color
+          }
+        }), h("div", {
+          "class": "k-marquee-text"
+        }, [!_this2.$props.tail && h("div", {
+          "class": "k-label-top"
+        }, [_this2.intl.formatDate(_this2.$props.zonedStart, _this2.$props.format)]), !_this2.$props.head && h("div", {
+          "class": "k-label-bottom"
+        }, [_this2.intl.formatDate(_this2.$props.zonedEnd, _this2.$props.format)])])]])];
+      } : [h("div", {
+        id: _this2.$props.id,
+        attrs: _this2.v3 ? undefined : {
+          id: _this2.$props.id,
+          tabindex: _this2.currentTabIndex,
+          "aria-label": _this2.eventLabel,
+          "aria-selected": _this2.$props.selected,
+          "data-group-index": _this2.$props.group.index,
+          "data-range-index": _this2.$props.range.index
+        },
+        style: _this2.computedStyle,
+        tabindex: _this2.currentTabIndex,
+        "class": _this2.itemClassName,
+        "aria-label": _this2.eventLabel,
+        "aria-selected": _this2.$props.selected,
+        onFocusin: _this2.handleFocus,
+        on: _this2.v3 ? undefined : {
+          "focusin": _this2.handleFocus,
+          "blur": _this2.handleBlur,
+          "mouseup": _this2.handleMouseUp,
+          "mousedown": _this2.handleMouseDown,
+          "click": _this2.handleClick,
+          "mouseover": _this2.handleMouseOver,
+          "mouseout": _this2.handleMouseOut,
+          "mouseenter": _this2.handleMouseEnter,
+          "mouseleave": _this2.handleMouseLeave,
+          "dblclick": _this2.handleDoubleClick,
+          "keydown": _this2.handleKeyDown,
+          "keypress": _this2.handleKeyPress,
+          "keyup": _this2.handleKeyUp
+        },
+        onBlur: _this2.handleBlur,
+        onMouseup: _this2.handleMouseUp,
+        onMousedown: _this2.handleMouseDown,
+        onClick: _this2.handleClick,
+        onMouseover: _this2.handleMouseOver,
+        onMouseout: _this2.handleMouseOut,
+        onMouseenter: _this2.handleMouseEnter,
+        onMouseleave: _this2.handleMouseLeave,
+        onDblclick: _this2.handleDoubleClick,
+        onKeydown: _this2.handleKeyDown,
+        onKeypress: _this2.handleKeyPress,
+        onKeyup: _this2.handleKeyUp,
+        "data-group-index": _this2.$props.group.index,
+        "data-range-index": _this2.$props.range.index
+      }, [!_this2.$props.resizeHint && h("span", {
+        "class": "k-event-actions"
+      }, [_this2.$props.tail && h("span", {
+        "class": "k-icon k-i-arrow-60-left"
+      }), _this2.$props.isRecurring && !_this2.$props.isException && h("span", {
+        "class": "k-icon k-i-reload"
+      }), !_this2.$props.isRecurring && _this2.$props.isException && h("span", {
+        "class": "k-icon k-i-non-recurrence"
+      })]), _this2.formItem && !_this2.showOccurrenceDialog && _this2.currentEditable.edit && h(SchedulerForm, {
+        dataItem: _this2.formItem,
+        attrs: _this2.v3 ? undefined : {
+          dataItem: _this2.formItem
+        },
+        onSubmit: _this2.ksFormSubmit,
+        on: _this2.v3 ? undefined : {
+          "submit": _this2.ksFormSubmit,
+          "close": _this2.ksCancel,
+          "cancel": _this2.ksCancel
+        },
+        onClose: _this2.ksCancel,
+        onCancel: _this2.ksCancel
+      }), _this2.showOccurrenceDialog && h(SchedulerOccurrenceDialog, {
+        dataItem: _this2.formItem || _this2.dragItem || _this2.resizeItem || _this2.removeItem,
+        attrs: _this2.v3 ? undefined : {
+          dataItem: _this2.formItem || _this2.dragItem || _this2.resizeItem || _this2.removeItem,
+          isRemove: !!_this2.removeItem
+        },
+        isRemove: !!_this2.removeItem,
+        onClose: _this2.ksCancel,
+        on: _this2.v3 ? undefined : {
+          "close": _this2.ksCancel,
+          "occurrenceclose": _this2.ksOccurrenceClick,
+          "seriesclose": _this2.ksSeriesClick
+        },
+        onOccurrenceclose: _this2.ksOccurrenceClick,
+        onSeriesclose: _this2.ksSeriesClick
+      }), _this2.showRemoveDialog && _this2.removeItem && _this2.currentEditable.remove && h(SchedulerRemoveDialog, {
+        dataItem: _this2.removeItem,
+        attrs: _this2.v3 ? undefined : {
+          dataItem: _this2.removeItem
+        },
+        onClose: _this2.ksCancel,
+        on: _this2.v3 ? undefined : {
+          "close": _this2.ksCancel,
+          "cancel": _this2.ksCancel,
+          "confirm": _this2.ksRemoveConfirm
+        },
+        onCancel: _this2.ksCancel,
+        onConfirm: _this2.ksRemoveConfirm
+      }), defaultSlot, !_this2.$props.resizeHint && h("span", {
+        "class": "k-event-actions"
+      }, [_this2.currentEditable.remove && h("a", {
+        tabindex: -1,
+        attrs: _this2.v3 ? undefined : {
+          tabindex: -1,
+          "aria-hidden": "true",
+          title: deleteMessage,
+          "aria-label": deleteMessage
+        },
+        "aria-hidden": "true",
+        "class": "k-link k-event-delete",
+        title: deleteMessage,
+        "aria-label": deleteMessage,
+        onClick: _this2.handleRemoveClick,
+        on: _this2.v3 ? undefined : {
+          "click": _this2.handleRemoveClick
+        }
+      }, [h("span", {
+        "class": "k-icon k-i-close"
+      })]), _this2.$props.head && h("span", {
+        "class": "k-icon k-i-arrow-60-right"
+      })]), _this2.currentEditable.resize && _this2.$props.vertical && [h(Draggable, {
+        onPress: _this2.handleResizePress,
+        on: _this2.v3 ? undefined : {
+          "press": _this2.handleResizePress,
+          "drag": _this2.handleResizeStartDrag,
+          "release": _this2.handleResizeRelease
+        },
+        onDrag: _this2.handleResizeStartDrag,
+        onRelease: _this2.handleResizeRelease
+      }, _this2.v3 ? function () {
+        return [h("span", {
+          "class": "k-resize-handle k-resize-n"
+        })];
+      } : [h("span", {
+        "class": "k-resize-handle k-resize-n"
+      })]), h(Draggable, {
+        onPress: _this2.handleResizePress,
+        on: _this2.v3 ? undefined : {
+          "press": _this2.handleResizePress,
+          "drag": _this2.handleResizeEndDrag,
+          "release": _this2.handleResizeRelease
+        },
+        onDrag: _this2.handleResizeEndDrag,
+        onRelease: _this2.handleResizeRelease
+      }, _this2.v3 ? function () {
+        return [h("span", {
+          "class": "k-resize-handle k-resize-s"
+        })];
+      } : [h("span", {
+        "class": "k-resize-handle k-resize-s"
+      })])], _this2.currentEditable.resize && !_this2.$props.vertical && [h(Draggable, {
+        onPress: _this2.handleResizePress,
+        on: _this2.v3 ? undefined : {
+          "press": _this2.handleResizePress,
+          "drag": _this2.handleResizeStartDrag,
+          "release": _this2.handleResizeRelease
+        },
+        onDrag: _this2.handleResizeStartDrag,
+        onRelease: _this2.handleResizeRelease
+      }, _this2.v3 ? function () {
+        return [h("span", {
+          "class": "k-resize-handle k-resize-w"
+        })];
+      } : [h("span", {
+        "class": "k-resize-handle k-resize-w"
+      })]), h(Draggable, {
+        onPress: _this2.handleResizePress,
+        on: _this2.v3 ? undefined : {
+          "press": _this2.handleResizePress,
+          "drag": _this2.handleResizeEndDrag,
+          "release": _this2.handleResizeRelease
+        },
+        onDrag: _this2.handleResizeEndDrag,
+        onRelease: _this2.handleResizeRelease
+      }, _this2.v3 ? function () {
+        return [h("span", {
+          "class": "k-resize-handle k-resize-e"
+        })];
+      } : [h("span", {
+        "class": "k-resize-handle k-resize-e"
+      })])], _this2.$props.resizeHint && _this2.bv.viewProps.resizeHint ? resizeHint : [h("div", {
+        "class": "k-marquee-color",
+        style: {
+          borderColor: _this2.color,
+          backgroundColor: _this2.color
+        }
+      }), h("div", {
+        "class": "k-marquee-text"
+      }, [!_this2.$props.tail && h("div", {
+        "class": "k-label-top"
+      }, [_this2.intl.formatDate(_this2.$props.zonedStart, _this2.$props.format)]), !_this2.$props.head && h("div", {
+        "class": "k-label-bottom"
+      }, [_this2.intl.formatDate(_this2.$props.zonedEnd, _this2.$props.format)])])]])])
+    );
+  },
+  methods: {
+    getElement: function getElement() {
+      return this.$el.nodeType === 8 ? this.$el.parentElement : this.$el.nodeType === 3 ? this.$el.nextElementSibling : this.$el;
+    },
+    // Focus Handlers
+    handleFocus: function handleFocus(event) {
+      this.$emit('focus', {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.element
+        }
+      });
+    },
+    handleBlur: function handleBlur(event) {
+      this.$emit('blur', {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.element
+        }
+      });
+    },
+    // Mouse Handlers
+    handleMouseDown: function handleMouseDown(event) {
+      this.$emit('mousedown', {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.element
+        }
+      });
+    },
+    handleClick: function handleClick(event) {
+      var args = {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.element
+        }
+      };
+      this.$emit('click', args);
+      this.itemClick(args);
+    },
+    handleMouseUp: function handleMouseUp(event) {
+      this.$emit('mouseup', {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.element
+        }
+      });
+    },
+    handleMouseOver: function handleMouseOver(event) {
+      this.$emit('mouseover', {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.element
+        }
+      });
+    },
+    handleMouseOut: function handleMouseOut(event) {
+      this.$emit('mouseout', {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.element
+        }
+      });
+    },
+    handleMouseEnter: function handleMouseEnter(event) {
+      this.$emit('mouseenter', {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.element
+        }
+      });
+    },
+    handleMouseLeave: function handleMouseLeave(event) {
+      this.$emit('mouseleave', {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.element
+        }
+      });
+    },
+    handleDoubleClick: function handleDoubleClick(event) {
+      var args = {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.element
+        }
+      };
+      this.$emit('doubleclick', args);
+      this.itemDoubleClick(args);
+    },
+    handleRemoveClick: function handleRemoveClick(event) {
+      this.$emit('removeclick', {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.element
+        }
+      });
+    },
+    // Keyboard Handlers
+    handleKeyDown: function handleKeyDown(event) {
+      this.$emit('keydown', {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.element
+        }
+      });
+    },
+    handleKeyPress: function handleKeyPress(event) {
+      this.$emit('keypress', {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.element
+        }
+      });
+    },
+    handleKeyUp: function handleKeyUp(event) {
+      this.$emit('keyup', {
+        event: event,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.element
+        }
+      });
+    },
+    // Drag Handlers
+    handlePress: function handlePress(dragEvent) {
+      if (this.currentEditable.drag) {
+        this.$emit('press', {
+          dragEvent: dragEvent,
+          target: {
+            props: __assign({}, this.$props),
+            element: this.element
+          }
+        });
+      }
+    },
+    handleDrag: function handleDrag(dragEvent) {
+      if (this.currentEditable.drag) {
+        this.$emit('drag', {
+          dragEvent: dragEvent,
+          target: {
+            props: __assign({}, this.$props),
+            element: this.element
+          }
+        });
+      }
+    },
+    handleRelease: function handleRelease(dragEvent) {
+      if (this.currentEditable.drag) {
+        this.$emit('release', {
+          dragEvent: dragEvent,
+          target: {
+            props: __assign({}, this.$props),
+            element: this.element
+          }
+        });
+      }
+    },
+    handleResizePress: function handleResizePress(dragEvent) {
+      this.$emit('resizepress', {
+        dragEvent: dragEvent,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.element
+        }
+      });
+    },
+    handleResizeStartDrag: function handleResizeStartDrag(dragEvent) {
+      this.$emit('resizestartdrag', {
+        dragEvent: dragEvent,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.element
+        }
+      });
+    },
+    handleResizeEndDrag: function handleResizeEndDrag(dragEvent) {
+      this.$emit('resizeenddrag', {
+        dragEvent: dragEvent,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.element
+        }
+      });
+    },
+    handleResizeRelease: function handleResizeRelease(dragEvent) {
+      this.$emit('resizerelease', {
+        dragEvent: dragEvent,
+        target: {
+          props: __assign({}, this.$props),
+          element: this.element
+        }
+      });
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var SchedulerItem = SchedulerItemVue2;
+export { SchedulerItem, SchedulerItemVue2 };