@progress/kendo-vue-scheduler 3.3.0 → 3.3.2-dev.202205231324
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/js/kendo-vue-scheduler.js +2 -2
- package/dist/es/Scheduler.d.ts +2 -0
- package/dist/es/Scheduler.js +3 -0
- package/dist/es/items/SchedulerItem.js +281 -260
- package/dist/es/items/SchedulerViewItem.js +0 -4
- package/dist/es/models/SchedulerView.d.ts +8 -0
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/slots/SchedulerSlot.js +0 -1
- package/dist/es/slots/SchedulerViewSlot.js +0 -3
- package/dist/es/views/day/DayView.js +5 -2
- package/dist/es/views/day/MultiDayView.d.ts +4 -0
- package/dist/es/views/day/MultiDayView.js +1 -0
- package/dist/es/views/month/MonthView.d.ts +4 -0
- package/dist/es/views/month/MonthView.js +113 -10
- package/dist/es/views/time/MultiDayTimelineView.d.ts +4 -0
- package/dist/es/views/time/MultiDayTimelineView.js +116 -7
- package/dist/es/views/time/TimelineView.js +19 -0
- package/dist/es/views/week/WeekView.js +3 -0
- package/dist/es/views/week/WorkWeekView.js +3 -0
- package/dist/npm/Scheduler.d.ts +2 -0
- package/dist/npm/Scheduler.js +3 -0
- package/dist/npm/items/SchedulerItem.js +279 -258
- package/dist/npm/items/SchedulerViewItem.js +0 -4
- package/dist/npm/models/SchedulerView.d.ts +8 -0
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/slots/SchedulerSlot.js +0 -1
- package/dist/npm/slots/SchedulerViewSlot.js +0 -3
- package/dist/npm/views/day/DayView.js +5 -2
- package/dist/npm/views/day/MultiDayView.d.ts +4 -0
- package/dist/npm/views/day/MultiDayView.js +1 -0
- package/dist/npm/views/month/MonthView.d.ts +4 -0
- package/dist/npm/views/month/MonthView.js +115 -10
- package/dist/npm/views/time/MultiDayTimelineView.d.ts +4 -0
- package/dist/npm/views/time/MultiDayTimelineView.js +118 -7
- package/dist/npm/views/time/TimelineView.js +19 -0
- package/dist/npm/views/week/WeekView.js +3 -0
- package/dist/npm/views/week/WorkWeekView.js +3 -0
- package/package.json +12 -12
|
@@ -124,10 +124,6 @@ var SchedulerViewItemVue2 = {
|
|
|
124
124
|
this.$nextTick(function () {
|
|
125
125
|
that.align();
|
|
126
126
|
that.position();
|
|
127
|
-
that.$nextTick(function () {
|
|
128
|
-
that.align();
|
|
129
|
-
that.position();
|
|
130
|
-
});
|
|
131
127
|
});
|
|
132
128
|
|
|
133
129
|
if (!this.ks.scheduler || !this.ks.scheduler.$el || this.observer) {
|
|
@@ -69,6 +69,14 @@ export interface SchedulerViewProps {
|
|
|
69
69
|
workWeekEnd?: Day;
|
|
70
70
|
/** @hidden */
|
|
71
71
|
format?: string;
|
|
72
|
+
/**
|
|
73
|
+
* Overrides the `dragItem` prop of the Scheduler for the specified view only.
|
|
74
|
+
*/
|
|
75
|
+
dragItem?: any;
|
|
76
|
+
/**
|
|
77
|
+
* Overrides the `resizeItem` prop of the Scheduler for the specified view only.
|
|
78
|
+
*/
|
|
79
|
+
resizeItem?: any;
|
|
72
80
|
}
|
|
73
81
|
/**
|
|
74
82
|
* Represents a single Scheduler view.
|
|
@@ -5,7 +5,7 @@ export var packageMetadata = {
|
|
|
5
5
|
name: '@progress/kendo-vue-scheduler',
|
|
6
6
|
productName: 'Kendo UI for Vue',
|
|
7
7
|
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate:
|
|
8
|
+
publishDate: 1653312029,
|
|
9
9
|
version: '',
|
|
10
10
|
licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
|
|
11
11
|
};
|
|
@@ -71,9 +71,6 @@ var SchedulerViewSlotVue2 = {
|
|
|
71
71
|
var that = this;
|
|
72
72
|
this.$nextTick(function () {
|
|
73
73
|
useSlotExpand(that, that.ks.scheduler.$el, that.$props.expandable);
|
|
74
|
-
that.$nextTick(function () {
|
|
75
|
-
useSlotExpand(that, that.ks.scheduler.$el, that.$props.expandable);
|
|
76
|
-
});
|
|
77
74
|
});
|
|
78
75
|
},
|
|
79
76
|
mounted: function mounted() {
|
|
@@ -90,6 +90,7 @@ var DayViewVue2 = {
|
|
|
90
90
|
timeHeaderCell: [String, Function, Object],
|
|
91
91
|
slotRender: [String, Function, Object],
|
|
92
92
|
viewSlot: [String, Function, Object],
|
|
93
|
+
resizeHint: [String, Function, Object],
|
|
93
94
|
item: [String, Function, Object],
|
|
94
95
|
viewItem: [String, Function, Object],
|
|
95
96
|
editable: {
|
|
@@ -127,7 +128,7 @@ var DayViewVue2 = {
|
|
|
127
128
|
selectedDateFormat: this.$props.selectedDateFormat,
|
|
128
129
|
selectedShortDateFormat: this.$props.selectedShortDateFormat,
|
|
129
130
|
showWorkHours: this.$props.showWorkHours,
|
|
130
|
-
title:
|
|
131
|
+
title: title,
|
|
131
132
|
currentTimeMarker: this.$props.currentTimeMarker,
|
|
132
133
|
startTime: this.$props.startTime,
|
|
133
134
|
endTime: this.$props.endTime,
|
|
@@ -140,6 +141,7 @@ var DayViewVue2 = {
|
|
|
140
141
|
dateHeaderCell: this.$props.dateHeaderCell,
|
|
141
142
|
slotRender: this.$props.slotRender,
|
|
142
143
|
viewSlot: this.$props.viewSlot,
|
|
144
|
+
resizeHint: this.$props.resizeHint,
|
|
143
145
|
item: this.$props.item,
|
|
144
146
|
viewItem: this.$props.viewItem,
|
|
145
147
|
slotItem: this.$props.slotItem,
|
|
@@ -153,7 +155,7 @@ var DayViewVue2 = {
|
|
|
153
155
|
selectedDateFormat: this.$props.selectedDateFormat,
|
|
154
156
|
selectedShortDateFormat: this.$props.selectedShortDateFormat,
|
|
155
157
|
showWorkHours: this.$props.showWorkHours,
|
|
156
|
-
title:
|
|
158
|
+
title: title,
|
|
157
159
|
currentTimeMarker: this.$props.currentTimeMarker,
|
|
158
160
|
startTime: this.$props.startTime,
|
|
159
161
|
endTime: this.$props.endTime,
|
|
@@ -166,6 +168,7 @@ var DayViewVue2 = {
|
|
|
166
168
|
dateHeaderCell: this.$props.dateHeaderCell,
|
|
167
169
|
slotRender: this.$props.slotRender,
|
|
168
170
|
viewSlot: this.$props.viewSlot,
|
|
171
|
+
resizeHint: this.$props.resizeHint,
|
|
169
172
|
item: this.$props.item,
|
|
170
173
|
viewItem: this.$props.viewItem,
|
|
171
174
|
slotItem: this.$props.slotItem,
|
|
@@ -130,6 +130,10 @@ export interface MultiDayViewProps extends SchedulerViewProps {
|
|
|
130
130
|
* Overrides the `editSlot` prop of the Scheduler for the specified view only.
|
|
131
131
|
*/
|
|
132
132
|
editSlot?: any;
|
|
133
|
+
/**
|
|
134
|
+
* Overrides the `resizeHint` of the event.
|
|
135
|
+
*/
|
|
136
|
+
resizeHint?: any;
|
|
133
137
|
form?: any;
|
|
134
138
|
/**
|
|
135
139
|
* If set to `false` the "current time" marker of the scheduler would not be displayed.
|
|
@@ -153,6 +153,7 @@ var MultiDayViewVue2 = {
|
|
|
153
153
|
timeHeaderCell: [String, Function, Object],
|
|
154
154
|
slotRender: [String, Function, Object],
|
|
155
155
|
viewSlot: [String, Function, Object],
|
|
156
|
+
resizeHint: [String, Function, Object],
|
|
156
157
|
item: [String, Function, Object],
|
|
157
158
|
viewItem: [String, Function, Object],
|
|
158
159
|
editable: {
|
|
@@ -58,6 +58,10 @@ export interface MonthViewProps extends SchedulerViewProps {
|
|
|
58
58
|
* Overrides the `viewSlot` prop of the Scheduler for the specified view only.
|
|
59
59
|
*/
|
|
60
60
|
viewSlot?: any;
|
|
61
|
+
/**
|
|
62
|
+
* Overrides the `resizeHint` of the event.
|
|
63
|
+
*/
|
|
64
|
+
resizeHint?: any;
|
|
61
65
|
/**
|
|
62
66
|
* Overrides the `editSlot` prop of the Scheduler for the specified view only.
|
|
63
67
|
*/
|
|
@@ -35,6 +35,8 @@ import { toItems } from '../../services/itemsService';
|
|
|
35
35
|
import { MonthViewHead } from './MonthViewHead';
|
|
36
36
|
import { MonthViewBody } from './MonthViewBody';
|
|
37
37
|
import { SchedulerEditItem } from '../../items/SchedulerEditItem';
|
|
38
|
+
import { SchedulerResize } from '../common/SchedulerResize';
|
|
39
|
+
import { SchedulerDrag } from '../../views/common/SchedulerDrag';
|
|
38
40
|
var DAY_FORMAT = {
|
|
39
41
|
skeleton: 'dd'
|
|
40
42
|
}; // tslint:enable:max-line-length
|
|
@@ -68,6 +70,18 @@ var MonthViewVue2 = {
|
|
|
68
70
|
type: Number,
|
|
69
71
|
default: 31
|
|
70
72
|
},
|
|
73
|
+
dragItem: {
|
|
74
|
+
type: Object,
|
|
75
|
+
default: function _default() {
|
|
76
|
+
return undefined;
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
resizeItem: {
|
|
80
|
+
type: Object,
|
|
81
|
+
default: function _default() {
|
|
82
|
+
return undefined;
|
|
83
|
+
}
|
|
84
|
+
},
|
|
71
85
|
title: String,
|
|
72
86
|
selectedDateFormat: {
|
|
73
87
|
type: String,
|
|
@@ -80,6 +94,7 @@ var MonthViewVue2 = {
|
|
|
80
94
|
dateHeaderCell: [String, Function, Object],
|
|
81
95
|
slotRender: [String, Function, Object],
|
|
82
96
|
viewSlot: [String, Function, Object],
|
|
97
|
+
resizeHint: [String, Function, Object],
|
|
83
98
|
item: [String, Function, Object],
|
|
84
99
|
viewItem: [String, Function, Object],
|
|
85
100
|
editable: {
|
|
@@ -101,6 +116,12 @@ var MonthViewVue2 = {
|
|
|
101
116
|
created: function created() {
|
|
102
117
|
this.intl = provideIntlService(this);
|
|
103
118
|
},
|
|
119
|
+
data: function data() {
|
|
120
|
+
return {
|
|
121
|
+
currentDragItem: undefined,
|
|
122
|
+
currentResizeItem: undefined
|
|
123
|
+
};
|
|
124
|
+
},
|
|
104
125
|
computed: {
|
|
105
126
|
ranges: function ranges() {
|
|
106
127
|
return toRanges(this.ks.dateRange, {
|
|
@@ -133,6 +154,12 @@ var MonthViewVue2 = {
|
|
|
133
154
|
mapItemsToSlots(items, this.monthSlots, true);
|
|
134
155
|
mapSlotsToItems(items, this.monthSlots, true);
|
|
135
156
|
return items;
|
|
157
|
+
},
|
|
158
|
+
compDragItem: function compDragItem() {
|
|
159
|
+
return this.dragItem !== undefined ? this.dragItem : this.currentDragItem;
|
|
160
|
+
},
|
|
161
|
+
compResizeItem: function compResizeItem() {
|
|
162
|
+
return this.resizeItem !== undefined ? this.resizeItem : this.currentResizeItem;
|
|
136
163
|
}
|
|
137
164
|
},
|
|
138
165
|
// @ts-ignore
|
|
@@ -146,18 +173,80 @@ var MonthViewVue2 = {
|
|
|
146
173
|
render: function render(createElement) {
|
|
147
174
|
var _this2 = this;
|
|
148
175
|
|
|
149
|
-
var h = gh || createElement;
|
|
150
|
-
// group,
|
|
151
|
-
// timezone,
|
|
152
|
-
// resources: propResources
|
|
153
|
-
// } = useSchedulerPropsContext();
|
|
154
|
-
|
|
176
|
+
var h = gh || createElement;
|
|
155
177
|
this.localization = provideLocalizationService(this);
|
|
156
178
|
var title = this.localization.toLanguageString(monthViewTitle, messages[monthViewTitle]);
|
|
157
179
|
var EditItem = this.$props.editItem || SchedulerEditItem;
|
|
158
180
|
var EditSlot = this.$props.editSlot || SchedulerEditSlot;
|
|
159
181
|
var items = this.items;
|
|
160
182
|
var monthSlots = this.monthSlots;
|
|
183
|
+
|
|
184
|
+
var dragItemClue = function dragItemClue(vertical) {
|
|
185
|
+
return this.compDragItem && this.$props.editable.drag && (Array.isArray(this.compDragItem) ? this.compDragItem.map(function (di, idx) {
|
|
186
|
+
return h(SchedulerDrag, {
|
|
187
|
+
key: idx,
|
|
188
|
+
ignoreIsAllDay: true,
|
|
189
|
+
attrs: this.v3 ? undefined : {
|
|
190
|
+
ignoreIsAllDay: true,
|
|
191
|
+
dataItem: di,
|
|
192
|
+
vertical: vertical,
|
|
193
|
+
item: this.$props.dataItem
|
|
194
|
+
},
|
|
195
|
+
dataItem: di,
|
|
196
|
+
vertical: vertical,
|
|
197
|
+
item: this.$props.dataItem
|
|
198
|
+
});
|
|
199
|
+
}, this) : h(SchedulerDrag, {
|
|
200
|
+
ignoreIsAllDay: true,
|
|
201
|
+
attrs: this.v3 ? undefined : {
|
|
202
|
+
ignoreIsAllDay: true,
|
|
203
|
+
dataItem: this.compDragItem,
|
|
204
|
+
vertical: vertical,
|
|
205
|
+
item: this.$props.dataItem
|
|
206
|
+
},
|
|
207
|
+
dataItem: this.compDragItem,
|
|
208
|
+
vertical: vertical,
|
|
209
|
+
item: this.$props.dataItem
|
|
210
|
+
}));
|
|
211
|
+
};
|
|
212
|
+
|
|
213
|
+
var resizeItemClue = function resizeItemClue(vertical) {
|
|
214
|
+
return this.compResizeItem && this.editable.resize && (Array.isArray(this.compResizeItem) ? this.compResizeItem.map(function (ri, idx) {
|
|
215
|
+
return h(SchedulerResize, {
|
|
216
|
+
key: idx,
|
|
217
|
+
format: this.$props.format,
|
|
218
|
+
attrs: this.v3 ? undefined : {
|
|
219
|
+
format: this.$props.format,
|
|
220
|
+
ignoreIsAllDay: true,
|
|
221
|
+
dataItem: ri,
|
|
222
|
+
viewItem: this.$props.viewItem,
|
|
223
|
+
item: this.$props.item,
|
|
224
|
+
vertical: vertical
|
|
225
|
+
},
|
|
226
|
+
ignoreIsAllDay: true,
|
|
227
|
+
dataItem: ri,
|
|
228
|
+
viewItem: this.$props.viewItem,
|
|
229
|
+
item: this.$props.item,
|
|
230
|
+
vertical: vertical
|
|
231
|
+
});
|
|
232
|
+
}, this) : h(SchedulerResize, {
|
|
233
|
+
format: this.$props.format,
|
|
234
|
+
attrs: this.v3 ? undefined : {
|
|
235
|
+
format: this.$props.format,
|
|
236
|
+
ignoreIsAllDay: true,
|
|
237
|
+
dataItem: this.compResizeItem,
|
|
238
|
+
viewItem: this.$props.viewItem,
|
|
239
|
+
item: this.$props.item,
|
|
240
|
+
vertical: vertical
|
|
241
|
+
},
|
|
242
|
+
ignoreIsAllDay: true,
|
|
243
|
+
dataItem: this.compResizeItem,
|
|
244
|
+
viewItem: this.$props.viewItem,
|
|
245
|
+
item: this.$props.item,
|
|
246
|
+
vertical: vertical
|
|
247
|
+
}));
|
|
248
|
+
};
|
|
249
|
+
|
|
161
250
|
this.intl = provideIntlService(this);
|
|
162
251
|
var itemsPerSlot = this.$props.itemsPerSlot;
|
|
163
252
|
var body = this.ks.orientation === 'horizontal' ? this.ranges.map(function (_, rangeIndex) {
|
|
@@ -376,10 +465,14 @@ var MonthViewVue2 = {
|
|
|
376
465
|
range: item.range,
|
|
377
466
|
isException: item.isException,
|
|
378
467
|
isRecurring: item.isRecurring,
|
|
379
|
-
|
|
468
|
+
onDragitemchange: this.handleDragItemChange,
|
|
380
469
|
on: this.v3 ? undefined : {
|
|
470
|
+
"dragitemchange": this.handleDragItemChange,
|
|
471
|
+
"resizeitemchange": this.handleResizeItemChange,
|
|
381
472
|
"dataaction": this.handleDataAction
|
|
382
473
|
},
|
|
474
|
+
onResizeitemchange: this.handleResizeItemChange,
|
|
475
|
+
onDataaction: this.handleDataAction,
|
|
383
476
|
style: {
|
|
384
477
|
transform: 'translateY(30px)'
|
|
385
478
|
},
|
|
@@ -387,7 +480,7 @@ var MonthViewVue2 = {
|
|
|
387
480
|
editable: this.$props.editable,
|
|
388
481
|
ignoreIsAllDay: true
|
|
389
482
|
});
|
|
390
|
-
}, _this2)])];
|
|
483
|
+
}, _this2), _this2.compDragItem && dragItemClue.call(_this2, false), _this2.compResizeItem && resizeItemClue.call(_this2, false)])];
|
|
391
484
|
} : [h("div", {
|
|
392
485
|
"class": "k-scheduler-head"
|
|
393
486
|
}, [_this2.ks.orientation === 'horizontal' ? h(HorizontalResourceIterator, {
|
|
@@ -506,10 +599,14 @@ var MonthViewVue2 = {
|
|
|
506
599
|
range: item.range,
|
|
507
600
|
isException: item.isException,
|
|
508
601
|
isRecurring: item.isRecurring,
|
|
509
|
-
|
|
602
|
+
onDragitemchange: this.handleDragItemChange,
|
|
510
603
|
on: this.v3 ? undefined : {
|
|
604
|
+
"dragitemchange": this.handleDragItemChange,
|
|
605
|
+
"resizeitemchange": this.handleResizeItemChange,
|
|
511
606
|
"dataaction": this.handleDataAction
|
|
512
607
|
},
|
|
608
|
+
onResizeitemchange: this.handleResizeItemChange,
|
|
609
|
+
onDataaction: this.handleDataAction,
|
|
513
610
|
style: {
|
|
514
611
|
transform: 'translateY(30px)'
|
|
515
612
|
},
|
|
@@ -517,12 +614,18 @@ var MonthViewVue2 = {
|
|
|
517
614
|
editable: this.$props.editable,
|
|
518
615
|
ignoreIsAllDay: true
|
|
519
616
|
});
|
|
520
|
-
}, _this2)])])
|
|
617
|
+
}, _this2), _this2.compDragItem && dragItemClue.call(_this2, false), _this2.compResizeItem && resizeItemClue.call(_this2, false)])])
|
|
521
618
|
);
|
|
522
619
|
},
|
|
523
620
|
methods: {
|
|
524
621
|
handleDataAction: function handleDataAction(action) {
|
|
525
622
|
this.$emit('dataaction', action);
|
|
623
|
+
},
|
|
624
|
+
handleDragItemChange: function handleDragItemChange(item) {
|
|
625
|
+
this.currentDragItem = item;
|
|
626
|
+
},
|
|
627
|
+
handleResizeItemChange: function handleResizeItemChange(item) {
|
|
628
|
+
this.currentResizeItem = item;
|
|
526
629
|
}
|
|
527
630
|
}
|
|
528
631
|
};
|
|
@@ -121,6 +121,10 @@ export interface MultiDayTimelineViewProps extends SchedulerViewProps {
|
|
|
121
121
|
* Overrides the `viewSlot` prop of the Scheduler for the specified view only.
|
|
122
122
|
*/
|
|
123
123
|
viewSlot?: any;
|
|
124
|
+
/**
|
|
125
|
+
* Overrides the `resizeHint` of the event.
|
|
126
|
+
*/
|
|
127
|
+
resizeHint?: any;
|
|
124
128
|
/**
|
|
125
129
|
* Overrides the `editSlot` prop of the Scheduler for the specified view only.
|
|
126
130
|
*/
|
|
@@ -33,6 +33,8 @@ import { TimelineViewBody } from './TimelineViewBody';
|
|
|
33
33
|
import { BORDER_WIDTH } from '../../constants';
|
|
34
34
|
import { provideIntlService } from '@progress/kendo-vue-intl';
|
|
35
35
|
import { SchedulerEditItem } from '../../items/SchedulerEditItem';
|
|
36
|
+
import { SchedulerResize } from '../common/SchedulerResize';
|
|
37
|
+
import { SchedulerDrag } from '../../views/common/SchedulerDrag';
|
|
36
38
|
import { DateHeaderCell } from '../../components/DateHeaderCell';
|
|
37
39
|
import { TimeHeaderCell } from '../../components/TimeHeaderCell';
|
|
38
40
|
var TIME_FORMAT = 't';
|
|
@@ -53,6 +55,18 @@ var MultiDayTimelineViewVue2 = {
|
|
|
53
55
|
type: Boolean,
|
|
54
56
|
default: true
|
|
55
57
|
},
|
|
58
|
+
dragItem: {
|
|
59
|
+
type: Object,
|
|
60
|
+
default: function _default() {
|
|
61
|
+
return undefined;
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
resizeItem: {
|
|
65
|
+
type: Object,
|
|
66
|
+
default: function _default() {
|
|
67
|
+
return undefined;
|
|
68
|
+
}
|
|
69
|
+
},
|
|
56
70
|
showWorkHours: {
|
|
57
71
|
type: Boolean,
|
|
58
72
|
default: true
|
|
@@ -123,6 +137,7 @@ var MultiDayTimelineViewVue2 = {
|
|
|
123
137
|
timeHeaderCell: [String, Function, Object],
|
|
124
138
|
slotRender: [String, Function, Object],
|
|
125
139
|
viewSlot: [String, Function, Object],
|
|
140
|
+
resizeHint: [String, Function, Object],
|
|
126
141
|
item: [String, Function, Object],
|
|
127
142
|
viewItem: [String, Function, Object],
|
|
128
143
|
editable: {
|
|
@@ -130,6 +145,12 @@ var MultiDayTimelineViewVue2 = {
|
|
|
130
145
|
default: false
|
|
131
146
|
}
|
|
132
147
|
},
|
|
148
|
+
data: function data() {
|
|
149
|
+
return {
|
|
150
|
+
currentDragItem: undefined,
|
|
151
|
+
currentResizeItem: undefined
|
|
152
|
+
};
|
|
153
|
+
},
|
|
133
154
|
inject: {
|
|
134
155
|
ks: {
|
|
135
156
|
default: null
|
|
@@ -191,6 +212,12 @@ var MultiDayTimelineViewVue2 = {
|
|
|
191
212
|
mapItemsToSlots(items, this.timelineSlots, true);
|
|
192
213
|
mapSlotsToItems(items, this.timelineSlots, true);
|
|
193
214
|
return items;
|
|
215
|
+
},
|
|
216
|
+
compDragItem: function compDragItem() {
|
|
217
|
+
return this.dragItem !== undefined ? this.dragItem : this.currentDragItem;
|
|
218
|
+
},
|
|
219
|
+
compResizeItem: function compResizeItem() {
|
|
220
|
+
return this.resizeItem !== undefined ? this.resizeItem : this.currentResizeItem;
|
|
194
221
|
}
|
|
195
222
|
},
|
|
196
223
|
mounted: function mounted() {
|
|
@@ -249,6 +276,73 @@ var MultiDayTimelineViewVue2 = {
|
|
|
249
276
|
var timelineSlots = __spreadArrays(this.timelineSlots);
|
|
250
277
|
|
|
251
278
|
var width = (this.ks.orientation === 'horizontal' ? timelineSlots.length : timelineSlots.length / this.ks.groups.length) * (this.$props.columnWidth + BORDER_WIDTH);
|
|
279
|
+
|
|
280
|
+
var dragItemClue = function dragItemClue(vertical) {
|
|
281
|
+
return this.compDragItem && this.$props.editable.drag && (Array.isArray(this.compDragItem) ? this.compDragItem.map(function (di, idx) {
|
|
282
|
+
return h(SchedulerDrag, {
|
|
283
|
+
key: idx,
|
|
284
|
+
ignoreIsAllDay: true,
|
|
285
|
+
attrs: this.v3 ? undefined : {
|
|
286
|
+
ignoreIsAllDay: true,
|
|
287
|
+
dataItem: di,
|
|
288
|
+
vertical: vertical,
|
|
289
|
+
item: this.$props.dataItem
|
|
290
|
+
},
|
|
291
|
+
dataItem: di,
|
|
292
|
+
vertical: vertical,
|
|
293
|
+
item: this.$props.dataItem
|
|
294
|
+
});
|
|
295
|
+
}, this) : h(SchedulerDrag, {
|
|
296
|
+
ignoreIsAllDay: true,
|
|
297
|
+
attrs: this.v3 ? undefined : {
|
|
298
|
+
ignoreIsAllDay: true,
|
|
299
|
+
dataItem: this.compDragItem,
|
|
300
|
+
vertical: vertical,
|
|
301
|
+
item: this.$props.dataItem
|
|
302
|
+
},
|
|
303
|
+
dataItem: this.compDragItem,
|
|
304
|
+
vertical: vertical,
|
|
305
|
+
item: this.$props.dataItem
|
|
306
|
+
}));
|
|
307
|
+
};
|
|
308
|
+
|
|
309
|
+
var resizeItemClue = function resizeItemClue(vertical) {
|
|
310
|
+
return this.compResizeItem && this.editable.resize && (Array.isArray(this.compResizeItem) ? this.compResizeItem.map(function (ri, idx) {
|
|
311
|
+
return h(SchedulerResize, {
|
|
312
|
+
key: idx,
|
|
313
|
+
format: this.$props.format,
|
|
314
|
+
attrs: this.v3 ? undefined : {
|
|
315
|
+
format: this.$props.format,
|
|
316
|
+
ignoreIsAllDay: true,
|
|
317
|
+
dataItem: ri,
|
|
318
|
+
viewItem: this.$props.viewItem,
|
|
319
|
+
item: this.$props.item,
|
|
320
|
+
vertical: vertical
|
|
321
|
+
},
|
|
322
|
+
ignoreIsAllDay: true,
|
|
323
|
+
dataItem: ri,
|
|
324
|
+
viewItem: this.$props.viewItem,
|
|
325
|
+
item: this.$props.item,
|
|
326
|
+
vertical: vertical
|
|
327
|
+
});
|
|
328
|
+
}, this) : h(SchedulerResize, {
|
|
329
|
+
format: this.$props.format,
|
|
330
|
+
attrs: this.v3 ? undefined : {
|
|
331
|
+
format: this.$props.format,
|
|
332
|
+
ignoreIsAllDay: true,
|
|
333
|
+
dataItem: this.compResizeItem,
|
|
334
|
+
viewItem: this.$props.viewItem,
|
|
335
|
+
item: this.$props.item,
|
|
336
|
+
vertical: vertical
|
|
337
|
+
},
|
|
338
|
+
ignoreIsAllDay: true,
|
|
339
|
+
dataItem: this.compResizeItem,
|
|
340
|
+
viewItem: this.$props.viewItem,
|
|
341
|
+
item: this.$props.item,
|
|
342
|
+
vertical: vertical
|
|
343
|
+
}));
|
|
344
|
+
};
|
|
345
|
+
|
|
252
346
|
var head = [h("div", {
|
|
253
347
|
"class": "k-scheduler-row"
|
|
254
348
|
}, [this.ranges.map(function (range, rangeIndex) {
|
|
@@ -275,15 +369,16 @@ var MultiDayTimelineViewVue2 = {
|
|
|
275
369
|
return s.group.index === FIRST_INDEX && s.range.index === rangeIndex;
|
|
276
370
|
}).map(function (slot) {
|
|
277
371
|
return slot.zonedStart.getMinutes() % slotDuration === 0 ? h(TimeHeaderCell, {
|
|
278
|
-
key: slot.index
|
|
279
|
-
,
|
|
280
|
-
format: TIME_FORMAT,
|
|
372
|
+
key: slot.index,
|
|
373
|
+
as: this.$props.timeHeaderCell,
|
|
281
374
|
attrs: this.v3 ? undefined : {
|
|
375
|
+
as: this.$props.timeHeaderCell,
|
|
282
376
|
format: TIME_FORMAT,
|
|
283
377
|
date: slot.zonedStart,
|
|
284
378
|
start: slot.zonedStart,
|
|
285
379
|
end: slot.zonedEnd
|
|
286
380
|
},
|
|
381
|
+
format: TIME_FORMAT,
|
|
287
382
|
date: slot.zonedStart,
|
|
288
383
|
start: slot.zonedStart,
|
|
289
384
|
end: slot.zonedEnd
|
|
@@ -494,17 +589,21 @@ var MultiDayTimelineViewVue2 = {
|
|
|
494
589
|
isRecurring: item.isRecurring,
|
|
495
590
|
format: 't',
|
|
496
591
|
form: this.$props.form,
|
|
497
|
-
|
|
592
|
+
onDragitemchange: this.handleDragItemChange,
|
|
498
593
|
on: this.v3 ? undefined : {
|
|
594
|
+
"dragitemchange": this.handleDragItemChange,
|
|
595
|
+
"resizeitemchange": this.handleResizeItemChange,
|
|
499
596
|
"dataaction": this.handleDataAction
|
|
500
597
|
},
|
|
598
|
+
onResizeitemchange: this.handleResizeItemChange,
|
|
599
|
+
onDataaction: this.handleDataAction,
|
|
501
600
|
item: this.$props.item,
|
|
502
601
|
viewItem: this.$props.viewItem,
|
|
503
602
|
editable: this.$props.editable,
|
|
504
603
|
ignoreIsAllDay: true,
|
|
505
604
|
vertical: false
|
|
506
605
|
});
|
|
507
|
-
}, _this2)])];
|
|
606
|
+
}, _this2), _this2.compDragItem && dragItemClue.call(_this2, false), _this2.compResizeItem && resizeItemClue.call(_this2, false)])];
|
|
508
607
|
} : [h("div", {
|
|
509
608
|
"class": 'k-scheduler-head',
|
|
510
609
|
style: {
|
|
@@ -690,22 +789,32 @@ var MultiDayTimelineViewVue2 = {
|
|
|
690
789
|
isRecurring: item.isRecurring,
|
|
691
790
|
format: 't',
|
|
692
791
|
form: this.$props.form,
|
|
693
|
-
|
|
792
|
+
onDragitemchange: this.handleDragItemChange,
|
|
694
793
|
on: this.v3 ? undefined : {
|
|
794
|
+
"dragitemchange": this.handleDragItemChange,
|
|
795
|
+
"resizeitemchange": this.handleResizeItemChange,
|
|
695
796
|
"dataaction": this.handleDataAction
|
|
696
797
|
},
|
|
798
|
+
onResizeitemchange: this.handleResizeItemChange,
|
|
799
|
+
onDataaction: this.handleDataAction,
|
|
697
800
|
item: this.$props.item,
|
|
698
801
|
viewItem: this.$props.viewItem,
|
|
699
802
|
editable: this.$props.editable,
|
|
700
803
|
ignoreIsAllDay: true,
|
|
701
804
|
vertical: false
|
|
702
805
|
});
|
|
703
|
-
}, _this2)])])
|
|
806
|
+
}, _this2), _this2.compDragItem && dragItemClue.call(_this2, false), _this2.compResizeItem && resizeItemClue.call(_this2, false)])])
|
|
704
807
|
);
|
|
705
808
|
},
|
|
706
809
|
methods: {
|
|
707
810
|
handleDataAction: function handleDataAction(action) {
|
|
708
811
|
this.$emit('dataaction', action);
|
|
812
|
+
},
|
|
813
|
+
handleDragItemChange: function handleDragItemChange(item) {
|
|
814
|
+
this.currentDragItem = item;
|
|
815
|
+
},
|
|
816
|
+
handleResizeItemChange: function handleResizeItemChange(item) {
|
|
817
|
+
this.currentResizeItem = item;
|
|
709
818
|
}
|
|
710
819
|
}
|
|
711
820
|
};
|
|
@@ -91,10 +91,23 @@ var TimelineViewVue2 = {
|
|
|
91
91
|
type: Number,
|
|
92
92
|
default: 100
|
|
93
93
|
},
|
|
94
|
+
dragItem: {
|
|
95
|
+
type: Object,
|
|
96
|
+
default: function _default() {
|
|
97
|
+
return undefined;
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
resizeItem: {
|
|
101
|
+
type: Object,
|
|
102
|
+
default: function _default() {
|
|
103
|
+
return undefined;
|
|
104
|
+
}
|
|
105
|
+
},
|
|
94
106
|
dateHeaderCell: [String, Function, Object],
|
|
95
107
|
timeHeaderCell: [String, Function, Object],
|
|
96
108
|
slotRender: [String, Function, Object],
|
|
97
109
|
viewSlot: [String, Function, Object],
|
|
110
|
+
resizeHint: [String, Function, Object],
|
|
98
111
|
item: [String, Function, Object],
|
|
99
112
|
viewItem: [String, Function, Object],
|
|
100
113
|
editable: [Object, Boolean]
|
|
@@ -113,6 +126,8 @@ var TimelineViewVue2 = {
|
|
|
113
126
|
name: this.$props.name,
|
|
114
127
|
attrs: this.v3 ? undefined : {
|
|
115
128
|
name: this.$props.name,
|
|
129
|
+
dragItem: this.$props.dragItem,
|
|
130
|
+
resizeItem: this.$props.resizeItem,
|
|
116
131
|
dateRange: this.$props.dateRange,
|
|
117
132
|
step: this.$props.step,
|
|
118
133
|
numberOfDays: this.$props.numberOfDays,
|
|
@@ -134,10 +149,13 @@ var TimelineViewVue2 = {
|
|
|
134
149
|
dateHeaderCell: this.$props.dateHeaderCell,
|
|
135
150
|
slotRender: this.$props.slotRender,
|
|
136
151
|
viewSlot: this.$props.viewSlot,
|
|
152
|
+
resizeHint: this.$props.resizeHint,
|
|
137
153
|
item: this.$props.item,
|
|
138
154
|
viewItem: this.$props.viewItem,
|
|
139
155
|
editable: this.$props.editable
|
|
140
156
|
},
|
|
157
|
+
dragItem: this.$props.dragItem,
|
|
158
|
+
resizeItem: this.$props.resizeItem,
|
|
141
159
|
dateRange: this.$props.dateRange,
|
|
142
160
|
step: this.$props.step,
|
|
143
161
|
numberOfDays: this.$props.numberOfDays,
|
|
@@ -159,6 +177,7 @@ var TimelineViewVue2 = {
|
|
|
159
177
|
dateHeaderCell: this.$props.dateHeaderCell,
|
|
160
178
|
slotRender: this.$props.slotRender,
|
|
161
179
|
viewSlot: this.$props.viewSlot,
|
|
180
|
+
resizeHint: this.$props.resizeHint,
|
|
162
181
|
item: this.$props.item,
|
|
163
182
|
viewItem: this.$props.viewItem,
|
|
164
183
|
editable: this.$props.editable,
|
|
@@ -88,6 +88,7 @@ var WeekViewVue2 = {
|
|
|
88
88
|
timeHeaderCell: [String, Function, Object],
|
|
89
89
|
slotRender: [String, Function, Object],
|
|
90
90
|
viewSlot: [String, Function, Object],
|
|
91
|
+
resizeHint: [String, Function, Object],
|
|
91
92
|
item: [String, Function, Object],
|
|
92
93
|
viewItem: [String, Function, Object],
|
|
93
94
|
editable: {
|
|
@@ -138,6 +139,7 @@ var WeekViewVue2 = {
|
|
|
138
139
|
timeHeaderCell: this.$props.timeHeaderCell,
|
|
139
140
|
slotRender: this.$props.slotRender,
|
|
140
141
|
viewSlot: this.$props.viewSlot,
|
|
142
|
+
resizeHint: this.$props.resizeHint,
|
|
141
143
|
item: this.$props.item,
|
|
142
144
|
slotItem: this.$props.slotItem,
|
|
143
145
|
viewItem: this.$props.viewItem,
|
|
@@ -164,6 +166,7 @@ var WeekViewVue2 = {
|
|
|
164
166
|
timeHeaderCell: this.$props.timeHeaderCell,
|
|
165
167
|
slotRender: this.$props.slotRender,
|
|
166
168
|
viewSlot: this.$props.viewSlot,
|
|
169
|
+
resizeHint: this.$props.resizeHint,
|
|
167
170
|
item: this.$props.item,
|
|
168
171
|
slotItem: this.$props.slotItem,
|
|
169
172
|
viewItem: this.$props.viewItem,
|
|
@@ -78,6 +78,7 @@ var WorkWeekViewVue2 = {
|
|
|
78
78
|
timeHeaderCell: [String, Function, Object],
|
|
79
79
|
slotRender: [String, Function, Object],
|
|
80
80
|
viewSlot: [String, Function, Object],
|
|
81
|
+
resizeHint: [String, Function, Object],
|
|
81
82
|
item: [String, Function, Object],
|
|
82
83
|
viewItem: [String, Function, Object],
|
|
83
84
|
editable: {
|
|
@@ -122,6 +123,7 @@ var WorkWeekViewVue2 = {
|
|
|
122
123
|
step: DAYS_IN_WEEK_COUNT,
|
|
123
124
|
slotRender: this.$props.slotRender,
|
|
124
125
|
viewSlot: this.$props.viewSlot,
|
|
126
|
+
resizeHint: this.$props.resizeHint,
|
|
125
127
|
slotItem: this.$props.slotItem,
|
|
126
128
|
item: this.$props.item,
|
|
127
129
|
viewItem: this.$props.viewItem,
|
|
@@ -140,6 +142,7 @@ var WorkWeekViewVue2 = {
|
|
|
140
142
|
step: DAYS_IN_WEEK_COUNT,
|
|
141
143
|
slotRender: this.$props.slotRender,
|
|
142
144
|
viewSlot: this.$props.viewSlot,
|
|
145
|
+
resizeHint: this.$props.resizeHint,
|
|
143
146
|
slotItem: this.$props.slotItem,
|
|
144
147
|
item: this.$props.item,
|
|
145
148
|
viewItem: this.$props.viewItem,
|