@progress/kendo-vue-scheduler 3.2.5 → 3.2.7-dev.202205021145

package/dist/es/items/SchedulerItem.js

@@ -20,7 +20,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var inject = allVue.inject;
 import { COLLECTION_ACTION } from '../utils';
-import { getDefaultSlots } from '@progress/kendo-vue-common';
+import { Draggable, getDefaultSlots } from '@progress/kendo-vue-common';
 import { provideIntlService, provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, deleteTitle } from '../messages';
 import { useEditable } from '../hooks';
@@ -189,6 +189,11 @@ var SchedulerItemVue2 = {
       item: this
     });
   },
+  mounted: function mounted() {
+    if (!this.element) {
+      this.element = this.$refs.draggable && this.$refs.draggable.element;
+    }
+  },
   destroyed: !!gh ? undefined : function () {
     this.setItems({
       type: COLLECTION_ACTION.remove,
@@ -211,152 +216,330 @@ var SchedulerItemVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
-    var h = gh || createElement;
-    var defaultSlot = getDefaultSlots(this); //   const { item, element } =  useSchedulerItem(this.$props, this.$el);
+    var _this = this;
 
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
     var editable = useEditable(this.$props.editable);
     this.intl = provideIntlService(this);
     var localization = provideLocalizationService(this);
-    var deleteMessage = localization.toLanguageString(deleteTitle, messages[deleteTitle]); // Handlers
-    // Effects
-    // // Drag Effects
-    // useDraggable(element, {
-    //     onPress: this.handlePress,
-    //     onDrag: this.handleDrag,
-    //     onRelease: this.handleRelease
-    // });
-    // // Resize Effects
-    // useDraggable(this.resizeEast, {
-    //     onPress: this.handleResizePress,
-    //     onDrag: this.handleResizeEndDrag,
-    //     onRelease: this.handleResizeRelease
-    // });
-    // useDraggable(this.resizeWest, {
-    //     onPress: this.handleResizePress,
-    //     onDrag: this.handleResizeStartDrag,
-    //     onRelease: this.handleResizeRelease
-    // });
-    // useDraggable(this.resizeNorth, {
-    //     onPress: this.handleResizePress,
-    //     onDrag: this.handleResizeStartDrag,
-    //     onRelease: this.handleResizeRelease
-    // });
-    // useDraggable(this.resizeSouth, {
-    //     onPress: this.handleResizePress,
-    //     onDrag: this.handleResizeEndDrag,
-    //     onRelease: this.handleResizeRelease
-    // });
-
-    return (//   <Draggable
-      //   onPress={this.handlePress}
-      //   onDrag={this.handleDrag}
-      //   onRelease={this.handleRelease}
-      //   ref={'draggable'}
-      //   >
-      // @ts-ignore  function children
-      h("div", {
-        id: this.$props.id,
-        attrs: this.v3 ? undefined : {
-          id: this.$props.id,
-          tabIndex: this.currentTabIndex,
-          // Aria
-          "aria-label": this.eventLabel,
-          "aria-selected": this.$props.selected // Focus
+    var deleteMessage = localization.toLanguageString(deleteTitle, messages[deleteTitle]);
+    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: _this.$props.id,
+          attrs: _this.v3 ? undefined : {
+            id: _this.$props.id,
+            tabIndex: _this.currentTabIndex,
+            // Aria
+            "aria-label": _this.eventLabel,
+            "aria-selected": _this.$props.selected // Focus
+            ,
+            "data-group-index": _this.$props.group.index,
+            "data-range-index": _this.$props.range.index
+          },
+          style: _this.computedStyle,
+          tabIndex: _this.currentTabIndex,
+          "class": _this.itemClassName,
+          "aria-label": _this.eventLabel,
+          "aria-selected": _this.$props.selected,
+          onFocusin: _this.handleFocus,
+          on: _this.v3 ? undefined : {
+            "focusin": _this.handleFocus,
+            "blur": _this.handleBlur,
+            "mouseup": _this.handleMouseUp,
+            "mousedown": _this.handleMouseDown,
+            "click": _this.handleClick,
+            "mouseover": _this.handleMouseOver,
+            "mouseout": _this.handleMouseOut,
+            "mouseenter": _this.handleMouseEnter,
+            "mouseleave": _this.handleMouseLeave,
+            "dblclick": _this.handleDoubleClick,
+            "keydown": _this.handleKeyDown,
+            "keypress": _this.handleKeyPress,
+            "keyup": _this.handleKeyUp
+          },
+          onBlur: _this.handleBlur // Mouse
+          ,
+          onMouseup: _this.handleMouseUp,
+          onMousedown: _this.handleMouseDown,
+          onClick: _this.handleClick,
+          onMouseover: _this.handleMouseOver,
+          onMouseout: _this.handleMouseOut,
+          onMouseenter: _this.handleMouseEnter,
+          onMouseleave: _this.handleMouseLeave,
+          onDblclick: _this.handleDoubleClick // Keyboard
           ,
-          "data-group-index": this.$props.group.index,
-          "data-range-index": this.$props.range.index
+          onKeydown: _this.handleKeyDown,
+          onKeypress: _this.handleKeyPress,
+          onKeyup: _this.handleKeyUp,
+          "data-group-index": _this.$props.group.index,
+          "data-range-index": _this.$props.range.index
+        }, [!_this.$props.resizeHint && h("span", {
+          "class": "k-event-actions"
+        }, [_this.$props.tail && h("span", {
+          "class": "k-icon k-i-arrow-60-left"
+        }), _this.$props.isRecurring && !_this.$props.isException && h("span", {
+          "class": "k-icon k-i-reload"
+        }), !_this.$props.isRecurring && _this.$props.isException && h("span", {
+          "class": "k-icon k-i-non-recurrence"
+        })]), _this.formItem && !_this.showOccurrenceDialog && editable.edit && h(SchedulerForm, {
+          dataItem: _this.formItem,
+          attrs: _this.v3 ? undefined : {
+            dataItem: _this.formItem
+          },
+          onSubmit: _this.ksFormSubmit,
+          on: _this.v3 ? undefined : {
+            "submit": _this.ksFormSubmit,
+            "close": _this.ksCancel,
+            "cancel": _this.ksCancel
+          },
+          onClose: _this.ksCancel,
+          onCancel: _this.ksCancel
+        }), _this.showOccurrenceDialog && h(SchedulerOccurrenceDialog, {
+          dataItem: _this.formItem || _this.dragItem || _this.resizeItem || _this.removeItem,
+          attrs: _this.v3 ? undefined : {
+            dataItem: _this.formItem || _this.dragItem || _this.resizeItem || _this.removeItem,
+            isRemove: !!_this.removeItem
+          },
+          isRemove: !!_this.removeItem,
+          onClose: _this.ksCancel,
+          on: _this.v3 ? undefined : {
+            "close": _this.ksCancel,
+            "occurrenceclose": _this.ksOccurrenceClick,
+            "seriesclose": _this.ksSeriesClick
+          },
+          onOccurrenceclose: _this.ksOccurrenceClick,
+          onSeriesclose: _this.ksSeriesClick
+        }), _this.showRemoveDialog && _this.removeItem && editable.remove && h(SchedulerRemoveDialog, {
+          dataItem: _this.removeItem,
+          attrs: _this.v3 ? undefined : {
+            dataItem: _this.removeItem
+          },
+          onClose: _this.ksCancel,
+          on: _this.v3 ? undefined : {
+            "close": _this.ksCancel,
+            "cancel": _this.ksCancel,
+            "confirm": _this.ksRemoveConfirm
+          },
+          onCancel: _this.ksCancel,
+          onConfirm: _this.ksRemoveConfirm
+        }), defaultSlot, !_this.$props.resizeHint && h("span", {
+          "class": "k-event-actions"
+        }, [editable.remove && h("a", {
+          tabIndex: -1,
+          attrs: _this.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: _this.handleRemoveClick,
+          on: _this.v3 ? undefined : {
+            "click": _this.handleRemoveClick
+          }
+        }, [h("span", {
+          "class": "k-icon k-i-close"
+        })]), _this.$props.head && h("span", {
+          "class": "k-icon k-i-arrow-60-right"
+        })]), editable.resize && _this.$props.vertical && [// @ts-ignore  function children
+        h(Draggable, {
+          onPress: _this.handleResizePress,
+          on: _this.v3 ? undefined : {
+            "press": _this.handleResizePress,
+            "drag": _this.handleResizeStartDrag,
+            "release": _this.handleResizeRelease
+          },
+          onDrag: _this.handleResizeStartDrag,
+          onRelease: _this.handleResizeRelease
+        }, _this.v3 ? function () {
+          return [h("span", {
+            "class": "k-resize-handle k-resize-n",
+            ref: _this.resizeNorth
+          })];
+        } : [h("span", {
+          "class": "k-resize-handle k-resize-n",
+          ref: _this.resizeNorth
+        })]), // @ts-ignore  function children
+        h(Draggable, {
+          onPress: _this.handleResizePress,
+          on: _this.v3 ? undefined : {
+            "press": _this.handleResizePress,
+            "drag": _this.handleResizeEndDrag,
+            "release": _this.handleResizeRelease
+          },
+          onDrag: _this.handleResizeEndDrag,
+          onRelease: _this.handleResizeRelease
+        }, _this.v3 ? function () {
+          return [h("span", {
+            "class": "k-resize-handle k-resize-s",
+            ref: _this.resizeSouth
+          })];
+        } : [h("span", {
+          "class": "k-resize-handle k-resize-s",
+          ref: _this.resizeSouth
+        })])], editable.resize && !_this.$props.vertical && [// @ts-ignore  function children
+        h(Draggable, {
+          onPress: _this.handleResizePress,
+          on: _this.v3 ? undefined : {
+            "press": _this.handleResizePress,
+            "drag": _this.handleResizeStartDrag,
+            "release": _this.handleResizeRelease
+          },
+          onDrag: _this.handleResizeStartDrag,
+          onRelease: _this.handleResizeRelease
+        }, _this.v3 ? function () {
+          return [h("span", {
+            "class": "k-resize-handle k-resize-w",
+            ref: _this.resizeWest
+          })];
+        } : [h("span", {
+          "class": "k-resize-handle k-resize-w",
+          ref: _this.resizeWest
+        })]), // @ts-ignore  function children
+        h(Draggable, {
+          onPress: _this.handleResizePress,
+          on: _this.v3 ? undefined : {
+            "press": _this.handleResizePress,
+            "drag": _this.handleResizeEndDrag,
+            "release": _this.handleResizeRelease
+          },
+          onDrag: _this.handleResizeEndDrag,
+          onRelease: _this.handleResizeRelease
+        }, _this.v3 ? function () {
+          return [h("span", {
+            "class": "k-resize-handle k-resize-e",
+            ref: _this.resizeEast
+          })];
+        } : [h("span", {
+          "class": "k-resize-handle k-resize-e",
+          ref: _this.resizeEast
+        })])], _this.$props.resizeHint && [h("div", {
+          "class": "k-marquee-color",
+          style: {
+            borderColor: _this.color,
+            backgroundColor: _this.color
+          }
+        }), h("div", {
+          "class": "k-marquee-text"
+        }, [!_this.$props.tail && h("div", {
+          "class": "k-label-top"
+        }, [_this.intl.formatDate(_this.$props.zonedStart, _this.$props.format)]), !_this.$props.head && h("div", {
+          "class": "k-label-bottom"
+        }, [_this.intl.formatDate(_this.$props.zonedEnd, _this.$props.format)])])]])];
+      } : [h("div", {
+        id: _this.$props.id,
+        attrs: _this.v3 ? undefined : {
+          id: _this.$props.id,
+          tabIndex: _this.currentTabIndex,
+          "aria-label": _this.eventLabel,
+          "aria-selected": _this.$props.selected,
+          "data-group-index": _this.$props.group.index,
+          "data-range-index": _this.$props.range.index
         },
-        style: this.computedStyle,
-        tabIndex: this.currentTabIndex,
-        "class": this.itemClassName,
-        "aria-label": this.eventLabel,
-        "aria-selected": this.$props.selected,
-        onFocus: this.handleFocus,
-        on: this.v3 ? undefined : {
-          "focus": this.handleFocus,
-          "blur": this.handleBlur,
-          "mouseup": this.handleMouseUp,
-          "mousedown": this.handleMouseDown,
-          "click": this.handleClick,
-          "mouseover": this.handleMouseOver,
-          "mouseout": this.handleMouseOut,
-          "mouseenter": this.handleMouseEnter,
-          "mouseleave": this.handleMouseLeave,
-          "dblclick": this.handleDoubleClick,
-          "keydown": this.handleKeyDown,
-          "keypress": this.handleKeyPress,
-          "keyup": this.handleKeyUp
+        style: _this.computedStyle,
+        tabIndex: _this.currentTabIndex,
+        "class": _this.itemClassName,
+        "aria-label": _this.eventLabel,
+        "aria-selected": _this.$props.selected,
+        onFocusin: _this.handleFocus,
+        on: _this.v3 ? undefined : {
+          "focusin": _this.handleFocus,
+          "blur": _this.handleBlur,
+          "mouseup": _this.handleMouseUp,
+          "mousedown": _this.handleMouseDown,
+          "click": _this.handleClick,
+          "mouseover": _this.handleMouseOver,
+          "mouseout": _this.handleMouseOut,
+          "mouseenter": _this.handleMouseEnter,
+          "mouseleave": _this.handleMouseLeave,
+          "dblclick": _this.handleDoubleClick,
+          "keydown": _this.handleKeyDown,
+          "keypress": _this.handleKeyPress,
+          "keyup": _this.handleKeyUp
         },
-        onBlur: this.handleBlur // Mouse
-        ,
-        onMouseup: this.handleMouseUp,
-        onMousedown: this.handleMouseDown,
-        onClick: this.handleClick,
-        onMouseover: this.handleMouseOver,
-        onMouseout: this.handleMouseOut,
-        onMouseenter: this.handleMouseEnter,
-        onMouseleave: this.handleMouseLeave,
-        onDblclick: this.handleDoubleClick // Keyboard
-        ,
-        onKeydown: this.handleKeyDown,
-        onKeypress: this.handleKeyPress,
-        onKeyup: this.handleKeyUp,
-        "data-group-index": this.$props.group.index,
-        "data-range-index": this.$props.range.index
-      }, [!this.$props.resizeHint && h("span", {
+        onBlur: _this.handleBlur,
+        onMouseup: _this.handleMouseUp,
+        onMousedown: _this.handleMouseDown,
+        onClick: _this.handleClick,
+        onMouseover: _this.handleMouseOver,
+        onMouseout: _this.handleMouseOut,
+        onMouseenter: _this.handleMouseEnter,
+        onMouseleave: _this.handleMouseLeave,
+        onDblclick: _this.handleDoubleClick,
+        onKeydown: _this.handleKeyDown,
+        onKeypress: _this.handleKeyPress,
+        onKeyup: _this.handleKeyUp,
+        "data-group-index": _this.$props.group.index,
+        "data-range-index": _this.$props.range.index
+      }, [!_this.$props.resizeHint && h("span", {
         "class": "k-event-actions"
-      }, [this.$props.tail && h("span", {
+      }, [_this.$props.tail && h("span", {
         "class": "k-icon k-i-arrow-60-left"
-      }), this.$props.isRecurring && !this.$props.isException && h("span", {
+      }), _this.$props.isRecurring && !_this.$props.isException && h("span", {
         "class": "k-icon k-i-reload"
-      }), !this.$props.isRecurring && this.$props.isException && h("span", {
+      }), !_this.$props.isRecurring && _this.$props.isException && h("span", {
         "class": "k-icon k-i-non-recurrence"
-      })]), this.formItem && !this.showOccurrenceDialog && editable.edit && h(SchedulerForm, {
-        dataItem: this.formItem,
-        attrs: this.v3 ? undefined : {
-          dataItem: this.formItem
+      })]), _this.formItem && !_this.showOccurrenceDialog && editable.edit && h(SchedulerForm, {
+        dataItem: _this.formItem,
+        attrs: _this.v3 ? undefined : {
+          dataItem: _this.formItem
         },
-        onSubmit: this.ksFormSubmit,
-        on: this.v3 ? undefined : {
-          "submit": this.ksFormSubmit,
-          "close": this.ksCancel,
-          "cancel": this.ksCancel
+        onSubmit: _this.ksFormSubmit,
+        on: _this.v3 ? undefined : {
+          "submit": _this.ksFormSubmit,
+          "close": _this.ksCancel,
+          "cancel": _this.ksCancel
         },
-        onClose: this.ksCancel,
-        onCancel: this.ksCancel
-      }), this.showOccurrenceDialog && h(SchedulerOccurrenceDialog, {
-        dataItem: this.formItem || this.dragItem || this.resizeItem || this.removeItem,
-        attrs: this.v3 ? undefined : {
-          dataItem: this.formItem || this.dragItem || this.resizeItem || this.removeItem,
-          isRemove: !!this.removeItem
+        onClose: _this.ksCancel,
+        onCancel: _this.ksCancel
+      }), _this.showOccurrenceDialog && h(SchedulerOccurrenceDialog, {
+        dataItem: _this.formItem || _this.dragItem || _this.resizeItem || _this.removeItem,
+        attrs: _this.v3 ? undefined : {
+          dataItem: _this.formItem || _this.dragItem || _this.resizeItem || _this.removeItem,
+          isRemove: !!_this.removeItem
         },
-        isRemove: !!this.removeItem,
-        onClose: this.ksCancel,
-        on: this.v3 ? undefined : {
-          "close": this.ksCancel,
-          "occurrenceclose": this.ksOccurrenceClick,
-          "seriesclose": this.ksSeriesClick
+        isRemove: !!_this.removeItem,
+        onClose: _this.ksCancel,
+        on: _this.v3 ? undefined : {
+          "close": _this.ksCancel,
+          "occurrenceclose": _this.ksOccurrenceClick,
+          "seriesclose": _this.ksSeriesClick
         },
-        onOccurrenceclose: this.ksOccurrenceClick,
-        onSeriesclose: this.ksSeriesClick
-      }), this.showRemoveDialog && this.removeItem && editable.remove && h(SchedulerRemoveDialog, {
-        dataItem: this.removeItem,
-        attrs: this.v3 ? undefined : {
-          dataItem: this.removeItem
+        onOccurrenceclose: _this.ksOccurrenceClick,
+        onSeriesclose: _this.ksSeriesClick
+      }), _this.showRemoveDialog && _this.removeItem && editable.remove && h(SchedulerRemoveDialog, {
+        dataItem: _this.removeItem,
+        attrs: _this.v3 ? undefined : {
+          dataItem: _this.removeItem
         },
-        onClose: this.ksCancel,
-        on: this.v3 ? undefined : {
-          "close": this.ksCancel,
-          "cancel": this.ksCancel,
-          "confirm": this.ksRemoveConfirm
+        onClose: _this.ksCancel,
+        on: _this.v3 ? undefined : {
+          "close": _this.ksCancel,
+          "cancel": _this.ksCancel,
+          "confirm": _this.ksRemoveConfirm
         },
-        onCancel: this.ksCancel,
-        onConfirm: this.ksRemoveConfirm
-      }), defaultSlot, !this.$props.resizeHint && h("span", {
+        onCancel: _this.ksCancel,
+        onConfirm: _this.ksRemoveConfirm
+      }), defaultSlot, !_this.$props.resizeHint && h("span", {
         "class": "k-event-actions"
       }, [editable.remove && h("a", {
         tabIndex: -1,
-        attrs: this.v3 ? undefined : {
+        attrs: _this.v3 ? undefined : {
           tabIndex: -1,
           "aria-hidden": "true",
           title: deleteMessage,
@@ -366,50 +549,108 @@ var SchedulerItemVue2 = {
         "class": "k-link k-event-delete",
         title: deleteMessage,
         "aria-label": deleteMessage,
-        onClick: this.handleRemoveClick,
-        on: this.v3 ? undefined : {
-          "click": this.handleRemoveClick
+        onClick: _this.handleRemoveClick,
+        on: _this.v3 ? undefined : {
+          "click": _this.handleRemoveClick
         }
       }, [h("span", {
         "class": "k-icon k-i-close"
-      })]), this.$props.head && h("span", {
+      })]), _this.$props.head && h("span", {
         "class": "k-icon k-i-arrow-60-right"
-      })]), editable.resize && this.$props.vertical && [h("span", {
+      })]), editable.resize && _this.$props.vertical && [h(Draggable, {
+        onPress: _this.handleResizePress,
+        on: _this.v3 ? undefined : {
+          "press": _this.handleResizePress,
+          "drag": _this.handleResizeStartDrag,
+          "release": _this.handleResizeRelease
+        },
+        onDrag: _this.handleResizeStartDrag,
+        onRelease: _this.handleResizeRelease
+      }, _this.v3 ? function () {
+        return [h("span", {
+          "class": "k-resize-handle k-resize-n",
+          ref: _this.resizeNorth
+        })];
+      } : [h("span", {
         "class": "k-resize-handle k-resize-n",
-        ref: this.resizeNorth
-      }), h("span", {
+        ref: _this.resizeNorth
+      })]), h(Draggable, {
+        onPress: _this.handleResizePress,
+        on: _this.v3 ? undefined : {
+          "press": _this.handleResizePress,
+          "drag": _this.handleResizeEndDrag,
+          "release": _this.handleResizeRelease
+        },
+        onDrag: _this.handleResizeEndDrag,
+        onRelease: _this.handleResizeRelease
+      }, _this.v3 ? function () {
+        return [h("span", {
+          "class": "k-resize-handle k-resize-s",
+          ref: _this.resizeSouth
+        })];
+      } : [h("span", {
         "class": "k-resize-handle k-resize-s",
-        ref: this.resizeSouth
-      })], editable.resize && !this.$props.vertical && [h("span", {
+        ref: _this.resizeSouth
+      })])], editable.resize && !_this.$props.vertical && [h(Draggable, {
+        onPress: _this.handleResizePress,
+        on: _this.v3 ? undefined : {
+          "press": _this.handleResizePress,
+          "drag": _this.handleResizeStartDrag,
+          "release": _this.handleResizeRelease
+        },
+        onDrag: _this.handleResizeStartDrag,
+        onRelease: _this.handleResizeRelease
+      }, _this.v3 ? function () {
+        return [h("span", {
+          "class": "k-resize-handle k-resize-w",
+          ref: _this.resizeWest
+        })];
+      } : [h("span", {
         "class": "k-resize-handle k-resize-w",
-        ref: this.resizeWest
-      }), h("span", {
+        ref: _this.resizeWest
+      })]), h(Draggable, {
+        onPress: _this.handleResizePress,
+        on: _this.v3 ? undefined : {
+          "press": _this.handleResizePress,
+          "drag": _this.handleResizeEndDrag,
+          "release": _this.handleResizeRelease
+        },
+        onDrag: _this.handleResizeEndDrag,
+        onRelease: _this.handleResizeRelease
+      }, _this.v3 ? function () {
+        return [h("span", {
+          "class": "k-resize-handle k-resize-e",
+          ref: _this.resizeEast
+        })];
+      } : [h("span", {
         "class": "k-resize-handle k-resize-e",
-        ref: this.resizeEast
-      })], this.$props.resizeHint && [h("div", {
+        ref: _this.resizeEast
+      })])], _this.$props.resizeHint && [h("div", {
         "class": "k-marquee-color",
         style: {
-          borderColor: this.color,
-          backgroundColor: this.color
+          borderColor: _this.color,
+          backgroundColor: _this.color
         }
       }), h("div", {
         "class": "k-marquee-text"
-      }, [!this.$props.tail && h("div", {
+      }, [!_this.$props.tail && h("div", {
         "class": "k-label-top"
-      }, [this.intl.formatDate(this.$props.zonedStart, this.$props.format)]), !this.$props.head && h("div", {
+      }, [_this.intl.formatDate(_this.$props.zonedStart, _this.$props.format)]), !_this.$props.head && h("div", {
         "class": "k-label-bottom"
-      }, [this.intl.formatDate(this.$props.zonedEnd, this.$props.format)])])]]) // </Draggable>
-
+      }, [_this.intl.formatDate(_this.$props.zonedEnd, _this.$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.$el
+          element: this.element
         }
       });
     },
@@ -418,7 +659,7 @@ var SchedulerItemVue2 = {
         event: event,
         target: {
           props: __assign({}, this.$props),
-          element: this.$el
+          element: this.element
         }
       });
     },
@@ -428,7 +669,7 @@ var SchedulerItemVue2 = {
         event: event,
         target: {
           props: __assign({}, this.$props),
-          element: this.$el
+          element: this.element
         }
       });
     },
@@ -437,7 +678,7 @@ var SchedulerItemVue2 = {
         event: event,
         target: {
           props: __assign({}, this.$props),
-          element: this.$el
+          element: this.element
         }
       };
       this.$emit('click', args);
@@ -448,7 +689,7 @@ var SchedulerItemVue2 = {
         event: event,
         target: {
           props: __assign({}, this.$props),
-          element: this.$el
+          element: this.element
         }
       });
     },
@@ -457,7 +698,7 @@ var SchedulerItemVue2 = {
         event: event,
         target: {
           props: __assign({}, this.$props),
-          element: this.$el
+          element: this.element
         }
       });
     },
@@ -466,7 +707,7 @@ var SchedulerItemVue2 = {
         event: event,
         target: {
           props: __assign({}, this.$props),
-          element: this.$el
+          element: this.element
         }
       });
     },
@@ -475,7 +716,7 @@ var SchedulerItemVue2 = {
         event: event,
         target: {
           props: __assign({}, this.$props),
-          element: this.$el
+          element: this.element
         }
       });
     },
@@ -484,7 +725,7 @@ var SchedulerItemVue2 = {
         event: event,
         target: {
           props: __assign({}, this.$props),
-          element: this.$el
+          element: this.element
         }
       });
     },
