@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.
Files changed (117) hide show
  1. package/.github/PULL_REQUEST_TEMPLATE/Bug.md +63 -0
  2. package/.github/PULL_REQUEST_TEMPLATE/Feature.md +39 -0
  3. package/CHANGELOG.md +24 -1
  4. package/dist/ej2-schedule.umd.min.js +2 -2
  5. package/dist/ej2-schedule.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-schedule.es2015.js +423 -101
  7. package/dist/es6/ej2-schedule.es2015.js.map +1 -1
  8. package/dist/es6/ej2-schedule.es5.js +427 -108
  9. package/dist/es6/ej2-schedule.es5.js.map +1 -1
  10. package/dist/global/ej2-schedule.min.js +2 -2
  11. package/dist/global/ej2-schedule.min.js.map +1 -1
  12. package/dist/global/index.d.ts +1 -1
  13. package/package.json +15 -15
  14. package/src/recurrence-editor/recurrence-editor.js +2 -2
  15. package/src/schedule/actions/drag.js +12 -4
  16. package/src/schedule/actions/keyboard.d.ts +7 -0
  17. package/src/schedule/actions/keyboard.js +197 -28
  18. package/src/schedule/base/interface.d.ts +12 -0
  19. package/src/schedule/base/resource.js +1 -0
  20. package/src/schedule/base/schedule-model.d.ts +89 -20
  21. package/src/schedule/base/schedule.d.ts +88 -19
  22. package/src/schedule/base/schedule.js +14 -3
  23. package/src/schedule/base/util.d.ts +1 -0
  24. package/src/schedule/base/util.js +1 -0
  25. package/src/schedule/event-renderer/event-base.d.ts +1 -0
  26. package/src/schedule/event-renderer/event-base.js +18 -2
  27. package/src/schedule/event-renderer/inline-edit.js +8 -5
  28. package/src/schedule/event-renderer/month.js +1 -1
  29. package/src/schedule/event-renderer/timeline-view.js +4 -0
  30. package/src/schedule/event-renderer/vertical-view.js +9 -6
  31. package/src/schedule/event-renderer/year.js +1 -1
  32. package/src/schedule/exports/excel-export.d.ts +2 -1
  33. package/src/schedule/exports/excel-export.js +21 -18
  34. package/src/schedule/models/event-settings-model.d.ts +17 -9
  35. package/src/schedule/models/event-settings.d.ts +15 -8
  36. package/src/schedule/models/event-settings.js +6 -3
  37. package/src/schedule/models/views-model.d.ts +19 -0
  38. package/src/schedule/models/views.d.ts +17 -0
  39. package/src/schedule/models/views.js +6 -0
  40. package/src/schedule/popups/quick-popups.js +3 -0
  41. package/src/schedule/renderer/agenda.js +2 -1
  42. package/src/schedule/renderer/header-renderer.d.ts +1 -0
  43. package/src/schedule/renderer/header-renderer.js +22 -8
  44. package/src/schedule/renderer/month.d.ts +4 -0
  45. package/src/schedule/renderer/month.js +68 -19
  46. package/src/schedule/renderer/timeline-year.js +3 -0
  47. package/src/schedule/renderer/view-base.js +9 -0
  48. package/src/schedule/renderer/year.d.ts +2 -2
  49. package/src/schedule/renderer/year.js +24 -6
  50. package/styles/bootstrap-dark.css +108 -27
  51. package/styles/bootstrap.css +105 -27
  52. package/styles/bootstrap4.css +117 -62
  53. package/styles/bootstrap5-dark.css +118 -67
  54. package/styles/bootstrap5.css +118 -67
  55. package/styles/fabric-dark.css +108 -26
  56. package/styles/fabric.css +109 -26
  57. package/styles/highcontrast-light.css +104 -26
  58. package/styles/highcontrast.css +109 -28
  59. package/styles/material-dark.css +110 -32
  60. package/styles/material.css +103 -25
  61. package/styles/recurrence-editor/_bootstrap-dark-definition.scss +7 -0
  62. package/styles/recurrence-editor/_bootstrap-definition.scss +7 -0
  63. package/styles/recurrence-editor/_bootstrap4-definition.scss +7 -0
  64. package/styles/recurrence-editor/_bootstrap5-definition.scss +7 -0
  65. package/styles/recurrence-editor/_fabric-dark-definition.scss +8 -0
  66. package/styles/recurrence-editor/_fabric-definition.scss +7 -0
  67. package/styles/recurrence-editor/_fluent-definition.scss +15 -0
  68. package/styles/recurrence-editor/_highcontrast-definition.scss +7 -0
  69. package/styles/recurrence-editor/_highcontrast-light-definition.scss +7 -0
  70. package/styles/recurrence-editor/_layout.scss +20 -4
  71. package/styles/recurrence-editor/_material-dark-definition.scss +7 -0
  72. package/styles/recurrence-editor/_material-definition.scss +7 -0
  73. package/styles/recurrence-editor/_tailwind-definition.scss +15 -8
  74. package/styles/recurrence-editor/bootstrap-dark.css +20 -4
  75. package/styles/recurrence-editor/bootstrap.css +20 -4
  76. package/styles/recurrence-editor/bootstrap4.css +20 -4
  77. package/styles/recurrence-editor/bootstrap5-dark.css +20 -4
  78. package/styles/recurrence-editor/bootstrap5.css +20 -4
  79. package/styles/recurrence-editor/fabric-dark.css +20 -4
  80. package/styles/recurrence-editor/fabric.css +20 -4
  81. package/styles/recurrence-editor/highcontrast-light.css +20 -4
  82. package/styles/recurrence-editor/highcontrast.css +20 -4
  83. package/styles/recurrence-editor/material-dark.css +20 -4
  84. package/styles/recurrence-editor/material.css +20 -4
  85. package/styles/recurrence-editor/tailwind-dark.css +20 -4
  86. package/styles/recurrence-editor/tailwind.css +20 -4
  87. package/styles/schedule/_bootstrap-dark-definition.scss +22 -1
  88. package/styles/schedule/_bootstrap-definition.scss +22 -1
  89. package/styles/schedule/_bootstrap4-definition.scss +23 -1
  90. package/styles/schedule/_bootstrap5-definition.scss +145 -119
  91. package/styles/schedule/_fabric-dark-definition.scss +22 -1
  92. package/styles/schedule/_fabric-definition.scss +22 -1
  93. package/styles/schedule/_fluent-definition.scss +218 -0
  94. package/styles/schedule/_highcontrast-definition.scss +22 -1
  95. package/styles/schedule/_highcontrast-light-definition.scss +22 -1
  96. package/styles/schedule/_layout.scss +95 -158
  97. package/styles/schedule/_material-dark-definition.scss +22 -1
  98. package/styles/schedule/_material-definition.scss +21 -0
  99. package/styles/schedule/_tailwind-definition.scss +216 -195
  100. package/styles/schedule/_theme.scss +1 -1
  101. package/styles/schedule/bootstrap-dark.css +88 -23
  102. package/styles/schedule/bootstrap.css +85 -23
  103. package/styles/schedule/bootstrap4.css +97 -58
  104. package/styles/schedule/bootstrap5-dark.css +98 -63
  105. package/styles/schedule/bootstrap5.css +98 -63
  106. package/styles/schedule/fabric-dark.css +88 -22
  107. package/styles/schedule/fabric.css +89 -22
  108. package/styles/schedule/highcontrast-light.css +84 -22
  109. package/styles/schedule/highcontrast.css +89 -24
  110. package/styles/schedule/icons/_fluent.scss +231 -0
  111. package/styles/schedule/icons/_tailwind.scss +231 -231
  112. package/styles/schedule/material-dark.css +90 -28
  113. package/styles/schedule/material.css +83 -21
  114. package/styles/schedule/tailwind-dark.css +94 -52
  115. package/styles/schedule/tailwind.css +94 -52
  116. package/styles/tailwind-dark.css +114 -56
  117. 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 fieldMapping = this.parent.eventFields;
