@syncfusion/ej2-schedule 19.3.55 → 19.4.38
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/.github/PULL_REQUEST_TEMPLATE/Bug.md +63 -0
- package/.github/PULL_REQUEST_TEMPLATE/Feature.md +39 -0
- package/CHANGELOG.md +24 -1
- package/dist/ej2-schedule.umd.min.js +2 -2
- package/dist/ej2-schedule.umd.min.js.map +1 -1
- package/dist/es6/ej2-schedule.es2015.js +423 -101
- package/dist/es6/ej2-schedule.es2015.js.map +1 -1
- package/dist/es6/ej2-schedule.es5.js +427 -108
- package/dist/es6/ej2-schedule.es5.js.map +1 -1
- package/dist/global/ej2-schedule.min.js +2 -2
- package/dist/global/ej2-schedule.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +15 -15
- package/src/recurrence-editor/recurrence-editor.js +2 -2
- package/src/schedule/actions/drag.js +12 -4
- package/src/schedule/actions/keyboard.d.ts +7 -0
- package/src/schedule/actions/keyboard.js +197 -28
- package/src/schedule/base/interface.d.ts +12 -0
- package/src/schedule/base/resource.js +1 -0
- package/src/schedule/base/schedule-model.d.ts +89 -20
- package/src/schedule/base/schedule.d.ts +88 -19
- package/src/schedule/base/schedule.js +14 -3
- package/src/schedule/base/util.d.ts +1 -0
- package/src/schedule/base/util.js +1 -0
- package/src/schedule/event-renderer/event-base.d.ts +1 -0
- package/src/schedule/event-renderer/event-base.js +18 -2
- package/src/schedule/event-renderer/inline-edit.js +8 -5
- package/src/schedule/event-renderer/month.js +1 -1
- package/src/schedule/event-renderer/timeline-view.js +4 -0
- package/src/schedule/event-renderer/vertical-view.js +9 -6
- package/src/schedule/event-renderer/year.js +1 -1
- package/src/schedule/exports/excel-export.d.ts +2 -1
- package/src/schedule/exports/excel-export.js +21 -18
- package/src/schedule/models/event-settings-model.d.ts +17 -9
- package/src/schedule/models/event-settings.d.ts +15 -8
- package/src/schedule/models/event-settings.js +6 -3
- package/src/schedule/models/views-model.d.ts +19 -0
- package/src/schedule/models/views.d.ts +17 -0
- package/src/schedule/models/views.js +6 -0
- package/src/schedule/popups/quick-popups.js +3 -0
- package/src/schedule/renderer/agenda.js +2 -1
- package/src/schedule/renderer/header-renderer.d.ts +1 -0
- package/src/schedule/renderer/header-renderer.js +22 -8
- package/src/schedule/renderer/month.d.ts +4 -0
- package/src/schedule/renderer/month.js +68 -19
- package/src/schedule/renderer/timeline-year.js +3 -0
- package/src/schedule/renderer/view-base.js +9 -0
- package/src/schedule/renderer/year.d.ts +2 -2
- package/src/schedule/renderer/year.js +24 -6
- package/styles/bootstrap-dark.css +108 -27
- package/styles/bootstrap.css +105 -27
- package/styles/bootstrap4.css +117 -62
- package/styles/bootstrap5-dark.css +118 -67
- package/styles/bootstrap5.css +118 -67
- package/styles/fabric-dark.css +108 -26
- package/styles/fabric.css +109 -26
- package/styles/highcontrast-light.css +104 -26
- package/styles/highcontrast.css +109 -28
- package/styles/material-dark.css +110 -32
- package/styles/material.css +103 -25
- package/styles/recurrence-editor/_bootstrap-dark-definition.scss +7 -0
- package/styles/recurrence-editor/_bootstrap-definition.scss +7 -0
- package/styles/recurrence-editor/_bootstrap4-definition.scss +7 -0
- package/styles/recurrence-editor/_bootstrap5-definition.scss +7 -0
- package/styles/recurrence-editor/_fabric-dark-definition.scss +8 -0
- package/styles/recurrence-editor/_fabric-definition.scss +7 -0
- package/styles/recurrence-editor/_fluent-definition.scss +15 -0
- package/styles/recurrence-editor/_highcontrast-definition.scss +7 -0
- package/styles/recurrence-editor/_highcontrast-light-definition.scss +7 -0
- package/styles/recurrence-editor/_layout.scss +20 -4
- package/styles/recurrence-editor/_material-dark-definition.scss +7 -0
- package/styles/recurrence-editor/_material-definition.scss +7 -0
- package/styles/recurrence-editor/_tailwind-definition.scss +15 -8
- package/styles/recurrence-editor/bootstrap-dark.css +20 -4
- package/styles/recurrence-editor/bootstrap.css +20 -4
- package/styles/recurrence-editor/bootstrap4.css +20 -4
- package/styles/recurrence-editor/bootstrap5-dark.css +20 -4
- package/styles/recurrence-editor/bootstrap5.css +20 -4
- package/styles/recurrence-editor/fabric-dark.css +20 -4
- package/styles/recurrence-editor/fabric.css +20 -4
- package/styles/recurrence-editor/highcontrast-light.css +20 -4
- package/styles/recurrence-editor/highcontrast.css +20 -4
- package/styles/recurrence-editor/material-dark.css +20 -4
- package/styles/recurrence-editor/material.css +20 -4
- package/styles/recurrence-editor/tailwind-dark.css +20 -4
- package/styles/recurrence-editor/tailwind.css +20 -4
- package/styles/schedule/_bootstrap-dark-definition.scss +22 -1
- package/styles/schedule/_bootstrap-definition.scss +22 -1
- package/styles/schedule/_bootstrap4-definition.scss +23 -1
- package/styles/schedule/_bootstrap5-definition.scss +145 -119
- package/styles/schedule/_fabric-dark-definition.scss +22 -1
- package/styles/schedule/_fabric-definition.scss +22 -1
- package/styles/schedule/_fluent-definition.scss +218 -0
- package/styles/schedule/_highcontrast-definition.scss +22 -1
- package/styles/schedule/_highcontrast-light-definition.scss +22 -1
- package/styles/schedule/_layout.scss +95 -158
- package/styles/schedule/_material-dark-definition.scss +22 -1
- package/styles/schedule/_material-definition.scss +21 -0
- package/styles/schedule/_tailwind-definition.scss +216 -195
- package/styles/schedule/_theme.scss +1 -1
- package/styles/schedule/bootstrap-dark.css +88 -23
- package/styles/schedule/bootstrap.css +85 -23
- package/styles/schedule/bootstrap4.css +97 -58
- package/styles/schedule/bootstrap5-dark.css +98 -63
- package/styles/schedule/bootstrap5.css +98 -63
- package/styles/schedule/fabric-dark.css +88 -22
- package/styles/schedule/fabric.css +89 -22
- package/styles/schedule/highcontrast-light.css +84 -22
- package/styles/schedule/highcontrast.css +89 -24
- package/styles/schedule/icons/_fluent.scss +231 -0
- package/styles/schedule/icons/_tailwind.scss +231 -231
- package/styles/schedule/material-dark.css +90 -28
- package/styles/schedule/material.css +83 -21
- package/styles/schedule/tailwind-dark.css +94 -52
- package/styles/schedule/tailwind.css +94 -52
- package/styles/tailwind-dark.css +114 -56
- package/styles/tailwind.css +114 -56
|
@@ -730,7 +730,8 @@ var EventBase = /** @class */ (function () {
|
|
|
730
730
|
EventBase.prototype.eventClick = function (eventData) {
|
|
731
731
|
var _this = this;
|
|
732
732
|
var target = eventData.target;
|
|
733
|
-
if (target.classList.contains(cls.DRAG_CLONE_CLASS) || target.classList.contains(cls.RESIZE_CLONE_CLASS)
|
|
733
|
+
if (target.classList.contains(cls.DRAG_CLONE_CLASS) || target.classList.contains(cls.RESIZE_CLONE_CLASS) ||
|
|
734
|
+
target.classList.contains(cls.INLINE_SUBJECT_CLASS)) {
|
|
734
735
|
return;
|
|
735
736
|
}
|
|
736
737
|
if ((eventData.ctrlKey || eventData.metaKey) && eventData.which === 1 && this.parent.keyboardInteractionModule) {
|
|
@@ -1211,13 +1212,28 @@ var EventBase = /** @class */ (function () {
|
|
|
1211
1212
|
indentHeight = dateHeader.offsetHeight - indentHeight;
|
|
1212
1213
|
this.parent.element.querySelector('.' + cls.ALLDAY_CELLS_CLASS).style.height = (indentHeight / 12) + 'em';
|
|
1213
1214
|
var content = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
|
|
1214
|
-
if (this.parent.uiStateValues.expand && (content.offsetWidth - content.clientWidth > 0 || heightPropChanged)) {
|
|
1215
|
+
if (this.parent.uiStateValues.expand && (content.offsetWidth - content.clientWidth > 0 || heightPropChanged || this.parent.element.classList.contains(cls.DEVICE_CLASS))) {
|
|
1215
1216
|
addClass([dateHeader], cls.ALLDAY_APPOINTMENT_SCROLL);
|
|
1216
1217
|
}
|
|
1217
1218
|
else {
|
|
1218
1219
|
removeClass([dateHeader], cls.ALLDAY_APPOINTMENT_SCROLL);
|
|
1219
1220
|
}
|
|
1220
1221
|
};
|
|
1222
|
+
EventBase.prototype.updateEventMinimumDuration = function (startEndHours, startTime, endTime) {
|
|
1223
|
+
var eventDuration = (util.getUniversalTime(endTime) - util.getUniversalTime(startTime)) / util.MS_PER_MINUTE;
|
|
1224
|
+
if (eventDuration < this.parent.eventSettings.minimumEventDuration) {
|
|
1225
|
+
var tempEnd = new Date(startTime);
|
|
1226
|
+
tempEnd.setMinutes(tempEnd.getMinutes() + this.parent.eventSettings.minimumEventDuration);
|
|
1227
|
+
endTime = tempEnd;
|
|
1228
|
+
if (endTime.getTime() > startEndHours.endHour.getTime()) {
|
|
1229
|
+
var tempStart = new Date(startEndHours.endHour.getTime());
|
|
1230
|
+
tempStart.setMinutes(tempStart.getMinutes() - this.parent.eventSettings.minimumEventDuration);
|
|
1231
|
+
startTime = tempStart;
|
|
1232
|
+
endTime = startEndHours.endHour;
|
|
1233
|
+
}
|
|
1234
|
+
}
|
|
1235
|
+
return { startDate: startTime, endDate: endTime };
|
|
1236
|
+
};
|
|
1221
1237
|
EventBase.prototype.unWireEvents = function () {
|
|
1222
1238
|
var appElements = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));
|
|
1223
1239
|
for (var _i = 0, appElements_1 = appElements; _i < appElements_1.length; _i++) {
|
|
@@ -18,11 +18,11 @@ var InlineEdit = /** @class */ (function () {
|
|
|
18
18
|
if (this.parent.quickPopup) {
|
|
19
19
|
this.parent.quickPopup.quickPopupHide();
|
|
20
20
|
}
|
|
21
|
-
var moreWrapper = this.parent.element.querySelector('.e-more-popup-wrapper ');
|
|
22
|
-
if (moreWrapper && moreWrapper.classList.contains(cls.POPUP_OPEN)) {
|
|
23
|
-
this.parent.quickPopup.morePopup.hide();
|
|
24
|
-
}
|
|
25
21
|
if (args.type === 'Cell') {
|
|
22
|
+
var moreWrapper = this.parent.element.querySelector('.' + cls.MORE_POPUP_WRAPPER_CLASS);
|
|
23
|
+
if (moreWrapper && moreWrapper.classList.contains(cls.POPUP_OPEN)) {
|
|
24
|
+
this.parent.quickPopup.morePopup.hide();
|
|
25
|
+
}
|
|
26
26
|
this.removeInlineAppointmentElement();
|
|
27
27
|
this.cellEdit(args);
|
|
28
28
|
}
|
|
@@ -85,8 +85,8 @@ var InlineEdit = /** @class */ (function () {
|
|
|
85
85
|
'.e-inner-wrap' : '.e-appointment-details';
|
|
86
86
|
args.element.querySelector(elementSelector).insertBefore(inlineSubject, timeEle);
|
|
87
87
|
}
|
|
88
|
+
inlineSubject.focus();
|
|
88
89
|
}
|
|
89
|
-
inlineSubject.focus();
|
|
90
90
|
inlineSubject.setSelectionRange(subject.length, subject.length);
|
|
91
91
|
};
|
|
92
92
|
InlineEdit.prototype.createVerticalViewInline = function (saveObj, dayIndex, resIndex, daysCount) {
|
|
@@ -182,6 +182,9 @@ var InlineEdit = /** @class */ (function () {
|
|
|
182
182
|
if (target && target.value !== '') {
|
|
183
183
|
this.inlineCrudActions(target);
|
|
184
184
|
}
|
|
185
|
+
else {
|
|
186
|
+
this.removeInlineAppointmentElement();
|
|
187
|
+
}
|
|
185
188
|
};
|
|
186
189
|
InlineEdit.prototype.inlineCrudActions = function (target) {
|
|
187
190
|
if (closest(target, '.' + cls.INLINE_APPOINTMENT_CLASS)) {
|
|
@@ -175,7 +175,7 @@ var MonthEvent = /** @class */ (function (_super) {
|
|
|
175
175
|
this.cellHeight = cellDetail.height;
|
|
176
176
|
this.dateRender = dateRender;
|
|
177
177
|
var filteredDates = this.getRenderedDates(dateRender);
|
|
178
|
-
this.getSlotDates(workDays);
|
|
178
|
+
this.getSlotDates(workDays || this.parent.activeViewOptions.workDays);
|
|
179
179
|
this.processBlockEvents(blockList, resIndex, resData);
|
|
180
180
|
for (var _i = 0, eventsList_1 = eventsList; _i < eventsList_1.length; _i++) {
|
|
181
181
|
var event_1 = eventsList_1[_i];
|
|
@@ -141,6 +141,10 @@ var TimelineEvent = /** @class */ (function (_super) {
|
|
|
141
141
|
var eventData = event.data;
|
|
142
142
|
startTime = this.getStartTime(event, eventData);
|
|
143
143
|
endTime = this.getEndTime(event, eventData);
|
|
144
|
+
var startEndHours = util.getStartEndHours(event[this.fields.startTime], this.startHour, this.endHour);
|
|
145
|
+
var eventDates = this.updateEventMinimumDuration(startEndHours, startTime, endTime);
|
|
146
|
+
startTime = eventDates.startDate;
|
|
147
|
+
endTime = eventDates.endDate;
|
|
144
148
|
this.day = this.parent.getIndexOfDate(this.dateRender, util.resetTime(new Date(startTime.getTime())));
|
|
145
149
|
if (this.day < 0) {
|
|
146
150
|
return;
|
|
@@ -420,18 +420,21 @@ var VerticalEvent = /** @class */ (function (_super) {
|
|
|
420
420
|
if (currentDay.length === 0) {
|
|
421
421
|
currentDate = util.resetTime(renderedDate[0]);
|
|
422
422
|
}
|
|
423
|
-
var
|
|
424
|
-
var
|
|
423
|
+
var field = this.parent.eventFields;
|
|
424
|
+
var schedule = util.getStartEndHours(currentDate, this.startHour, this.endHour);
|
|
425
425
|
var event = extend({}, record, null, true);
|
|
426
426
|
event.isSpanned = { isBottom: false, isTop: false };
|
|
427
|
-
if (record[
|
|
428
|
-
event[
|
|
427
|
+
if (record[field.startTime].getTime() < schedule.startHour.getTime()) {
|
|
428
|
+
event[field.startTime] = schedule.startHour;
|
|
429
429
|
event.isSpanned.isTop = true;
|
|
430
430
|
}
|
|
431
|
-
if (record[
|
|
432
|
-
event[
|
|
431
|
+
if (record[field.endTime].getTime() > schedule.endHour.getTime()) {
|
|
432
|
+
event[field.endTime] = schedule.endHour;
|
|
433
433
|
event.isSpanned.isBottom = true;
|
|
434
434
|
}
|
|
435
|
+
var eventDates = this.updateEventMinimumDuration(schedule, event[field.startTime], event[field.endTime]);
|
|
436
|
+
event[field.startTime] = eventDates.startDate;
|
|
437
|
+
event[field.endTime] = eventDates.endDate;
|
|
435
438
|
return event;
|
|
436
439
|
};
|
|
437
440
|
VerticalEvent.prototype.renderAllDayEvents = function (eventObj, dayIndex, resource, dayCount, inline) {
|
|
@@ -489,7 +489,7 @@ var YearEvent = /** @class */ (function (_super) {
|
|
|
489
489
|
}
|
|
490
490
|
}
|
|
491
491
|
else {
|
|
492
|
-
if (((util.resetTime(appStart).getTime() <= dateStart) && (util.resetTime(appEnd).getTime()
|
|
492
|
+
if (((util.resetTime(appStart).getTime() <= dateStart) && (util.resetTime(appEnd).getTime() >= dateStart)) ||
|
|
493
493
|
(util.resetTime(appStart).getTime() >= dateStart) && (util.resetTime(appEnd).getTime() <= dateEnd)) {
|
|
494
494
|
appointmentsList.push(app);
|
|
495
495
|
}
|
|
@@ -6,8 +6,9 @@ import { ExportOptions } from '../base/interface';
|
|
|
6
6
|
export declare class ExcelExport {
|
|
7
7
|
private parent;
|
|
8
8
|
constructor(parent: Schedule);
|
|
9
|
-
initializeExcelExport(excelExportOptions
|
|
9
|
+
initializeExcelExport(excelExportOptions?: ExportOptions): void;
|
|
10
10
|
private processWorkbook;
|
|
11
|
+
private getExportColumns;
|
|
11
12
|
protected getModuleName(): string;
|
|
12
13
|
destroy(): void;
|
|
13
14
|
}
|
|
@@ -9,10 +9,8 @@ var ExcelExport = /** @class */ (function () {
|
|
|
9
9
|
this.parent = parent;
|
|
10
10
|
}
|
|
11
11
|
ExcelExport.prototype.initializeExcelExport = function (excelExportOptions) {
|
|
12
|
-
|
|
13
|
-
var
|
|
14
|
-
return _this.parent.eventFields[field];
|
|
15
|
-
});
|
|
12
|
+
if (excelExportOptions === void 0) { excelExportOptions = {}; }
|
|
13
|
+
var exportColumns = this.getExportColumns(excelExportOptions);
|
|
16
14
|
var exportName = excelExportOptions.fileName || 'Schedule';
|
|
17
15
|
var exportType = excelExportOptions.exportType || 'xlsx';
|
|
18
16
|
var isIncludeOccurrences = excelExportOptions.includeOccurrences || false;
|
|
@@ -24,39 +22,44 @@ var ExcelExport = /** @class */ (function () {
|
|
|
24
22
|
else {
|
|
25
23
|
eventCollection = !isIncludeOccurrences ? this.parent.eventsData : this.parent.eventsProcessed;
|
|
26
24
|
}
|
|
27
|
-
this.processWorkbook(
|
|
25
|
+
this.processWorkbook(exportColumns, exportName, exportType, eventCollection);
|
|
28
26
|
};
|
|
29
27
|
ExcelExport.prototype.processWorkbook = function (fields, name, type, eventCollection) {
|
|
30
28
|
var _this = this;
|
|
31
29
|
var columns = [];
|
|
32
30
|
var rows = [];
|
|
33
31
|
var columnHeader = [];
|
|
34
|
-
fields.forEach(function (field, i) {
|
|
32
|
+
fields.forEach(function (field, i) { columns.push({ index: i + 1, width: (field.name === 'Id' ? 50 : 150) }); });
|
|
35
33
|
var style = { fontSize: 12, borders: { color: '#E0E0E0' }, bold: true };
|
|
36
|
-
fields.forEach(function (field, i) {
|
|
34
|
+
fields.forEach(function (field, i) { columnHeader.push({ index: i + 1, value: field.text, style: style }); });
|
|
37
35
|
rows.push({ index: 1, cells: columnHeader });
|
|
38
|
-
|
|
39
|
-
var _loop_1 = function (event_1) {
|
|
36
|
+
eventCollection.forEach(function (event, i) {
|
|
40
37
|
var columnData = [];
|
|
41
38
|
fields.forEach(function (field, n) {
|
|
42
|
-
var columnRule = { index: n + 1, value:
|
|
43
|
-
if (field === _this.parent.eventFields.startTime || field === _this.parent.eventFields.endTime) {
|
|
39
|
+
var columnRule = { index: n + 1, value: event[field.name] || '' };
|
|
40
|
+
if (field.name === _this.parent.eventFields.startTime || field.name === _this.parent.eventFields.endTime) {
|
|
44
41
|
var styleRule = { fontSize: 12, numberFormat: 'm/d/yyyy h:mm AM/PM' };
|
|
45
42
|
columnRule = extend({}, columnRule, { style: styleRule }, true);
|
|
46
43
|
}
|
|
47
44
|
columnData.push(columnRule);
|
|
48
45
|
});
|
|
49
|
-
rows.push({ index: i, cells: columnData });
|
|
50
|
-
|
|
51
|
-
};
|
|
52
|
-
for (var _i = 0, eventCollection_1 = eventCollection; _i < eventCollection_1.length; _i++) {
|
|
53
|
-
var event_1 = eventCollection_1[_i];
|
|
54
|
-
_loop_1(event_1);
|
|
55
|
-
}
|
|
46
|
+
rows.push({ index: i + 2, cells: columnData });
|
|
47
|
+
});
|
|
56
48
|
var workSheet = [{ columns: columns, rows: rows }];
|
|
57
49
|
var book = new Workbook({ worksheets: workSheet }, type, this.parent.locale);
|
|
58
50
|
book.save(name + '.' + type);
|
|
59
51
|
};
|
|
52
|
+
ExcelExport.prototype.getExportColumns = function (exportOptions) {
|
|
53
|
+
var _this = this;
|
|
54
|
+
var exportColumns = exportOptions.fieldsInfo || [];
|
|
55
|
+
if (exportColumns.length === 0) {
|
|
56
|
+
var fields = exportOptions.fields || Object.keys(this.parent.eventFields).map(function (field) {
|
|
57
|
+
return _this.parent.eventFields[field];
|
|
58
|
+
});
|
|
59
|
+
fields.forEach(function (field) { exportColumns.push({ name: field, text: field }); });
|
|
60
|
+
}
|
|
61
|
+
return exportColumns;
|
|
62
|
+
};
|
|
60
63
|
ExcelExport.prototype.getModuleName = function () {
|
|
61
64
|
return 'excelExport';
|
|
62
65
|
};
|
|
@@ -48,15 +48,6 @@ export interface EventSettingsModel {
|
|
|
48
48
|
*/
|
|
49
49
|
enableTooltip?: boolean;
|
|
50
50
|
|
|
51
|
-
/**
|
|
52
|
-
* It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto tooltip.
|
|
53
|
-
* All the event fields mapped with Schedule dataSource can be accessed within this template code.
|
|
54
|
-
* {% codeBlock src="schedule/tooltip-template-api/index.ts" %}{% endcodeBlock %}
|
|
55
|
-
*
|
|
56
|
-
* @default null
|
|
57
|
-
*/
|
|
58
|
-
tooltipTemplate?: string;
|
|
59
|
-
|
|
60
51
|
/**
|
|
61
52
|
* Defines the option to render the spanned events (more than 24 hours) in either `AllDayRow` or `TimeSlot`. By default it renders in `AllDayRow`.
|
|
62
53
|
* This property is applicable for `Day`, `Week` and `WorkWeek` views only. The possible values for this property as follows
|
|
@@ -68,6 +59,23 @@ export interface EventSettingsModel {
|
|
|
68
59
|
*/
|
|
69
60
|
spannedEventPlacement?: SpannedEventPlacement;
|
|
70
61
|
|
|
62
|
+
/**
|
|
63
|
+
* Sets a minimum duration for an event where the events are rendered for this minimum duration when the duration of the event is lesser than this value.
|
|
64
|
+
* It accepts duration value in minutes. This property is only applicable when the event duration is lesser than this property duration.
|
|
65
|
+
*
|
|
66
|
+
* @default 1
|
|
67
|
+
*/
|
|
68
|
+
minimumEventDuration?: number;
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto tooltip.
|
|
72
|
+
* All the event fields mapped with Schedule dataSource can be accessed within this template code.
|
|
73
|
+
* {% codeBlock src="schedule/tooltip-template-api/index.ts" %}{% endcodeBlock %}
|
|
74
|
+
*
|
|
75
|
+
* @default null
|
|
76
|
+
*/
|
|
77
|
+
tooltipTemplate?: string;
|
|
78
|
+
|
|
71
79
|
/**
|
|
72
80
|
* Defines the resource name, to decides the color of which particular resource level is to be applied on appointments, when
|
|
73
81
|
* grouping is enabled on scheduler.
|
|
@@ -45,14 +45,6 @@ export declare class EventSettings extends ChildProperty<EventSettings> {
|
|
|
45
45
|
* @default false
|
|
46
46
|
*/
|
|
47
47
|
enableTooltip: boolean;
|
|
48
|
-
/**
|
|
49
|
-
* It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto tooltip.
|
|
50
|
-
* All the event fields mapped with Schedule dataSource can be accessed within this template code.
|
|
51
|
-
* {% codeBlock src="schedule/tooltip-template-api/index.ts" %}{% endcodeBlock %}
|
|
52
|
-
*
|
|
53
|
-
* @default null
|
|
54
|
-
*/
|
|
55
|
-
tooltipTemplate: string;
|
|
56
48
|
/**
|
|
57
49
|
* Defines the option to render the spanned events (more than 24 hours) in either `AllDayRow` or `TimeSlot`. By default it renders in `AllDayRow`.
|
|
58
50
|
* This property is applicable for `Day`, `Week` and `WorkWeek` views only. The possible values for this property as follows
|
|
@@ -63,6 +55,21 @@ export declare class EventSettings extends ChildProperty<EventSettings> {
|
|
|
63
55
|
* @default 'AllDayRow'
|
|
64
56
|
*/
|
|
65
57
|
spannedEventPlacement: SpannedEventPlacement;
|
|
58
|
+
/**
|
|
59
|
+
* Sets a minimum duration for an event where the events are rendered for this minimum duration when the duration of the event is lesser than this value.
|
|
60
|
+
* It accepts duration value in minutes. This property is only applicable when the event duration is lesser than this property duration.
|
|
61
|
+
*
|
|
62
|
+
* @default 1
|
|
63
|
+
*/
|
|
64
|
+
minimumEventDuration: number;
|
|
65
|
+
/**
|
|
66
|
+
* It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto tooltip.
|
|
67
|
+
* All the event fields mapped with Schedule dataSource can be accessed within this template code.
|
|
68
|
+
* {% codeBlock src="schedule/tooltip-template-api/index.ts" %}{% endcodeBlock %}
|
|
69
|
+
*
|
|
70
|
+
* @default null
|
|
71
|
+
*/
|
|
72
|
+
tooltipTemplate: string;
|
|
66
73
|
/**
|
|
67
74
|
* Defines the resource name, to decides the color of which particular resource level is to be applied on appointments, when
|
|
68
75
|
* grouping is enabled on scheduler.
|
|
@@ -43,12 +43,15 @@ var EventSettings = /** @class */ (function (_super) {
|
|
|
43
43
|
__decorate([
|
|
44
44
|
Property(false)
|
|
45
45
|
], EventSettings.prototype, "enableTooltip", void 0);
|
|
46
|
-
__decorate([
|
|
47
|
-
Property()
|
|
48
|
-
], EventSettings.prototype, "tooltipTemplate", void 0);
|
|
49
46
|
__decorate([
|
|
50
47
|
Property('AllDayRow')
|
|
51
48
|
], EventSettings.prototype, "spannedEventPlacement", void 0);
|
|
49
|
+
__decorate([
|
|
50
|
+
Property(1)
|
|
51
|
+
], EventSettings.prototype, "minimumEventDuration", void 0);
|
|
52
|
+
__decorate([
|
|
53
|
+
Property()
|
|
54
|
+
], EventSettings.prototype, "tooltipTemplate", void 0);
|
|
52
55
|
__decorate([
|
|
53
56
|
Property()
|
|
54
57
|
], EventSettings.prototype, "resourceColorField", void 0);
|
|
@@ -257,4 +257,23 @@ export interface ViewsModel {
|
|
|
257
257
|
*/
|
|
258
258
|
headerRows?: HeaderRowsModel[];
|
|
259
259
|
|
|
260
|
+
/**
|
|
261
|
+
* This property customizes the number of weeks that are shown in month view. By default, it shows all weeks in the current month.
|
|
262
|
+
* Use displayDate property to customize the starting week of month.
|
|
263
|
+
* {% codeBlock src='schedule/numberOfWeeks/index.md' %}{% endcodeBlock %}
|
|
264
|
+
*
|
|
265
|
+
* @default 0
|
|
266
|
+
* @aspType int
|
|
267
|
+
*/
|
|
268
|
+
numberOfWeeks?: number;
|
|
269
|
+
|
|
270
|
+
/**
|
|
271
|
+
* Specifies the starting week date at an initial rendering of month view. This property is only applicable for month view.
|
|
272
|
+
* If this property value is not set, then the month view will be rendered from the first week of the month.
|
|
273
|
+
* {% codeBlock src='schedule/displayDate/index.md' %}{% endcodeBlock %}
|
|
274
|
+
*
|
|
275
|
+
* @default null
|
|
276
|
+
*/
|
|
277
|
+
displayDate?: Date;
|
|
278
|
+
|
|
260
279
|
}
|
|
@@ -229,4 +229,21 @@ export declare class Views extends ChildProperty<Views> {
|
|
|
229
229
|
* @default []
|
|
230
230
|
*/
|
|
231
231
|
headerRows: HeaderRowsModel[];
|
|
232
|
+
/**
|
|
233
|
+
* This property customizes the number of weeks that are shown in month view. By default, it shows all weeks in the current month.
|
|
234
|
+
* Use displayDate property to customize the starting week of month.
|
|
235
|
+
* {% codeBlock src='schedule/numberOfWeeks/index.md' %}{% endcodeBlock %}
|
|
236
|
+
*
|
|
237
|
+
* @default 0
|
|
238
|
+
* @aspType int
|
|
239
|
+
*/
|
|
240
|
+
numberOfWeeks: number;
|
|
241
|
+
/**
|
|
242
|
+
* Specifies the starting week date at an initial rendering of month view. This property is only applicable for month view.
|
|
243
|
+
* If this property value is not set, then the month view will be rendered from the first week of the month.
|
|
244
|
+
* {% codeBlock src='schedule/displayDate/index.md' %}{% endcodeBlock %}
|
|
245
|
+
*
|
|
246
|
+
* @default null
|
|
247
|
+
*/
|
|
248
|
+
displayDate: Date;
|
|
232
249
|
}
|
|
@@ -113,6 +113,12 @@ var Views = /** @class */ (function (_super) {
|
|
|
113
113
|
__decorate([
|
|
114
114
|
Collection([], HeaderRows)
|
|
115
115
|
], Views.prototype, "headerRows", void 0);
|
|
116
|
+
__decorate([
|
|
117
|
+
Property(0)
|
|
118
|
+
], Views.prototype, "numberOfWeeks", void 0);
|
|
119
|
+
__decorate([
|
|
120
|
+
Property()
|
|
121
|
+
], Views.prototype, "displayDate", void 0);
|
|
116
122
|
return Views;
|
|
117
123
|
}(ChildProperty));
|
|
118
124
|
export { Views };
|
|
@@ -907,6 +907,9 @@ var QuickPopups = /** @class */ (function () {
|
|
|
907
907
|
};
|
|
908
908
|
QuickPopups.prototype.closeClick = function (event) {
|
|
909
909
|
this.dialogEvent = event;
|
|
910
|
+
if (this.parent.currentView === 'Year' && this.parent.activeCellsData && this.parent.activeCellsData.element) {
|
|
911
|
+
this.parent.selectCell(this.parent.activeCellsData.element);
|
|
912
|
+
}
|
|
910
913
|
this.quickPopupHide();
|
|
911
914
|
this.morePopup.hide();
|
|
912
915
|
};
|
|
@@ -67,7 +67,8 @@ var Agenda = /** @class */ (function (_super) {
|
|
|
67
67
|
var event_1 = _a[_i];
|
|
68
68
|
delete event_1.generatedDates;
|
|
69
69
|
}
|
|
70
|
-
var eventCollection = this.parent.activeViewOptions.allowVirtualScrolling ?
|
|
70
|
+
var eventCollection = this.parent.activeViewOptions.allowVirtualScrolling ?
|
|
71
|
+
args.processedData : this.parent.eventsProcessed;
|
|
71
72
|
if (this.parent.uiStateValues.isGroupAdaptive) {
|
|
72
73
|
var resource = this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex];
|
|
73
74
|
this.dataSource = this.parent.eventBase.filterEventsByResource(resource, this.dataSource);
|
|
@@ -36,6 +36,7 @@ export declare class HeaderRenderer {
|
|
|
36
36
|
setCalendarTimezone(): void;
|
|
37
37
|
private calculateViewIndex;
|
|
38
38
|
private toolbarClickHandler;
|
|
39
|
+
private hasSelectedDate;
|
|
39
40
|
getHeaderElement(): HTMLElement;
|
|
40
41
|
updateHeaderItems(classType: string): void;
|
|
41
42
|
previousNextIconHandler(): void;
|
|
@@ -324,8 +324,10 @@ var HeaderRenderer = /** @class */ (function () {
|
|
|
324
324
|
enableRtl: this.parent.enableRtl
|
|
325
325
|
});
|
|
326
326
|
var calendarView = this.getCalendarView();
|
|
327
|
+
var isDisplayDate = this.parent.currentView === 'Month' &&
|
|
328
|
+
!isNullOrUndefined(this.parent.activeViewOptions.displayDate) && !this.hasSelectedDate();
|
|
327
329
|
this.headerCalendar = new Calendar({
|
|
328
|
-
value: this.parent.selectedDate,
|
|
330
|
+
value: isDisplayDate ? this.parent.activeViewOptions.displayDate : this.parent.selectedDate,
|
|
329
331
|
min: this.parent.minDate,
|
|
330
332
|
max: this.parent.maxDate,
|
|
331
333
|
firstDayOfWeek: this.parent.activeViewOptions.firstDayOfWeek,
|
|
@@ -413,8 +415,13 @@ var HeaderRenderer = /** @class */ (function () {
|
|
|
413
415
|
this.parent.changeView('TimelineYear', args.originalEvent, undefined, this.calculateViewIndex(args));
|
|
414
416
|
break;
|
|
415
417
|
case 'e-today':
|
|
416
|
-
|
|
417
|
-
|
|
418
|
+
var currentTime = util.resetTime(this.parent.getCurrentTime());
|
|
419
|
+
if (this.parent.currentView === 'Agenda' || !this.parent.isSelectedDate(currentTime) ||
|
|
420
|
+
this.parent.currentView === 'Month' && this.parent.activeViewOptions.displayDate && !this.hasSelectedDate() &&
|
|
421
|
+
util.resetTime(this.parent.activeViewOptions.displayDate) !== currentTime || this.parent.currentView === 'Month' &&
|
|
422
|
+
this.parent.activeViewOptions.numberOfWeeks > 0 && !this.hasSelectedDate()
|
|
423
|
+
&& util.resetTime(util.firstDateOfMonth(this.parent.selectedDate)) !== currentTime) {
|
|
424
|
+
this.parent.changeDate(currentTime, args.originalEvent);
|
|
418
425
|
}
|
|
419
426
|
break;
|
|
420
427
|
case 'e-prev':
|
|
@@ -433,8 +440,8 @@ var HeaderRenderer = /** @class */ (function () {
|
|
|
433
440
|
var slotCount = this.parent.activeViewOptions.timeScale.slotCount;
|
|
434
441
|
var msInterval = (interval * util.MS_PER_MINUTE) / slotCount;
|
|
435
442
|
var startTime = new Date(this.parent.selectedDate.getTime());
|
|
436
|
-
var
|
|
437
|
-
startTime.setHours(
|
|
443
|
+
var currentTime_1 = this.parent.getCurrentTime();
|
|
444
|
+
startTime.setHours(currentTime_1.getHours(), (Math.round(startTime.getMinutes() / msInterval) * msInterval), 0);
|
|
438
445
|
var endTime = new Date(new Date(startTime.getTime()).setMilliseconds(startTime.getMilliseconds() + msInterval));
|
|
439
446
|
data = { startTime: startTime, endTime: endTime, isAllDay: false };
|
|
440
447
|
}
|
|
@@ -449,6 +456,11 @@ var HeaderRenderer = /** @class */ (function () {
|
|
|
449
456
|
toolbarPopUp.ej2_instances[0].hide({ name: 'SlideUp', duration: 100 });
|
|
450
457
|
}
|
|
451
458
|
};
|
|
459
|
+
HeaderRenderer.prototype.hasSelectedDate = function () {
|
|
460
|
+
var selectedTime = util.resetTime(this.parent.selectedDate).getTime();
|
|
461
|
+
return selectedTime >= this.parent.activeView.getStartDate().getTime() &&
|
|
462
|
+
selectedTime <= this.parent.activeView.getEndDate().getTime();
|
|
463
|
+
};
|
|
452
464
|
HeaderRenderer.prototype.getHeaderElement = function () {
|
|
453
465
|
return this.toolbarObj.element;
|
|
454
466
|
};
|
|
@@ -493,9 +505,11 @@ var HeaderRenderer = /** @class */ (function () {
|
|
|
493
505
|
lastDate = util.addDays(firstDate, 7 * this.parent.activeViewOptions.interval);
|
|
494
506
|
}
|
|
495
507
|
if (this.parent.currentView === 'Month') {
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
508
|
+
var isCustomMonth = !isNullOrUndefined(this.parent.activeViewOptions.displayDate) ||
|
|
509
|
+
this.parent.activeViewOptions.numberOfWeeks > 0;
|
|
510
|
+
firstDate = isCustomMonth ? this.parent.activeView.getStartDate() : util.firstDateOfMonth(this.parent.selectedDate);
|
|
511
|
+
lastDate = isCustomMonth ? this.parent.activeView.getEndDate() :
|
|
512
|
+
util.lastDateOfMonth(util.addMonths(firstDate, this.parent.activeViewOptions.interval - 1));
|
|
499
513
|
}
|
|
500
514
|
if (!isNullOrUndefined(prevNavEle)) {
|
|
501
515
|
this.toolbarObj.enableItems(prevNavEle, firstDate > this.parent.minDate);
|
|
@@ -42,13 +42,17 @@ export declare class Month extends ViewBase implements IRenderer {
|
|
|
42
42
|
private renderDateHeaderElement;
|
|
43
43
|
getMonthStart(currentDate: Date): Date;
|
|
44
44
|
getMonthEnd(currentDate: Date): Date;
|
|
45
|
+
private isCustomRange;
|
|
45
46
|
getRenderDates(workDays?: number[]): Date[];
|
|
46
47
|
getNextPreviousDate(type: string): Date;
|
|
48
|
+
getStartDate(): Date;
|
|
49
|
+
getEndDate(): Date;
|
|
47
50
|
getEndDateFromStartDate(start: Date): Date;
|
|
48
51
|
getDateRangeText(): string;
|
|
49
52
|
getLabelText(view: string): string;
|
|
50
53
|
private createWeekNumberElement;
|
|
51
54
|
unWireEvents(): void;
|
|
55
|
+
private isCustomMonth;
|
|
52
56
|
protected getModuleName(): string;
|
|
53
57
|
destroy(): void;
|
|
54
58
|
}
|