@progress/kendo-vue-scheduler 3.0.9-dev.202202281506 → 3.0.9-dev.202203011321

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

@@ -10,7 +10,7 @@ import { HorizontalResourceIterator } from '../common/HorizontalResourceIterator
 import { TimelineViewRowContent } from './TimelineViewRowContent';
 import { TimelineViewAllEventsRowContent } from './TimelineViewAllEventsRowContent';
 import { VerticalResourceIterator } from '../common/VerticalResourceIterator';
-import { mapItemsToSlots, mapSlotsToItems, isInTimeRange, toUTCDateTime, intersects, first, last, orderSort } from '../../utils';
+import { mapItemsToSlots, mapSlotsToItems, isInTimeRange, toUTCDateTime, orderSort } from '../../utils';
 import { toRanges } from '../../services/rangeService';
 import { toSlots } from '../../services/slotsService';
 import { toOccurrences } from '../../services/occurrenceService';
@@ -18,17 +18,7 @@ import { toItems } from '../../services/itemsService';
 import { TimelineViewBody } from './TimelineViewBody';
 import { BORDER_WIDTH } from '../../constants';
 import { provideIntlService } from '@progress/kendo-vue-intl';
-import { SchedulerEditItem } from '../../items/SchedulerEditItem'; // import {
-//     useSchedulerDataContext,
-//     useSchedulerPropsContext,
-//     useSchedulerGroupsContext,
-//     useSchedulerFieldsContext,
-//     useSchedulerDateRangeContext,
-//     useSchedulerOrientationContext
-// } from '../../context/SchedulerContext';
-
-import { SchedulerResourceIteratorContext } from '../../context/SchedulerResourceIteratorContext';
-import { CurrentTimeMarker } from '../../components/CurrentTimeMarket';
+import { SchedulerEditItem } from '../../items/SchedulerEditItem';
 import { DateHeaderCell } from '../../components/DateHeaderCell';
 import { TimeHeaderCell } from '../../components/TimeHeaderCell';
 var TIME_FORMAT = 't';
@@ -49,6 +39,10 @@ var MultiDayTimelineViewVue2 = {
       type: Boolean,
       default: true
     },