@@ -493,7 +734,7 @@ var SchedulerItemVue2 = {
         event: event,
         target: {
           props: __assign({}, this.$props),
-          element: this.$el
+          element: this.element
         }
       };
       this.$emit('doubleclick', args);
@@ -504,7 +745,7 @@ var SchedulerItemVue2 = {
         event: event,
         target: {
           props: __assign({}, this.$props),
-          element: this.$el
+          element: this.element
         }
       });
     },
@@ -514,7 +755,7 @@ var SchedulerItemVue2 = {
         event: event,
         target: {
           props: __assign({}, this.$props),
-          element: this.$el
+          element: this.element
         }
       });
     },
@@ -523,7 +764,7 @@ var SchedulerItemVue2 = {
         event: event,
         target: {
           props: __assign({}, this.$props),
-          element: this.$el
+          element: this.element
         }
       });
     },
@@ -532,7 +773,7 @@ var SchedulerItemVue2 = {
         event: event,
         target: {
           props: __assign({}, this.$props),
-          element: this.$el
+          element: this.element
         }
       });
     },
@@ -542,7 +783,7 @@ var SchedulerItemVue2 = {
         dragEvent: dragEvent,
         target: {
           props: __assign({}, this.$props),
-          element: this.$el
+          element: this.element
         }
       });
     },
