@syncfusion/ej2-schedule 20.4.53 → 21.1.37

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

@@ -1021,6 +1021,7 @@ class HeaderRenderer {
                 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));
@@ -2273,15 +2274,16 @@ class KeyboardInteraction {
             const args = {
                 element: target, requestType: cellSelect
             };
-            const cellData = {};
-            const 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, () => {
                 this.initialTarget = target;
                 this.selectedCells = [target];
@@ -2304,7 +2306,7 @@ class KeyboardInteraction {
             nextAppEle = isReverse ? appointments[appointments.length - 1] : appointments[0];
         }
         if (nextAppEle) {
-            this.parent.eventBase.addSelectedAppointments([nextAppEle]);
+            this.parent.eventBase.addSelectedAppointments([nextAppEle], true);
             nextAppEle.focus();
             addClass([nextAppEle], AGENDA_SELECTED_CELL);
         }
@@ -2330,7 +2332,7 @@ class KeyboardInteraction {
             if (filteredElements.length > 0) {
                 const selectedElement = isReverse ? filteredElements[filteredElements.length - 1] : filteredElements[0];
                 const focusElements = this.getAppointmentElementsByGuid(selectedElement.getAttribute('data-guid'));
-                this.parent.eventBase.addSelectedAppointments(focusElements);
+                this.parent.eventBase.addSelectedAppointments(focusElements, true);
                 (focusElements[focusElements.length - 1]).focus();
             }
         }
@@ -2788,7 +2790,7 @@ class KeyboardInteraction {
             if (appElements.length > 0) {
                 this.parent.eventBase.removeSelectedAppointmentClass();
                 const focusAppointment = isReverse ? appElements.slice(-1)[0] : appElements[0];
-                this.parent.eventBase.addSelectedAppointments([focusAppointment]);
+                this.parent.eventBase.addSelectedAppointments([focusAppointment], true);
                 focusAppointment.focus();
                 e.preventDefault();
             }
@@ -2890,7 +2892,7 @@ class KeyboardInteraction {
             const nextAppEle = eventEle[0];
             if (nextAppEle) {
                 this.parent.eventBase.removeSelectedAppointmentClass();
-                this.parent.eventBase.addSelectedAppointments([nextAppEle]);
+                this.parent.eventBase.addSelectedAppointments([nextAppEle], true);
                 nextAppEle.focus();
             }
         }
@@ -2902,7 +2904,7 @@ class KeyboardInteraction {
             if (appElements.length > 0) {
                 this.parent.eventBase.removeSelectedAppointmentClass();
                 const focusAppointment = appElements[0];
-                this.parent.eventBase.addSelectedAppointments([focusAppointment]);
+                this.parent.eventBase.addSelectedAppointments([focusAppointment], true);
                 focusAppointment.focus();
                 e.preventDefault();
             }
@@ -2982,11 +2984,13 @@ class Data {
     /**
      * 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
      */
-    constructor(dataSource, query) {
+    constructor(parent, dataSource, query) {
+        this.parent = parent;
         this.initDataManager(dataSource, query);
     }
     /**
@@ -3011,6 +3015,11 @@ class Data {
      */
     generateQuery(startDate, endDate) {
         const query = this.query.clone();
+        if (this.parent && this.parent.eventSettings.includeFiltersInQuery && startDate && endDate) {
+            const dateQuery = this.getStartEndQuery(startDate, endDate);
+            const 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());
         }
@@ -3019,6 +3028,23 @@ class Data {
         }
         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
+     */
+    getStartEndQuery(startDate, endDate) {
+        const fieldMapping = this.parent.eventFields;
+        const 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
      *
@@ -5396,12 +5422,7 @@ class EventBase {
         return this.filterEvents(eStart, eEnd, blockEvents, resourceData);
     }
     filterEvents(startDate, endDate, appointments = this.parent.eventsProcessed, resourceTdData) {
-        const fieldMapping = this.parent.eventFields;
-        const 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)));
+        const predicate = this.parent.dataModule.getStartEndQuery(startDate, endDate);
         let filter = new DataManager({ json: appointments }).executeLocal(new Query().where(predicate));
         if (resourceTdData) {
             filter = this.filterEventsByResource(resourceTdData, filter);
@@ -5661,7 +5682,7 @@ class EventBase {
             }
         }
         if (target && this.parent.selectedElements.length > 0) {
-            this.addSelectedAppointments(this.parent.selectedElements);
+            this.addSelectedAppointments(this.parent.selectedElements, false);
         }
         return this.parent.selectedElements;
     }
@@ -5690,12 +5711,12 @@ class EventBase {
             removeClass(selectedAppointments, AGENDA_SELECTED_CELL);
         }
     }
-    addSelectedAppointments(cells) {
+    addSelectedAppointments(cells, preventFocus) {
         if (this.parent.currentView !== 'MonthAgenda') {
             this.parent.removeSelectedClass();
         }
         addClass(cells, APPOINTMENT_BORDER);
-        if (cells.length > 0) {
+        if (cells.length > 0 && !preventFocus) {
             cells[cells.length - 1].focus();
         }
     }
@@ -5719,6 +5740,10 @@ class EventBase {
         }
         const selectedAppointments = this.getSelectedAppointments();
         if (selectedAppointments.length > 0) {
+            if (this.parent.activeEventData && this.parent.activeEventData.element && selectedAppointments.indexOf(this.parent.activeEventData.element) > -1) {
+                this.parent.activeEventData.element.focus();
+                return;
+            }
             selectedAppointments[selectedAppointments.length - 1].focus();
             return;
         }
@@ -6009,7 +6034,7 @@ class EventBase {
         const target = closest(eventData.target, '.' + APPOINTMENT_CLASS);
         const guid = target.getAttribute('data-guid');
         if (isMultiple) {
-            this.addSelectedAppointments([].slice.call(this.parent.element.querySelectorAll('div[data-guid="' + guid + '"]')));
+            this.addSelectedAppointments([].slice.call(this.parent.element.querySelectorAll('div[data-guid="' + guid + '"]')), true);
             target.focus();
         }
         let eventObject = this.getEventByGuid(guid);
@@ -6234,9 +6259,8 @@ class EventBase {
             templateElement = this.parent.getAppointmentTemplate()(record, this.parent, templateName, templateId, false);
         }
         else {
-            const appointmentSubject = createElement('div', {
-                className: SUBJECT_CLASS, innerHTML: eventSubject
-            });
+            const appointmentSubject = createElement('div', { className: SUBJECT_CLASS });
+            appointmentSubject.innerText = this.parent.sanitize(eventSubject);
             templateElement = [appointmentSubject];
         }
         append(templateElement, appointmentWrapper);
@@ -6414,6 +6438,29 @@ class EventBase {
         return eventArgs && eventArgs.changedTouches ? eventArgs.changedTouches[0] : e.changedTouches ? e.changedTouches[0] :
             eventArgs || e;
     }
+    renderSpannedIcon(element, spanEvent) {
+        const iconElement = createElement('div', { className: EVENT_INDICATOR_CLASS + ' ' + ICON });
+        if (spanEvent.isLeft) {
+            const iconLeft = iconElement.cloneNode();
+            addClass([iconLeft], EVENT_ICON_LEFT_CLASS);
+            prepend([iconLeft], element);
+        }
+        if (spanEvent.isRight) {
+            const iconRight = iconElement.cloneNode();
+            addClass([iconRight], EVENT_ICON_RIGHT_CLASS);
+            append([iconRight], element);
+        }
+        if (spanEvent.isTop) {
+            const iconTop = iconElement.cloneNode();
+            addClass([iconTop], EVENT_ICON_UP_CLASS);
+            prepend([iconTop], element);
+        }
+        if (spanEvent.isBottom) {
+            const iconBottom = iconElement.cloneNode();
+            addClass([iconBottom], EVENT_ICON_DOWN_CLASS);
+            append([iconBottom], element);
+        }
+    }
     unWireEvents() {
         const appElements = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CLASS));
         for (const element of appElements) {
@@ -6738,7 +6785,8 @@ class VerticalEvent extends EventBase {
             templateElement = this.parent.getAppointmentTemplate()(record, this.parent, templateName, templateId, false);
         }
         else {
-            const appointmentSubject = createElement('div', { className: SUBJECT_CLASS, innerHTML: recordSubject });
+            const appointmentSubject = createElement('div', { className: SUBJECT_CLASS });
+            appointmentSubject.innerText = this.parent.sanitize(recordSubject);
             if (isAllDay) {
                 if (record[fieldMapping.isAllDay]) {
                     templateElement = [appointmentSubject];
@@ -6770,10 +6818,8 @@ class VerticalEvent extends EventBase {
                     className: APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + DISABLE_CLASS : ''),
                     innerHTML: timeStr
                 });
-                const appointmentLocation = createElement('div', {
-                    className: LOCATION_CLASS,
-                    innerHTML: (record[fieldMapping.location] || this.parent.eventSettings.fields.location.default || '')
-                });
+                const appointmentLocation = createElement('div', { className: LOCATION_CLASS });
+                appointmentLocation.innerText = this.parent.sanitize((record[fieldMapping.location] || this.parent.eventSettings.fields.location.default || ''));
                 templateElement = [appointmentSubject, appointmentTime, appointmentLocation];
             }
         }
@@ -6790,7 +6836,7 @@ class VerticalEvent extends EventBase {
                 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);
         }
@@ -6822,29 +6868,6 @@ class VerticalEvent extends EventBase {
             countCell.innerHTML = '+' + this.parent.globalize.formatNumber(moreCount) + '&nbsp;' + (this.parent.isAdaptive ? '' : this.parent.localeObj.getConstant('more'));
         }
     }
-    renderSpannedIcon(element, spanEvent) {
-        const iconElement = createElement('div', { className: EVENT_INDICATOR_CLASS + ' ' + ICON });
-        if (spanEvent.isLeft) {
-            const iconLeft = iconElement.cloneNode();
-            addClass([iconLeft], EVENT_ICON_LEFT_CLASS);
-            prepend([iconLeft], element);
-        }
-        if (spanEvent.isRight) {
-            const iconRight = iconElement.cloneNode();
-            addClass([iconRight], EVENT_ICON_RIGHT_CLASS);
-            append([iconRight], element);
-        }
-        if (spanEvent.isTop) {
-            const iconTop = iconElement.cloneNode();
-            addClass([iconTop], EVENT_ICON_UP_CLASS);
-            prepend([iconTop], element);
-        }
-        if (spanEvent.isBottom) {
-            const iconBottom = iconElement.cloneNode();
-            addClass([iconBottom], EVENT_ICON_DOWN_CLASS);
-            append([iconBottom], element);
-        }
-    }
     isSpannedEvent(record, day, resource) {
         let currentDate = resetTime(this.dateRender[parseInt(resource.toString(), 10)][parseInt(day.toString(), 10)]);
         const renderedDate = this.getRenderedDates(this.dateRender[parseInt(resource.toString(), 10)]) || [currentDate];
@@ -7646,10 +7669,8 @@ class MonthEvent extends EventBase {
         }
         else {
             const eventLocation = (record[this.fields.location] || this.parent.eventSettings.fields.location.default || '');
-            const appointmentSubject = createElement('div', {
-                className: SUBJECT_CLASS,
-                innerHTML: (eventSubject + (eventLocation ? ';&nbsp' + eventLocation : ''))
-            });
+            const appointmentSubject = createElement('div', { className: SUBJECT_CLASS });
+            appointmentSubject.innerText = this.parent.sanitize((eventSubject + (eventLocation ? '; ' + eventLocation : '')));
             const appointmentStartTime = createElement('div', {
                 className: APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + DISABLE_CLASS : ''),
                 innerHTML: this.parent.getTimeString(eventData[this.fields.startTime])
@@ -7692,7 +7713,8 @@ class MonthEvent extends EventBase {
                     const appTime = createElement('div', {
                         className: APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + DISABLE_CLASS : ''), innerHTML: timeString
                     });
-                    const appLocation = createElement('div', { className: LOCATION_CLASS, innerHTML: eventLocation });
+                    const appLocation = createElement('div', { className: LOCATION_CLASS });
+                    appLocation.innerText = this.parent.sanitize(eventLocation);
                     innerElement = [appointmentSubject, appTime, appLocation];
                 }
                 const wrap = createElement('div', { className: 'e-inner-wrap' });
@@ -8888,6 +8910,7 @@ class QuickPopups {
             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' },
@@ -8919,6 +8942,7 @@ class QuickPopups {
             cssClass: className,
             disabled: isDisabled,
             enableRtl: this.parent.enableRtl,
+            enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
             iconCss: iconName
         });
         buttonObj.appendTo(element);
@@ -9112,7 +9136,8 @@ class QuickPopups {
                     append(templateElement, appointmentElement);
                 }
                 else {
-                    appointmentElement.appendChild(createElement('div', { className: SUBJECT_CLASS, innerHTML: eventText }));
+                    appointmentElement.appendChild(createElement('div', { className: SUBJECT_CLASS }));
+                    appointmentElement.firstElementChild.innerText = this.parent.sanitize(eventText);
                 }
                 if (!isNullOrUndefined(groupIndex)) {
                     appointmentElement.setAttribute('data-group-index', groupIndex);
@@ -9361,10 +9386,14 @@ class QuickPopups {
                         `<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;
             }
             const templateWrapper = createElement('div', { innerHTML: header });
+            if (headerType === 'Event') {
+                const subjectText = templateWrapper.querySelector('.' + SUBJECT_CLASS);
+                subjectText.innerText = this.parent.sanitize(args.eventSubject);
+            }
             append([].slice.call(templateWrapper.childNodes), headerTemplate);
         }
         return headerTemplate;
@@ -9392,7 +9421,7 @@ class QuickPopups {
                         `${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);
@@ -9406,8 +9435,7 @@ class QuickPopups {
                     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 +
@@ -9416,17 +9444,33 @@ class QuickPopups {
                     }
                     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;
             }
             const templateWrapper = createElement('div', { innerHTML: content });
+            if (data[this.parent.eventFields.location]) {
+                const 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]) {
+                const descriptionDetails = templateWrapper.querySelector('.' + DESCRIPTION_DETAILS_CLASS);
+                if (!isNullOrUndefined(descriptionDetails)) {
+                    descriptionDetails.innerText = this.parent.sanitize(data[this.parent.eventFields.description]);
+                }
+            }
+            if (resourceText) {
+                const resourceDetails = templateWrapper.querySelector('.' + RESOURCE_DETAILS_CLASS);
+                if (!isNullOrUndefined(resourceDetails)) {
+                    resourceDetails.innerText = this.parent.sanitize(resourceText);
+                }
+            }
             append([].slice.call(templateWrapper.childNodes), contentTemplate);
         }
         return contentTemplate;
@@ -9955,7 +9999,7 @@ class QuickPopups {
     }
     quickPopupClose() {
         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();
@@ -10172,7 +10216,8 @@ class EventTooltip {
             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);
     }
@@ -11434,6 +11479,7 @@ class EventWindow {
             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,
@@ -11641,6 +11687,10 @@ class EventWindow {
     renderFormElements(form, args) {
         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;
@@ -11813,6 +11863,7 @@ class EventWindow {
         if (resourceData.allowMultiple) {
             const listObj = new MultiSelect({
                 enableRtl: this.parent.enableRtl,
+                enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
                 cssClass: this.parent.cssClass || '',
                 dataSource: resourceData.dataSource,
                 change: this.onMultiselectResourceChange.bind(this),
@@ -11950,6 +12001,7 @@ class EventWindow {
             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);
@@ -12076,6 +12128,7 @@ class EventWindow {
             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)
@@ -12143,6 +12196,9 @@ class EventWindow {
         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;
@@ -12172,10 +12228,18 @@ class EventWindow {
                 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)) {
             const 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 {
@@ -12816,9 +12880,11 @@ class EventWindow {
         }
         const currentStartTime = new Date(+currentData[this.fields.startTime]);
         const currentEndTime = new Date(+currentData[this.fields.endTime]);
+        let nextStartTime;
+        let 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]);
         }
         const lastEndTime = new Date(+recurColl[recurColl.length - 1][this.fields.endTime]);
         if (index === 0) {
@@ -13009,7 +13075,7 @@ class EventWindow {
                 value = element.checked;
             }
             else {
-                value = SanitizeHtmlHelper.sanitize(element.value);
+                value = this.parent.sanitize(element.value);
             }
         }
         return value;
@@ -14019,6 +14085,7 @@ class Crud {
             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;
             }
             const updateEvents = (eventData instanceof Array) ? eventData : [eventData];
@@ -14665,8 +14732,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.
@@ -14782,6 +14849,9 @@ __decorate$6([
 __decorate$6([
     Property()
 ], EventSettings.prototype, "sortComparer", void 0);
+__decorate$6([
+    Property()
+], EventSettings.prototype, "includeFiltersInQuery", void 0);
 
 var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -15063,7 +15133,7 @@ class ResourceBase {
                     classList(target, [RESOURCE_COLLAPSE_CLASS], [RESOURCE_EXPAND_CLASS]);
                     hide = false;
                 }
-                const eventElements = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CLASS));
+                const eventElements = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CLASS + ',.' + MORE_INDICATOR_CLASS));
                 for (const element of eventElements) {
                     remove(element);
                 }
@@ -15192,6 +15262,7 @@ class ResourceBase {
         this.treeViewObj = new TreeView({
             cssClass: this.parent.cssClass,
             enableRtl: this.parent.enableRtl,
+            enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
             fields: {
                 dataSource: [].slice.call(this.generateTreeData()),
                 id: 'resourceId',
@@ -15288,10 +15359,8 @@ class ResourceBase {
         for (let i = 0, len = resource.groupOrder.length; i < len; i++) {
             const resourceLevel = this.resourceCollection[parseInt(i.toString(), 10)];
             const resourceText = resourceLevel.dataSource.filter((resData) => resData[resourceLevel.idField] === resource.groupOrder[parseInt(i.toString(), 10)]);
-            const resourceName = createElement('div', {
-                className: RESOURCE_NAME,
-                innerHTML: resourceText[0][resourceLevel.textField]
-            });
+            const resourceName = createElement('div', { className: RESOURCE_NAME });
+            resourceName.innerText = this.parent.sanitize(resourceText[0][resourceLevel.textField]);
             headerCollection.push(resourceName);
             const levelIcon = createElement('div', { className: 'e-icons e-icon-next' });
             headerCollection.push(levelIcon);
@@ -15363,7 +15432,7 @@ class ResourceBase {
         this.parent.showSpinner();
         const promises = [];
         for (const resource of this.parent.resources) {
-            const dataModule = new Data(resource.dataSource, resource.query);
+            const dataModule = new Data(this.parent, resource.dataSource, resource.query);
             promises.push(dataModule.getData(dataModule.generateQuery()));
         }
         Promise.all(promises).then((e) => this.dataManagerSuccess(e, isSetModel))
@@ -15997,7 +16066,7 @@ let Schedule = class Schedule extends Component {
     /**
      * Method to render react templates
      *
-     * @param {Function} callBack - specifies the callBack method
+     * @param {Function} callback - Specifies the callBack method
      * @returns {void}
      * @private
      */
@@ -16021,6 +16090,19 @@ let Schedule = class Schedule extends Component {
             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
+     */
+    sanitize(value) {
+        if (this.enableHtmlSanitizer) {
+            return SanitizeHtmlHelper.sanitize(value);
+        }
+        return value;
+    }
     initializeResources(isSetModel = false) {
         if (this.resources.length > 0) {
             this.resourceBase = new ResourceBase(this);
@@ -16230,7 +16312,7 @@ let Schedule = class Schedule extends Component {
             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);
     }
     setEditorTitles() {
@@ -16428,6 +16510,9 @@ let Schedule = class Schedule extends Component {
                         if (this.headerModule) {
                             this.headerModule.setCalendarDate(navigationArgs.currentDate);
                         }
+                        if (this.currentView === 'MonthAgenda' && this.monthAgendaModule) {
+                            this.monthAgendaModule.monthAgendaDate = new Date('' + this.selectedDate);
+                        }
                         this.initializeView(this.currentView);
                         this.animateLayout();
                         args = { requestType: 'dateNavigate', cancel: false, event: event };
@@ -16643,7 +16728,9 @@ let Schedule = class Schedule extends Component {
     removeSelectedClass() {
         const selectedCells = this.getSelectedCells();
         for (const cell of selectedCells) {
-            cell.setAttribute('aria-selected', 'false');
+            if (this.currentView !== 'Year') {
+                cell.setAttribute('aria-selected', 'false');
+            }
             cell.removeAttribute('tabindex');
         }
         removeClass(selectedCells, SELECTED_CELL_CLASS);
@@ -16661,8 +16748,10 @@ let Schedule = class Schedule extends Component {
      * @private
      */
     addSelectedClass(cells, focusCell, isPreventScroll) {
-        for (const cell of cells) {
-            cell.setAttribute('aria-selected', 'true');
+        if (this.currentView !== 'Year') {
+            for (const cell of cells) {
+                cell.setAttribute('aria-selected', 'true');
+            }
         }
         addClass(cells, SELECTED_CELL_CLASS);
         if (focusCell) {
@@ -17319,6 +17408,7 @@ let Schedule = class Schedule extends Component {
             this.changeDate(this.selectedDate);
         }
         else if (state.isLayout) {
+            this.activeCellsData = null;
             this.initializeView(this.currentView);
         }
         else if (state.isDataManager && this.crudModule) {
@@ -17492,6 +17582,7 @@ let Schedule = class Schedule extends Component {
                 case 'dataSource':
                 case 'query':
                 case 'fields':
+                case 'includeFiltersInQuery':
                     this.initializeDataModule();
                     state.isDataManager = true;
                     break;
@@ -17892,6 +17983,17 @@ let Schedule = class Schedule extends Component {
     addEvent(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.
+     */
+    generateEventOccurrences(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.
@@ -18344,7 +18446,7 @@ let Schedule = class Schedule extends Component {
             const element = this.element.querySelector('div[data-guid="' + selectEvent.Guid + '"]');
             if (element) {
                 this.eventBase.removeSelectedAppointmentClass();
-                this.eventBase.addSelectedAppointments([element]);
+                this.eventBase.addSelectedAppointments([element], false);
                 this.activeEventData = { event: selectEvent, element: element };
                 if (this.currentView === 'Agenda' || this.currentView === 'MonthAgenda') {
                     addClass([this.activeEventData.element], AGENDA_SELECTED_CELL);
@@ -18558,6 +18660,9 @@ __decorate([
 __decorate([
     Property(null)
 ], Schedule.prototype, "timeFormat", void 0);
+__decorate([
+    Property(true)
+], Schedule.prototype, "enableHtmlSanitizer", void 0);
 __decorate([
     Property(false)
 ], Schedule.prototype, "enableAllDayScroll", void 0);
@@ -18806,6 +18911,7 @@ class ActionBase {
                 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]) {
@@ -19079,6 +19185,10 @@ class ActionBase {
             }
             appWidth = eventObj.isSpanned.count * this.actionObj.cellWidth;
         }
+        if (!isResize && this.parent.activeViewOptions.orientation === 'Vertical' && this.parent.activeViewOptions.group.resources.length !== 0) {
+            const eventObj = this.yearEvent.isSpannedEvent(event, event[this.parent.eventFields.startTime]);
+            appWidth = eventObj.isSpanned.count * this.actionObj.cellWidth;
+        }
         const appointmentElement = this.createAppointmentElement(this.actionObj.groupIndex, event[this.parent.eventFields.subject]);
         appointmentElement.setAttribute('drag', 'true');
         addClass([appointmentElement], CLONE_ELEMENT_CLASS);
@@ -19813,7 +19923,7 @@ class YearEvent extends TimelineEvent {
     }
     timelineYearViewEvents() {
         const 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));
         const eventTable = this.parent.element.querySelector('.' + EVENT_TABLE_CLASS);
         this.eventHeight = getElementHeightFromClass(eventTable, APPOINTMENT_CLASS);
@@ -19824,7 +19934,7 @@ class YearEvent extends TimelineEvent {
         for (let row = 0; row < months.length; row++) {
             const wrapper = wrapperCollection[parseInt(row.toString(), 10)];
             let td = row + 1;
-            const eventWrapper = createElement('div', { className: APPOINTMENT_WRAPPER_CLASS });
+            let eventWrapper = createElement('div', { className: APPOINTMENT_WRAPPER_CLASS });
             wrapper.appendChild(eventWrapper);
             let monthStart = new Date(this.parent.selectedDate.getFullYear(), months[parseInt(row.toString(), 10)], 1);
             const monthEnd = new Date(monthStart.getFullYear(), monthStart.getMonth() + 1, 0);
@@ -19839,7 +19949,7 @@ class YearEvent extends TimelineEvent {
                 if (this.parent.activeViewOptions.orientation === 'Vertical') {
                     const wrapper = wrapperCollection[parseInt(dayIndex.toString(), 10)];
                     td = dayIndex + 1;
-                    let eventWrapper = wrapper.querySelector('.' + APPOINTMENT_WRAPPER_CLASS);
+                    eventWrapper = wrapper.querySelector('.' + APPOINTMENT_WRAPPER_CLASS);
                     if (!eventWrapper) {
                         eventWrapper = createElement('div', { className: APPOINTMENT_WRAPPER_CLASS });
                         wrapper.appendChild(eventWrapper);
@@ -19891,8 +20001,7 @@ class YearEvent extends TimelineEvent {
                             continue;
                         }
                     }
-                    const isRowAutoHeight = this.parent.rowAutoHeight && this.parent.activeViewOptions.orientation === 'Horizontal';
-                    if (isRowAutoHeight || this.cellHeight > availedHeight) {
+                    if (this.parent.rowAutoHeight || this.cellHeight > availedHeight) {
                         this.renderEvent(eventWrapper, eventData, row, leftValue, rightValue, monthStart, dayIndex);
                         this.updateCellHeight(rowTd, availedHeight);
                         isSpannedCollection.push(eventData);
@@ -19914,6 +20023,19 @@ class YearEvent extends TimelineEvent {
                 }
             }
         }
+        if (this.parent.rowAutoHeight && this.parent.activeViewOptions.orientation === 'Vertical') {
+            const appContainer = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CONTAINER_CLASS));
+            const tr = [].slice.call(this.parent.element.querySelectorAll('.' + CONTENT_TABLE_CLASS + ' tbody tr'));
+            appContainer.forEach((ele, index) => {
+                const app = [].slice.call(ele.querySelectorAll('.' + APPOINTMENT_CLASS));
+                const appTop = tr[parseInt(index.toString(), 10)].offsetTop + this.cellHeader + EVENT_GAP$2;
+                app.forEach((app) => {
+                    const overlap = parseInt(app.getAttribute('data-index'), 10);
+                    app.style.top = appTop + (overlap * this.eventHeight) + 'px';
+                    app.removeAttribute('data-index');
+                });
+            });
+        }
     }
     updateSpannedEvents(eventObj, dayStart, dayEnd) {
         const isLeftRightResize = (this.isResource && this.parent.activeViewOptions.orientation === 'Vertical') ||
@@ -19928,7 +20050,8 @@ class YearEvent extends TimelineEvent {
             }
         }
         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;
             }
@@ -19939,8 +20062,10 @@ class YearEvent extends TimelineEvent {
         eventObj.data = data;
     }
     timelineResourceEvents() {
+        const contentTable = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
+        const isVerticalScrollbarAvail = contentTable.offsetWidth > contentTable.clientWidth;
         const workCell = this.parent.element.querySelector('.' + WORK_CELLS_CLASS);
-        this.cellWidth = workCell.offsetWidth;
+        this.cellWidth = workCell.getBoundingClientRect().width;
         this.cellHeader = 0;
         const eventTable = this.parent.element.querySelector('.' + EVENT_TABLE_CLASS);
         this.eventHeight = getElementHeightFromClass(eventTable, APPOINTMENT_CLASS);
@@ -19968,6 +20093,39 @@ class YearEvent extends TimelineEvent {
                 }
             }
         }
+        if (this.parent.rowAutoHeight && !isVerticalScrollbarAvail && contentTable.offsetWidth > contentTable.clientWidth) {
+            const appointments = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CLASS));
+            appointments.forEach((ele) => {
+                ele.style.removeProperty('left');
+                ele.style.removeProperty('right');
+            });
+            const appContainer = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CONTAINER_CLASS));
+            const conTable = this.parent.element.querySelector('.' + CONTENT_TABLE_CLASS);
+            const tr = [].slice.call(conTable.querySelectorAll('tbody tr'));
+            appContainer.forEach((ele, index) => {
+                const appWrapper = [].slice.call(ele.children);
+                const row = tr[parseInt(index.toString(), 10)];
+                appWrapper.forEach((appWrap, cellIndex) => {
+                    const td = row.querySelector(`td:nth-child(${cellIndex + 1})`);
+                    const app = [].slice.call(appWrap.children);
+                    const width = td.getBoundingClientRect().width;
+                    const left = td.offsetLeft;
+                    if (this.parent.enableRtl) {
+                        const right = conTable.offsetWidth - left - td.offsetWidth;
+                        app.forEach((app) => {
+                            app.style.width = Math.floor(parseInt(app.style.width, 10) / width) * width + 'px';
+                            app.style.right = right + 'px';
+                        });
+                    }
+                    else {
+                        app.forEach((app) => {
+                            app.style.width = Math.floor(parseInt(app.style.width, 10) / width) * width + 'px';
+                            app.style.left = left + 'px';
+                        });
+                    }
+                });
+            });
+        }
     }
     renderResourceEvent(wrapper, resource, month, index, monthStart) {
         const eventWrapper = createElement('div', { className: APPOINTMENT_WRAPPER_CLASS });
@@ -19978,6 +20136,7 @@ class YearEvent extends TimelineEvent {
         const td = this.parent.element.querySelector(`.e-content-wrap tr:nth-child(${rowIndex + 1}) td`);
         this.cellHeight = td.offsetHeight;
         this.groupOrder = resource.groupOrder;
+        const isSpannedCollection = [];
         for (let a = 0; a < eventDatas.length; a++) {
             const data = eventDatas[parseInt(a.toString(), 10)];
             let overlapIndex;
@@ -19997,9 +20156,17 @@ class YearEvent extends TimelineEvent {
             if (!this.parent.isMinMaxDate(eventData[this.fields.startTime])) {
                 return;
             }
+            if (this.parent.activeViewOptions.orientation === 'Vertical' && this.parent.activeViewOptions.group.resources.length > 0) {
+                const isRendered = this.renderedEvents.filter((eventObj) => eventObj.Guid === eventData.Guid);
+                const isSpanned = isSpannedCollection.filter((eventObj) => eventObj.Guid === eventData.Guid);
+                if (isRendered.length > 0 || isSpanned.length > 0) {
+                    continue;
+                }
+            }
             if (this.parent.rowAutoHeight || this.cellHeight > availedHeight) {
                 this.renderEvent(eventWrapper, eventData, month, leftValue, leftValue, monthStart, index);
                 this.updateCellHeight(td, availedHeight);
+                isSpannedCollection.push(eventData);
             }
             else {
                 const moreIndex = this.parent.activeViewOptions.orientation === 'Horizontal' ? month : index;
@@ -20035,13 +20202,16 @@ class YearEvent extends TimelineEvent {
         }
         else {
             index = rowIndex + 1;
-            width = this.cellWidth;
+            width = this.isResource ? eventObj.isSpanned.count * this.cellWidth : this.cellWidth;
         }
         const rowTd = this.parent.element.querySelector(`.e-content-wrap tr:nth-child(${index}) td`);
         const 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());
+        }
         const args = { data: eventObj, element: wrap, cancel: false, type: 'event' };
         this.parent.trigger(eventRendered, args, (eventArgs) => {
             if (!eventArgs.cancel) {
@@ -20147,6 +20317,7 @@ class YearEvent extends TimelineEvent {
         const 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;
@@ -20158,24 +20329,28 @@ class YearEvent extends TimelineEvent {
         const eventStart = eventData[this.fields.startTime];
         const eventEnd = eventData[this.fields.endTime];
         const isSpanned = { isLeft: false, isRight: false, count: 1 };
+        const yearStart = new Date(this.parent.selectedDate.getFullYear(), this.parent.firstMonthOfYear, 1);
+        const 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 (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);
+            const originalStartTime = eventData[this.fields.startTime];
+            const 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) {
-            let end = resetTime(eventData[this.fields.endTime]).getTime();
-            const 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) {
+                let end = resetTime(eventData[this.fields.endTime]).getTime();
+                const 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()) {
@@ -20186,6 +20361,16 @@ class YearEvent extends TimelineEvent {
         }
         return eventData;
     }
+    updateSpannedEventDetails(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;
+        }
+    }
     getOverlapEvents(date, appointments) {
         const appointmentsList = [];
         let dateStart;
@@ -20208,19 +20393,11 @@ class YearEvent extends TimelineEvent {
         for (const app of appointments) {
             const appStart = new Date(app[this.fields.startTime].getTime());
             const 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 {
-                const 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);
-                }
+            const 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;
@@ -21950,9 +22127,9 @@ class ViewBase {
             append(quickTemplate, tdElement);
         }
         else {
-            tdElement.appendChild(createElement('div', {
-                className: className, innerHTML: tdData.resourceData[tdData.resource.textField]
-            }));
+            const resourceText = createElement('div', { className: className });
+            resourceText.innerText = this.parent.sanitize(tdData.resourceData[tdData.resource.textField]);
+            tdElement.appendChild(resourceText);
         }
     }
     renderResourceMobileLayout() {
@@ -21976,7 +22153,6 @@ class ViewBase {
             const colElements = this.getColElements();
             const contentBody = this.element.querySelector('.' + CONTENT_TABLE_CLASS + ' tbody');
             const colWidth = (contentBody.getBoundingClientRect().width / (colElements.length / 2));
-            colElements.forEach((col) => setStyleAttribute(col, { 'width': formatUnit(colWidth) }));
             if (content.offsetHeight !== content.clientHeight) {
                 const resourceColumn = this.parent.element.querySelector('.' + RESOURCE_COLUMN_WRAP_CLASS);
                 if (!isNullOrUndefined(resourceColumn)) {
@@ -22188,8 +22364,8 @@ class VerticalView extends ViewBase {
         const content = this.getScrollableElement();
         const header = this.getDatesHeaderElement();
         const scrollerHeight = this.parent.element.offsetHeight - headerBarHeight - header.offsetHeight;
-        this.setColWidth(content);
         this.setContentHeight(content, timeCells, scrollerHeight);
+        this.setColWidth(content);
         const scrollBarWidth = getScrollBarWidth();
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         header.firstElementChild.style[args.cssProperties.rtlBorder] = '';
@@ -23414,9 +23590,11 @@ class Month extends ViewBase {
         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
+    updateSelectedCellClass(data) {
+        return;
     }
     isOtherMonth(date) {
         return date.getTime() < this.monthDates.start.getTime() || date.getTime() > this.monthDates.end.getTime();
@@ -23747,6 +23925,7 @@ class Year extends ViewBase {
             calendarElement.appendChild(this.renderCalendarContent(currentMonth));
             calendarWrapper.appendChild(calendarElement);
         }
+        this.renderDates.splice(0, 1);
     }
     renderCalendarHeader(currentDate) {
         const headerWrapper = createElement('div', { className: 'e-header e-month' });
@@ -23805,7 +23984,7 @@ class Year extends ViewBase {
             for (const date of weekDates) {
                 const 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) {
                     const args = { date: date, type: 'monthCells' };
@@ -23833,6 +24012,9 @@ class Year extends ViewBase {
                     addClass([td], classList$$1);
                 }
                 tr.appendChild(td);
+                if (currentDate.getMonth() === date.getMonth()) {
+                    this.renderDates.push(new Date(date));
+                }
                 if (!this.parent.isMinMaxDate(date)) {
                     addClass([td], DISABLE_DATES);
                 }
@@ -24182,9 +24364,13 @@ class AgendaBase extends ViewBase {
         if (!isNullOrUndefined(eventLocation) && eventLocation !== '') {
             eventSubject += ',';
         }
-        appSubjectWrap.appendChild(createElement('div', { className: SUBJECT_CLASS, innerHTML: eventSubject }));
+        const 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 }));
+            const appLocation = createElement('div', { className: LOCATION_CLASS });
+            appLocation.innerText = this.parent.sanitize(eventLocation);
+            appSubjectWrap.appendChild(appLocation);
         }
         if (!isNullOrUndefined(event[fieldMapping.recurrenceRule])) {
             const iconClass = (event[fieldMapping.id] === event[fieldMapping.recurrenceID]) ?
@@ -24925,6 +25111,11 @@ class MonthAgenda extends Month {
         }
         return 'abbreviated';
     }
+    updateSelectedCellClass(data) {
+        if (resetTime(data.date).getTime() === resetTime(this.monthAgendaDate).getTime()) {
+            data.className.push(SELECTED_CELL_CLASS);
+        }
+    }
     setEventWrapperHeight() {
         let headerHeight = (this.parent.headerModule ? this.parent.headerModule.getHeaderElement().offsetHeight : 0) + 2;
         const resourceWrapper = this.parent.element.querySelector('.' + RESOURCE_HEADER_TOOLBAR);
@@ -25731,15 +25922,15 @@ class TimelineYear extends Year {
             this.parent.virtualScrollModule.renderVirtualTrack(content);
         }
         const contentTBody = contentTable.querySelector('tbody');
-        if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
-            if (this.parent.rowAutoHeight) {
-                const addClassTable = [contentTable];
-                const monthHeader = this.parent.element.querySelector('.' + MONTH_HEADER_WRAPPER + ' .' + SCHEDULE_TABLE_CLASS);
-                if (monthHeader) {
-                    addClassTable.push(monthHeader);
-                }
-                addClass(addClassTable, AUTO_HEIGHT);
+        if (this.parent.rowAutoHeight) {
+            const addClassTable = [contentTable];
+            const 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) {
             const colCount = this.parent.activeViewOptions.orientation === 'Horizontal' ? this.colLevels.slice(-1)[0].length : this.columnCount;
             contentTable.appendChild(this.createTableColGroup(colCount));
             this.renderResourceContent(eventWrapper, monthTBody, contentTBody);
@@ -25841,6 +26032,9 @@ class TimelineYear extends Year {
                 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());
@@ -25855,6 +26049,7 @@ class TimelineYear extends Year {
                 }
             }
         }
+        this.renderDates.splice(0, 1);
     }
     getContentRows() {
         const tRow = [];