@progress/kendo-vue-scheduler 3.0.8 → 3.0.9-dev.202202280631

package/dist/es/views/day/MultiDayView.js

@@ -0,0 +1,1397 @@
+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 __spreadArrays = this && this.__spreadArrays || function () {
+  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
+    s += arguments[i].length;
+  }
+
+  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
+    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
+      r[k] = a[j];
+    }
+  }
+
+  return r;
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var inject = allVue.inject;
+import { Day, MS_PER_DAY, ZonedDate, getDate, addDays } from '@progress/kendo-date-math';
+import { BaseView } from '../../components/BaseView';
+import { HorizontalResourceIterator } from '../common/HorizontalResourceIterator';
+import { DayViewGroupRowContent } from './DayViewGroupRowContent';
+import { VerticalResourceIterator } from '../common/VerticalResourceIterator';
+import { DayViewAllDayRowContent } from './DayViewAllDayRowContent';
+import { DayViewRowContent } from './DayViewRowContent';
+import { DayViewMiddleRow } from './DayViewMiddleRow';
+import { DayViewHead } from './DayViewHead';
+import { DayViewAllDaySlots } from './DayViewAllDaySlots';
+import { mapItemsToSlots, mapSlotsToItems, isInTimeRange, toUTCDateTime, intersects, first, last } from '../../utils';
+import { provideIntlService } from '@progress/kendo-vue-intl';
+import { MS_PER_MINUTE } from '../../constants';
+import { toRanges, toItems, toSlots, toOccurrences } from '../../services/';
+import { SchedulerEditSlot } from '../../slots/SchedulerEditSlot';
+import { SchedulerEditItem } from '../../items/SchedulerEditItem'; // import {
+//     useSchedulerPropsContext,
+//     useSchedulerDataContext,
+//     useSchedulerGroupsContext,
+//     useSchedulerOrientationContext,
+//     useSchedulerFieldsContext,
+//     useSchedulerDateRangeContext
+// } from '../../context/SchedulerContext';
+
+import { SchedulerResourceIteratorContext } from '../../context/SchedulerResourceIteratorContext';
+import { CurrentTimeMarker } from '../../components/CurrentTimeMarket';
+var FIRST_INDEX = 0;
+export var GRID_OFFSET = 1; // tslint:enable:max-line-length
+
+var MultiDayViewVue2 = {
+  name: 'KendoMultiDayView',
+  props: {
+    name: {
+      type: String,
+      default: 'multi-day'
+    },
+    title: {
+      type: String,
+      default: 'Multi Day'
+    },
+    currentTimeMarker: {
+      type: Boolean,
+      default: true
+    },
+    dateRange: {
+      type: [Function, Object],
+      default: function _default() {
+        return multiDayViewDateRange;
+      }
+    },
+    numberOfDays: {
+      type: Number,
+      default: 1
+    },
+    startTime: {
+      type: String,
+      default: '00:00'
+    },
+    endTime: {
+      type: String,
+      default: '23:59'
+    },
+    workDayStart: {
+      type: String,
+      default: '08:00'
+    },
+    workDayEnd: {
+      type: String,
+      default: '17:00'
+    },
+    workWeekStart: {
+      type: Number,
+      default: Day.Monday
+    },
+    workWeekEnd: {
+      type: Number,
+      default: Day.Friday
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    slotDivisions: {
+      type: Number,
+      default: 2
+    },
+    slotDuration: {
+      type: Number,
+      default: 60
+    },
+    showWorkHours: {
+      type: Boolean,
+      default: true
+    },
+    selectedDateFormat: {
+      type: String,
+      default: '{0:D} - {1:D}'
+    },
+    selectedShortDateFormat: {
+      type: String,
+      default: '{0:d} - {1:d}'
+    },
+    // showCurrentTime: {
+    //   type: Boolean,
+    //   default: true
+    // },
+    defaultShowWorkHours: {
+      type: Boolean,
+      default: true
+    },
+    timeHeaderCell: String
+  },
+  inject: {
+    kendoIntlService: {
+      default: null
+    },
+    ks: {
+      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.ks.showWorkHours !== undefined ? this.ks.showWorkHours : 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.ks.showWorkHours !== undefined ? this.ks.showWorkHours : this.showWorkHours) ? workDayEnd : endTime;
+    },
+    dayRanges: function dayRanges() {
+      return toRanges(this.ks.dateRange, {
+        step: MS_PER_DAY * this.numberOfDays,
+        timezone: this.ks.timezone
+      }).map(function (r) {
+        return __assign(__assign({}, r), {
+          isAllDay: true
+        });
+      });
+    },
+    timeRanges: function timeRanges() {
+      return toRanges(this.ks.dateRange, {
+        step: MS_PER_DAY,
+        timezone: this.ks.timezone
+      }).map(function (r) {
+        return __assign(__assign({}, r), {
+          isAllDay: false
+        });
+      });
+    },
+    daySlots: function daySlots() {
+      return toSlots(this.ks.dateRange, {
+        step: MS_PER_DAY
+      }, {
+        groups: this.ks.groups,
+        ranges: this.dayRanges
+      });
+    },
+    timeSlots: function timeSlots() {
+      var that = this;
+      return toSlots(this.ks.dateRange, {
+        step: this.slotDuration * MS_PER_MINUTE / this.slotDivisions
+      }, {
+        groups: this.ks.groups,
+        ranges: this.timeRanges
+      }).filter(function (slot) {
+        return that.viewEnd.getTime() === that.viewStart.getTime() || isInTimeRange(slot.zonedStart, that.viewStart, that.viewEnd);
+      });
+    },
+    occurrences: function occurrences() {
+      return toOccurrences(this.ks.dataItems, {
+        dateRange: this.ks.dateRange,
+        fields: this.ks.fields,
+        timezone: this.ks.timezone
+      });
+    },
+    dayOccurrences: function dayOccurrences() {
+      return this.occurrences.filter(function (o) {
+        return o.isAllDay;
+      });
+    },
+    timeOccurrences: function timeOccurrences() {
+      return this.occurrences.filter(function (o) {
+        return !o.isAllDay;
+      });
+    },
+    dayItems: function dayItems() {
+      var dayItems = toItems(this.dayOccurrences, {
+        timezone: this.ks.timezone
+      }, {
+        groups: this.ks.groups,
+        ranges: this.dayRanges
+      });
+      mapItemsToSlots(dayItems, this.daySlots, false);
+      mapSlotsToItems(dayItems, this.daySlots, false);
+      return dayItems;
+    },
+    timeItems: function timeItems() {
+      var _this = this;
+
+      var timeItems = toItems(this.timeOccurrences, {
+        timezone: this.ks.timezone
+      }, {
+        groups: this.ks.groups,
+        ranges: this.timeRanges
+      }).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(timeItems, this.timeSlots, false);
+      mapSlotsToItems(timeItems, this.timeSlots, false);
+      return timeItems;
+    }
+  },
+  created: function created() {
+    this.intl = provideIntlService(this); // mapItemsToSlots(this.dayItems, this.daySlots, false);
+    // mapSlotsToItems(this.dayItems, this.daySlots, false);
+    // mapItemsToSlots(this.timeItems, this.timeSlots, false);
+    // mapSlotsToItems(this.timeItems, this.timeSlots, false);
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this2 = this;
+
+    var _this = this;
+
+    var h = gh || createElement;
+    this.intl = provideIntlService(this);
+    var EditItem = this.$props.editItem || SchedulerEditItem;
+    var EditSlot = this.$props.editSlot || SchedulerEditSlot;
+    var showWorkHours = this.$props.showWorkHours;
+    var numberOfDays = this.$props.numberOfDays;
+    var slotDivisions = this.$props.slotDivisions;
+    var slotDuration = this.$props.slotDuration;
+    var workWeekStart = this.$props.workWeekStart;
+    var workWeekEnd = this.$props.workWeekEnd;
+    var workDayStart = this.intl.parseDate(this.$props.workDayStart);
+    var workDayEnd = this.intl.parseDate(this.$props.workDayEnd);
+    return (// @ts-ignore  function children
+      h(BaseView, {
+        id: this.$props.id,
+        attrs: this.v3 ? undefined : {
+          id: this.$props.id,
+          props: this.$props,
+          ranges: __spreadArrays(this.dayRanges, this.timeRanges),
+          baseSlots: __spreadArrays(this.daySlots, this.timeSlots)
+        },
+        props: this.$props,
+        "class": 'k-scheduler-day-view',
+        ranges: __spreadArrays(this.dayRanges, this.timeRanges),
+        baseSlots: __spreadArrays(this.daySlots, this.timeSlots)
+      }, this.v3 ? function () {
+        return [h("div", {
+          "class": "k-scheduler-head"
+        }, [_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: DayViewGroupRowContent,
+            childRowContent: DayViewGroupRowContent
+          },
+          group: _this2.ks.props.group,
+          resources: _this2.ks.props.resources,
+          rowContent: DayViewGroupRowContent,
+          childRowContent: DayViewGroupRowContent
+        }, _this2.v3 ? function () {
+          return [h(DayViewHead, {
+            timeRanges: _this2.timeRanges,
+            attrs: _this2.v3 ? undefined : {
+              timeRanges: _this2.timeRanges,
+              dateHeaderCell: _this2.$props.dateHeaderCell
+            },
+            dateHeaderCell: _this2.$props.dateHeaderCell
+          })];
+        } : [h(DayViewHead, {
+          timeRanges: _this2.timeRanges,
+          attrs: _this2.v3 ? undefined : {
+            timeRanges: _this2.timeRanges,
+            dateHeaderCell: _this2.$props.dateHeaderCell
+          },
+          dateHeaderCell: _this2.$props.dateHeaderCell
+        })]), // @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: DayViewAllDayRowContent,
+            childRowContent: DayViewAllDayRowContent
+          },
+          resources: _this2.ks.props.resources,
+          rowContent: DayViewAllDayRowContent,
+          childRowContent: DayViewAllDayRowContent
+        }, _this2.v3 ? function () {
+          return [h(DayViewAllDaySlots, {
+            dayRanges: _this2.dayRanges,
+            attrs: _this2.v3 ? undefined : {
+              dayRanges: _this2.dayRanges,
+              daySlots: _this2.daySlots,
+              numberOfDays: numberOfDays,
+              workWeekStart: workWeekStart,
+              workWeekEnd: workWeekEnd
+            },
+            daySlots: _this2.daySlots,
+            numberOfDays: numberOfDays,
+            workWeekStart: workWeekStart,
+            workWeekEnd: workWeekEnd,
+            onDataaction: _this2.handleDataAction,
+            on: _this2.v3 ? undefined : {
+              "dataaction": _this2.handleDataAction
+            }
+          })];
+        } : [h(DayViewAllDaySlots, {
+          dayRanges: _this2.dayRanges,
+          attrs: _this2.v3 ? undefined : {
+            dayRanges: _this2.dayRanges,
+            daySlots: _this2.daySlots,
+            numberOfDays: numberOfDays,
+            workWeekStart: workWeekStart,
+            workWeekEnd: workWeekEnd
+          },
+          daySlots: _this2.daySlots,
+          numberOfDays: numberOfDays,
+          workWeekStart: workWeekStart,
+          workWeekEnd: workWeekEnd,
+          onDataaction: _this2.handleDataAction,
+          on: _this2.v3 ? undefined : {
+            "dataaction": _this2.handleDataAction
+          }
+        })]), _this2.dayItems.map(function (item) {
+          return h(EditItem, {
+            key: item.isRecurring ? item.uid + ":" + item.group.index + ":" + item.range.index + ":" + item.originalStart : item.uid + ":" + item.group.index + ":" + 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,
+              form: this.$props.form,
+              item: this.$props.item,
+              viewItem: this.$props.viewItem,
+              editable: this.$props.editable,
+              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,
+            form: this.$props.form,
+            onDataaction: this.handleDataAction,
+            on: this.v3 ? undefined : {
+              "dataaction": this.handleDataAction
+            },
+            item: this.$props.item,
+            viewItem: this.$props.viewItem,
+            editable: this.$props.editable,
+            vertical: false
+          });
+        }, _this2)] : h(VerticalResourceIterator, {
+          group: _this2.ks.props.group,
+          attrs: _this2.v3 ? undefined : {
+            group: _this2.ks.props.group,
+            resources: _this2.ks.props.resources,
+            emptyCell: true
+          },
+          resources: _this2.ks.props.resources,
+          emptyCell: true
+        }, [h(DayViewHead, {
+          timeRanges: _this2.timeRanges,
+          attrs: _this2.v3 ? undefined : {
+            timeRanges: _this2.timeRanges,
+            dateHeaderCell: _this2.$props.dateHeaderCell
+          },
+          dateHeaderCell: _this2.$props.dateHeaderCell
+        })])]), h("div", {
+          "class": "k-scheduler-body"
+        }, [_this2.ks.orientation === 'horizontal' ? [_this2.timeSlots.filter(function (slot) {
+          return slot.group.index === FIRST_INDEX && slot.range.index === FIRST_INDEX;
+        }).map(function (root, rootIndex) {
+          var _this3 = this;
+
+          return (// @ts-ignore  function children
+            h(HorizontalResourceIterator, {
+              key: root.index,
+              nested: false,
+              attrs: this.v3 ? undefined : {
+                nested: false,
+                group: this.ks.props.group,
+                resources: this.ks.props.resources,
+                rowContent: DayViewRowContent,
+                rowContentProps: {
+                  timeHeaderCell: this.$props.timeHeaderCell,
+                  isMaster: rootIndex % slotDivisions === 0,
+                  isLast: (rootIndex + 1) % slotDivisions === 0,
+                  contentSlot: root
+                }
+              },
+              group: this.ks.props.group,
+              resources: this.ks.props.resources,
+              rowContent: DayViewRowContent,
+              rowContentProps: {
+                timeHeaderCell: this.$props.timeHeaderCell,
+                isMaster: rootIndex % slotDivisions === 0,
+                isLast: (rootIndex + 1) % slotDivisions === 0,
+                contentSlot: root
+              }
+            }, this.v3 ? function () {
+              return [h(DayViewMiddleRow, {
+                timeRanges: _this3.timeRanges,
+                attrs: _this3.v3 ? undefined : {
+                  timeRanges: _this3.timeRanges,
+                  timeSlots: _this3.timeSlots,
+                  slotDivisions: slotDivisions,
+                  rootIndex: rootIndex,
+                  root: root,
+                  numberOfDays: numberOfDays,
+                  workDayStart: workDayStart,
+                  workDayEnd: workDayEnd,
+                  workWeekStart: workWeekStart,
+                  workWeekEnd: workWeekEnd
+                },
+                timeSlots: _this3.timeSlots,
+                slotDivisions: slotDivisions,
+                rootIndex: rootIndex,
+                root: root,
+                numberOfDays: numberOfDays,
+                workDayStart: workDayStart,
+                workDayEnd: workDayEnd,
+                workWeekStart: workWeekStart,
+                workWeekEnd: workWeekEnd,
+                onDataaction: _this3.handleDataAction,
+                on: _this3.v3 ? undefined : {
+                  "dataaction": _this3.handleDataAction
+                }
+              })];
+            } : [h(DayViewMiddleRow, {
+              timeRanges: _this3.timeRanges,
+              attrs: _this3.v3 ? undefined : {
+                timeRanges: _this3.timeRanges,
+                timeSlots: _this3.timeSlots,
+                slotDivisions: slotDivisions,
+                rootIndex: rootIndex,
+                root: root,
+                numberOfDays: numberOfDays,
+                workDayStart: workDayStart,
+                workDayEnd: workDayEnd,
+                workWeekStart: workWeekStart,
+                workWeekEnd: workWeekEnd
+              },
+              timeSlots: _this3.timeSlots,
+              slotDivisions: slotDivisions,
+              rootIndex: rootIndex,
+              root: root,
+              numberOfDays: numberOfDays,
+              workDayStart: workDayStart,
+              workDayEnd: workDayEnd,
+              workWeekStart: workWeekStart,
+              workWeekEnd: workWeekEnd,
+              onDataaction: _this3.handleDataAction,
+              on: _this3.v3 ? undefined : {
+                "dataaction": _this3.handleDataAction
+              }
+            })])
+          );
+        }, _this2), _this2.$props.currentTimeMarker && intersects(first(_this2.timeRanges).start, last(_this2.timeRanges).end, new Date(), new Date(), true) && h(CurrentTimeMarker)] : [h(VerticalResourceIterator, {
+          nested: true,
+          attrs: _this2.v3 ? undefined : {
+            nested: true,
+            group: _this2.ks.props.group,
+            resources: _this2.ks.props.resources
+          },
+          group: _this2.ks.props.group,
+          resources: _this2.ks.props.resources
+        }, [h(SchedulerResourceIteratorContext.Consumer, [function (_a) {
+          var groupIndex = _a.groupIndex;
+          return [h("div", {
+            "class": "k-scheduler-row"
+          }, [h(DayViewAllDayRowContent, {
+            groupIndex: groupIndex,
+            attrs: this.v3 ? undefined : {
+              groupIndex: groupIndex
+            }
+          }), _this.dayRanges.map(function (_, rangeIndex) {
+            var groupOffset = this.timeSlots.filter(function (s) {
+              return s.group.index === groupIndex && s.range.index === FIRST_INDEX;
+            }).length;
+            return this.daySlots.filter(function (s) {
+              return s.group.index === groupIndex && s.range.index === rangeIndex;
+            }).map(function (slot, slotIndex) {
+              return h(EditSlot, {
+                renderSlot: this.$props.slot,
+                attrs: this.v3 ? undefined : {
+                  renderSlot: this.$props.slot,
+                  viewSlot: this.$props.viewSlot,
+                  form: this.$props.form,
+                  index: slot.index,
+                  start: slot.start,
+                  end: slot.end,
+                  zonedStart: slot.zonedStart,
+                  zonedEnd: slot.zonedEnd,
+                  items: slot.items,
+                  group: slot.group,
+                  range: slot.range,
+                  isAllDay: slot.isAllDay,
+                  row: groupOffset * (groupIndex || 0) + (groupIndex || 0) * GRID_OFFSET,
+                  col: slotIndex,
+                  expandable: true
+                },
+                viewSlot: this.$props.viewSlot,
+                form: this.$props.form,
+                index: slot.index,
+                start: slot.start,
+                end: slot.end,
+                zonedStart: slot.zonedStart,
+                zonedEnd: slot.zonedEnd,
+                items: slot.items,
+                group: slot.group,
+                range: slot.range,
+                isAllDay: slot.isAllDay,
+                onDataaction: this.handleDataAction,
+                on: this.v3 ? undefined : {
+                  "dataaction": this.handleDataAction
+                },
+                key: slot.start.getTime() + ":" + slot.group.index,
+                "class": 'k-scheduler-alldays-slot',
+                row: groupOffset * (groupIndex || 0) + (groupIndex || 0) * GRID_OFFSET,
+                col: slotIndex,
+                expandable: true
+              });
+            }, this);
+          }, _this)]), _this.timeSlots.filter(function (s) {
+            return s.group.index === groupIndex && s.range.index === FIRST_INDEX;
+          }).map(function (root, rootIndex, filtered) {
+            return h("div", {
+              "class": "k-scheduler-row",
+              key: root.index
+            }, [h(DayViewRowContent, {
+              contentSlot: root,
+              attrs: this.v3 ? undefined : {
+                contentSlot: root,
+                isMaster: rootIndex % slotDivisions === 0,
+                isLast: (rootIndex + 1) % slotDivisions === 0,
+                timeHeaderCell: this.$props.timeHeaderCell
+              },
+              isMaster: rootIndex % slotDivisions === 0,
+              isLast: (rootIndex + 1) % slotDivisions === 0,
+              timeHeaderCell: this.$props.timeHeaderCell
+            }), this.timeRanges.map(function (_, rangeIndex) {
+              return this.timeSlots.filter(function (s) {
+                return s.index === root.index && s.group.index === groupIndex && s.range.index === rangeIndex;
+              }).map(function (slot) {
+                return h(EditSlot, {
+                  renderSlot: this.$props.slot,
+                  attrs: this.v3 ? undefined : {
+                    renderSlot: this.$props.slot,
+                    viewSlot: this.$props.viewSlot,
+                    form: this.$props.form,
+                    index: slot.index,
+                    start: slot.start,
+                    end: slot.end,
+                    zonedStart: slot.zonedStart,
+                    zonedEnd: slot.zonedEnd,
+                    items: slot.items,
+                    group: slot.group,
+                    range: slot.range,
+                    isAllDay: slot.isAllDay,
+                    row: filtered.length * (groupIndex || 0) + rootIndex + (groupIndex || 0) * GRID_OFFSET + GRID_OFFSET,
+                    col: rangeIndex,
+                    editable: this.$props.editable,
+                    isWorkHour: isInTimeRange(slot.zonedStart, workDayStart, workDayEnd),
+                    isWorkDay: 0 <= slot.zonedStart.getDay() + (numberOfDays - workWeekStart) && (slot.zonedStart.getDay() + (numberOfDays - workWeekStart)) % numberOfDays <= workWeekEnd + (numberOfDays - workWeekStart)
+                  },
+                  viewSlot: this.$props.viewSlot,
+                  form: this.$props.form,
+                  onDataaction: this.handleDataAction,
+                  on: this.v3 ? undefined : {
+                    "dataaction": this.handleDataAction
+                  },
+                  index: slot.index,
+                  start: slot.start,
+                  end: slot.end,
+                  zonedStart: slot.zonedStart,
+                  zonedEnd: slot.zonedEnd,
+                  items: slot.items,
+                  group: slot.group,
+                  range: slot.range,
+                  isAllDay: slot.isAllDay,
+                  key: slot.start.getTime() + ":" + slot.group.index,
+                  row: filtered.length * (groupIndex || 0) + rootIndex + (groupIndex || 0) * GRID_OFFSET + GRID_OFFSET,
+                  col: rangeIndex,
+                  editable: this.$props.editable,
+                  isWorkHour: isInTimeRange(slot.zonedStart, workDayStart, workDayEnd),
+                  isWorkDay: 0 <= slot.zonedStart.getDay() + (numberOfDays - workWeekStart) && (slot.zonedStart.getDay() + (numberOfDays - workWeekStart)) % numberOfDays <= workWeekEnd + (numberOfDays - workWeekStart)
+                });
+              }, true);
+            }, this)]);
+          }, _this), _this.$props.currentTimeMarker && intersects(first(_this.timeRanges).start, last(_this.timeRanges).end, new Date(), new Date(), true) && h(CurrentTimeMarker, {
+            groupIndex: groupIndex,
+            attrs: this.v3 ? undefined : {
+              groupIndex: groupIndex
+            }
+          })];
+        }])]), _this2.dayItems.map(function (item) {
+          return h(EditItem, {
+            key: item.isRecurring ? item.uid + ":" + item.group.index + " : " + item.range.index + " : " + item.originalStart : item.uid + ":" + item.group.index + " : " + 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,
+              viewItem: this.$props.viewItem,
+              item: this.$props.item,
+              form: this.$props.form,
+              editable: this.$props.editable,
+              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,
+            onDataaction: this.handleDataAction,
+            on: this.v3 ? undefined : {
+              "dataaction": this.handleDataAction
+            },
+            viewItem: this.$props.viewItem,
+            item: this.$props.item,
+            form: this.$props.form,
+            editable: this.$props.editable,
+            vertical: false
+          });
+        }, _this2)], _this2.timeItems.map(function (item) {
+          return h(EditItem, {
+            key: item.isRecurring ? item.uid + ":" + item.group.index + ":" + item.range.index + ":" + item.originalStart : item.uid + ":" + item.group.index + ":" + 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',
+              viewItem: this.$props.viewItem,
+              item: this.$props.item,
+              form: this.$props.form,
+              editable: this.$props.editable,
+              vertical: true
+            },
+            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',
+            onDataaction: this.handleDataAction,
+            on: this.v3 ? undefined : {
+              "dataaction": this.handleDataAction
+            },
+            viewItem: this.$props.viewItem,
+            item: this.$props.item,
+            form: this.$props.form,
+            editable: this.$props.editable,
+            vertical: true
+          });
+        }, _this2)])];
+      } : [h("div", {
+        "class": "k-scheduler-head"
+      }, [_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: DayViewGroupRowContent,
+          childRowContent: DayViewGroupRowContent
+        },
+        group: _this2.ks.props.group,
+        resources: _this2.ks.props.resources,
+        rowContent: DayViewGroupRowContent,
+        childRowContent: DayViewGroupRowContent
+      }, _this2.v3 ? function () {
+        return [h(DayViewHead, {
+          timeRanges: _this2.timeRanges,
+          attrs: _this2.v3 ? undefined : {
+            timeRanges: _this2.timeRanges,
+            dateHeaderCell: _this2.$props.dateHeaderCell
+          },
+          dateHeaderCell: _this2.$props.dateHeaderCell
+        })];
+      } : [h(DayViewHead, {
+        timeRanges: _this2.timeRanges,
+        attrs: _this2.v3 ? undefined : {
+          timeRanges: _this2.timeRanges,
+          dateHeaderCell: _this2.$props.dateHeaderCell
+        },
+        dateHeaderCell: _this2.$props.dateHeaderCell
+      })]), h(HorizontalResourceIterator, {
+        group: _this2.ks.props.group,
+        attrs: _this2.v3 ? undefined : {
+          group: _this2.ks.props.group,
+          resources: _this2.ks.props.resources,
+          rowContent: DayViewAllDayRowContent,
+          childRowContent: DayViewAllDayRowContent
+        },
+        resources: _this2.ks.props.resources,
+        rowContent: DayViewAllDayRowContent,
+        childRowContent: DayViewAllDayRowContent
+      }, _this2.v3 ? function () {
+        return [h(DayViewAllDaySlots, {
+          dayRanges: _this2.dayRanges,
+          attrs: _this2.v3 ? undefined : {
+            dayRanges: _this2.dayRanges,
+            daySlots: _this2.daySlots,
+            numberOfDays: numberOfDays,
+            workWeekStart: workWeekStart,
+            workWeekEnd: workWeekEnd
+          },
+          daySlots: _this2.daySlots,
+          numberOfDays: numberOfDays,
+          workWeekStart: workWeekStart,
+          workWeekEnd: workWeekEnd,
+          onDataaction: _this2.handleDataAction,
+          on: _this2.v3 ? undefined : {
+            "dataaction": _this2.handleDataAction
+          }
+        })];
+      } : [h(DayViewAllDaySlots, {
+        dayRanges: _this2.dayRanges,
+        attrs: _this2.v3 ? undefined : {
+          dayRanges: _this2.dayRanges,
+          daySlots: _this2.daySlots,
+          numberOfDays: numberOfDays,
+          workWeekStart: workWeekStart,
+          workWeekEnd: workWeekEnd
+        },
+        daySlots: _this2.daySlots,
+        numberOfDays: numberOfDays,
+        workWeekStart: workWeekStart,
+        workWeekEnd: workWeekEnd,
+        onDataaction: _this2.handleDataAction,
+        on: _this2.v3 ? undefined : {
+          "dataaction": _this2.handleDataAction
+        }
+      })]), _this2.dayItems.map(function (item) {
+        return h(EditItem, {
+          key: item.isRecurring ? item.uid + ":" + item.group.index + ":" + item.range.index + ":" + item.originalStart : item.uid + ":" + item.group.index + ":" + 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,
+            form: this.$props.form,
+            item: this.$props.item,
+            viewItem: this.$props.viewItem,
+            editable: this.$props.editable,
+            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,
+          form: this.$props.form,
+          onDataaction: this.handleDataAction,
+          on: this.v3 ? undefined : {
+            "dataaction": this.handleDataAction
+          },
+          item: this.$props.item,
+          viewItem: this.$props.viewItem,
+          editable: this.$props.editable,
+          vertical: false
+        });
+      }, _this2)] : h(VerticalResourceIterator, {
+        group: _this2.ks.props.group,
+        attrs: _this2.v3 ? undefined : {
+          group: _this2.ks.props.group,
+          resources: _this2.ks.props.resources,
+          emptyCell: true
+        },
+        resources: _this2.ks.props.resources,
+        emptyCell: true
+      }, [h(DayViewHead, {
+        timeRanges: _this2.timeRanges,
+        attrs: _this2.v3 ? undefined : {
+          timeRanges: _this2.timeRanges,
+          dateHeaderCell: _this2.$props.dateHeaderCell
+        },
+        dateHeaderCell: _this2.$props.dateHeaderCell
+      })])]), h("div", {
+        "class": "k-scheduler-body"
+      }, [_this2.ks.orientation === 'horizontal' ? [_this2.timeSlots.filter(function (slot) {
+        return slot.group.index === FIRST_INDEX && slot.range.index === FIRST_INDEX;
+      }).map(function (root, rootIndex) {
+        var _this3 = this;
+
+        return h(HorizontalResourceIterator, {
+          key: root.index,
+          nested: false,
+          attrs: this.v3 ? undefined : {
+            nested: false,
+            group: this.ks.props.group,
+            resources: this.ks.props.resources,
+            rowContent: DayViewRowContent,
+            rowContentProps: {
+              timeHeaderCell: this.$props.timeHeaderCell,
+              isMaster: rootIndex % slotDivisions === 0,
+              isLast: (rootIndex + 1) % slotDivisions === 0,
+              contentSlot: root
+            }
+          },
+          group: this.ks.props.group,
+          resources: this.ks.props.resources,
+          rowContent: DayViewRowContent,
+          rowContentProps: {
+            timeHeaderCell: this.$props.timeHeaderCell,
+            isMaster: rootIndex % slotDivisions === 0,
+            isLast: (rootIndex + 1) % slotDivisions === 0,
+            contentSlot: root
+          }
+        }, this.v3 ? function () {
+          return [h(DayViewMiddleRow, {
+            timeRanges: _this3.timeRanges,
+            attrs: _this3.v3 ? undefined : {
+              timeRanges: _this3.timeRanges,
+              timeSlots: _this3.timeSlots,
+              slotDivisions: slotDivisions,
+              rootIndex: rootIndex,
+              root: root,
+              numberOfDays: numberOfDays,
+              workDayStart: workDayStart,
+              workDayEnd: workDayEnd,
+              workWeekStart: workWeekStart,
+              workWeekEnd: workWeekEnd
+            },
+            timeSlots: _this3.timeSlots,
+            slotDivisions: slotDivisions,
+            rootIndex: rootIndex,
+            root: root,
+            numberOfDays: numberOfDays,
+            workDayStart: workDayStart,
+            workDayEnd: workDayEnd,
+            workWeekStart: workWeekStart,
+            workWeekEnd: workWeekEnd,
+            onDataaction: _this3.handleDataAction,
+            on: _this3.v3 ? undefined : {
+              "dataaction": _this3.handleDataAction
+            }
+          })];
+        } : [h(DayViewMiddleRow, {
+          timeRanges: _this3.timeRanges,
+          attrs: _this3.v3 ? undefined : {
+            timeRanges: _this3.timeRanges,
+            timeSlots: _this3.timeSlots,
+            slotDivisions: slotDivisions,
+            rootIndex: rootIndex,
+            root: root,
+            numberOfDays: numberOfDays,
+            workDayStart: workDayStart,
+            workDayEnd: workDayEnd,
+            workWeekStart: workWeekStart,
+            workWeekEnd: workWeekEnd
+          },
+          timeSlots: _this3.timeSlots,
+          slotDivisions: slotDivisions,
+          rootIndex: rootIndex,
+          root: root,
+          numberOfDays: numberOfDays,
+          workDayStart: workDayStart,
+          workDayEnd: workDayEnd,
+          workWeekStart: workWeekStart,
+          workWeekEnd: workWeekEnd,
+          onDataaction: _this3.handleDataAction,
+          on: _this3.v3 ? undefined : {
+            "dataaction": _this3.handleDataAction
+          }
+        })]);
+      }, _this2), _this2.$props.currentTimeMarker && intersects(first(_this2.timeRanges).start, last(_this2.timeRanges).end, new Date(), new Date(), true) && h(CurrentTimeMarker)] : [h(VerticalResourceIterator, {
+        nested: true,
+        attrs: _this2.v3 ? undefined : {
+          nested: true,
+          group: _this2.ks.props.group,
+          resources: _this2.ks.props.resources
+        },
+        group: _this2.ks.props.group,
+        resources: _this2.ks.props.resources
+      }, [h(SchedulerResourceIteratorContext.Consumer, [function (_a) {
+        var groupIndex = _a.groupIndex;
+        return [h("div", {
+          "class": "k-scheduler-row"
+        }, [h(DayViewAllDayRowContent, {
+          groupIndex: groupIndex,
+          attrs: this.v3 ? undefined : {
+            groupIndex: groupIndex
+          }
+        }), _this.dayRanges.map(function (_, rangeIndex) {
+          var groupOffset = this.timeSlots.filter(function (s) {
+            return s.group.index === groupIndex && s.range.index === FIRST_INDEX;
+          }).length;
+          return this.daySlots.filter(function (s) {
+            return s.group.index === groupIndex && s.range.index === rangeIndex;
+          }).map(function (slot, slotIndex) {
+            return h(EditSlot, {
+              renderSlot: this.$props.slot,
+              attrs: this.v3 ? undefined : {
+                renderSlot: this.$props.slot,
+                viewSlot: this.$props.viewSlot,
+                form: this.$props.form,
+                index: slot.index,
+                start: slot.start,
+                end: slot.end,
+                zonedStart: slot.zonedStart,
+                zonedEnd: slot.zonedEnd,
+                items: slot.items,
+                group: slot.group,
+                range: slot.range,
+                isAllDay: slot.isAllDay,
+                row: groupOffset * (groupIndex || 0) + (groupIndex || 0) * GRID_OFFSET,
+                col: slotIndex,
+                expandable: true
+              },
+              viewSlot: this.$props.viewSlot,
+              form: this.$props.form,
+              index: slot.index,
+              start: slot.start,
+              end: slot.end,
+              zonedStart: slot.zonedStart,
+              zonedEnd: slot.zonedEnd,
+              items: slot.items,
+              group: slot.group,
+              range: slot.range,
+              isAllDay: slot.isAllDay,
+              onDataaction: this.handleDataAction,
+              on: this.v3 ? undefined : {
+                "dataaction": this.handleDataAction
+              },
+              key: slot.start.getTime() + ":" + slot.group.index,
+              "class": 'k-scheduler-alldays-slot',
+              row: groupOffset * (groupIndex || 0) + (groupIndex || 0) * GRID_OFFSET,
+              col: slotIndex,
+              expandable: true
+            });
+          }, this);
+        }, _this)]), _this.timeSlots.filter(function (s) {
+          return s.group.index === groupIndex && s.range.index === FIRST_INDEX;
+        }).map(function (root, rootIndex, filtered) {
+          return h("div", {
+            "class": "k-scheduler-row",
+            key: root.index
+          }, [h(DayViewRowContent, {
+            contentSlot: root,
+            attrs: this.v3 ? undefined : {
+              contentSlot: root,
+              isMaster: rootIndex % slotDivisions === 0,
+              isLast: (rootIndex + 1) % slotDivisions === 0,
+              timeHeaderCell: this.$props.timeHeaderCell
+            },
+            isMaster: rootIndex % slotDivisions === 0,
+            isLast: (rootIndex + 1) % slotDivisions === 0,
+            timeHeaderCell: this.$props.timeHeaderCell
+          }), this.timeRanges.map(function (_, rangeIndex) {
+            return this.timeSlots.filter(function (s) {
+              return s.index === root.index && s.group.index === groupIndex && s.range.index === rangeIndex;
+            }).map(function (slot) {
+              return h(EditSlot, {
+                renderSlot: this.$props.slot,
+                attrs: this.v3 ? undefined : {
+                  renderSlot: this.$props.slot,
+                  viewSlot: this.$props.viewSlot,
+                  form: this.$props.form,
+                  index: slot.index,
+                  start: slot.start,
+                  end: slot.end,
+                  zonedStart: slot.zonedStart,
+                  zonedEnd: slot.zonedEnd,
+                  items: slot.items,
+                  group: slot.group,
+                  range: slot.range,
+                  isAllDay: slot.isAllDay,
+                  row: filtered.length * (groupIndex || 0) + rootIndex + (groupIndex || 0) * GRID_OFFSET + GRID_OFFSET,
+                  col: rangeIndex,
+                  editable: this.$props.editable,
+                  isWorkHour: isInTimeRange(slot.zonedStart, workDayStart, workDayEnd),
+                  isWorkDay: 0 <= slot.zonedStart.getDay() + (numberOfDays - workWeekStart) && (slot.zonedStart.getDay() + (numberOfDays - workWeekStart)) % numberOfDays <= workWeekEnd + (numberOfDays - workWeekStart)
+                },
+                viewSlot: this.$props.viewSlot,
+                form: this.$props.form,
+                onDataaction: this.handleDataAction,
+                on: this.v3 ? undefined : {
+                  "dataaction": this.handleDataAction
+                },
+                index: slot.index,
+                start: slot.start,
+                end: slot.end,
+                zonedStart: slot.zonedStart,
+                zonedEnd: slot.zonedEnd,
+                items: slot.items,
+                group: slot.group,
+                range: slot.range,
+                isAllDay: slot.isAllDay,
+                key: slot.start.getTime() + ":" + slot.group.index,
+                row: filtered.length * (groupIndex || 0) + rootIndex + (groupIndex || 0) * GRID_OFFSET + GRID_OFFSET,
+                col: rangeIndex,
+                editable: this.$props.editable,
+                isWorkHour: isInTimeRange(slot.zonedStart, workDayStart, workDayEnd),
+                isWorkDay: 0 <= slot.zonedStart.getDay() + (numberOfDays - workWeekStart) && (slot.zonedStart.getDay() + (numberOfDays - workWeekStart)) % numberOfDays <= workWeekEnd + (numberOfDays - workWeekStart)
+              });
+            }, true);
+          }, this)]);
+        }, _this), _this.$props.currentTimeMarker && intersects(first(_this.timeRanges).start, last(_this.timeRanges).end, new Date(), new Date(), true) && h(CurrentTimeMarker, {
+          groupIndex: groupIndex,
+          attrs: this.v3 ? undefined : {
+            groupIndex: groupIndex
+          }
+        })];
+      }])]), _this2.dayItems.map(function (item) {
+        return h(EditItem, {
+          key: item.isRecurring ? item.uid + ":" + item.group.index + " : " + item.range.index + " : " + item.originalStart : item.uid + ":" + item.group.index + " : " + 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,
+            viewItem: this.$props.viewItem,
+            item: this.$props.item,
+            form: this.$props.form,
+            editable: this.$props.editable,
+            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,
+          onDataaction: this.handleDataAction,
+          on: this.v3 ? undefined : {
+            "dataaction": this.handleDataAction
+          },
+          viewItem: this.$props.viewItem,
+          item: this.$props.item,
+          form: this.$props.form,
+          editable: this.$props.editable,
+          vertical: false
+        });
+      }, _this2)], _this2.timeItems.map(function (item) {
+        return h(EditItem, {
+          key: item.isRecurring ? item.uid + ":" + item.group.index + ":" + item.range.index + ":" + item.originalStart : item.uid + ":" + item.group.index + ":" + 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',
+            viewItem: this.$props.viewItem,
+            item: this.$props.item,
+            form: this.$props.form,
+            editable: this.$props.editable,
+            vertical: true
+          },
+          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',
+          onDataaction: this.handleDataAction,
+          on: this.v3 ? undefined : {
+            "dataaction": this.handleDataAction
+          },
+          viewItem: this.$props.viewItem,
+          item: this.$props.item,
+          form: this.$props.form,
+          editable: this.$props.editable,
+          vertical: true
+        });
+      }, _this2)])])
+    );
+  },
+  methods: {
+    handleDataAction: function handleDataAction(action) {
+      this.$emit('dataaction', action);
+    }
+  }
+};
+
+var multiDayViewDateRange = function multiDayViewDateRange(_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
+  };
+};
+
+var MultiDayView = MultiDayViewVue2;
+export { MultiDayView, MultiDayViewVue2, multiDayViewDateRange };