@@ -551,7 +792,7 @@ var SchedulerItemVue2 = {
         dragEvent: dragEvent,
         target: {
           props: __assign({}, this.$props),
-          element: this.$el
+          element: this.element
         }
       });
     },
@@ -560,7 +801,7 @@ var SchedulerItemVue2 = {
         dragEvent: dragEvent,
         target: {
           props: __assign({}, this.$props),
-          element: this.$el
+          element: this.element
         }
       });
     },
@@ -569,7 +810,7 @@ var SchedulerItemVue2 = {
         dragEvent: dragEvent,
         target: {
           props: __assign({}, this.$props),
-          element: this.$el
+          element: this.element
         }
       });
     },
@@ -578,7 +819,7 @@ var SchedulerItemVue2 = {
         dragEvent: dragEvent,
         target: {
           props: __assign({}, this.$props),
-          element: this.$e
+          element: this.element
         }
       });
     },
@@ -587,7 +828,7 @@ var SchedulerItemVue2 = {
         dragEvent: dragEvent,
         target: {
           props: __assign({}, this.$props),
-          element: this.$el
+          element: this.element
         }
       });
     },
@@ -596,7 +837,7 @@ var SchedulerItemVue2 = {
         dragEvent: dragEvent,
         target: {
           props: __assign({}, this.$props),
-          element: this.$e
+          element: this.element
         }
       });
     }