@syncfusion/ej2-schedule 20.4.52 → 21.1.35

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));
@@ -2049,7 +2050,7 @@ class KeyboardInteraction {
         if (this.parent.eventWindow) {
             this.parent.eventWindow.convertToEventData(this.parent.activeCellsData, cellData);
         }
-        const selectedCells = this.parent.getSelectedElements();
+        const selectedCells = this.parent.getSelectedCells();
         const args = {
             data: cellData, element: this.parent.activeCellsData.element, event: e,
             requestType: cellSelect, showQuickPopup: false
@@ -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];
@@ -2397,7 +2399,7 @@ class KeyboardInteraction {
             return;
         }
         let target = (e.target);
-        const selectedElements = this.parent.getSelectedElements();
+        const selectedElements = this.parent.getSelectedCells();
         const selectedEventElements = this.parent.eventBase.getSelectedAppointments();
         const moreEventWrapper = this.parent.element.querySelector('.' + MORE_POPUP_WRAPPER_CLASS);
         const quickPopupWrapper = this.getQuickPopupElement();
@@ -2444,7 +2446,7 @@ class KeyboardInteraction {
             return;
         }
         let target = (e.target);
-        const selectedCells = this.parent.getSelectedElements();
+        const selectedCells = this.parent.getSelectedCells();
         const selectedElements = this.parent.eventBase.getSelectedAppointments();
         const moreEventWrapper = this.parent.element.querySelector('.' + MORE_POPUP_WRAPPER_CLASS);
         const quickPopupWrapper = this.getQuickPopupElement();
@@ -2552,7 +2554,7 @@ class KeyboardInteraction {
         if (this.isCancelLeftRightAction(e, isMultiple, isTimelineYear)) {
             return;
         }
-        const selectedCells = this.parent.getSelectedElements();
+        const selectedCells = this.parent.getSelectedCells();
         let targetCell;
         const selectedAppointments = this.parent.eventBase.getSelectedAppointments();
         let target = (e.target);
@@ -2624,7 +2626,7 @@ class KeyboardInteraction {
             return;
         }
         let target = (e.target);
-        const selectedCells = this.parent.getSelectedElements();
+        const selectedCells = this.parent.getSelectedCells();
         let targetCell;
         if (selectedCells.length > 0 && !target.classList.contains(WORK_CELLS_CLASS) &&
             !target.classList.contains(ALLDAY_CELLS_CLASS)) {
@@ -2848,7 +2850,7 @@ class KeyboardInteraction {
             }
             return;
         }
-        const selectedCells = this.parent.getSelectedElements();
+        const selectedCells = this.parent.getSelectedCells();
         if (selectedCells.length > 0 && !target.classList.contains(APPOINTMENT_CLASS)) {
             target = selectedCells[selectedCells.length - 1];
             this.selectAppointmentElementFromWorkCell(isReverse, target);
@@ -2967,6 +2969,7 @@ class KeyboardInteraction {
      */
     destroy() {
         this.removeEventListener();
+        this.selectedCells = [];
         this.keyboardModule.destroy();
     }
 }
@@ -2981,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);
     }
     /**
@@ -3010,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());
         }
@@ -3018,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
      *
@@ -5395,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);
@@ -5706,7 +5728,7 @@ class EventBase {
             return;
         }
         const activeEle = document.activeElement;
-        const selectedCell = this.parent.getSelectedElements();
+        const selectedCell = this.parent.getSelectedCells();
         if (selectedCell.length > 0 && ((activeEle && (this.parent.element.contains(activeEle) ||
             selectedCell.indexOf(activeEle) !== -1)) || isFocused)) {
             if (this.parent.keyboardInteractionModule) {
@@ -6233,9 +6255,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);
@@ -6413,6 +6434,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) {
@@ -6737,7 +6781,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];
@@ -6769,10 +6814,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];
             }
         }
@@ -6789,7 +6832,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);
         }
@@ -6821,29 +6864,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];
@@ -7645,10 +7665,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])
@@ -7691,7 +7709,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' });
@@ -8887,6 +8906,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' },
@@ -8918,6 +8938,7 @@ class QuickPopups {
             cssClass: className,
             disabled: isDisabled,
             enableRtl: this.parent.enableRtl,
+            enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
             iconCss: iconName
         });
         buttonObj.appendTo(element);
@@ -9111,7 +9132,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);
@@ -9360,10 +9382,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;
@@ -9391,7 +9417,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);
@@ -9405,8 +9431,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 +
@@ -9415,17 +9440,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;
@@ -9954,7 +9995,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();
@@ -10171,7 +10212,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);
     }
@@ -10981,7 +11023,7 @@ let RecurrenceEditor = class RecurrenceEditor extends Component {
             '"label="' + REPEATELEMENT.substr(2) + '" />' +
             '</div><div class="' + INPUTWARAPPER + ' ' +
             INTERVALCLASS + ' ' + FORMRIGHT + '"><table  class="' + RECURRENCETABLE + ' ' + REPEATCONTENTWRAPPER + '"><tr>' +
-            '<td><input type="text" tabindex="0" class="' + REPEATINTERVAL +
+            '<td><input type="text" tabindex="0" id="' + this.element.id + '_' + REPEATINTERVAL + '" class="' + REPEATINTERVAL +
             '"title="' + this.localeObj.getConstant('repeatEvery') + '" /></td>' +
             '<td><span class="' + REPEATCONTENT + '"></span></td>' +
             '</tr></table></div><div class="' + INPUTWARAPPERSIDE + ' ' + DAYWRAPPER + ' ' + FORMLEFT + '">' +
@@ -11005,7 +11047,7 @@ let RecurrenceEditor = class RecurrenceEditor extends Component {
             '<input class="' + MONTHEXPANDERELEMENT + '"title="' + this.localeObj.getConstant('monthExpander') + '" type="radio">' +
             '</div></td>' +
             '<td colspan="2"><div class="' + INPUTWARAPPER + ' ' + MONTHDAYELEMENT + '">' +
-            '<input type="text" tabindex="0" class="' + MONTHDAYWRAPPER + '"title="' +
+            '<input type="text" tabindex="0" id="' + this.element.id + '_' + MONTHDAYWRAPPER + '" class="' + MONTHDAYWRAPPER + '"title="' +
             this.localeObj.getConstant('on') + '" />' +
             '</div></td></tr>' +
             '<tr><td>' +
@@ -11028,7 +11070,7 @@ let RecurrenceEditor = class RecurrenceEditor extends Component {
             '<input type="text" tabindex="0" class="' + UNTILDATE + '"title="' + this.localeObj.getConstant(UNTIL$1) + '" />' +
             '</div>' +
             '<div class="' + INPUTWARAPPER + ' ' + ENDONCOUNTWRAPPER + '">' +
-            '<input type="text" tabindex="0" class="' + ENDONCOUNT + '"title="' + this.localeObj.getConstant(COUNT) + '" />' +
+            '<input type="text" tabindex="0" id="' + this.element.id + '_' + ENDONCOUNT + '" class="' + ENDONCOUNT + '"title="' + this.localeObj.getConstant(COUNT) + '" />' +
             '</div></div>' +
             '</div></div>';
     }
@@ -11433,6 +11475,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,
@@ -11640,6 +11683,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;
@@ -11720,7 +11767,7 @@ class EventWindow {
         return parentDiv;
     }
     createRecurrenceEditor(parentDiv) {
-        const recurrenceEditor = this.createDivElement();
+        const recurrenceEditor = createElement('div', { id: this.parent.element.id + '_recurrence_editor' });
         parentDiv.appendChild(recurrenceEditor);
         this.recurrenceEditor = this.renderRecurrenceEditor();
         this.recurrenceEditor.appendTo(recurrenceEditor);
@@ -11812,6 +11859,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),
@@ -11949,6 +11997,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);
@@ -12075,6 +12124,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)
@@ -12142,6 +12192,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;
@@ -12171,10 +12224,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 {
@@ -12815,9 +12876,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) {
@@ -13008,7 +13071,7 @@ class EventWindow {
                 value = element.checked;
             }
             else {
-                value = SanitizeHtmlHelper.sanitize(element.value);
+                value = this.parent.sanitize(element.value);
             }
         }
         return value;
@@ -13334,7 +13397,7 @@ class VirtualScroll {
             }
             if (!isNullOrUndefined(resCollection) && resCollection.length > 0) {
                 this.parent.showSpinner();
-                const selectedEle = this.parent.getSelectedElements();
+                const selectedEle = this.parent.getSelectedCells();
                 this.focusedEle = selectedEle[selectedEle.length - 1] || this.focusedEle;
                 this.updateContent(resWrap, conWrap, eventWrap, resCollection);
                 this.setTranslate(resWrap, conWrap, eventWrap, timeIndicator);
@@ -13514,7 +13577,7 @@ class VirtualScroll {
     }
     updateHorizontalContent(conWrap, resCollection) {
         this.parent.resourceBase.expandedResources = resCollection;
-        const selectedEle = this.parent.getSelectedElements();
+        const selectedEle = this.parent.getSelectedCells();
         this.focusedEle = selectedEle[selectedEle.length - 1] || this.focusedEle;
         const renderedLength = conWrap.querySelectorAll('tbody tr').length;
         for (let i = 0; i < renderedLength; i++) {
@@ -13904,7 +13967,9 @@ class Crud {
                     }
                 }
             }
-            this.parent.resetTemplates(templateNames);
+            if (templateNames.length > 0) {
+                this.parent.resetTemplates(templateNames);
+            }
         }
         if (isVirtualScrollAction) {
             this.parent.notify(dataReady, { processedData: this.parent.eventsProcessed });
@@ -13978,6 +14043,9 @@ class Crud {
                 return;
             }
             const addEvents = (eventData instanceof Array) ? eventData : [eventData];
+            if (addEvents.length === 0) {
+                return;
+            }
             const args = {
                 requestType: 'eventCreate', cancel: false, data: addEvents,
                 addedRecords: addEvents, changedRecords: [], deletedRecords: []
@@ -14013,6 +14081,11 @@ 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];
+            if (updateEvents.length === 0) {
                 return;
             }
             this.parent.currentAction = action;
@@ -14033,7 +14106,6 @@ class Crud {
                 }
             }
             else {
-                const updateEvents = (eventData instanceof Array) ? eventData : [eventData];
                 const args = {
                     requestType: 'eventChange', cancel: false, data: eventData,
                     addedRecords: [], changedRecords: updateEvents, deletedRecords: []
@@ -14076,6 +14148,9 @@ class Crud {
             else {
                 deleteEvents = (eventData instanceof Array ? eventData : [eventData]);
             }
+            if (deleteEvents.length === 0) {
+                return;
+            }
             if (action) {
                 switch (action) {
                     case 'Delete':
@@ -14653,8 +14728,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.
@@ -14770,6 +14845,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;
@@ -15051,7 +15129,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);
                 }
@@ -15180,6 +15258,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',
@@ -15276,10 +15355,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);
@@ -15351,7 +15428,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))
@@ -15874,7 +15951,9 @@ class ResourceBase {
         if (this.treeViewObj) {
             if (this.treeViewObj.portals && this.treeViewObj.portals.length > 0) {
                 const treeViewTemplates = this.treeViewObj.portals.map((x) => x.propName);
-                this.parent.resetTemplates(treeViewTemplates);
+                if (treeViewTemplates.length > 0) {
+                    this.parent.resetTemplates(treeViewTemplates);
+                }
             }
             this.treeViewObj.destroy();
             this.treeViewObj = null;
@@ -15983,7 +16062,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
      */
@@ -16007,6 +16086,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);
@@ -16216,7 +16308,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() {
@@ -16627,12 +16719,17 @@ let Schedule = class Schedule extends Component {
      * @private
      */
     removeSelectedClass() {
-        const selectedCells = this.getSelectedElements();
+        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);
+        if (this.keyboardInteractionModule && this.keyboardInteractionModule.selectedCells.length > 0) {
+            this.keyboardInteractionModule.selectedCells = [];
+        }
     }
     /**
      * Method to add selected class
@@ -16644,8 +16741,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) {
@@ -17011,6 +17110,15 @@ let Schedule = class Schedule extends Component {
         }
         return undefined;
     }
+    /**
+     * Retrieves the selected cells.
+     *
+     * @returns {Element[]} The elements of currently selected cells will be returned.
+     * @private
+     */
+    getSelectedCells() {
+        return [].slice.call(this.element.querySelectorAll('.' + SELECTED_CELL_CLASS));
+    }
     /**
      * Method to generate the announcement string
      *
@@ -17466,6 +17574,7 @@ let Schedule = class Schedule extends Component {
                 case 'dataSource':
                 case 'query':
                 case 'fields':
+                case 'includeFiltersInQuery':
                     this.initializeDataModule();
                     state.isDataManager = true;
                     break;
@@ -17696,7 +17805,10 @@ let Schedule = class Schedule extends Component {
      * @returns {Element[]} The elements of currently selected cells will be returned.
      */
     getSelectedElements() {
-        return [].slice.call(this.element.querySelectorAll('.' + SELECTED_CELL_CLASS));
+        if (this.keyboardInteractionModule && this.keyboardInteractionModule.selectedCells.length > 0) {
+            return this.keyboardInteractionModule.selectedCells;
+        }
+        return this.getSelectedCells();
     }
     /**
      * To get the resource collection
@@ -17863,6 +17975,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.
@@ -18529,6 +18652,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);
@@ -18777,6 +18903,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]) {
@@ -19050,6 +19177,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);
@@ -19784,7 +19915,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);
@@ -19795,7 +19926,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);
@@ -19810,7 +19941,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);
@@ -19862,8 +19993,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);
@@ -19885,6 +20015,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') ||
@@ -19899,7 +20042,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;
             }
@@ -19910,8 +20054,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);
@@ -19939,6 +20085,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 });
@@ -19949,6 +20128,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;
@@ -19968,9 +20148,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;
@@ -20006,13 +20194,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) {
@@ -20118,6 +20309,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;
@@ -20129,24 +20321,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()) {
@@ -20157,6 +20353,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;
@@ -20179,19 +20385,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;
@@ -20922,7 +21120,12 @@ class DragAndDrop extends ActionBase {
     }
     getDayIndex(event) {
         const eventObj = extend({}, event, null, true);
-        const startTime = resetTime(eventObj[this.parent.eventFields.startTime]).getTime();
+        const startDate = resetTime(eventObj[this.parent.eventFields.startTime]);
+        if (this.parent.activeViewOptions.timeScale.enable && !eventObj[this.parent.eventFields.isAllDay]) {
+            const startHour = this.parent.activeView.getStartHour();
+            startDate.setMilliseconds(startHour.getTime() - resetTime(startHour).getTime());
+        }
+        const startTime = startDate.getTime();
         let query = '';
         let wrapper = DAY_WRAPPER_CLASS;
         if (this.parent.activeViewOptions.timeScale.enable && (eventObj[this.parent.eventFields.isAllDay])) {
@@ -21916,9 +22119,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() {
@@ -21942,7 +22145,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)) {
@@ -22154,8 +22356,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] = '';
@@ -23380,9 +23582,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();
@@ -23713,6 +23917,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' });
@@ -23771,7 +23976,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' };
@@ -23799,6 +24004,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);
                 }
@@ -24148,9 +24356,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]) ?
@@ -24891,6 +25103,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);
@@ -25697,15 +25914,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);
@@ -25807,6 +26024,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());
@@ -25821,6 +26041,7 @@ class TimelineYear extends Year {
                 }
             }
         }
+        this.renderDates.splice(0, 1);
     }
     getContentRows() {
         const tRow = [];