424
- var startEndHours = util.getStartEndHours(currentDate, this.startHour, this.endHour);
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[fieldMapping.startTime].getTime() < startEndHours.startHour.getTime()) {
428
- event[fieldMapping.startTime] = startEndHours.startHour;
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[fieldMapping.endTime].getTime() > startEndHours.endHour.getTime()) {
432
- event[fieldMapping.endTime] = startEndHours.endHour;
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() > dateStart)) ||
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: ExportOptions): void;
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
- var _this = this;
13
- var exportFields = excelExportOptions.fields || Object.keys(this.parent.eventFields).map(function (field) {
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(exportFields, exportName, exportType, eventCollection);
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) { return columns.push({ index: i + 1, width: (field === 'Id' ? 20 : 150) }); });
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) { return columnHeader.push({ index: i + 1, value: field, style: style }); });
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
- var i = 2;
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: event_1[field] || '' };
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
- i++;
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 ? args.processedData : this.parent.eventsProcessed;
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
- if (this.parent.currentView === 'Agenda' || !this.parent.isSelectedDate(util.resetTime(this.parent.getCurrentTime()))) {
417
- this.parent.changeDate(util.resetTime(this.parent.getCurrentTime()), args.originalEvent);
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 currentTime = this.parent.getCurrentTime();
437
- startTime.setHours(currentTime.getHours(), (Math.round(startTime.getMinutes() / msInterval) * msInterval), 0);
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
- firstDate = util.firstDateOfMonth(this.parent.selectedDate);
497
- var lastMonthFirstDate = util.addMonths(firstDate, this.parent.activeViewOptions.interval - 1);
498
- lastDate = util.lastDateOfMonth(lastMonthFirstDate);
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
  }