@syncfusion/ej2-schedule 20.4.53 → 21.1.35

package/dist/es6/ej2-schedule.es5.js

@@ -1023,6 +1023,7 @@ var HeaderRenderer = /** @__PURE__ @class */ (function () {
                 overflowMode: 'Popup',
                 clicked: _this.toolbarClickHandler.bind(_this),
                 enableRtl: _this.parent.enableRtl,
+                enableHtmlSanitizer: _this.parent.enableHtmlSanitizer,
                 locale: _this.parent.locale
             });
             _this.toolbarObj.appendTo(_this.parent.element.querySelector('.' + HEADER_TOOLBAR));
@@ -2285,15 +2286,16 @@ var KeyboardInteraction = /** @__PURE__ @class */ (function () {
             var args = {
                 element: target, requestType: cellSelect
             };
-            var cellData = {};
-            var cellDetails = this.parent.getCellDetails(target);
-            if (this.parent.eventWindow && cellDetails) {
-                if (this.parent.activeCellsData.element !== cellDetails.element) {
-                    this.parent.activeCellsData = cellDetails;
-                }
-                this.parent.eventWindow.convertToEventData(this.parent.activeCellsData, cellData);
-                args.data = cellData;
-            }
+            // activeCellsData is not reset on schedule property changed(group properties)
+            // const cellData: Record<string, any> = {};
+            // const cellDetails: CellClickEventArgs = this.parent.getCellDetails(target);
+            // if (this.parent.eventWindow && cellDetails) {
+            //     if (this.parent.activeCellsData.element !== cellDetails.element) {
+            //         this.parent.activeCellsData = cellDetails;
+            //     }
+            //     this.parent.eventWindow.convertToEventData(this.parent.activeCellsData as unknown as Record<string, any>, cellData);
+            //     args.data = cellData;
+            // }
             this.parent.trigger(select, args, function () {
                 _this.initialTarget = target;
                 _this.selectedCells = [target];
@@ -2997,11 +2999,13 @@ var Data = /** @__PURE__ @class */ (function () {
     /**
      * Constructor for data module
      *
+     * @param {Schedule} parent Accepts the schedule element instance
      * @param {Object | DataManager} dataSource Accepts the datasource as JSON objects or DataManager
      * @param {Query} query Accepts the query to process the data
      * @private
      */
-    function Data(dataSource, query) {
+    function Data(parent, dataSource, query) {
+        this.parent = parent;
         this.initDataManager(dataSource, query);
     }
     /**
@@ -3026,6 +3030,11 @@ var Data = /** @__PURE__ @class */ (function () {
      */
     Data.prototype.generateQuery = function (startDate, endDate) {
         var query = this.query.clone();
+        if (this.parent && this.parent.eventSettings.includeFiltersInQuery && startDate && endDate) {
+            var dateQuery = this.getStartEndQuery(startDate, endDate);
+            var recurrenceQuery = new Predicate(this.parent.eventFields.recurrenceRule, 'notequal', null).and(new Predicate(this.parent.eventFields.recurrenceRule, 'notequal', ''));
+            return query.where(dateQuery.or(recurrenceQuery));
+        }
         if (startDate) {
             query.addParams('StartDate', startDate.toISOString());
         }
@@ -3034,6 +3043,23 @@ var Data = /** @__PURE__ @class */ (function () {
         }
         return query;
     };
+    /**
+     * The function used to generate updated Query from schedule model
+     *
+     * @param {Date} startDate Accepts the start date
+     * @param {Date} endDate Accepts the end date
+     * @returns {void}
+     * @private
+     */
+    Data.prototype.getStartEndQuery = function (startDate, endDate) {
+        var fieldMapping = this.parent.eventFields;
+        var dateQuery = new Predicate(fieldMapping.startTime, 'greaterthanorequal', startDate)
+            .and(new Predicate(fieldMapping.endTime, 'greaterthanorequal', startDate))
+            .and(new Predicate(fieldMapping.startTime, 'lessthan', endDate))
+            .or(new Predicate(fieldMapping.startTime, 'lessthanorequal', startDate)
+            .and(new Predicate(fieldMapping.endTime, 'greaterthan', startDate)));
+        return dateQuery;
+    };
     /**
      * The function used to get dataSource by executing given Query
      *
@@ -5450,12 +5476,7 @@ var EventBase = /** @__PURE__ @class */ (function () {
     };
     EventBase.prototype.filterEvents = function (startDate, endDate, appointments, resourceTdData) {
         if (appointments === void 0) { appointments = this.parent.eventsProcessed; }
-        var fieldMapping = this.parent.eventFields;
-        var predicate = new Predicate(fieldMapping.startTime, 'greaterthanorequal', startDate).
-            and(new Predicate(fieldMapping.endTime, 'greaterthanorequal', startDate)).
-            and(new Predicate(fieldMapping.startTime, 'lessthan', endDate)).
-            or(new Predicate(fieldMapping.startTime, 'lessthanorequal', startDate).
-            and(new Predicate(fieldMapping.endTime, 'greaterthan', startDate)));
+        var predicate = this.parent.dataModule.getStartEndQuery(startDate, endDate);
         var filter = new DataManager({ json: appointments }).executeLocal(new Query().where(predicate));
         if (resourceTdData) {
             filter = this.filterEventsByResource(resourceTdData, filter);
@@ -6332,9 +6353,8 @@ var EventBase = /** @__PURE__ @class */ (function () {
             templateElement = this.parent.getAppointmentTemplate()(record, this.parent, templateName, templateId, false);
         }
         else {
-            var appointmentSubject = createElement('div', {
-                className: SUBJECT_CLASS, innerHTML: eventSubject
-            });
+            var appointmentSubject = createElement('div', { className: SUBJECT_CLASS });
+            appointmentSubject.innerText = this.parent.sanitize(eventSubject);
             templateElement = [appointmentSubject];
         }
         append(templateElement, appointmentWrapper);
@@ -6517,6 +6537,29 @@ var EventBase = /** @__PURE__ @class */ (function () {
         return eventArgs && eventArgs.changedTouches ? eventArgs.changedTouches[0] : e.changedTouches ? e.changedTouches[0] :
             eventArgs || e;
     };
+    EventBase.prototype.renderSpannedIcon = function (element, spanEvent) {
+        var iconElement = createElement('div', { className: EVENT_INDICATOR_CLASS + ' ' + ICON });
+        if (spanEvent.isLeft) {
+            var iconLeft = iconElement.cloneNode();
+            addClass([iconLeft], EVENT_ICON_LEFT_CLASS);
+            prepend([iconLeft], element);
+        }
+        if (spanEvent.isRight) {
+            var iconRight = iconElement.cloneNode();
+            addClass([iconRight], EVENT_ICON_RIGHT_CLASS);
+            append([iconRight], element);
+        }
+        if (spanEvent.isTop) {
+            var iconTop = iconElement.cloneNode();
+            addClass([iconTop], EVENT_ICON_UP_CLASS);
+            prepend([iconTop], element);
+        }
+        if (spanEvent.isBottom) {
+            var iconBottom = iconElement.cloneNode();
+            addClass([iconBottom], EVENT_ICON_DOWN_CLASS);
+            append([iconBottom], element);
+        }
+    };
     EventBase.prototype.unWireEvents = function () {
         var appElements = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CLASS));
         for (var _i = 0, appElements_1 = appElements; _i < appElements_1.length; _i++) {
@@ -6871,7 +6914,8 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
             templateElement = this.parent.getAppointmentTemplate()(record, this.parent, templateName, templateId, false);
         }
         else {
-            var appointmentSubject = createElement('div', { className: SUBJECT_CLASS, innerHTML: recordSubject });
+            var appointmentSubject = createElement('div', { className: SUBJECT_CLASS });
+            appointmentSubject.innerText = this.parent.sanitize(recordSubject);
             if (isAllDay) {
                 if (record[fieldMapping.isAllDay]) {
                     templateElement = [appointmentSubject];
@@ -6903,10 +6947,8 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
                     className: APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + DISABLE_CLASS : ''),
                     innerHTML: timeStr
                 });
-                var appointmentLocation = createElement('div', {
-                    className: LOCATION_CLASS,
-                    innerHTML: (record[fieldMapping.location] || this.parent.eventSettings.fields.location.default || '')
-                });
+                var appointmentLocation = createElement('div', { className: LOCATION_CLASS });
+                appointmentLocation.innerText = this.parent.sanitize((record[fieldMapping.location] || this.parent.eventSettings.fields.location.default || ''));
                 templateElement = [appointmentSubject, appointmentTime, appointmentLocation];
             }
         }
@@ -6923,7 +6965,7 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
                 appointmentWrapper.appendChild(recurrenceIcon);
             }
         }
-        this.renderSpannedIcon(isAllDay ? appointmentDetails : appointmentWrapper, eventData);
+        this.parent.eventBase.renderSpannedIcon(isAllDay ? appointmentDetails : appointmentWrapper, eventData);
         if (!isNullOrUndefined(this.cssClass)) {
             addClass([appointmentWrapper], this.cssClass);
         }
@@ -6955,29 +6997,6 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
             countCell.innerHTML = '+' + this.parent.globalize.formatNumber(moreCount) + '&nbsp;' + (this.parent.isAdaptive ? '' : this.parent.localeObj.getConstant('more'));
         }
     };
-    VerticalEvent.prototype.renderSpannedIcon = function (element, spanEvent) {
-        var iconElement = createElement('div', { className: EVENT_INDICATOR_CLASS + ' ' + ICON });
-        if (spanEvent.isLeft) {
-            var iconLeft = iconElement.cloneNode();
-            addClass([iconLeft], EVENT_ICON_LEFT_CLASS);
-            prepend([iconLeft], element);
-        }
-        if (spanEvent.isRight) {
-            var iconRight = iconElement.cloneNode();
-            addClass([iconRight], EVENT_ICON_RIGHT_CLASS);
-            append([iconRight], element);
-        }
-        if (spanEvent.isTop) {
-            var iconTop = iconElement.cloneNode();
-            addClass([iconTop], EVENT_ICON_UP_CLASS);
-            prepend([iconTop], element);
-        }
-        if (spanEvent.isBottom) {
-            var iconBottom = iconElement.cloneNode();
-            addClass([iconBottom], EVENT_ICON_DOWN_CLASS);
-            append([iconBottom], element);
-        }
-    };
     VerticalEvent.prototype.isSpannedEvent = function (record, day, resource) {
         var currentDate = resetTime(this.dateRender[parseInt(resource.toString(), 10)][parseInt(day.toString(), 10)]);
         var renderedDate = this.getRenderedDates(this.dateRender[parseInt(resource.toString(), 10)]) || [currentDate];
@@ -7821,10 +7840,8 @@ var MonthEvent = /** @__PURE__ @class */ (function (_super) {
         }
         else {
             var eventLocation = (record[this.fields.location] || this.parent.eventSettings.fields.location.default || '');
-            var appointmentSubject = createElement('div', {
-                className: SUBJECT_CLASS,
-                innerHTML: (eventSubject + (eventLocation ? ';&nbsp' + eventLocation : ''))
-            });
+            var appointmentSubject = createElement('div', { className: SUBJECT_CLASS });
+            appointmentSubject.innerText = this.parent.sanitize((eventSubject + (eventLocation ? '; ' + eventLocation : '')));
             var appointmentStartTime = createElement('div', {
                 className: APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + DISABLE_CLASS : ''),
                 innerHTML: this.parent.getTimeString(eventData[this.fields.startTime])
@@ -7867,7 +7884,8 @@ var MonthEvent = /** @__PURE__ @class */ (function (_super) {
                     var appTime = createElement('div', {
                         className: APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + DISABLE_CLASS : ''), innerHTML: timeString
                     });
-                    var appLocation = createElement('div', { className: LOCATION_CLASS, innerHTML: eventLocation });
+                    var appLocation = createElement('div', { className: LOCATION_CLASS });
+                    appLocation.innerText = this.parent.sanitize(eventLocation);
                     innerElement = [appointmentSubject, appTime, appLocation];
                 }
                 var wrap = createElement('div', { className: 'e-inner-wrap' });
@@ -9099,6 +9117,7 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
             cssClass: QUICK_DIALOG_CLASS,
             closeOnEscape: true,
             enableRtl: this.parent.enableRtl,
+            enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
             beforeClose: this.beforeQuickDialogClose.bind(this),
             isModal: true,
             position: { X: 'center', Y: 'center' },
@@ -9130,6 +9149,7 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
             cssClass: className,
             disabled: isDisabled,
             enableRtl: this.parent.enableRtl,
+            enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
             iconCss: iconName
         });
         buttonObj.appendTo(element);
@@ -9325,7 +9345,8 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
                     append(templateElement, appointmentElement);
                 }
                 else {
-                    appointmentElement.appendChild(createElement('div', { className: SUBJECT_CLASS, innerHTML: eventText }));
+                    appointmentElement.appendChild(createElement('div', { className: SUBJECT_CLASS }));
+                    appointmentElement.firstElementChild.innerText = this_1.parent.sanitize(eventText);
                 }
                 if (!isNullOrUndefined(groupIndex)) {
                     appointmentElement.setAttribute('data-group-index', groupIndex);
@@ -9579,10 +9600,14 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
                         ("<button class=\"" + (DELETE_CLASS + ' ' + ICON) + "\" title=\"" + this.l10n.getConstant('delete') + "\"></button>") +
                         ("<button class=\"" + CLOSE_CLASS + "\" title=\"" + this.l10n.getConstant('close') + "\"></button></div>") +
                         ("<div class=\"" + SUBJECT_WRAP + "\"><div class=\"" + SUBJECT_CLASS + " " + TEXT_ELLIPSIS + "\" ") +
-                        ("title=\"" + (args.eventSubject ? args.eventSubject.replaceAll('"', '\'') : args.eventSubject) + "\">" + args.eventSubject + "</div></div >");
+                        ("title=\"" + (args.eventSubject ? args.eventSubject.replaceAll('"', '\'') : args.eventSubject) + "\"></div></div >");
                     break;
             }
             var templateWrapper = createElement('div', { innerHTML: header });
+            if (headerType === 'Event') {
+                var subjectText = templateWrapper.querySelector('.' + SUBJECT_CLASS);
+                subjectText.innerText = this.parent.sanitize(args.eventSubject);
+            }
             append([].slice.call(templateWrapper.childNodes), headerTemplate);
         }
         return headerTemplate;
@@ -9610,7 +9635,7 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
                         (TEXT_ELLIPSIS + "\">" + cellDetails.details + "</div></div>") +
                         ((this.parent.activeViewOptions.group.resources.length > 0 ? "<div class=\"" + RESOURCE_CLASS + "\">" +
                             ("<div class=\"" + RESOURCE_ICON_CLASS + " " + ICON + " \"></div><div class=\"" + RESOURCE_DETAILS_CLASS + " ") +
-                            (TEXT_ELLIPSIS + "\">" + resourceText + "</div></div>") : '') + "</td></tr></tbody></table>");
+                            (TEXT_ELLIPSIS + "\"></div></div>") : '') + "</td></tr></tbody></table>");
                     break;
                 case 'Event':
                     argsData = this.getFormattedString(data);
@@ -9624,8 +9649,7 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
                     content += '</div></div>';
                     if (data[this.parent.eventFields.location]) {
                         content += '<div class="' + LOCATION_CLASS + '"><div class="' + LOCATION_ICON_CLASS + ' ' +
-                            ICON + '"></div><div class="' + LOCATION_DETAILS_CLASS + ' ' + TEXT_ELLIPSIS + '">' +
-                            data[this.parent.eventFields.location] + '</div></div>';
+                            ICON + '"></div><div class="' + LOCATION_DETAILS_CLASS + ' ' + TEXT_ELLIPSIS + '"></div></div>';
                     }
                     if (data[this.parent.eventFields.startTimezone] || data[this.parent.eventFields.endTimezone]) {
                         content += '<div class="' + TIME_ZONE_CLASS + '"><div class="' + TIME_ZONE_ICON_CLASS + ' ' + ICON +
@@ -9634,17 +9658,33 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
                     }
                     if (data[this.parent.eventFields.description]) {
                         content += '<div class="' + DESCRIPTION_CLASS + '"><div class="' + DESCRIPTION_ICON_CLASS + ' ' + ICON +
-                            '"></div><div class="' + DESCRIPTION_DETAILS_CLASS + ' ' + TEXT_ELLIPSIS + '">' +
-                            data[this.parent.eventFields.description] + '</div></div>';
+                            '"></div><div class="' + DESCRIPTION_DETAILS_CLASS + ' ' + TEXT_ELLIPSIS + '"></div></div>';
                     }
                     if (this.parent.resourceCollection.length > 0) {
                         content += '<div class="' + RESOURCE_CLASS + '"><div class="' + RESOURCE_ICON_CLASS + ' ' + ICON +
-                            '"></div><div class="' + RESOURCE_DETAILS_CLASS + ' ' + TEXT_ELLIPSIS + '">' +
-                            resourceText + '</div></div>';
+                            '"></div><div class="' + RESOURCE_DETAILS_CLASS + ' ' + TEXT_ELLIPSIS + '"></div></div>';
                     }
                     break;
             }
             var templateWrapper = createElement('div', { innerHTML: content });
+            if (data[this.parent.eventFields.location]) {
+                var locationDetails = templateWrapper.querySelector('.' + LOCATION_DETAILS_CLASS);
+                if (!isNullOrUndefined(locationDetails)) {
+                    locationDetails.innerText = this.parent.sanitize(data[this.parent.eventFields.location]);
+                }
+            }
+            if (data[this.parent.eventFields.description]) {
+                var descriptionDetails = templateWrapper.querySelector('.' + DESCRIPTION_DETAILS_CLASS);
+                if (!isNullOrUndefined(descriptionDetails)) {
+                    descriptionDetails.innerText = this.parent.sanitize(data[this.parent.eventFields.description]);
+                }
+            }
+            if (resourceText) {
+                var resourceDetails = templateWrapper.querySelector('.' + RESOURCE_DETAILS_CLASS);
+                if (!isNullOrUndefined(resourceDetails)) {
+                    resourceDetails.innerText = this.parent.sanitize(resourceText);
+                }
+            }
             append([].slice.call(templateWrapper.childNodes), contentTemplate);
         }
         return contentTemplate;
@@ -10182,7 +10222,7 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
     };
     QuickPopups.prototype.quickPopupClose = function () {
         this.parent.eventBase.focusElement();
-        this.quickPopup.relateTo = WORK_CELLS_CLASS;
+        this.quickPopup.relateTo = '.' + WORK_CELLS_CLASS;
         this.fieldValidator.destroyToolTip();
         if (this.quickPopup.element.querySelectorAll('.e-formvalidator').length) {
             this.fieldValidator.destroy();
@@ -10402,7 +10442,8 @@ var EventTooltip = /** @__PURE__ @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);
     }
@@ -11699,6 +11740,7 @@ var EventWindow = /** @__PURE__ @class */ (function () {
             content: this.getEventWindowContent(),
             cssClass: EVENT_WINDOW_DIALOG_CLASS,
             enableRtl: this.parent.enableRtl,
+            enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
             height: this.parent.isAdaptive ? '100%' : 'auto',
             minHeight: '300px',
             isModal: true,
@@ -11909,6 +11951,10 @@ var EventWindow = /** @__PURE__ @class */ (function () {
         var _this = this;
         if (!isNullOrUndefined(this.parent.editorTemplate)) {
             if (args) {
+                if (this.fieldValidator) {
+                    this.fieldValidator.destroy();
+                    this.fieldValidator = null;
+                }
                 if (this.recurrenceEditor) {
                     this.recurrenceEditor.destroy();
                     this.recurrenceEditor = null;
@@ -12084,6 +12130,7 @@ var EventWindow = /** @__PURE__ @class */ (function () {
         if (resourceData.allowMultiple) {
             var listObj = new MultiSelect({
                 enableRtl: this.parent.enableRtl,
+                enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
                 cssClass: this.parent.cssClass || '',
                 dataSource: resourceData.dataSource,
                 change: this.onMultiselectResourceChange.bind(this),
@@ -12230,6 +12277,7 @@ var EventWindow = /** @__PURE__ @class */ (function () {
             change: this.onChange.bind(this),
             cssClass: value + ' ' + this.parent.cssClass,
             enableRtl: this.parent.enableRtl,
+            enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
             label: this.getFieldLabel(value)
         });
         checkBox.appendTo(checkBoxInput);
@@ -12356,6 +12404,7 @@ var EventWindow = /** @__PURE__ @class */ (function () {
             target: this.element,
             animationSettings: { effect: 'Zoom' },
             enableRtl: this.parent.enableRtl,
+            enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
             isModal: true,
             cssClass: REPEAT_DIALOG_CLASS,
             open: this.repeatOpenDialog.bind(this)
@@ -12423,6 +12472,9 @@ var EventWindow = /** @__PURE__ @class */ (function () {
         if (!this.parent.eventSettings.allowAdding) {
             return;
         }
+        if (this.parent.isAdaptive && repeatType && !this.repeatDialogObject) {
+            this.renderRepeatDialog();
+        }
         this.element.querySelector('.' + FORM_CLASS).removeAttribute('data-id');
         this.element.querySelector('.' + EVENT_WINDOW_TITLE_TEXT_CLASS).innerHTML = this.l10n.getConstant('newEvent');
         eventObj.Timezone = false;
@@ -12452,10 +12504,18 @@ var EventWindow = /** @__PURE__ @class */ (function () {
                 selectedType: !isNullOrUndefined(repeatType) ? repeatType : !isNullOrUndefined(eventObj[this.fields.recurrenceRule]) ?
                     this.recurrenceEditor.selectedType : 0
             });
+            this.repeatRule = this.recurrenceEditor.value;
         }
         if (this.parent.isAdaptive && isNullOrUndefined(this.parent.editorTemplate)) {
             var element = this.element.querySelector('.' + REPEAT_CONTAINER_CLASS);
-            addClass([element], HIDE_STYLE_CLASS);
+            if (eventObj[this.fields.recurrenceRule] || repeatType) {
+                removeClass([element], HIDE_STYLE_CLASS);
+                this.repeatStatus.setProperties({ checked: true });
+            }
+            else {
+                addClass([element], HIDE_STYLE_CLASS);
+                this.repeatStatus.setProperties({ checked: false });
+            }
             this.updateRepeatLabel(this.repeatRule);
         }
         else {
@@ -13110,9 +13170,11 @@ var EventWindow = /** @__PURE__ @class */ (function () {
         }
         var currentStartTime = new Date(+currentData[this.fields.startTime]);
         var currentEndTime = new Date(+currentData[this.fields.endTime]);
+        var nextStartTime;
+        var nextEndTime;
         if (index !== recurColl.length - 1) {
-            var nextStartTime = new Date(+recurColl[index + 1][this.fields.startTime]);
-            var nextEndTime = new Date(+recurColl[index + 1][this.fields.endTime]);
+            nextStartTime = new Date(+recurColl[index + 1][this.fields.startTime]);
+            nextEndTime = new Date(+recurColl[index + 1][this.fields.endTime]);
         }
         var lastEndTime = new Date(+recurColl[recurColl.length - 1][this.fields.endTime]);
         if (index === 0) {
@@ -13311,7 +13373,7 @@ var EventWindow = /** @__PURE__ @class */ (function () {
                 value = element.checked;
             }
             else {
-                value = SanitizeHtmlHelper.sanitize(element.value);
+                value = this.parent.sanitize(element.value);
             }
         }
         return value;
@@ -14418,6 +14480,7 @@ var Crud = /** @__PURE__ @class */ (function () {
             if (this.parent.currentAction !== 'EditFollowingEvents' && !this.isBlockEvent(eventData)
                 && this.parent.eventBase.isBlockRange(eventData)) {
                 this.parent.quickPopup.openValidationError('blockAlert', eventData);
+                this.parent.crudModule.crudObj.isCrudAction = false;
                 return;
             }
             var updateEvents = (eventData instanceof Array) ? eventData : [eventData];
@@ -15135,8 +15198,8 @@ var __decorate$7 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /**
- * 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.
@@ -15273,6 +15336,9 @@ var EventSettings = /** @__PURE__ @class */ (function (_super) {
     __decorate$6([
         Property()
     ], EventSettings.prototype, "sortComparer", void 0);
+    __decorate$6([
+        Property()
+    ], EventSettings.prototype, "includeFiltersInQuery", void 0);
     return EventSettings;
 }(ChildProperty));
 
@@ -15593,7 +15659,7 @@ var ResourceBase = /** @__PURE__ @class */ (function () {
                     classList(target, [RESOURCE_COLLAPSE_CLASS], [RESOURCE_EXPAND_CLASS]);
                     hide = false;
                 }
-                var eventElements = [].slice.call(_this.parent.element.querySelectorAll('.' + APPOINTMENT_CLASS));
+                var eventElements = [].slice.call(_this.parent.element.querySelectorAll('.' + APPOINTMENT_CLASS + ',.' + MORE_INDICATOR_CLASS));
                 for (var _i = 0, eventElements_1 = eventElements; _i < eventElements_1.length; _i++) {
                     var element = eventElements_1[_i];
                     remove(element);
@@ -15723,6 +15789,7 @@ var ResourceBase = /** @__PURE__ @class */ (function () {
         this.treeViewObj = new TreeView({
             cssClass: this.parent.cssClass,
             enableRtl: this.parent.enableRtl,
+            enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
             fields: {
                 dataSource: [].slice.call(this.generateTreeData()),
                 id: 'resourceId',
@@ -15827,10 +15894,8 @@ var ResourceBase = /** @__PURE__ @class */ (function () {
             var resourceText = resourceLevel.dataSource.filter(function (resData) {
                 return resData[resourceLevel.idField] === resource.groupOrder[parseInt(i.toString(), 10)];
             });
-            var resourceName = createElement('div', {
-                className: RESOURCE_NAME,
-                innerHTML: resourceText[0][resourceLevel.textField]
-            });
+            var resourceName = createElement('div', { className: RESOURCE_NAME });
+            resourceName.innerText = this_2.parent.sanitize(resourceText[0][resourceLevel.textField]);
             headerCollection.push(resourceName);
             var levelIcon = createElement('div', { className: 'e-icons e-icon-next' });
             headerCollection.push(levelIcon);
@@ -15910,7 +15975,7 @@ var ResourceBase = /** @__PURE__ @class */ (function () {
         var promises = [];
         for (var _i = 0, _a = this.parent.resources; _i < _a.length; _i++) {
             var resource = _a[_i];
-            var dataModule = new Data(resource.dataSource, resource.query);
+            var dataModule = new Data(this.parent, resource.dataSource, resource.query);
             promises.push(dataModule.getData(dataModule.generateQuery()));
         }
         Promise.all(promises).then(function (e) { return _this.dataManagerSuccess(e, isSetModel); })
@@ -16610,7 +16675,7 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
     /**
      * Method to render react templates
      *
-     * @param {Function} callBack - specifies the callBack method
+     * @param {Function} callback - Specifies the callBack method
      * @returns {void}
      * @private
      */
@@ -16634,6 +16699,19 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
             this.clearTemplate(templates);
         }
     };
+    /**
+     * Method to sanitize any suspected untrusted strings and scripts before rendering them.
+     *
+     * @param {string} value - A string value representing the HTML string value to be sanitized.
+     * @returns {string} A sanitized Html string.
+     * @private
+     */
+    Schedule.prototype.sanitize = function (value) {
+        if (this.enableHtmlSanitizer) {
+            return SanitizeHtmlHelper.sanitize(value);
+        }
+        return value;
+    };
     Schedule.prototype.initializeResources = function (isSetModel) {
         if (isSetModel === void 0) { isSetModel = false; }
         if (this.resources.length > 0) {
@@ -16847,7 +16925,7 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
             followingID: this.eventSettings.fields.followingID
         };
         this.setEditorTitles();
-        this.dataModule = new Data(this.eventSettings.dataSource, this.eventSettings.query);
+        this.dataModule = new Data(this, this.eventSettings.dataSource, this.eventSettings.query);
         this.crudModule = new Crud(this);
     };
     Schedule.prototype.setEditorTitles = function () {
@@ -17267,7 +17345,9 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
         var selectedCells = this.getSelectedCells();
         for (var _i = 0, selectedCells_1 = selectedCells; _i < selectedCells_1.length; _i++) {
             var cell = selectedCells_1[_i];
-            cell.setAttribute('aria-selected', 'false');
+            if (this.currentView !== 'Year') {
+                cell.setAttribute('aria-selected', 'false');
+            }
             cell.removeAttribute('tabindex');
         }
         removeClass(selectedCells, SELECTED_CELL_CLASS);
@@ -17285,9 +17365,11 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     Schedule.prototype.addSelectedClass = function (cells, focusCell, isPreventScroll) {
-        for (var _i = 0, cells_1 = cells; _i < cells_1.length; _i++) {
-            var cell = cells_1[_i];
-            cell.setAttribute('aria-selected', 'true');
+        if (this.currentView !== 'Year') {
+            for (var _i = 0, cells_1 = cells; _i < cells_1.length; _i++) {
+                var cell = cells_1[_i];
+                cell.setAttribute('aria-selected', 'true');
+            }
         }
         addClass(cells, SELECTED_CELL_CLASS);
         if (focusCell) {
@@ -18120,6 +18202,7 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
                 case 'dataSource':
                 case 'query':
                 case 'fields':
+                case 'includeFiltersInQuery':
                     this.initializeDataModule();
                     state.isDataManager = true;
                     break;
@@ -18522,6 +18605,17 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
     Schedule.prototype.addEvent = function (data) {
         this.crudModule.addEvent(data);
     };
+    /**
+     * Generates the occurrences of a single recurrence event based on the provided event.
+     *
+     * @function generateEventOccurrences
+     * @param {Object} event Accepts the parent recurrence event from which the occurrences are generated.
+     * @param {Date} startDate Accepts the start date for the event occurrences. If not provided, the event's start date will be used.
+     * @returns {Object[]} Returns the collection of occurrence event objects.
+     */
+    Schedule.prototype.generateEventOccurrences = function (event, startDate) {
+        return (this.eventBase) ? this.eventBase.generateOccurrence(event, startDate) : [];
+    };
     /**
      * Allows the Scheduler events data to be exported as an Excel file either in .xlsx or .csv file formats.
      * By default, the whole event collection bound to the Scheduler gets exported as an Excel file.
@@ -19197,6 +19291,9 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Property(null)
     ], Schedule.prototype, "timeFormat", void 0);
+    __decorate([
+        Property(true)
+    ], Schedule.prototype, "enableHtmlSanitizer", void 0);
     __decorate([
         Property(false)
     ], Schedule.prototype, "enableAllDayScroll", void 0);
@@ -19450,6 +19547,7 @@ var ActionBase = /** @__PURE__ @class */ (function () {
                 parseInt(this.actionObj.element.getAttribute('data-group-index'), 10) === this.actionObj.groupIndex : true;
             if (+eventObj[this.parent.eventFields.startTime] === +this.actionObj.event[this.parent.eventFields.startTime] &&
                 +eventObj[this.parent.eventFields.endTime] === +this.actionObj.event[this.parent.eventFields.endTime] && isSameResource) {
+                this.parent.crudModule.crudObj.isCrudAction = false;
                 return;
             }
             if (eventObj[this.parent.eventFields.recurrenceRule]) {
@@ -19731,6 +19829,10 @@ var ActionBase = /** @__PURE__ @class */ (function () {
             }
             appWidth = eventObj.isSpanned.count * this.actionObj.cellWidth;
         }
+        if (!isResize && this.parent.activeViewOptions.orientation === 'Vertical' && this.parent.activeViewOptions.group.resources.length !== 0) {
+            var eventObj = this.yearEvent.isSpannedEvent(event, event[this.parent.eventFields.startTime]);
+            appWidth = eventObj.isSpanned.count * this.actionObj.cellWidth;
+        }
         var appointmentElement = this.createAppointmentElement(this.actionObj.groupIndex, event[this.parent.eventFields.subject]);
         appointmentElement.setAttribute('drag', 'true');
         addClass([appointmentElement], CLONE_ELEMENT_CLASS);
@@ -20514,8 +20616,9 @@ var YearEvent = /** @__PURE__ @class */ (function (_super) {
         }
     };
     YearEvent.prototype.timelineYearViewEvents = function () {
+        var _this = this;
         var workCell = this.parent.element.querySelector('.' + WORK_CELLS_CLASS + ':not(.' + OTHERMONTH_CLASS + ')');
-        this.cellWidth = workCell.offsetWidth;
+        this.cellWidth = workCell.getBoundingClientRect().width;
         this.cellHeader = getOuterHeight(workCell.querySelector('.' + DATE_HEADER_CLASS));
         var eventTable = this.parent.element.querySelector('.' + EVENT_TABLE_CLASS);
         this.eventHeight = getElementHeightFromClass(eventTable, APPOINTMENT_CLASS);
@@ -20541,10 +20644,10 @@ var YearEvent = /** @__PURE__ @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('.' + APPOINTMENT_WRAPPER_CLASS);
-                    if (!eventWrapper_1) {
-                        eventWrapper_1 = createElement('div', { className: APPOINTMENT_WRAPPER_CLASS });
-                        wrapper_1.appendChild(eventWrapper_1);
+                    eventWrapper = wrapper_1.querySelector('.' + APPOINTMENT_WRAPPER_CLASS);
+                    if (!eventWrapper) {
+                        eventWrapper = createElement('div', { className: APPOINTMENT_WRAPPER_CLASS });
+                        wrapper_1.appendChild(eventWrapper);
                     }
                     if (this.parent.enableRtl) {
                         rightValue = row * this.cellWidth;
@@ -20597,8 +20700,7 @@ var YearEvent = /** @__PURE__ @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);
@@ -20624,6 +20726,19 @@ var YearEvent = /** @__PURE__ @class */ (function (_super) {
                 }
             }
         }
+        if (this.parent.rowAutoHeight && this.parent.activeViewOptions.orientation === 'Vertical') {
+            var appContainer = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CONTAINER_CLASS));
+            var tr_1 = [].slice.call(this.parent.element.querySelectorAll('.' + CONTENT_TABLE_CLASS + ' tbody tr'));
+            appContainer.forEach(function (ele, index) {
+                var app = [].slice.call(ele.querySelectorAll('.' + APPOINTMENT_CLASS));
+                var appTop = tr_1[parseInt(index.toString(), 10)].offsetTop + _this.cellHeader + EVENT_GAP$2;
+                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') ||
@@ -20638,7 +20753,8 @@ var YearEvent = /** @__PURE__ @class */ (function (_super) {
             }
         }
         if ((dayEnd.getTime() >= eventObj[this.fields.endTime].getTime()) || (isLeftRightResize && !this.isResource &&
-            addDays(dayEnd, -1).getMonth() === eventObj[this.fields.endTime].getMonth())) {
+            addDays(dayEnd, -1).getMonth() === eventObj[this.fields.endTime].getMonth()) ||
+            (isLeftRightResize && this.isResource && (dayEnd.getTime() <= eventObj[this.fields.endTime].getTime()))) {
             if (isLeftRightResize) {
                 data.isRight = false;
             }
@@ -20649,8 +20765,11 @@ var YearEvent = /** @__PURE__ @class */ (function (_super) {
         eventObj.data = data;
     };
     YearEvent.prototype.timelineResourceEvents = function () {
+        var _this = this;
+        var contentTable = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
+        var isVerticalScrollbarAvail = contentTable.offsetWidth > contentTable.clientWidth;
         var workCell = this.parent.element.querySelector('.' + WORK_CELLS_CLASS);
-        this.cellWidth = workCell.offsetWidth;
+        this.cellWidth = workCell.getBoundingClientRect().width;
         this.cellHeader = 0;
         var eventTable = this.parent.element.querySelector('.' + EVENT_TABLE_CLASS);
         this.eventHeight = getElementHeightFromClass(eventTable, APPOINTMENT_CLASS);
@@ -20678,6 +20797,39 @@ var YearEvent = /** @__PURE__ @class */ (function (_super) {
                 }
             }
         }
+        if (this.parent.rowAutoHeight && !isVerticalScrollbarAvail && contentTable.offsetWidth > contentTable.clientWidth) {
+            var appointments = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CLASS));
+            appointments.forEach(function (ele) {
+                ele.style.removeProperty('left');
+                ele.style.removeProperty('right');
+            });
+            var appContainer = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CONTAINER_CLASS));
+            var conTable_1 = this.parent.element.querySelector('.' + 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: APPOINTMENT_WRAPPER_CLASS });
@@ -20688,39 +20840,60 @@ var YearEvent = /** @__PURE__ @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$2 + 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$2 + 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_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.parent.rowAutoHeight || this.cellHeight > availedHeight) {
-                this.renderEvent(eventWrapper, eventData, month, leftValue, leftValue, monthStart, index);
-                this.updateCellHeight(td, availedHeight);
+            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
@@ -20746,13 +20919,16 @@ var YearEvent = /** @__PURE__ @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$2;
         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(eventRendered, args, function (eventArgs) {
             if (!eventArgs.cancel) {
@@ -20858,6 +21034,7 @@ var YearEvent = /** @__PURE__ @class */ (function (_super) {
         var appointmentDetails = createElement('div', { className: 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;
@@ -20869,24 +21046,28 @@ var YearEvent = /** @__PURE__ @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 = 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 (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 (eventEnd.getTime() > monthEnd.getTime()) {
-            eventData[this.fields.endTime] = monthEnd;
-            isSpanned.isRight = true;
-        }
-        if (this.parent.activeViewOptions.group.resources.length === 0 || this.parent.uiStateValues.isGroupAdaptive) {
-            var end = resetTime(eventData[this.fields.endTime]).getTime();
-            var start = resetTime(eventData[this.fields.startTime]).getTime();
-            if (eventObj[this.fields.isAllDay] && end === eventObj[this.fields.endTime].getTime() || isSpanned.isRight) {
-                end = 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 = resetTime(eventData[this.fields.endTime]).getTime();
+                var start = resetTime(eventData[this.fields.startTime]).getTime();
+                if (eventObj[this.fields.isAllDay] && end === eventObj[this.fields.endTime].getTime() || isSpanned.isRight) {
+                    end = addDays(new Date(end), -1).getTime();
+                }
+                isSpanned.count = Math.ceil((end - start) / MS_PER_DAY) + 1;
             }
-            isSpanned.count = Math.ceil((end - start) / MS_PER_DAY) + 1;
         }
         eventData.isSpanned = isSpanned;
         if (resetTime(eventStart).getTime() < resetTime(this.parent.minDate).getTime()) {
@@ -20897,6 +21078,16 @@ var YearEvent = /** @__PURE__ @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;
@@ -20920,19 +21111,11 @@ var YearEvent = /** @__PURE__ @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 ((resetTime(appStart).getTime() >= dateStart) && (resetTime(appEnd).getTime() <= dateEnd)) {
-                    appointmentsList.push(app);
-                }
-            }
-            else {
-                var timeCondition = app[this.fields.isAllDay] ? resetTime(appEnd).getTime() > dateStart :
-                    resetTime(appEnd).getTime() >= dateStart;
-                if (((resetTime(appStart).getTime() <= dateStart) && (timeCondition)) ||
-                    (resetTime(appStart).getTime() >= dateStart) && (resetTime(appEnd).getTime() <= dateEnd)) {
-                    appointmentsList.push(app);
-                }
+            var timeCondition = app[this.fields.isAllDay] ? resetTime(appEnd).getTime() > dateStart :
+                resetTime(appEnd).getTime() >= dateStart;
+            if (((resetTime(appStart).getTime() <= dateStart) && (timeCondition)) ||
+                (resetTime(appStart).getTime() >= dateStart) && (resetTime(appEnd).getTime() <= dateEnd)) {
+                appointmentsList.push(app);
             }
         }
         return appointmentsList;
@@ -22702,9 +22885,9 @@ var ViewBase = /** @__PURE__ @class */ (function () {
             append(quickTemplate, tdElement);
         }
         else {
-            tdElement.appendChild(createElement('div', {
-                className: className, innerHTML: tdData.resourceData[tdData.resource.textField]
-            }));
+            var resourceText = createElement('div', { className: className });
+            resourceText.innerText = this.parent.sanitize(tdData.resourceData[tdData.resource.textField]);
+            tdElement.appendChild(resourceText);
         }
     };
     ViewBase.prototype.renderResourceMobileLayout = function () {
@@ -22728,7 +22911,6 @@ var ViewBase = /** @__PURE__ @class */ (function () {
             var colElements = this.getColElements();
             var contentBody = this.element.querySelector('.' + CONTENT_TABLE_CLASS + ' tbody');
             var colWidth_1 = (contentBody.getBoundingClientRect().width / (colElements.length / 2));
-            colElements.forEach(function (col) { return setStyleAttribute(col, { 'width': formatUnit(colWidth_1) }); });
             if (content.offsetHeight !== content.clientHeight) {
                 var resourceColumn = this.parent.element.querySelector('.' + RESOURCE_COLUMN_WRAP_CLASS);
                 if (!isNullOrUndefined(resourceColumn)) {
@@ -22958,8 +23140,8 @@ var VerticalView = /** @__PURE__ @class */ (function (_super) {
         var content = this.getScrollableElement();
         var header = this.getDatesHeaderElement();
         var scrollerHeight = this.parent.element.offsetHeight - headerBarHeight - header.offsetHeight;
-        this.setColWidth(content);
         this.setContentHeight(content, timeCells, scrollerHeight);
+        this.setColWidth(content);
         var scrollBarWidth = getScrollBarWidth();
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         header.firstElementChild.style[args.cssProperties.rtlBorder] = '';
@@ -24270,9 +24452,11 @@ var Month = /** @__PURE__ @class */ (function (_super) {
         if (!this.parent.isMinMaxDate(data.date)) {
             data.className.push(DISABLE_DATES);
         }
-        if (this.parent.currentView === 'MonthAgenda' && this.parent.isSelectedDate(data.date)) {
-            data.className.push(SELECTED_CELL_CLASS);
-        }
+        this.updateSelectedCellClass(data);
+    };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    Month.prototype.updateSelectedCellClass = function (data) {
+        return;
     };
     Month.prototype.isOtherMonth = function (date) {
         return date.getTime() < this.monthDates.start.getTime() || date.getTime() > this.monthDates.end.getTime();
@@ -24620,6 +24804,7 @@ var Year = /** @__PURE__ @class */ (function (_super) {
             calendarElement.appendChild(this.renderCalendarContent(currentMonth));
             calendarWrapper.appendChild(calendarElement);
         }
+        this.renderDates.splice(0, 1);
     };
     Year.prototype.renderCalendarHeader = function (currentDate) {
         var headerWrapper = createElement('div', { className: 'e-header e-month' });
@@ -24679,7 +24864,7 @@ var Year = /** @__PURE__ @class */ (function (_super) {
                 var date = weekDates_1[_i];
                 var td = createElement('td', {
                     className: 'e-cell ' + WORK_CELLS_CLASS,
-                    attrs: { 'aria-selected': 'false', 'data-date': date.getTime().toString() }
+                    attrs: { 'data-date': date.getTime().toString() }
                 });
                 if (this.parent.activeViewOptions.cellHeaderTemplate) {
                     var args = { date: date, type: 'monthCells' };
@@ -24707,6 +24892,9 @@ var Year = /** @__PURE__ @class */ (function (_super) {
                     addClass([td], classList$$1);
                 }
                 tr_1.appendChild(td);
+                if (currentDate.getMonth() === date.getMonth()) {
+                    this.renderDates.push(new Date(date));
+                }
                 if (!this.parent.isMinMaxDate(date)) {
                     addClass([td], DISABLE_DATES);
                 }
@@ -25078,9 +25266,13 @@ var AgendaBase = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(eventLocation) && eventLocation !== '') {
             eventSubject += ',';
         }
-        appSubjectWrap.appendChild(createElement('div', { className: SUBJECT_CLASS, innerHTML: eventSubject }));
+        var appSubjectText = createElement('div', { className: SUBJECT_CLASS });
+        appSubjectText.innerText = this.parent.sanitize(eventSubject);
+        appSubjectWrap.appendChild(appSubjectText);
         if (!isNullOrUndefined(eventLocation) && eventLocation !== '') {
-            appSubjectWrap.appendChild(createElement('div', { className: LOCATION_CLASS, innerHTML: eventLocation }));
+            var appLocation = createElement('div', { className: LOCATION_CLASS });
+            appLocation.innerText = this.parent.sanitize(eventLocation);
+            appSubjectWrap.appendChild(appLocation);
         }
         if (!isNullOrUndefined(event[fieldMapping.recurrenceRule])) {
             var iconClass = (event[fieldMapping.id] === event[fieldMapping.recurrenceID]) ?
@@ -25863,6 +26055,11 @@ var MonthAgenda = /** @__PURE__ @class */ (function (_super) {
         }
         return 'abbreviated';
     };
+    MonthAgenda.prototype.updateSelectedCellClass = function (data) {
+        if (resetTime(data.date).getTime() === resetTime(this.monthAgendaDate).getTime()) {
+            data.className.push(SELECTED_CELL_CLASS);
+        }
+    };
     MonthAgenda.prototype.setEventWrapperHeight = function () {
         var headerHeight = (this.parent.headerModule ? this.parent.headerModule.getHeaderElement().offsetHeight : 0) + 2;
         var resourceWrapper = this.parent.element.querySelector('.' + RESOURCE_HEADER_TOOLBAR);
@@ -26735,15 +26932,15 @@ var TimelineYear = /** @__PURE__ @class */ (function (_super) {
             this.parent.virtualScrollModule.renderVirtualTrack(content);
         }
         var contentTBody = contentTable.querySelector('tbody');
-        if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
-            if (this.parent.rowAutoHeight) {
-                var addClassTable = [contentTable];
-                var monthHeader = this.parent.element.querySelector('.' + MONTH_HEADER_WRAPPER + ' .' + SCHEDULE_TABLE_CLASS);
-                if (monthHeader) {
-                    addClassTable.push(monthHeader);
-                }
-                addClass(addClassTable, AUTO_HEIGHT);
+        if (this.parent.rowAutoHeight) {
+            var addClassTable = [contentTable];
+            var monthHeader = this.parent.element.querySelector('.' + MONTH_HEADER_WRAPPER + ' .' + SCHEDULE_TABLE_CLASS);
+            if (monthHeader) {
+                addClassTable.push(monthHeader);
             }
+            addClass(addClassTable, AUTO_HEIGHT);
+        }
+        if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
             var colCount = this.parent.activeViewOptions.orientation === 'Horizontal' ? this.colLevels.slice(-1)[0].length : this.columnCount;
             contentTable.appendChild(this.createTableColGroup(colCount));
             this.renderResourceContent(eventWrapper, monthTBody, contentTBody);
@@ -26845,6 +27042,9 @@ var TimelineYear = /** @__PURE__ @class */ (function (_super) {
                 if (td.classList.contains(OTHERMONTH_CLASS)) {
                     continue;
                 }
+                else {
+                    this.renderDates.push(new Date(date));
+                }
                 td.appendChild(dateHeader);
                 if (isDateAvail) {
                     td.setAttribute('data-date', date.getTime().toString());
@@ -26859,6 +27059,7 @@ var TimelineYear = /** @__PURE__ @class */ (function (_super) {
                 }
             }
         }
+        this.renderDates.splice(0, 1);
     };
     TimelineYear.prototype.getContentRows = function () {
         var tRow = [];