+    showWorkHours: {
+      type: Boolean,
+      default: true
+    },
     dateRange: {
       type: [Function, Object],
       default: function _default() {
@@ -170,15 +164,43 @@ var MultiDayTimelineViewVue2 = {
         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, false);
-      mapSlotsToItems(items, this.timelineSlots, false);
+      }); // mapItemsToSlots(items, this.timelineSlots, false);
+      // mapSlotsToItems(items, this.timelineSlots, false);
+
       return items;
     }
   },
   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: !gh ? undefined : function () {
@@ -189,7 +211,7 @@ var MultiDayTimelineViewVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
-    var _this = this;
+    var _this2 = this;
 
     var h = gh || createElement; // const {
     //     group,
@@ -203,7 +225,11 @@ var MultiDayTimelineViewVue2 = {
     var slotDuration = this.$props.slotDuration;
     var workDayStart = intl.parseDate(this.$props.workDayStart);
     var workDayEnd = intl.parseDate(this.$props.workDayEnd);
-    var width = (this.ks.orientation === 'horizontal' ? this.timelineSlots.length : this.timelineSlots.length / this.groups.length) * (this.$props.columnWidth + BORDER_WIDTH);
+    var items = this.items;
+    var timelineSlots = this.timelineSlots;
+    mapItemsToSlots(items, timelineSlots, true);
+    mapSlotsToItems(items, timelineSlots, true);
+    var width = (this.ks.orientation === 'horizontal' ? timelineSlots.length : timelineSlots.length / this.ks.groups.length) * (this.$props.columnWidth + BORDER_WIDTH);
     var head = [h("div", {
       "class": "k-scheduler-row"
     }, [this.ranges.map(function (range, rangeIndex) {
@@ -226,7 +252,7 @@ var MultiDayTimelineViewVue2 = {
       "class": "k-scheduler-row",
       ref: 'timeRef'
     }, [this.ranges.map(function (_, rangeIndex) {
-      return this.timelineSlots.filter(function (s) {
+      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, {
@@ -245,139 +271,342 @@ var MultiDayTimelineViewVue2 = {
         }) : null;
       }, this);
     }, this)])];
-    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'
-    });
-    return h(BaseView, {
-      id: this.$props.id,
-      attrs: this.v3 ? undefined : {
+    return (// @ts-ignore  function children
+      h(BaseView, {
         id: this.$props.id,
+        attrs: this.v3 ? undefined : {
+          id: this.$props.id,
+          props: this.$props,
+          baseSlots: timelineSlots,
+          ranges: this.ranges
+        },
+        "class": 'k-scheduler-timeline-view',
         props: this.$props,
-        baseSlots: this.timelineSlots,
+        baseSlots: timelineSlots,
         ranges: this.ranges
-      },
-      "class": 'k-scheduler-timeline-view',
-      props: this.$props,
-      baseSlots: this.timelineSlots,
-      ranges: this.ranges
-    }, [h("div", {
-      "class": 'k-scheduler-head',
-      style: {
-        width: width + 'px'
-      }
-    }, [this.ks.orientation === 'horizontal' ? h(HorizontalResourceIterator, {
-      nested: true,
-      attrs: this.v3 ? undefined : {
+      }, 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, {
+            ranges: _this2.ranges,
+            attrs: _this2.v3 ? undefined : {
+              ranges: _this2.ranges,
+              workDayStart: workDayStart,
+              workDayEnd: workDayEnd,
+              timelineSlots: timelineSlots
+            },
+            workDayStart: workDayStart,
+            workDayEnd: workDayEnd,
+            timelineSlots: timelineSlots,
+            onDataaction: _this2.handleDataAction,
+            on: _this2.v3 ? undefined : {
+              "dataaction": _this2.handleDataAction
+            }
+          })];
+        } : [h(TimelineViewBody, {
+          ranges: _this2.ranges,
+          attrs: _this2.v3 ? undefined : {
+            ranges: _this2.ranges,
+            workDayStart: workDayStart,
+            workDayEnd: workDayEnd,
+            timelineSlots: timelineSlots
+          },
+          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
+          },
+          wrapGroup: true,
+          group: _this2.ks.props.group,
+          resources: _this2.ks.props.resources
+        }, [// @ts-ignore  function children
+        h(TimelineViewBody, {
+          range: _this2.range,
+          attrs: _this2.v3 ? undefined : {
+            range: _this2.range,
+            workDayStart: workDayStart,
+            workDayEnd: workDayEnd,
+            timelineSlots: timelineSlots
+          },
+          workDayStart: workDayStart,
+          workDayEnd: workDayEnd,
+          timelineSlots: timelineSlots,
+          onDataaction: _this2.handleDataAction,
+          on: _this2.v3 ? undefined : {
+            "dataaction": _this2.handleDataAction
+          }
+        })]), items.sort(orderSort).map(function (item) {
+          return h(SchedulerEditItem, {
+            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',
+              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,
+            onDataaction: this.handleDataAction,
+            on: this.v3 ? undefined : {
+              "dataaction": this.handleDataAction
+            },
+            item: this.$props.item,
+            viewItem: this.$props.viewItem,
+            editable: this.$props.editable,
+            ignoreIsAllDay: true,
+            vertical: false
+          });
+        }, _this2)])];
+      } : [h("div", {
+        "class": 'k-scheduler-head',
+        style: {
+          width: width + 'px'
+        }
+      }, [_this2.ks.orientation === 'horizontal' ? h(HorizontalResourceIterator, {
         nested: true,
-        group: this.ks.props.group,
-        resources: this.ks.props.resources,
+        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
-      },
-      group: this.ks.props.group,
-      resources: this.ks.props.resources,
-      rowContent: TimelineViewRowContent
-    }, [head]) : h(VerticalResourceIterator, {
-      wrapGroup: true,
-      attrs: this.v3 ? undefined : {
+      }, _this2.v3 ? function () {
+        return [head];
+      } : [head]) : h(VerticalResourceIterator, {
         wrapGroup: true,
-        group: this.ks.props.group,
-        resources: this.ks.props.resources
-      },
-      group: this.ks.props.group,
-      resources: this.ks.props.resources
-    }, [head])]), h("div", {
-      "class": "k-scheduler-body",
-      style: {
-        width: width + 'px'
-      },
-      ref: 'bodyRef'
-    }, [this.ks.orientation === 'horizontal' ? h(HorizontalResourceIterator, {
-      group: this.ks.props.group,
-      attrs: this.v3 ? undefined : {
-        group: this.ks.props.group,
-        resources: this.ks.props.resources,
+        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
-      },
-      resources: this.ks.props.resources,
-      rowContent: TimelineViewAllEventsRowContent
-    }, [// @ts-ignore  function children
-    h(TimelineViewBody, {
-      ranges: this.ranges,
-      attrs: this.v3 ? undefined : {
-        ranges: this.ranges,
+      }, _this2.v3 ? function () {
+        return [h(TimelineViewBody, {
+          ranges: _this2.ranges,
+          attrs: _this2.v3 ? undefined : {
+            ranges: _this2.ranges,
+            workDayStart: workDayStart,
+            workDayEnd: workDayEnd,
+            timelineSlots: timelineSlots
+          },
+          workDayStart: workDayStart,
+          workDayEnd: workDayEnd,
+          timelineSlots: timelineSlots,
+          onDataaction: _this2.handleDataAction,
+          on: _this2.v3 ? undefined : {
+            "dataaction": _this2.handleDataAction
+          }
+        })];
+      } : [h(TimelineViewBody, {
+        ranges: _this2.ranges,
+        attrs: _this2.v3 ? undefined : {
+          ranges: _this2.ranges,
+          workDayStart: workDayStart,
+          workDayEnd: workDayEnd,
+          timelineSlots: timelineSlots
+        },
         workDayStart: workDayStart,
         workDayEnd: workDayEnd,
-        timelineSlots: this.timelineSlots
-      },
-      workDayStart: workDayStart,
-      workDayEnd: workDayEnd,
-      timelineSlots: this.timelineSlots,
-      onDataaction: this.handleDataAction,
-      on: this.v3 ? undefined : {
-        "dataaction": this.handleDataAction
-      }
-    }), h(SchedulerResourceIteratorContext.Consumer, [function (_a) {
-      var groupIndex = _a.groupIndex;
-      return _this.$props.currentTimeMarker && intersects(first(_this.ranges).start, last(_this.ranges).end, new Date(), new Date(), true) && h(CurrentTimeMarker, {
-        groupIndex: groupIndex,
-        attrs: this.v3 ? undefined : {
-          groupIndex: groupIndex,
-          attachArrow: 'timeRef',
-          vertical: true
-        },
-        attachArrow: 'timeRef',
-        vertical: true
-      });
-    }])]) : h(VerticalResourceIterator, {
-      nested: true,
-      attrs: this.v3 ? undefined : {
+        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
+        },
         wrapGroup: true,
-        group: this.ks.props.group,
-        resources: this.ks.props.resources
-      },
-      wrapGroup: true,
-      group: this.ks.props.group,
-      resources: this.ks.props.resources
-    }, [// @ts-ignore  function children
-    h(TimelineViewBody, {
-      range: this.range,
-      attrs: this.v3 ? undefined : {
-        range: this.range,
+        group: _this2.ks.props.group,
+        resources: _this2.ks.props.resources
+      }, [h(TimelineViewBody, {
+        range: _this2.range,
+        attrs: _this2.v3 ? undefined : {
+          range: _this2.range,
+          workDayStart: workDayStart,
+          workDayEnd: workDayEnd,
+          timelineSlots: timelineSlots
+        },
         workDayStart: workDayStart,
         workDayEnd: workDayEnd,
-        timelineSlots: this.timelineSlots
-      },
-      workDayStart: workDayStart,
-      workDayEnd: workDayEnd,
-      timelineSlots: this.timelineSlots,
-      onDataaction: this.handleDataAction,
-      on: this.v3 ? undefined : {
-        "dataaction": this.handleDataAction
-      }
-    })]), this.ks.orientation === 'vertical' && this.$props.currentTimeMarker && intersects(first(this.ranges).start, last(this.ranges).end, new Date(), new Date(), true) && h(CurrentTimeMarker, {
-      attachArrow: 'timeRef',
-      attrs: this.v3 ? undefined : {
-        attachArrow: 'timeRef',
-        vertical: true
-      },
-      vertical: true
-    }), this.items.sort(orderSort).map(function (item) {
-      return h(SchedulerEditItem, {
-        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 : {
+        timelineSlots: timelineSlots,
+        onDataaction: _this2.handleDataAction,
+        on: _this2.v3 ? undefined : {
+          "dataaction": _this2.handleDataAction
+        }
+      })]), items.sort(orderSort).map(function (item) {
+        return h(SchedulerEditItem, {
+          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',
+            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,
@@ -404,49 +633,18 @@ var MultiDayTimelineViewVue2 = {
           isRecurring: item.isRecurring,
           format: 't',
           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,
           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,
-        onDataaction: this.handleDataAction,
-        on: this.v3 ? undefined : {
-          "dataaction": this.handleDataAction
-        },
-        item: this.$props.item,
-        viewItem: this.$props.viewItem,
-        editable: this.$props.editable,
-        ignoreIsAllDay: true,
-        vertical: false
-      });
-    }, this)])]);
+        });
+      }, _this2)])])
+    );
   },
   methods: {
     handleDataAction: function handleDataAction(action) {