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

package/dist/esm/views/time/MultiDayTimelineView.js

@@ -0,0 +1,859 @@
+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);
+};
+
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+}; // @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 { BaseView } from '../../components/BaseView.js';
+import { useCellSync, useRowSync } from '../../hooks.js';
+import { Day, MS_PER_DAY, MS_PER_MINUTE, getDate, ZonedDate, addDays } from '@progress/kendo-date-math';
+import { HorizontalResourceIterator } from '../common/HorizontalResourceIterator.js';
+import { TimelineViewRowContent } from './TimelineViewRowContent.js';
+import { TimelineViewAllEventsRowContent } from './TimelineViewAllEventsRowContent.js';
+import { VerticalResourceIterator } from '../common/VerticalResourceIterator.js';
+import { mapItemsToSlots, mapSlotsToItems, isInTimeRange, toUTCDateTime, orderSort } from '../../utils.js';
+import { toRanges } from '../../services/rangeService.js';
+import { toSlots } from '../../services/slotsService.js';
+import { toOccurrences } from '../../services/occurrenceService.js';
+import { toItems } from '../../services/itemsService.js';
+import { TimelineViewBody } from './TimelineViewBody.js';
+import { BORDER_WIDTH } from '../../constants.js';
+import { provideIntlService } from '@progress/kendo-vue-intl';
+import { SchedulerEditItem } from '../../items/SchedulerEditItem.js';
+import { SchedulerResize } from '../common/SchedulerResize.js';
+import { SchedulerDrag } from '../../views/common/SchedulerDrag.js';
+import { DateHeaderCell } from '../../components/DateHeaderCell.js';
+import { TimeHeaderCell } from '../../components/TimeHeaderCell.js';
+var TIME_FORMAT = 't';
+var FIRST_INDEX = 0;
+/** @hidden */
+
+var MultiDayTimelineViewVue2 = {
+  name: 'KendoMultiDayTimelineView',
+  props: {
+    name: {
+      type: String,
+      default: 'multi-day-timeline'
+    },
+    title: {
+      type: String,
+      default: 'Multi Day Timeline'
+    },
+    currentTimeMarker: {
+      type: Boolean,
+      default: true
+    },
+    dragItem: {
+      type: Object,
+      default: function _default() {
+        return undefined;
+      }
+    },
+    resizeItem: {
+      type: Object,
+      default: function _default() {
+        return undefined;
+      }
+    },
+    showWorkHours: {
+      type: Boolean,
+      default: true
+    },
+    dateRange: {
+      type: [Function, Object],
+      default: function _default() {
+        return multiDayTimelineDateRange;
+      }
+    },
+    selectedDateFormat: {
+      type: String,
+      default: '{0:D} - {1:D}'
+    },
+    selectedShortDateFormat: {
+      type: String,
+      default: '{0:d} - {1:d}'
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    numberOfDays: {
+      type: Number,
+      default: 1
+    },
+    startTime: {
+      type: String,
+      default: '00:00'
+    },
+    endTime: {
+      type: String,
+      default: '00:00'
+    },
+    workDayStart: {
+      type: String,
+      default: '8:00'
+    },
+    workDayEnd: {
+      type: String,
+      default: '17:00'
+    },
+    workWeekStart: {
+      type: Number,
+      default: Day.Monday
+    },
+    workWeekEnd: {
+      type: Number,
+      default: Day.Friday
+    },
+    slotDivisions: {
+      type: Number,
+      default: 2
+    },
+    slotDuration: {
+      type: Number,
+      default: 60
+    },
+    defaultShowWorkHours: {
+      type: Boolean,
+      default: true
+    },
+    columnWidth: {
+      type: Number,
+      default: 100
+    },
+    dateHeaderCell: [String, Function, Object],
+    timeHeaderCell: [String, Function, Object],
+    slotRender: [String, Function, Object],
+    viewSlot: [String, Function, Object],
+    resizeHint: [String, Function, Object],
+    item: [String, Function, Object],
+    viewItem: [String, Function, Object],
+    editable: {
+      type: [Boolean, Object],
+      default: false
+    }
+  },
+  data: function data() {
+    return {
+      currentDragItem: undefined,
+      currentResizeItem: undefined
+    };
+  },
+  inject: {
+    ks: {
+      default: null
+    },
+    kendoIntlService: {
+      default: null
+    }
+  },
+  computed: {
+    viewStart: function viewStart() {
+      this.intl = provideIntlService(this);
+      var workDayStart = this.intl.parseDate(this.$props.workDayStart);
+      var startTime = this.intl.parseDate(this.$props.startTime);
+      return this.showWorkHours ? workDayStart : startTime;
+    },
+    viewEnd: function viewEnd() {
+      this.intl = provideIntlService(this);
+      var workDayEnd = this.intl.parseDate(this.$props.workDayEnd);
+      var endTime = this.intl.parseDate(this.$props.endTime);
+      return this.showWorkHours ? workDayEnd : endTime;
+    },
+    ranges: function ranges() {
+      return toRanges(this.ks.dateRange, {
+        step: MS_PER_DAY,
+        timezone: this.ks.timezone
+      });
+    },
+    timelineSlots: function timelineSlots() {
+      var _this = this;
+
+      var timelineSlots = toSlots(this.ks.dateRange, {
+        step: this.slotDuration / this.slotDivisions * MS_PER_MINUTE
+      }, {
+        groups: this.ks.groups,
+        ranges: this.ranges
+      }).filter(function (slot) {
+        return isInTimeRange(slot.zonedStart, _this.viewStart, _this.viewEnd) || _this.viewStart.getTime() === _this.viewEnd.getTime();
+      });
+      return timelineSlots;
+    },
+    occurrences: function occurrences() {
+      return toOccurrences(this.ks.dataItems, {
+        dateRange: this.ks.dateRange,
+        fields: this.ks.fields,
+        timezone: this.ks.timezone
+      });
+    },
+    items: function items() {
+      var _this = this;
+
+      var items = toItems(this.occurrences, {
+        timezone: this.ks.timezone
+      }, {
+        groups: this.ks.groups,
+        ranges: this.ranges
+      }).filter(function (item) {
+        return _this.viewStart.getTime() === _this.viewEnd.getTime() || isInTimeRange(item.zonedStart, _this.viewStart, _this.viewEnd) || isInTimeRange(item.zonedEnd, _this.viewStart, _this.viewEnd) || isInTimeRange(new Date(item.zonedEnd.getTime() - (item.zonedEnd.getTime() - item.zonedStart.getTime()) / 2), _this.viewStart, _this.viewEnd);
+      });
+      mapItemsToSlots(items, this.timelineSlots, true);
+      mapSlotsToItems(items, this.timelineSlots, true);
+      return items;
+    },
+    compDragItem: function compDragItem() {
+      return this.dragItem !== undefined ? this.dragItem : this.currentDragItem;
+    },
+    compResizeItem: function compResizeItem() {
+      return this.resizeItem !== undefined ? this.resizeItem : this.currentResizeItem;
+    }
+  },
+  mounted: function mounted() {
+    this.timeRef = null;
+    this.bodyRef = null;
+    useCellSync({
+      element: this.$el,
+      selector: '.k-resource-cell',
+      attribute: 'data-depth-index',
+      explicitDepth: true
+    });
+    useRowSync({
+      element: this.$el,
+      selector: '.k-resource-row',
+      horizontalAttribute: 'data-depth-index',
+      verticalAttribute: 'data-resource-index',
+      applyTo: '.k-resource-cell'
+    });
+  },
+  updated: function updated() {
+    useCellSync({
+      element: this.$el,
+      selector: '.k-resource-cell',
+      attribute: 'data-depth-index',
+      explicitDepth: true
+    });
+    useRowSync({
+      element: this.$el,
+      selector: '.k-resource-row',
+      horizontalAttribute: 'data-depth-index',
+      verticalAttribute: 'data-resource-index',
+      applyTo: '.k-resource-cell'
+    });
+  },
+  // @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 intl = provideIntlService(this);
+    var showWorkHours = this.$props.showWorkHours;
+    var slotDivisions = this.$props.slotDivisions;
+    var slotDuration = this.$props.slotDuration;
+    var workDayStart = intl.parseDate(this.$props.workDayStart);
+    var workDayEnd = intl.parseDate(this.$props.workDayEnd);
+
+    var items = __spreadArray([], this.items, true);
+
+    var timelineSlots = __spreadArray([], this.timelineSlots, true);
+
+    var width = (this.ks.orientation === 'horizontal' ? timelineSlots.length : timelineSlots.length / this.ks.groups.length) * (this.$props.columnWidth + BORDER_WIDTH);
+
+    var dragItemClue = function dragItemClue(vertical) {
+      return this.compDragItem && this.$props.editable.drag && (Array.isArray(this.compDragItem) ? this.compDragItem.map(function (di, idx) {
+        return h(SchedulerDrag, {
+          key: idx,
+          ignoreIsAllDay: true,
+          attrs: this.v3 ? undefined : {
+            ignoreIsAllDay: true,
+            dataItem: di,
+            vertical: vertical,
+            item: this.$props.dataItem
+          },
+          dataItem: di,
+          vertical: vertical,
+          item: this.$props.dataItem
+        });
+      }, this) : h(SchedulerDrag, {
+        ignoreIsAllDay: true,
+        attrs: this.v3 ? undefined : {
+          ignoreIsAllDay: true,
+          dataItem: this.compDragItem,
+          vertical: vertical,
+          item: this.$props.dataItem
+        },
+        dataItem: this.compDragItem,
+        vertical: vertical,
+        item: this.$props.dataItem
+      }));
+    };
+
+    var resizeItemClue = function resizeItemClue(vertical) {
+      return this.compResizeItem && this.editable.resize && (Array.isArray(this.compResizeItem) ? this.compResizeItem.map(function (ri, idx) {
+        return h(SchedulerResize, {
+          key: idx,
+          format: this.$props.format,
+          attrs: this.v3 ? undefined : {
+            format: this.$props.format,
+            ignoreIsAllDay: true,
+            dataItem: ri,
+            viewItem: this.$props.viewItem,
+            item: this.$props.item,
+            vertical: vertical
+          },
+          ignoreIsAllDay: true,
+          dataItem: ri,
+          viewItem: this.$props.viewItem,
+          item: this.$props.item,
+          vertical: vertical
+        });
+      }, this) : h(SchedulerResize, {
+        format: this.$props.format,
+        attrs: this.v3 ? undefined : {
+          format: this.$props.format,
+          ignoreIsAllDay: true,
+          dataItem: this.compResizeItem,
+          viewItem: this.$props.viewItem,
+          item: this.$props.item,
+          vertical: vertical
+        },
+        ignoreIsAllDay: true,
+        dataItem: this.compResizeItem,
+        viewItem: this.$props.viewItem,
+        item: this.$props.item,
+        vertical: vertical
+      }));
+    };
+
+    var head = [h("div", {
+      "class": "k-scheduler-row"
+    }, [this.ranges.map(function (range, rangeIndex) {
+      return h(DateHeaderCell, {
+        as: this.$props.dateHeaderCell,
+        attrs: this.v3 ? undefined : {
+          as: this.$props.dateHeaderCell,
+          date: range.zonedStart,
+          start: range.start,
+          end: range.end,
+          format: 'm'
+        },
+        key: rangeIndex,
+        date: range.zonedStart,
+        start: range.start,
+        end: range.end,
+        format: 'm'
+      });
+    }, this)]), h("div", {
+      "class": "k-scheduler-row",
+      ref: 'timeRef'
+    }, [this.ranges.map(function (_, rangeIndex) {
+      return timelineSlots.filter(function (s) {
+        return s.group.index === FIRST_INDEX && s.range.index === rangeIndex;
+      }).map(function (slot) {
+        return slot.zonedStart.getMinutes() % slotDuration === 0 ? h(TimeHeaderCell, {
+          key: slot.index,
+          as: this.$props.timeHeaderCell,
+          attrs: this.v3 ? undefined : {
+            as: this.$props.timeHeaderCell,
+            format: TIME_FORMAT,
+            date: slot.zonedStart,
+            start: slot.zonedStart,
+            end: slot.zonedEnd
+          },
+          format: TIME_FORMAT,
+          date: slot.zonedStart,
+          start: slot.zonedStart,
+          end: slot.zonedEnd
+        }) : null;
+      }, this);
+    }, this)])];
+    return (// @ts-ignore  function children
+      h(BaseView, {
+        id: this.$props.id,
+        attrs: this.v3 ? undefined : {
+          id: this.$props.id,
+          viewProps: __assign({}, this.$props),
+          baseSlots: timelineSlots,
+          ranges: this.ranges
+        },
+        "class": 'k-scheduler-timeline-view',
+        viewProps: __assign({}, this.$props),
+        baseSlots: timelineSlots,
+        ranges: this.ranges
+      }, this.v3 ? function () {
+        return [h("div", {
+          "class": 'k-scheduler-head',
+          style: {
+            width: width + 'px'
+          }
+        }, [_this2.ks.orientation === 'horizontal' ? // @ts-ignore  function children
+        h(HorizontalResourceIterator, {
+          nested: true,
+          attrs: _this2.v3 ? undefined : {
+            nested: true,
+            group: _this2.ks.props.group,
+            resources: _this2.ks.props.resources,
+            rowContent: TimelineViewRowContent
+          },
+          group: _this2.ks.props.group,
+          resources: _this2.ks.props.resources,
+          rowContent: TimelineViewRowContent
+        }, _this2.v3 ? function () {
+          return [head];
+        } : [head]) : // @ts-ignore  function children
+        h(VerticalResourceIterator, {
+          wrapGroup: true,
+          attrs: _this2.v3 ? undefined : {
+            wrapGroup: true,
+            group: _this2.ks.props.group,
+            resources: _this2.ks.props.resources
+          },
+          group: _this2.ks.props.group,
+          resources: _this2.ks.props.resources
+        }, _this2.v3 ? function () {
+          return [head];
+        } : [head])]), h("div", {
+          "class": "k-scheduler-body",
+          style: {
+            width: width + 'px'
+          },
+          ref: 'bodyRef'
+        }, [_this2.ks.orientation === 'horizontal' ? // @ts-ignore  function children
+        h(HorizontalResourceIterator, {
+          group: _this2.ks.props.group,
+          attrs: _this2.v3 ? undefined : {
+            group: _this2.ks.props.group,
+            resources: _this2.ks.props.resources,
+            rowContent: TimelineViewAllEventsRowContent
+          },
+          resources: _this2.ks.props.resources,
+          rowContent: TimelineViewAllEventsRowContent
+        }, _this2.v3 ? function () {
+          return [// @ts-ignore  function children
+          h(TimelineViewBody, {
+            editable: _this2.$props.editable,
+            attrs: _this2.v3 ? undefined : {
+              editable: _this2.$props.editable,
+              slotRender: _this2.$props.slotRender,
+              viewSlot: _this2.$props.viewSlot,
+              ranges: _this2.ranges,
+              workDayStart: workDayStart,
+              workDayEnd: workDayEnd,
+              timelineSlots: timelineSlots
+            },
+            slotRender: _this2.$props.slotRender,
+            viewSlot: _this2.$props.viewSlot,
+            ranges: _this2.ranges,
+            workDayStart: workDayStart,
+            workDayEnd: workDayEnd,
+            timelineSlots: timelineSlots,
+            onDataaction: _this2.handleDataAction,
+            on: _this2.v3 ? undefined : {
+              "dataaction": _this2.handleDataAction
+            }
+          })];
+        } : [h(TimelineViewBody, {
+          editable: _this2.$props.editable,
+          attrs: _this2.v3 ? undefined : {
+            editable: _this2.$props.editable,
+            slotRender: _this2.$props.slotRender,
+            viewSlot: _this2.$props.viewSlot,
+            ranges: _this2.ranges,
+            workDayStart: workDayStart,
+            workDayEnd: workDayEnd,
+            timelineSlots: timelineSlots
+          },
+          slotRender: _this2.$props.slotRender,
+          viewSlot: _this2.$props.viewSlot,
+          ranges: _this2.ranges,
+          workDayStart: workDayStart,
+          workDayEnd: workDayEnd,
+          timelineSlots: timelineSlots,
+          onDataaction: _this2.handleDataAction,
+          on: _this2.v3 ? undefined : {
+            "dataaction": _this2.handleDataAction
+          }
+        })]) : // @ts-ignore  function children
+        h(VerticalResourceIterator, {
+          nested: true,
+          attrs: _this2.v3 ? undefined : {
+            nested: true,
+            wrapGroup: true,
+            group: _this2.ks.props.group,
+            resources: _this2.ks.props.resources,
+            more: {
+              ranges: _this2.ranges,
+              workDayStart: workDayStart,
+              workDayEnd: workDayEnd,
+              timelineSlots: timelineSlots,
+              slotRender: _this2.$props.slotRender,
+              viewSlot: _this2.$props.viewSlot,
+              currentTimeMarker: _this2.$props.currentTimeMarker
+            }
+          },
+          wrapGroup: true,
+          group: _this2.ks.props.group,
+          resources: _this2.ks.props.resources,
+          onDataaction: _this2.handleDataAction,
+          on: _this2.v3 ? undefined : {
+            "dataaction": _this2.handleDataAction
+          },
+          more: {
+            ranges: _this2.ranges,
+            workDayStart: workDayStart,
+            workDayEnd: workDayEnd,
+            timelineSlots: timelineSlots,
+            slotRender: _this2.$props.slotRender,
+            viewSlot: _this2.$props.viewSlot,
+            currentTimeMarker: _this2.$props.currentTimeMarker
+          }
+        }), items.sort(orderSort).map(function (item) {
+          return h(SchedulerEditItem, {
+            key: item.isRecurring ? "".concat(item.uid, ":").concat(item.group.index, ":").concat(item.range.index, ":").concat(item.originalStart) : "".concat(item.uid, ":").concat(item.group.index, ":").concat(item.range.index),
+            uid: item.uid,
+            attrs: this.v3 ? undefined : {
+              uid: item.uid,
+              start: item.start,
+              end: item.end,
+              originalStart: item.originalStart,
+              startTimezone: item.startTimezone,
+              endTimezone: item.endTimezone,
+              isAllDay: item.isAllDay,
+              title: item.title,
+              description: item.description,
+              occurrenceId: item.occurrenceId,
+              recurrenceExceptions: item.recurrenceExceptions,
+              recurrenceRule: item.recurrenceRule,
+              recurrenceId: item.recurrenceId,
+              dataItem: item.dataItem,
+              itemRef: item.itemRef,
+              head: item.head,
+              tail: item.tail,
+              order: item.order,
+              zonedStart: item.zonedStart,
+              zonedEnd: item.zonedEnd,
+              slots: item.slots,
+              group: item.group,
+              range: item.range,
+              isException: item.isException,
+              isRecurring: item.isRecurring,
+              format: 't',
+              form: this.$props.form,
+              item: this.$props.item,
+              viewItem: this.$props.viewItem,
+              editable: this.$props.editable,
+              ignoreIsAllDay: true,
+              vertical: false
+            },
+            start: item.start,
+            end: item.end,
+            originalStart: item.originalStart,
+            startTimezone: item.startTimezone,
+            endTimezone: item.endTimezone,
+            isAllDay: item.isAllDay,
+            title: item.title,
+            description: item.description,
+            occurrenceId: item.occurrenceId,
+            recurrenceExceptions: item.recurrenceExceptions,
+            recurrenceRule: item.recurrenceRule,
+            recurrenceId: item.recurrenceId,
+            dataItem: item.dataItem,
+            itemRef: item.itemRef,
+            head: item.head,
+            tail: item.tail,
+            order: item.order,
+            zonedStart: item.zonedStart,
+            zonedEnd: item.zonedEnd,
+            slots: item.slots,
+            group: item.group,
+            range: item.range,
+            isException: item.isException,
+            isRecurring: item.isRecurring,
+            format: 't',
+            form: this.$props.form,
+            onDragitemchange: this.handleDragItemChange,
+            on: this.v3 ? undefined : {
+              "dragitemchange": this.handleDragItemChange,
+              "resizeitemchange": this.handleResizeItemChange,
+              "dataaction": this.handleDataAction
+            },
+            onResizeitemchange: this.handleResizeItemChange,
+            onDataaction: this.handleDataAction,
+            item: this.$props.item,
+            viewItem: this.$props.viewItem,
+            editable: this.$props.editable,
+            ignoreIsAllDay: true,
+            vertical: false
+          });
+        }, _this2), _this2.compDragItem && dragItemClue.call(_this2, false), _this2.compResizeItem && resizeItemClue.call(_this2, false)])];
+      } : [h("div", {
+        "class": 'k-scheduler-head',
+        style: {
+          width: width + 'px'
+        }
+      }, [_this2.ks.orientation === 'horizontal' ? h(HorizontalResourceIterator, {
+        nested: true,
+        attrs: _this2.v3 ? undefined : {
+          nested: true,
+          group: _this2.ks.props.group,
+          resources: _this2.ks.props.resources,
+          rowContent: TimelineViewRowContent
+        },
+        group: _this2.ks.props.group,
+        resources: _this2.ks.props.resources,
+        rowContent: TimelineViewRowContent
+      }, _this2.v3 ? function () {
+        return [head];
+      } : [head]) : h(VerticalResourceIterator, {
+        wrapGroup: true,
+        attrs: _this2.v3 ? undefined : {
+          wrapGroup: true,
+          group: _this2.ks.props.group,
+          resources: _this2.ks.props.resources
+        },
+        group: _this2.ks.props.group,
+        resources: _this2.ks.props.resources
+      }, _this2.v3 ? function () {
+        return [head];
+      } : [head])]), h("div", {
+        "class": "k-scheduler-body",
+        style: {
+          width: width + 'px'
+        },
+        ref: 'bodyRef'
+      }, [_this2.ks.orientation === 'horizontal' ? h(HorizontalResourceIterator, {
+        group: _this2.ks.props.group,
+        attrs: _this2.v3 ? undefined : {
+          group: _this2.ks.props.group,
+          resources: _this2.ks.props.resources,
+          rowContent: TimelineViewAllEventsRowContent
+        },
+        resources: _this2.ks.props.resources,
+        rowContent: TimelineViewAllEventsRowContent
+      }, _this2.v3 ? function () {
+        return [h(TimelineViewBody, {
+          editable: _this2.$props.editable,
+          attrs: _this2.v3 ? undefined : {
+            editable: _this2.$props.editable,
+            slotRender: _this2.$props.slotRender,
+            viewSlot: _this2.$props.viewSlot,
+            ranges: _this2.ranges,
+            workDayStart: workDayStart,
+            workDayEnd: workDayEnd,
+            timelineSlots: timelineSlots
+          },
+          slotRender: _this2.$props.slotRender,
+          viewSlot: _this2.$props.viewSlot,
+          ranges: _this2.ranges,
+          workDayStart: workDayStart,
+          workDayEnd: workDayEnd,
+          timelineSlots: timelineSlots,
+          onDataaction: _this2.handleDataAction,
+          on: _this2.v3 ? undefined : {
+            "dataaction": _this2.handleDataAction
+          }
+        })];
+      } : [h(TimelineViewBody, {
+        editable: _this2.$props.editable,
+        attrs: _this2.v3 ? undefined : {
+          editable: _this2.$props.editable,
+          slotRender: _this2.$props.slotRender,
+          viewSlot: _this2.$props.viewSlot,
+          ranges: _this2.ranges,
+          workDayStart: workDayStart,
+          workDayEnd: workDayEnd,
+          timelineSlots: timelineSlots
+        },
+        slotRender: _this2.$props.slotRender,
+        viewSlot: _this2.$props.viewSlot,
+        ranges: _this2.ranges,
+        workDayStart: workDayStart,
+        workDayEnd: workDayEnd,
+        timelineSlots: timelineSlots,
+        onDataaction: _this2.handleDataAction,
+        on: _this2.v3 ? undefined : {
+          "dataaction": _this2.handleDataAction
+        }
+      })]) : h(VerticalResourceIterator, {
+        nested: true,
+        attrs: _this2.v3 ? undefined : {
+          nested: true,
+          wrapGroup: true,
+          group: _this2.ks.props.group,
+          resources: _this2.ks.props.resources,
+          more: {
+            ranges: _this2.ranges,
+            workDayStart: workDayStart,
+            workDayEnd: workDayEnd,
+            timelineSlots: timelineSlots,
+            slotRender: _this2.$props.slotRender,
+            viewSlot: _this2.$props.viewSlot,
+            currentTimeMarker: _this2.$props.currentTimeMarker
+          }
+        },
+        wrapGroup: true,
+        group: _this2.ks.props.group,
+        resources: _this2.ks.props.resources,
+        onDataaction: _this2.handleDataAction,
+        on: _this2.v3 ? undefined : {
+          "dataaction": _this2.handleDataAction
+        },
+        more: {
+          ranges: _this2.ranges,
+          workDayStart: workDayStart,
+          workDayEnd: workDayEnd,
+          timelineSlots: timelineSlots,
+          slotRender: _this2.$props.slotRender,
+          viewSlot: _this2.$props.viewSlot,
+          currentTimeMarker: _this2.$props.currentTimeMarker
+        }
+      }), items.sort(orderSort).map(function (item) {
+        return h(SchedulerEditItem, {
+          key: item.isRecurring ? "".concat(item.uid, ":").concat(item.group.index, ":").concat(item.range.index, ":").concat(item.originalStart) : "".concat(item.uid, ":").concat(item.group.index, ":").concat(item.range.index),
+          uid: item.uid,
+          attrs: this.v3 ? undefined : {
+            uid: item.uid,
+            start: item.start,
+            end: item.end,
+            originalStart: item.originalStart,
+            startTimezone: item.startTimezone,
+            endTimezone: item.endTimezone,
+            isAllDay: item.isAllDay,
+            title: item.title,
+            description: item.description,
+            occurrenceId: item.occurrenceId,
+            recurrenceExceptions: item.recurrenceExceptions,
+            recurrenceRule: item.recurrenceRule,
+            recurrenceId: item.recurrenceId,
+            dataItem: item.dataItem,
+            itemRef: item.itemRef,
+            head: item.head,
+            tail: item.tail,
+            order: item.order,
+            zonedStart: item.zonedStart,
+            zonedEnd: item.zonedEnd,
+            slots: item.slots,
+            group: item.group,
+            range: item.range,
+            isException: item.isException,
+            isRecurring: item.isRecurring,
+            format: 't',
+            form: this.$props.form,
+            item: this.$props.item,
+            viewItem: this.$props.viewItem,
+            editable: this.$props.editable,
+            ignoreIsAllDay: true,
+            vertical: false
+          },
+          start: item.start,
+          end: item.end,
+          originalStart: item.originalStart,
+          startTimezone: item.startTimezone,
+          endTimezone: item.endTimezone,
+          isAllDay: item.isAllDay,
+          title: item.title,
+          description: item.description,
+          occurrenceId: item.occurrenceId,
+          recurrenceExceptions: item.recurrenceExceptions,
+          recurrenceRule: item.recurrenceRule,
+          recurrenceId: item.recurrenceId,
+          dataItem: item.dataItem,
+          itemRef: item.itemRef,
+          head: item.head,
+          tail: item.tail,
+          order: item.order,
+          zonedStart: item.zonedStart,
+          zonedEnd: item.zonedEnd,
+          slots: item.slots,
+          group: item.group,
+          range: item.range,
+          isException: item.isException,
+          isRecurring: item.isRecurring,
+          format: 't',
+          form: this.$props.form,
+          onDragitemchange: this.handleDragItemChange,
+          on: this.v3 ? undefined : {
+            "dragitemchange": this.handleDragItemChange,
+            "resizeitemchange": this.handleResizeItemChange,
+            "dataaction": this.handleDataAction
+          },
+          onResizeitemchange: this.handleResizeItemChange,
+          onDataaction: this.handleDataAction,
+          item: this.$props.item,
+          viewItem: this.$props.viewItem,
+          editable: this.$props.editable,
+          ignoreIsAllDay: true,
+          vertical: false
+        });
+      }, _this2), _this2.compDragItem && dragItemClue.call(_this2, false), _this2.compResizeItem && resizeItemClue.call(_this2, false)])])
+    );
+  },
+  methods: {
+    handleDataAction: function handleDataAction(action) {
+      this.$emit('dataaction', action);
+    },
+    handleDragItemChange: function handleDragItemChange(item) {
+      this.currentDragItem = item;
+    },
+    handleResizeItemChange: function handleResizeItemChange(item) {
+      this.currentResizeItem = item;
+    }
+  }
+};
+
+var multiDayTimelineDateRange = function multiDayTimelineDateRange(_a) {
+  var date = _a.date,
+      _b = _a.numberOfDays,
+      numberOfDays = _b === void 0 ? 1 : _b,
+      timezone = _a.timezone;
+  var normalized = ZonedDate.fromLocalDate(date, timezone);
+  var firstDay = getDate(normalized);
+  var lastDay = addDays(firstDay, numberOfDays);
+  var zonedStart = ZonedDate.fromUTCDate(toUTCDateTime(firstDay), timezone);
+  var zonedEnd = ZonedDate.fromUTCDate(toUTCDateTime(lastDay), timezone);
+  var start = new Date(zonedStart.getTime());
+  var end = new Date(zonedEnd.getTime());
+  return {
+    start: start,
+    end: end,
+    zonedStart: zonedStart,
+    zonedEnd: zonedEnd
+  };
+};
+/** @hidden */
+
+
+var MultiDayTimelineView = MultiDayTimelineViewVue2;
+export { MultiDayTimelineView, MultiDayTimelineViewVue2 };