@syncfusion/ej2-schedule 20.4.53 → 21.1.37

package/src/schedule/event-renderer/year.js

@@ -87,8 +87,9 @@ var YearEvent = /** @class */ (function (_super) {
         }
     };
     YearEvent.prototype.timelineYearViewEvents = function () {
+        var _this = this;
         var workCell = this.parent.element.querySelector('.' + cls.WORK_CELLS_CLASS + ':not(.' + cls.OTHERMONTH_CLASS + ')');
-        this.cellWidth = workCell.offsetWidth;
+        this.cellWidth = workCell.getBoundingClientRect().width;
         this.cellHeader = util.getOuterHeight(workCell.querySelector('.' + cls.DATE_HEADER_CLASS));
         var eventTable = this.parent.element.querySelector('.' + cls.EVENT_TABLE_CLASS);
         this.eventHeight = util.getElementHeightFromClass(eventTable, cls.APPOINTMENT_CLASS);
@@ -114,10 +115,10 @@ var YearEvent = /** @class */ (function (_super) {
                 if (this.parent.activeViewOptions.orientation === 'Vertical') {
                     var wrapper_1 = wrapperCollection[parseInt(dayIndex.toString(), 10)];
                     td = dayIndex + 1;
-                    var eventWrapper_1 = wrapper_1.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS);
-                    if (!eventWrapper_1) {
-                        eventWrapper_1 = createElement('div', { className: cls.APPOINTMENT_WRAPPER_CLASS });
-                        wrapper_1.appendChild(eventWrapper_1);
+                    eventWrapper = wrapper_1.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS);
+                    if (!eventWrapper) {
+                        eventWrapper = createElement('div', { className: cls.APPOINTMENT_WRAPPER_CLASS });
+                        wrapper_1.appendChild(eventWrapper);
                     }
                     if (this.parent.enableRtl) {
                         rightValue = row * this.cellWidth;
@@ -170,8 +171,7 @@ var YearEvent = /** @class */ (function (_super) {
                             return "continue";
                         }
                     }
-                    var isRowAutoHeight = this_1.parent.rowAutoHeight && this_1.parent.activeViewOptions.orientation === 'Horizontal';
-                    if (isRowAutoHeight || this_1.cellHeight > availedHeight) {
+                    if (this_1.parent.rowAutoHeight || this_1.cellHeight > availedHeight) {
                         this_1.renderEvent(eventWrapper, eventData, row, leftValue, rightValue, monthStart, dayIndex);
                         this_1.updateCellHeight(rowTd, availedHeight);
                         isSpannedCollection.push(eventData);
@@ -197,6 +197,19 @@ var YearEvent = /** @class */ (function (_super) {
                 }
             }
         }
+        if (this.parent.rowAutoHeight && this.parent.activeViewOptions.orientation === 'Vertical') {
+            var appContainer = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CONTAINER_CLASS));
+            var tr_1 = [].slice.call(this.parent.element.querySelectorAll('.' + cls.CONTENT_TABLE_CLASS + ' tbody tr'));
+            appContainer.forEach(function (ele, index) {
+                var app = [].slice.call(ele.querySelectorAll('.' + cls.APPOINTMENT_CLASS));
+                var appTop = tr_1[parseInt(index.toString(), 10)].offsetTop + _this.cellHeader + EVENT_GAP;
+                app.forEach(function (app) {
+                    var overlap = parseInt(app.getAttribute('data-index'), 10);
+                    app.style.top = appTop + (overlap * _this.eventHeight) + 'px';
+                    app.removeAttribute('data-index');
+                });
+            });
+        }
     };
     YearEvent.prototype.updateSpannedEvents = function (eventObj, dayStart, dayEnd) {
         var isLeftRightResize = (this.isResource && this.parent.activeViewOptions.orientation === 'Vertical') ||
@@ -211,7 +224,8 @@ var YearEvent = /** @class */ (function (_super) {
             }
         }
         if ((dayEnd.getTime() >= eventObj[this.fields.endTime].getTime()) || (isLeftRightResize && !this.isResource &&
-            util.addDays(dayEnd, -1).getMonth() === eventObj[this.fields.endTime].getMonth())) {
+            util.addDays(dayEnd, -1).getMonth() === eventObj[this.fields.endTime].getMonth()) ||
+            (isLeftRightResize && this.isResource && (dayEnd.getTime() <= eventObj[this.fields.endTime].getTime()))) {
             if (isLeftRightResize) {
                 data.isRight = false;
             }
@@ -222,8 +236,11 @@ var YearEvent = /** @class */ (function (_super) {
         eventObj.data = data;
     };
     YearEvent.prototype.timelineResourceEvents = function () {
+        var _this = this;
+        var contentTable = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
+        var isVerticalScrollbarAvail = contentTable.offsetWidth > contentTable.clientWidth;
         var workCell = this.parent.element.querySelector('.' + cls.WORK_CELLS_CLASS);
-        this.cellWidth = workCell.offsetWidth;
+        this.cellWidth = workCell.getBoundingClientRect().width;
         this.cellHeader = 0;
         var eventTable = this.parent.element.querySelector('.' + cls.EVENT_TABLE_CLASS);
         this.eventHeight = util.getElementHeightFromClass(eventTable, cls.APPOINTMENT_CLASS);
@@ -251,6 +268,39 @@ var YearEvent = /** @class */ (function (_super) {
                 }
             }
         }
+        if (this.parent.rowAutoHeight && !isVerticalScrollbarAvail && contentTable.offsetWidth > contentTable.clientWidth) {
+            var appointments = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));
+            appointments.forEach(function (ele) {
+                ele.style.removeProperty('left');
+                ele.style.removeProperty('right');
+            });
+            var appContainer = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CONTAINER_CLASS));
+            var conTable_1 = this.parent.element.querySelector('.' + cls.CONTENT_TABLE_CLASS);
+            var tr_2 = [].slice.call(conTable_1.querySelectorAll('tbody tr'));
+            appContainer.forEach(function (ele, index) {
+                var appWrapper = [].slice.call(ele.children);
+                var row = tr_2[parseInt(index.toString(), 10)];
+                appWrapper.forEach(function (appWrap, cellIndex) {
+                    var td = row.querySelector("td:nth-child(" + (cellIndex + 1) + ")");
+                    var app = [].slice.call(appWrap.children);
+                    var width = td.getBoundingClientRect().width;
+                    var left = td.offsetLeft;
+                    if (_this.parent.enableRtl) {
+                        var right_1 = conTable_1.offsetWidth - left - td.offsetWidth;
+                        app.forEach(function (app) {
+                            app.style.width = Math.floor(parseInt(app.style.width, 10) / width) * width + 'px';
+                            app.style.right = right_1 + 'px';
+                        });
+                    }
+                    else {
+                        app.forEach(function (app) {
+                            app.style.width = Math.floor(parseInt(app.style.width, 10) / width) * width + 'px';
+                            app.style.left = left + 'px';
+                        });
+                    }
+                });
+            });
+        }
     };
     YearEvent.prototype.renderResourceEvent = function (wrapper, resource, month, index, monthStart) {
         var eventWrapper = createElement('div', { className: cls.APPOINTMENT_WRAPPER_CLASS });
@@ -261,39 +311,60 @@ var YearEvent = /** @class */ (function (_super) {
         var td = this.parent.element.querySelector(".e-content-wrap tr:nth-child(" + (rowIndex + 1) + ") td");
         this.cellHeight = td.offsetHeight;
         this.groupOrder = resource.groupOrder;
-        for (var a = 0; a < eventDatas.length; a++) {
+        var isSpannedCollection = [];
+        var _loop_2 = function (a) {
             var data = eventDatas[parseInt(a.toString(), 10)];
             var overlapIndex = void 0;
             var eventData = extend({}, data, null, true);
-            if (this.parent.activeViewOptions.group.resources.length > 0) {
-                var eventObj = this.isSpannedEvent(eventData, monthStart);
-                overlapIndex = this.getIndex(eventObj[this.fields.startTime]);
+            if (this_2.parent.activeViewOptions.group.resources.length > 0) {
+                var eventObj = this_2.isSpannedEvent(eventData, monthStart);
+                overlapIndex = this_2.getIndex(eventObj[this_2.fields.startTime]);
                 eventData.Index = overlapIndex;
             }
             else {
-                overlapIndex = this.getIndex(eventData[this.fields.startTime]);
+                overlapIndex = this_2.getIndex(eventData[this_2.fields.startTime]);
                 eventData.Index = overlapIndex;
             }
-            var availedHeight = this.cellHeader + (this.eventHeight * (a + 1)) + EVENT_GAP + this.moreIndicatorHeight;
-            var leftValue = (this.parent.activeViewOptions.orientation === 'Vertical') ?
-                month * this.cellWidth : index * this.cellWidth;
-            if (!this.parent.isMinMaxDate(eventData[this.fields.startTime])) {
-                return;
+            var availedHeight = this_2.cellHeader + (this_2.eventHeight * (a + 1)) + EVENT_GAP + this_2.moreIndicatorHeight;
+            var leftValue = (this_2.parent.activeViewOptions.orientation === 'Vertical') ?
+                month * this_2.cellWidth : index * this_2.cellWidth;
+            if (!this_2.parent.isMinMaxDate(eventData[this_2.fields.startTime])) {
+                return { value: void 0 };
             }
-            if (this.parent.rowAutoHeight || this.cellHeight > availedHeight) {
-                this.renderEvent(eventWrapper, eventData, month, leftValue, leftValue, monthStart, index);
-                this.updateCellHeight(td, availedHeight);
+            if (this_2.parent.activeViewOptions.orientation === 'Vertical' && this_2.parent.activeViewOptions.group.resources.length > 0) {
+                var isRendered = this_2.renderedEvents.filter(function (eventObj) {
+                    return eventObj.Guid === eventData.Guid;
+                });
+                var isSpanned = isSpannedCollection.filter(function (eventObj) {
+                    return eventObj.Guid === eventData.Guid;
+                });
+                if (isRendered.length > 0 || isSpanned.length > 0) {
+                    return "continue";
+                }
+            }
+            if (this_2.parent.rowAutoHeight || this_2.cellHeight > availedHeight) {
+                this_2.renderEvent(eventWrapper, eventData, month, leftValue, leftValue, monthStart, index);
+                this_2.updateCellHeight(td, availedHeight);
+                isSpannedCollection.push(eventData);
             }
             else {
-                var moreIndex = this.parent.activeViewOptions.orientation === 'Horizontal' ? month : index;
-                this.renderMoreIndicator(eventWrapper, eventDatas.length - a, monthStart, moreIndex, leftValue, leftValue, index);
-                if (this.parent.activeViewOptions.orientation === 'Horizontal') {
+                var moreIndex = this_2.parent.activeViewOptions.orientation === 'Horizontal' ? month : index;
+                this_2.renderMoreIndicator(eventWrapper, eventDatas.length - a, monthStart, moreIndex, leftValue, leftValue, index);
+                if (this_2.parent.activeViewOptions.orientation === 'Horizontal') {
                     for (var i = index; i < eventDatas.length; i++) {
-                        this.renderedEvents.push(extend({}, eventDatas[parseInt(i.toString(), 10)], { Index: overlapIndex + i }, true));
+                        this_2.renderedEvents.push(extend({}, eventDatas[parseInt(i.toString(), 10)], { Index: overlapIndex + i }, true));
                     }
                 }
-                break;
+                return "break";
             }
+        };
+        var this_2 = this;
+        for (var a = 0; a < eventDatas.length; a++) {
+            var state_1 = _loop_2(a);
+            if (typeof state_1 === "object")
+                return state_1.value;
+            if (state_1 === "break")
+                break;
         }
     };
     // eslint-disable-next-line max-len
@@ -319,13 +390,16 @@ var YearEvent = /** @class */ (function (_super) {
         }
         else {
             index = rowIndex + 1;
-            width = this.cellWidth;
+            width = this.isResource ? eventObj.isSpanned.count * this.cellWidth : this.cellWidth;
         }
         var rowTd = this.parent.element.querySelector(".e-content-wrap tr:nth-child(" + index + ") td");
         var top = rowTd.offsetTop + this.cellHeader + (this.eventHeight * eventObj.Index) + EVENT_GAP;
         setStyleAttribute(wrap, {
             'width': width + 'px', 'height': this.eventHeight + 'px', 'left': left + 'px', 'right': right + 'px', 'top': top + 'px'
         });
+        if (!this.isResource && this.parent.rowAutoHeight && this.parent.activeViewOptions.orientation === 'Vertical') {
+            wrap.setAttribute('data-index', eventObj.Index.toString());
+        }
         var args = { data: eventObj, element: wrap, cancel: false, type: 'event' };
         this.parent.trigger(events.eventRendered, args, function (eventArgs) {
             if (!eventArgs.cancel) {
@@ -431,6 +505,7 @@ var YearEvent = /** @class */ (function (_super) {
         var appointmentDetails = createElement('div', { className: cls.APPOINTMENT_DETAILS });
         append(templateElement, appointmentDetails);
         eventWrapper.appendChild(appointmentDetails);
+        this.parent.eventBase.renderSpannedIcon(eventWrapper, record.isSpanned);
         this.renderResizeHandler(eventWrapper, record.data, record[this.fields.isReadonly]);
         this.applyResourceColor(eventWrapper, eventObj, 'backgroundColor', this.groupOrder);
         return eventWrapper;
@@ -442,24 +517,28 @@ var YearEvent = /** @class */ (function (_super) {
         var eventStart = eventData[this.fields.startTime];
         var eventEnd = eventData[this.fields.endTime];
         var isSpanned = { isLeft: false, isRight: false, count: 1 };
+        var yearStart = new Date(this.parent.selectedDate.getFullYear(), this.parent.firstMonthOfYear, 1);
+        var yearEnd = util.addMonths(yearStart, this.parent.monthsCount);
         if (this.isResource) {
             this.updateSpannedEvents(eventObj, monthStart, monthEnd);
         }
-        if (eventStart.getTime() < monthStart.getTime()) {
-            eventData[this.fields.startTime] = monthStart;
-            isSpanned.isLeft = true;
-        }
-        if (eventEnd.getTime() > monthEnd.getTime()) {
-            eventData[this.fields.endTime] = monthEnd;
-            isSpanned.isRight = true;
+        if (this.parent.activeViewOptions.orientation === 'Vertical' && this.parent.activeViewOptions.group.resources.length > 0) {
+            this.updateSpannedEventDetails(eventStart, eventEnd, yearStart, yearEnd, eventData, isSpanned);
+            var originalStartTime = eventData[this.fields.startTime];
+            var originalEndTime = new Date(eventData[this.fields.endTime] - 1);
+            isSpanned.count = (originalEndTime.getMonth() - originalStartTime.getMonth()) +
+                (this.parent.monthsCount * (originalEndTime.getFullYear() - originalStartTime.getFullYear())) + 1;
         }
-        if (this.parent.activeViewOptions.group.resources.length === 0 || this.parent.uiStateValues.isGroupAdaptive) {
-            var end = util.resetTime(eventData[this.fields.endTime]).getTime();
-            var start = util.resetTime(eventData[this.fields.startTime]).getTime();
-            if (eventObj[this.fields.isAllDay] && end === eventObj[this.fields.endTime].getTime() || isSpanned.isRight) {
-                end = util.addDays(new Date(end), -1).getTime();
+        else {
+            this.updateSpannedEventDetails(eventStart, eventEnd, monthStart, monthEnd, eventData, isSpanned);
+            if (this.parent.activeViewOptions.group.resources.length === 0 || this.parent.uiStateValues.isGroupAdaptive) {
+                var end = util.resetTime(eventData[this.fields.endTime]).getTime();
+                var start = util.resetTime(eventData[this.fields.startTime]).getTime();
+                if (eventObj[this.fields.isAllDay] && end === eventObj[this.fields.endTime].getTime() || isSpanned.isRight) {
+                    end = util.addDays(new Date(end), -1).getTime();
+                }
+                isSpanned.count = Math.ceil((end - start) / util.MS_PER_DAY) + 1;
             }
-            isSpanned.count = Math.ceil((end - start) / util.MS_PER_DAY) + 1;
         }
         eventData.isSpanned = isSpanned;
         if (util.resetTime(eventStart).getTime() < util.resetTime(this.parent.minDate).getTime()) {
@@ -470,6 +549,16 @@ var YearEvent = /** @class */ (function (_super) {
         }
         return eventData;
     };
+    YearEvent.prototype.updateSpannedEventDetails = function (eventStart, eventEnd, viewStart, viewEnd, eventObj, isSpanned) {
+        if (eventStart.getTime() < viewStart.getTime()) {
+            eventObj[this.fields.startTime] = viewStart;
+            isSpanned.isLeft = true;
+        }
+        if (eventEnd.getTime() > viewEnd.getTime()) {
+            eventObj[this.fields.endTime] = viewEnd;
+            isSpanned.isRight = true;
+        }
+    };
     YearEvent.prototype.getOverlapEvents = function (date, appointments) {
         var appointmentsList = [];
         var dateStart;
@@ -493,19 +582,11 @@ var YearEvent = /** @class */ (function (_super) {
             var app = appointments_1[_i];
             var appStart = new Date(app[this.fields.startTime].getTime());
             var appEnd = new Date(app[this.fields.endTime].getTime());
-            if (this.parent.activeViewOptions.orientation === 'Vertical' &&
-                this.parent.activeViewOptions.group.resources.length > 0) {
-                if ((util.resetTime(appStart).getTime() >= dateStart) && (util.resetTime(appEnd).getTime() <= dateEnd)) {
-                    appointmentsList.push(app);
-                }
-            }
-            else {
-                var timeCondition = app[this.fields.isAllDay] ? util.resetTime(appEnd).getTime() > dateStart :
-                    util.resetTime(appEnd).getTime() >= dateStart;
-                if (((util.resetTime(appStart).getTime() <= dateStart) && (timeCondition)) ||
-                    (util.resetTime(appStart).getTime() >= dateStart) && (util.resetTime(appEnd).getTime() <= dateEnd)) {
-                    appointmentsList.push(app);
-                }
+            var timeCondition = app[this.fields.isAllDay] ? util.resetTime(appEnd).getTime() > dateStart :
+                util.resetTime(appEnd).getTime() >= dateStart;
+            if (((util.resetTime(appStart).getTime() <= dateStart) && (timeCondition)) ||
+                (util.resetTime(appStart).getTime() >= dateStart) && (util.resetTime(appEnd).getTime() <= dateEnd)) {
+                appointmentsList.push(app);
             }
         }
         return appointmentsList;

package/src/schedule/models/event-settings-model.d.ts

@@ -51,8 +51,8 @@ export interface EventSettingsModel {
     /**
      * Defines the option to render the spanned events (more than 24 hours) in either `AllDayRow` or `TimeSlot`. By default it renders in `AllDayRow`.
      * This property is applicable for `Day`, `Week` and `WorkWeek` views only. The possible values for this property as follows
-     * * AllDayRow
-     * * TimeSlot
+     * * `AllDayRow`: Denotes the rendering of spanned events in an all-day row.
+     * * `TimeSlot`: Denotes the rendering of spanned events in an time slot row.
      * {% codeBlock src='schedule/spannedEventPlacement/index.md' %}{% endcodeBlock %}
      *
      * @default 'AllDayRow'
@@ -144,4 +144,13 @@ export interface EventSettingsModel {
      */
     sortComparer?: SortComparerFunction;
 
+    /**
+     * Gets or sets a value that determines whether the start date and end date filter conditions should be included in the query itself when requesting data from the server, or passed as query parameters in the API call.
+     * When set to <c>true</c> the filter conditions will be part of the query itself, potentially reducing the size of the request and minimizing the time needed to parse the response.
+     * However, it can also lead to longer query strings, which could result in issues with maximum URL length or server limitations on query string length.
+     *
+     * @default false
+     */
+    includeFiltersInQuery?: boolean;
+
 }

package/src/schedule/models/event-settings.d.ts

@@ -48,8 +48,8 @@ export declare class EventSettings extends ChildProperty<EventSettings> {
     /**
      * Defines the option to render the spanned events (more than 24 hours) in either `AllDayRow` or `TimeSlot`. By default it renders in `AllDayRow`.
      * This property is applicable for `Day`, `Week` and `WorkWeek` views only. The possible values for this property as follows
-     * * AllDayRow
-     * * TimeSlot
+     * * `AllDayRow`: Denotes the rendering of spanned events in an all-day row.
+     * * `TimeSlot`: Denotes the rendering of spanned events in an time slot row.
      * {% codeBlock src='schedule/spannedEventPlacement/index.md' %}{% endcodeBlock %}
      *
      * @default 'AllDayRow'
@@ -129,4 +129,12 @@ export declare class EventSettings extends ChildProperty<EventSettings> {
      * @default null
      */
     sortComparer: SortComparerFunction;
+    /**
+     * Gets or sets a value that determines whether the start date and end date filter conditions should be included in the query itself when requesting data from the server, or passed as query parameters in the API call.
+     * When set to <c>true</c> the filter conditions will be part of the query itself, potentially reducing the size of the request and minimizing the time needed to parse the response.
+     * However, it can also lead to longer query strings, which could result in issues with maximum URL length or server limitations on query string length.
+     *
+     * @default false
+     */
+    includeFiltersInQuery: boolean;
 }

package/src/schedule/models/event-settings.js

@@ -79,6 +79,9 @@ var EventSettings = /** @class */ (function (_super) {
     __decorate([
         Property()
     ], EventSettings.prototype, "sortComparer", void 0);
+    __decorate([
+        Property()
+    ], EventSettings.prototype, "includeFiltersInQuery", void 0);
     return EventSettings;
 }(ChildProperty));
 export { EventSettings };

package/src/schedule/models/fields-model.d.ts

@@ -44,7 +44,8 @@ export interface FieldModel {
     endTime?: FieldOptionsModel;
 
     /**
-     * It maps the `startTimezone` field from the dataSource and usually accepts the valid IANA timezone names.
+     * It maps the `startTimezone` field from the dataSource and usually accepts the valid
+     * [`IANA timezone names`](https://docs.actian.com/ingres/11.0/index.html#page/Ing_Install/IANA_World_Regions_and_Time_Zone_Names.htm).
      *  It is assumed that the value provided for this field is taken into consideration while processing
      *  the `startTime` field. When this field is not mapped with any timezone names,
      *  then the events will be processed based on the timezone assigned to the Schedule.
@@ -54,7 +55,8 @@ export interface FieldModel {
     startTimezone?: FieldOptionsModel;
 
     /**
-     * It maps the `endTimezone` field from the dataSource and usually accepts the valid IANA timezone names.
+     * It maps the `endTimezone` field from the dataSource and usually accepts the valid
+     * [`IANA timezone names`](https://docs.actian.com/ingres/11.0/index.html#page/Ing_Install/IANA_World_Regions_and_Time_Zone_Names.htm).
      *  It is assumed that the value provided for this field is taken into consideration while processing the `endTime` field.
      *  When this field is not mapped with any timezone names, then the events will be processed based on the timezone assigned
      *  to the Schedule.

package/src/schedule/models/fields.d.ts

@@ -1,8 +1,8 @@
 import { ChildProperty } from '@syncfusion/ej2-base';
 import { FieldOptionsModel } from './field-options-model';
 /**
- * A Class that holds the collection of event fields that requires to be mapped with the dataSource
- * fields along with its available configuration settings. Each field in it accepts both string and Object
+ * A class that holds the collection of event fields that requires to be mapped with the dataSource
+ * fields along with its available configuration settings. Each field in it accepts both string and object
  *  data type. When each of the field is assigned with simple `string` value, it is assumed that the dataSource field
  *  name is mapped with it. If the `object` type is defined on each fields, then the validation related settings and mapping of
  *  those fields with dataSource can be given altogether within it.
@@ -42,7 +42,8 @@ export declare class Field extends ChildProperty<Field> {
      */
     endTime: FieldOptionsModel;
     /**
-     * It maps the `startTimezone` field from the dataSource and usually accepts the valid IANA timezone names.
+     * It maps the `startTimezone` field from the dataSource and usually accepts the valid
+     * [`IANA timezone names`](https://docs.actian.com/ingres/11.0/index.html#page/Ing_Install/IANA_World_Regions_and_Time_Zone_Names.htm).
      *  It is assumed that the value provided for this field is taken into consideration while processing
      *  the `startTime` field. When this field is not mapped with any timezone names,
      *  then the events will be processed based on the timezone assigned to the Schedule.
@@ -51,7 +52,8 @@ export declare class Field extends ChildProperty<Field> {
      */
     startTimezone: FieldOptionsModel;
     /**
-     * It maps the `endTimezone` field from the dataSource and usually accepts the valid IANA timezone names.
+     * It maps the `endTimezone` field from the dataSource and usually accepts the valid
+     * [`IANA timezone names`](https://docs.actian.com/ingres/11.0/index.html#page/Ing_Install/IANA_World_Regions_and_Time_Zone_Names.htm).
      *  It is assumed that the value provided for this field is taken into consideration while processing the `endTime` field.
      *  When this field is not mapped with any timezone names, then the events will be processed based on the timezone assigned
      *  to the Schedule.

package/src/schedule/models/fields.js

@@ -20,8 +20,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';
 import { FieldOptions } from './field-options';
 /**
- * A Class that holds the collection of event fields that requires to be mapped with the dataSource
- * fields along with its available configuration settings. Each field in it accepts both string and Object
+ * A class that holds the collection of event fields that requires to be mapped with the dataSource
+ * fields along with its available configuration settings. Each field in it accepts both string and object
  *  data type. When each of the field is assigned with simple `string` value, it is assumed that the dataSource field
  *  name is mapped with it. If the `object` type is defined on each fields, then the validation related settings and mapping of
  *  those fields with dataSource can be given altogether within it.

package/src/schedule/models/header-rows-model.d.ts

@@ -7,11 +7,11 @@ export interface HeaderRowsModel {
 
     /**
      * It defines the header row type, which accepts either of the following values.
-     * * Year
-     * * Month
-     * * Week
-     * * Date
-     * * Hour
+     * * `Year`: Denotes the year row in the header bar.
+     * * `Month`: Denotes the month row in the header bar.
+     * * `Week`: Denotes the week row in the header bar.
+     * * `Date`: Denotes the date row in the header bar.
+     * * `Hour`: Denotes the hour row in the header bar.
      *
      * @default null
      */

package/src/schedule/models/header-rows.d.ts

@@ -6,11 +6,11 @@ import { HeaderRowType } from '../base/type';
 export declare class HeaderRows extends ChildProperty<HeaderRows> {
     /**
      * It defines the header row type, which accepts either of the following values.
-     * * Year
-     * * Month
-     * * Week
-     * * Date
-     * * Hour
+     * * `Year`: Denotes the year row in the header bar.
+     * * `Month`: Denotes the month row in the header bar.
+     * * `Week`: Denotes the week row in the header bar.
+     * * `Date`: Denotes the date row in the header bar.
+     * * `Hour`: Denotes the hour row in the header bar.
      *
      * @default null
      */

package/src/schedule/models/quick-info-templates-model.d.ts

@@ -8,9 +8,9 @@ export interface QuickInfoTemplatesModel {
     /**
      * Template option to customize the header section of quick popup.
      * The applicable template types are,
-     * * Both
-     * * Cell
-     * * Event
+     * * `Both`: Denotes the template applies both to the event and cell.
+     * * `Cell`: Denotes the template applies only to the cell.
+     * * `Event`: Denotes the template applies to the event alone.
      *
      *  @default 'Both'
      */

package/src/schedule/models/quick-info-templates.d.ts

@@ -7,9 +7,9 @@ export declare class QuickInfoTemplates extends ChildProperty<QuickInfoTemplates
     /**
      * Template option to customize the header section of quick popup.
      * The applicable template types are,
-     * * Both
-     * * Cell
-     * * Event
+     * * `Both`: Denotes the template applies both to the event and cell.
+     * * `Cell`: Denotes the template applies only to the cell.
+     * * `Event`: Denotes the template applies to the event alone.
      *
      *  @default 'Both'
      */

package/src/schedule/models/views-model.d.ts

@@ -8,18 +8,18 @@ export interface ViewsModel {
     /**
      * It accepts the schedule view name, based on which we can define with its related properties in a single object.
      * The applicable view names are,
-     * * Day
-     * * Week
-     * * WorkWeek
-     * * Month
-     * * Year
-     * * Agenda
-     * * MonthAgenda
-     * * TimelineDay
-     * * TimelineWeek
-     * * TimelineWorkWeek
-     * * TimelineMonth
-     * * TimelineYear
+     * * Day - Denotes Day view of the scheduler.
+     * * Week - Denotes Week view of the scheduler.
+     * * WorkWeek - Denotes Work Week view of the scheduler.
+     * * Month - Denotes Month view of the scheduler.
+     * * Year - Denotes Year view of the scheduler.
+     * * Agenda - Denotes Agenda view of the scheduler.
+     * * MonthAgenda - Denotes Month Agenda view of the scheduler.
+     * * TimelineDay - Denotes Timeline Day view of the scheduler.
+     * * TimelineWeek - Denotes Timeline Week view of the scheduler.
+     * * TimelineWorkWeek - Denotes Timeline Work Week view of the scheduler.
+     * * TimelineMonth - Denotes Timeline Month view of the scheduler.
+     * * TimelineYear - Denotes Timeline Year view of the scheduler.
      *
      * @default null
      */
@@ -27,7 +27,8 @@ export interface ViewsModel {
 
     /**
      * To denote whether the view name given on the `option` is active or not.
-     * It acts similar to the `currentView` property and defines the active view of Schedule.
+     * It acts similar to the [`currentView`](../../schedule/#current-view/)
+     * property and defines the active view of Schedule.
      *
      * @default false
      */
@@ -235,8 +236,8 @@ export interface ViewsModel {
     /**
      * It is used to specify the year view rendering orientation on the schedule.
      * The applicable orientation values are,
-     * * Horizontal
-     * * Vertical
+     * * Horizontal - Denotes the horizontal orientation of Timeline Year view.
+     * * Vertical - Denotes the vertical orientation of Timeline Year view.
      *
      * @default 'Horizontal'
      */

package/src/schedule/models/views.d.ts

@@ -8,25 +8,26 @@ export declare class Views extends ChildProperty<Views> {
     /**
      * It accepts the schedule view name, based on which we can define with its related properties in a single object.
      * The applicable view names are,
-     * * Day
-     * * Week
-     * * WorkWeek
-     * * Month
-     * * Year
-     * * Agenda
-     * * MonthAgenda
-     * * TimelineDay
-     * * TimelineWeek
-     * * TimelineWorkWeek
-     * * TimelineMonth
-     * * TimelineYear
+     * * Day - Denotes Day view of the scheduler.
+     * * Week - Denotes Week view of the scheduler.
+     * * WorkWeek - Denotes Work Week view of the scheduler.
+     * * Month - Denotes Month view of the scheduler.
+     * * Year - Denotes Year view of the scheduler.
+     * * Agenda - Denotes Agenda view of the scheduler.
+     * * MonthAgenda - Denotes Month Agenda view of the scheduler.
+     * * TimelineDay - Denotes Timeline Day view of the scheduler.
+     * * TimelineWeek - Denotes Timeline Week view of the scheduler.
+     * * TimelineWorkWeek - Denotes Timeline Work Week view of the scheduler.
+     * * TimelineMonth - Denotes Timeline Month view of the scheduler.
+     * * TimelineYear - Denotes Timeline Year view of the scheduler.
      *
      * @default null
      */
     option: View;
     /**
      * To denote whether the view name given on the `option` is active or not.
-     * It acts similar to the `currentView` property and defines the active view of Schedule.
+     * It acts similar to the [`currentView`](../../schedule/#current-view/)
+     * property and defines the active view of Schedule.
      *
      * @default false
      */
@@ -210,8 +211,8 @@ export declare class Views extends ChildProperty<Views> {
     /**
      * It is used to specify the year view rendering orientation on the schedule.
      * The applicable orientation values are,
-     * * Horizontal
-     * * Vertical
+     * * Horizontal - Denotes the horizontal orientation of Timeline Year view.
+     * * Vertical - Denotes the vertical orientation of Timeline Year view.
      *
      * @default 'Horizontal'
      */

package/src/schedule/popups/event-tooltip.js

@@ -20,7 +20,8 @@ var EventTooltip = /** @class */ (function () {
             target: this.getTargets(),
             beforeRender: this.onBeforeRender.bind(this),
             beforeClose: this.onBeforeClose.bind(this),
-            enableRtl: this.parent.enableRtl
+            enableRtl: this.parent.enableRtl,
+            enableHtmlSanitizer: this.parent.enableHtmlSanitizer
         });
         this.tooltipObj.appendTo(this.parent.element);
     }