@syncfusion/ej2-schedule 20.4.53 → 21.1.37

package/src/schedule/base/schedule.d.ts

@@ -184,18 +184,18 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
     /**
      * To set the active view on scheduler, the `currentView` property can be used and it usually accepts either of the following available
      *  view options. The view option specified in this property will be initially loaded on the schedule.
-     * * Day
-     * * Week
-     * * WorkWeek
-     * * Month
-     * * Year
-     * * Agenda
-     * * MonthAgenda
-     * * TimelineDay
-     * * TimelineWeek
-     * * TimelineWorkWeek
-     * * TimelineMonth
-     * * TimelineYear
+     * * `Day`: Denotes Day view of the scheduler.
+     * * `Week`: Denotes Week view of the scheduler.
+     * * `WorkWeek`: Denotes Work Week view of the scheduler.
+     * * `Month`: Denotes Month view of the scheduler.
+     * * `Year`: Denotes Year view of the scheduler.
+     * * `Agenda`: Denotes Agenda view of the scheduler.
+     * * `MonthAgenda`: Denotes Month Agenda view of the scheduler.
+     * * `TimelineDay`: Denotes Timeline Day view of the scheduler.
+     * * `TimelineWeek`: Denotes Timeline Week view of the scheduler.
+     * * `TimelineWorkWeek`: Denotes Timeline Work Week view of the scheduler.
+     * * `TimelineMonth`: Denotes Timeline Month view of the scheduler.
+     * * `TimelineYear`: Denotes Timeline Year view of the scheduler.
      *
      * {% codeBlock src='schedule/currentView/index.md' %}{% endcodeBlock %}
      *
@@ -208,13 +208,12 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * Schedule displays all the views namely `Day`, `Week`, `Work Week`, `Month` and `Agenda`.
      *
      * Example for array of views:
-     * {% codeBlock src="schedule/view-api/index.ts" %}{% endcodeBlock %}
+     * {% codeBlock src="schedule/views/index.md" %}{% endcodeBlock %}
      *
      * Example for array of view objects:
-     * {% codeBlock src="schedule/view-api/array.ts" %}{% endcodeBlock %}
-     * {% codeBlock src='schedule/views/index.md' %}{% endcodeBlock %}
+     * {% codeBlock src='schedule/viewOption/index.md' %}{% endcodeBlock %}
      *
-     * @default '['Day', 'Week', 'WorkWeek', 'Month', 'Agenda']'
+     * @default '["Day", "Week", "WorkWeek", "Month", "Agenda"]'
      */
     views: View[] | ViewsModel[];
     /**
@@ -296,9 +295,9 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
     /**
      * It allows the Scheduler to display week numbers based on following available week options. The week
      *  option specified in this property will be initially loaded on the schedule.
-     * * FirstDay
-     * * FirstFourDayWeek
-     * * FirstFullWeek
+     * * `FirstDay`: Denotes that the first week of the year starts on the first day of the year and ends before the following designated first day of the week.
+     * * `FirstFourDayWeek`:Denotes that the first week of the year is the first week with four or more days before the designated first day of the week.
+     * * `FirstFullWeek`:  Denotes that the first week of the year begins on the first occurrence of the designated first day of the week on or after the first day of the year.
      *
      * {% codeBlock src='schedule/weekRule/index.md' %}{% endcodeBlock %}
      *
@@ -350,6 +349,13 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @default null
      */
     timeFormat: string;
+    /**
+     * Specifies whether to enable the rendering of untrusted HTML values in the Schedule component.
+     * When this property is enabled, the component will sanitize any suspected untrusted strings and scripts before rendering them.
+     *
+     * @default true
+     */
+    enableHtmlSanitizer: boolean;
     /**
      * When set to `true`, If valid, the scroll on the all day row is activated when the all day row
      * height reaches the max height when the all day row is expanded.
@@ -458,9 +464,9 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * The template option which is used to render the customized work cells on the Schedule. Here, the template accepts either
      *  the string or HTMLElement as template design and then the parsed design is displayed onto the work cells.
      *  The fields accessible via template are as follows.
-     * * date
-     * * groupIndex
-     * * type
+     * * `date`: Returns the date of the cell.
+     * * `groupIndex`: Returns the group index of the cell.
+     * * `type`: Returns the type of the work cell.
      *
      * Refer to the below code snippet.
      *
@@ -628,8 +634,8 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * Template option to customize the resource header bar. Here, the template accepts either
      *  the string or HTMLElement as template design and then the parsed design is displayed onto the resource header cells.
      * The following can be accessible via template.
-     * * resource - All the resource fields.
-     * * resourceData - object collection of current resource.
+     * * `resource` - All the resource fields.
+     * * `resourceData` - Object collection of current resource.
      *
      * Refer to the below code snippet.
      *
@@ -660,7 +666,7 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
     group: GroupModel;
     /**
      * Allows defining the collection of resources to be displayed on the Schedule. The resource collection needs to be defined
-     *  with unique resource names to identify it along with the respective dataSource and field mapping options.
+     * with unique resource names to identify it along with the respective dataSource and field mapping options.
      *
      * {% codeBlock src='schedule/resources/index.md' %}{% endcodeBlock %}
      *
@@ -669,7 +675,7 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
     resources: ResourcesModel[];
     /**
      * Allows defining the collection of custom header rows to display the year, month, week, date and hour label as an individual row
-     *  on the timeline view of the scheduler.
+     * on the timeline view of the scheduler.
      *
      * {% codeBlock src='schedule/headerRows/index.md' %}{% endcodeBlock %}
      *
@@ -890,7 +896,7 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
     /**
      * Method to render react templates
      *
-     * @param {Function} callBack - specifies the callBack method
+     * @param {Function} callback - Specifies the callBack method
      * @returns {void}
      * @private
      */
@@ -903,6 +909,14 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @private
      */
     resetTemplates(templates?: string[]): void;
+    /**
+     * 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: string): string;
     private initializeResources;
     /**
      * Method to render the layout elements
@@ -1495,6 +1509,15 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @returns {void}
      */
     addEvent(data: Record<string, any> | Record<string, any>[]): void;
+    /**
+     * 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: Record<string, any>, startDate?: Date): Record<string, any>[];
     /**
      * 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.

package/src/schedule/base/schedule.js

@@ -21,7 +21,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Component, Property, Event, Animation, Collection, append } from '@syncfusion/ej2-base';
 import { EventHandler, Browser, Internationalization, getDefaultDateObject, cldrData, L10n } from '@syncfusion/ej2-base';
 import { getValue, compile, extend, isNullOrUndefined, NotifyPropertyChanges, Complex } from '@syncfusion/ej2-base';
-import { getElement, removeClass, addClass, classList, remove } from '@syncfusion/ej2-base';
+import { getElement, removeClass, addClass, classList, remove, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 import { HeaderRenderer } from '../renderer/header-renderer';
 import { Scroll } from '../actions/scroll';
@@ -135,7 +135,7 @@ var Schedule = /** @class */ (function (_super) {
     /**
      * Method to render react templates
      *
-     * @param {Function} callBack - specifies the callBack method
+     * @param {Function} callback - Specifies the callBack method
      * @returns {void}
      * @private
      */
@@ -159,6 +159,19 @@ var Schedule = /** @class */ (function (_super) {
             this.clearTemplate(templates);
         }
     };
+    /**
+     * Method to sanitize any suspected untrusted strings and scripts before rendering them.
+     *
+     * @param {string} value - A string value representing the HTML string value to be sanitized.
+     * @returns {string} A sanitized Html string.
+     * @private
+     */
+    Schedule.prototype.sanitize = function (value) {
+        if (this.enableHtmlSanitizer) {
+            return SanitizeHtmlHelper.sanitize(value);
+        }
+        return value;
+    };
     Schedule.prototype.initializeResources = function (isSetModel) {
         if (isSetModel === void 0) { isSetModel = false; }
         if (this.resources.length > 0) {
@@ -372,7 +385,7 @@ var Schedule = /** @class */ (function (_super) {
             followingID: this.eventSettings.fields.followingID
         };
         this.setEditorTitles();
-        this.dataModule = new Data(this.eventSettings.dataSource, this.eventSettings.query);
+        this.dataModule = new Data(this, this.eventSettings.dataSource, this.eventSettings.query);
         this.crudModule = new Crud(this);
     };
     Schedule.prototype.setEditorTitles = function () {
@@ -573,6 +586,9 @@ var Schedule = /** @class */ (function (_super) {
                         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 };
@@ -792,7 +808,9 @@ var Schedule = /** @class */ (function (_super) {
         var selectedCells = this.getSelectedCells();
         for (var _i = 0, selectedCells_1 = selectedCells; _i < selectedCells_1.length; _i++) {
             var cell = selectedCells_1[_i];
-            cell.setAttribute('aria-selected', 'false');
+            if (this.currentView !== 'Year') {
+                cell.setAttribute('aria-selected', 'false');
+            }
             cell.removeAttribute('tabindex');
         }
         removeClass(selectedCells, cls.SELECTED_CELL_CLASS);
@@ -810,9 +828,11 @@ var Schedule = /** @class */ (function (_super) {
      * @private
      */
     Schedule.prototype.addSelectedClass = function (cells, focusCell, isPreventScroll) {
-        for (var _i = 0, cells_1 = cells; _i < cells_1.length; _i++) {
-            var cell = cells_1[_i];
-            cell.setAttribute('aria-selected', 'true');
+        if (this.currentView !== 'Year') {
+            for (var _i = 0, cells_1 = cells; _i < cells_1.length; _i++) {
+                var cell = cells_1[_i];
+                cell.setAttribute('aria-selected', 'true');
+            }
         }
         addClass(cells, cls.SELECTED_CELL_CLASS);
         if (focusCell) {
@@ -1470,6 +1490,7 @@ var Schedule = /** @class */ (function (_super) {
             this.changeDate(this.selectedDate);
         }
         else if (state.isLayout) {
+            this.activeCellsData = null;
             this.initializeView(this.currentView);
         }
         else if (state.isDataManager && this.crudModule) {
@@ -1645,6 +1666,7 @@ var Schedule = /** @class */ (function (_super) {
                 case 'dataSource':
                 case 'query':
                 case 'fields':
+                case 'includeFiltersInQuery':
                     this.initializeDataModule();
                     state.isDataManager = true;
                     break;
@@ -2047,6 +2069,17 @@ var Schedule = /** @class */ (function (_super) {
     Schedule.prototype.addEvent = function (data) {
         this.crudModule.addEvent(data);
     };
+    /**
+     * Generates the occurrences of a single recurrence event based on the provided event.
+     *
+     * @function generateEventOccurrences
+     * @param {Object} event Accepts the parent recurrence event from which the occurrences are generated.
+     * @param {Date} startDate Accepts the start date for the event occurrences. If not provided, the event's start date will be used.
+     * @returns {Object[]} Returns the collection of occurrence event objects.
+     */
+    Schedule.prototype.generateEventOccurrences = function (event, startDate) {
+        return (this.eventBase) ? this.eventBase.generateOccurrence(event, startDate) : [];
+    };
     /**
      * Allows the Scheduler events data to be exported as an Excel file either in .xlsx or .csv file formats.
      * By default, the whole event collection bound to the Scheduler gets exported as an Excel file.
@@ -2508,7 +2541,7 @@ var Schedule = /** @class */ (function (_super) {
             var 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], cls.AGENDA_SELECTED_CELL);
@@ -2722,6 +2755,9 @@ var Schedule = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], Schedule.prototype, "timeFormat", void 0);
+    __decorate([
+        Property(true)
+    ], Schedule.prototype, "enableHtmlSanitizer", void 0);
     __decorate([
         Property(false)
     ], Schedule.prototype, "enableAllDayScroll", void 0);

package/src/schedule/base/type.d.ts

@@ -3,10 +3,35 @@
  */
 /**
  * An enum that denotes the view mode of the Scheduler.
+ * ```props
+ * Day :- Denotes Day view of the scheduler.
+ * Week :- Denotes Week view of the scheduler.
+ * WorkWeek :- Denotes Work Week view of the scheduler.
+ * Month :- Denotes Month view of the scheduler.
+ * Year :- Denotes Year view of the scheduler.
+ * Agenda :- Denotes Agenda view of the scheduler.
+ * MonthAgenda :- Denotes Month Agenda view of the scheduler.
+ * TimelineDay :- Denotes Timeline Day view of the scheduler.
+ * TimelineWeek :- Denotes Timeline Week view of the scheduler.
+ * TimelineWorkWeek :- Denotes Timeline Work Week view of the scheduler.
+ * TimelineMonth :- Denotes Timeline Month view of the scheduler.
+ * TimelineYear :- Denotes Timeline Year view of the scheduler.
+ * ```
  */
 export declare type View = 'Day' | 'Week' | 'WorkWeek' | 'Month' | 'Year' | 'Agenda' | 'MonthAgenda' | 'TimelineDay' | 'TimelineWeek' | 'TimelineWorkWeek' | 'TimelineMonth' | 'TimelineYear';
 /**
  * An enum that holds the actions available in scheduler.
+ * ```props
+ * Add :- Denotes the current action of the scheduler is appointment creation.
+ * Save :- Denotes the current action of the scheduler is editing the appointment.
+ * Delete :- Denotes the current action is deleting the appointment.
+ * DeleteOccurrence :- Denotes the current action is deleting single occurrence of a recurrence.
+ * DeleteSeries :- Denotes the current action is deleting the entire series of recurrence appointment.
+ * EditOccurrence :- Denotes the current action is editing single occurrence of a recurrence.
+ * EditSeries :- Denotes the current action is editing the entire series of recurrence appointment.
+ * EditFollowingEvents :- Denotes the current action is editing the following appointments in a recurrence.
+ * DeleteFollowingEvents :- Denotes the current action is deleting the following appointments in a recurrence.
+ * ```
  */
 export declare type CurrentAction = 'Add' | 'Save' | 'Delete' | 'DeleteOccurrence' | 'DeleteSeries' | 'EditOccurrence' | 'EditSeries' | 'EditFollowingEvents' | 'DeleteFollowingEvents';
 /**
@@ -18,30 +43,70 @@ export declare type ReturnType = {
     aggregates?: Record<string, any>;
 };
 /**
- * An enum that holds the available popup types in the scheduler.
+ * An enum that holds the available popup types in the scheduler. They are
+ * ```props
+ * DeleteAlert :- Denotes the popup showing delete confirmation message.
+ * EditEventInfo :- Denotes the quick popup on the events in responsive mode.
+ * Editor :- Denotes the detailed editor window.
+ * EventContainer :- Denotes the more indicator popup.
+ * QuickInfo :- Denotes the quick popup.
+ * RecurrenceAlert :- Denotes the popup showing recurrence alerts.
+ * RecurrenceValidationAlert :- Denotes the popup showing recurrence validation alerts.
+ * ValidationAlert :- Denotes the popup showing validation alerts.
+ * ViewEventInfo :- Denotes the quick popup on the cells in responsive mode.
+ * ```
  */
 export declare type PopupType = 'Editor' | 'EventContainer' | 'QuickInfo' | 'RecurrenceAlert' | 'DeleteAlert' | 'ViewEventInfo' | 'EditEventInfo' | 'ValidationAlert' | 'RecurrenceValidationAlert';
 /**
  * An enum that holds the header row type in the timeline scheduler.
+ * ```props
+ * Year :- Denotes the year row in the header bar.
+ * Month :- Denotes the month row in the header bar.
+ * Week :- Denotes the week row in the header bar.
+ * Date :- Denotes the date row in the header bar.
+ * Hour :- Denotes the hour row in the header bar.
+ * ```
  */
 export declare type HeaderRowType = 'Year' | 'Month' | 'Week' | 'Date' | 'Hour';
 /**
  * An enum that holds the orientation modes of the scheduler.
+ * ```props
+ * Vertical :- Denotes the vertical orientation of Timeline Year view.
+ * Horizontal :- Denotes the horizontal orientation of Timeline Year view.
+ * ```
  */
 export declare type Orientation = 'Vertical' | 'Horizontal';
 /**
  * An enum that holds the supported excel file formats.
+ * ```props
+ * csv :- Denotes the excel file format is csv.
+ * xlsx :- Denotes the excel file format is xlsx.
+ * ```
  */
 export declare type ExcelFormat = 'csv' | 'xlsx';
 /**
  * An enum that holds the type where the quick info template applies.
+ * ```props
+ * Both :- Denotes the template applies both to the event and cell.
+ * Cell :- Denotes the template applies only to the cell.
+ * Event :- Denotes the template applies to the event alone.
+ * ```
  */
 export declare type TemplateType = 'Both' | 'Cell' | 'Event';
 /**
  * An enum that holds the different type of week number options in the scheduler.
+ * ```props
+ * FirstDay :- Denotes that the first week of the year starts on the first day of the year and ends before the following designated first day of the week.
+ * FirstFourDayWeek :- Denotes that the first week of the year is the first week with four or more days before the designated first day of the week.
+ * FirstFullWeek :- Denotes that the first week of the year begins on the first occurrence of the designated first day of the week on or after the first day of the year.
+ * ```
  */
 export declare type WeekRule = 'FirstDay' | 'FirstFourDayWeek' | 'FirstFullWeek';
 /**
  * An enum that holds the options to render the spanned events in all day row or time slot.
+ * ```props
+ * AllDayRow :- Denotes the rendering of spanned events in an all-day row.
+ * TimeSlot :- Denotes the rendering of spanned events in an time slot row.
+ * ```
  */
 export declare type SpannedEventPlacement = 'AllDayRow' | 'TimeSlot';

package/src/schedule/event-renderer/agenda-base.js

@@ -110,9 +110,13 @@ var AgendaBase = /** @class */ (function (_super) {
         if (!isNullOrUndefined(eventLocation) && eventLocation !== '') {
             eventSubject += ',';
         }
-        appSubjectWrap.appendChild(createElement('div', { className: cls.SUBJECT_CLASS, innerHTML: eventSubject }));
+        var appSubjectText = createElement('div', { className: cls.SUBJECT_CLASS });
+        appSubjectText.innerText = this.parent.sanitize(eventSubject);
+        appSubjectWrap.appendChild(appSubjectText);
         if (!isNullOrUndefined(eventLocation) && eventLocation !== '') {
-            appSubjectWrap.appendChild(createElement('div', { className: cls.LOCATION_CLASS, innerHTML: eventLocation }));
+            var appLocation = createElement('div', { className: cls.LOCATION_CLASS });
+            appLocation.innerText = this.parent.sanitize(eventLocation);
+            appSubjectWrap.appendChild(appLocation);
         }
         if (!isNullOrUndefined(event[fieldMapping.recurrenceRule])) {
             var iconClass = (event[fieldMapping.id] === event[fieldMapping.recurrenceID]) ?

package/src/schedule/event-renderer/event-base.d.ts

@@ -38,7 +38,7 @@ export declare class EventBase {
     getSelectedEventElements(target: Element): Element[];
     getSelectedEvents(): EventClickArgs;
     removeSelectedAppointmentClass(): void;
-    addSelectedAppointments(cells: Element[]): void;
+    addSelectedAppointments(cells: Element[], preventFocus?: boolean): void;
     getSelectedAppointments(): Element[];
     focusElement(isFocused?: boolean): void;
     selectWorkCellByTime(eventsData: Record<string, any>[]): Element;
@@ -87,6 +87,7 @@ export declare class EventBase {
     updateEventMinimumDuration(startEndHours: Record<string, Date>, startTime: Date, endTime: Date): Record<string, Date>;
     createEventWrapper(type?: string, index?: number): HTMLElement;
     getPageCoordinates(e: MouseEvent & TouchEvent): (MouseEvent & TouchEvent) | Touch;
+    renderSpannedIcon(element: HTMLElement, spanEvent: Record<string, any>): void;
     private unWireEvents;
     destroy(): void;
 }

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

@@ -236,12 +236,7 @@ var EventBase = /** @class */ (function () {
     };
     EventBase.prototype.filterEvents = function (startDate, endDate, appointments, resourceTdData) {
         if (appointments === void 0) { appointments = this.parent.eventsProcessed; }
-        var fieldMapping = this.parent.eventFields;
-        var predicate = new Predicate(fieldMapping.startTime, 'greaterthanorequal', startDate).
-            and(new Predicate(fieldMapping.endTime, 'greaterthanorequal', startDate)).
-            and(new Predicate(fieldMapping.startTime, 'lessthan', endDate)).
-            or(new Predicate(fieldMapping.startTime, 'lessthanorequal', startDate).
-            and(new Predicate(fieldMapping.endTime, 'greaterthan', startDate)));
+        var predicate = this.parent.dataModule.getStartEndQuery(startDate, endDate);
         var filter = new DataManager({ json: appointments }).executeLocal(new Query().where(predicate));
         if (resourceTdData) {
             filter = this.filterEventsByResource(resourceTdData, filter);
@@ -511,7 +506,7 @@ var EventBase = /** @class */ (function () {
             }
         }
         if (target && this.parent.selectedElements.length > 0) {
-            this.addSelectedAppointments(this.parent.selectedElements);
+            this.addSelectedAppointments(this.parent.selectedElements, false);
         }
         return this.parent.selectedElements;
     };
@@ -541,12 +536,12 @@ var EventBase = /** @class */ (function () {
             removeClass(selectedAppointments, cls.AGENDA_SELECTED_CELL);
         }
     };
-    EventBase.prototype.addSelectedAppointments = function (cells) {
+    EventBase.prototype.addSelectedAppointments = function (cells, preventFocus) {
         if (this.parent.currentView !== 'MonthAgenda') {
             this.parent.removeSelectedClass();
         }
         addClass(cells, cls.APPOINTMENT_BORDER);
-        if (cells.length > 0) {
+        if (cells.length > 0 && !preventFocus) {
             cells[cells.length - 1].focus();
         }
     };
@@ -570,6 +565,10 @@ var EventBase = /** @class */ (function () {
         }
         var 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;
         }
@@ -869,7 +868,7 @@ var EventBase = /** @class */ (function () {
         var target = closest(eventData.target, '.' + cls.APPOINTMENT_CLASS);
         var 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();
         }
         var eventObject = this.getEventByGuid(guid);
@@ -1118,9 +1117,8 @@ var EventBase = /** @class */ (function () {
             templateElement = this.parent.getAppointmentTemplate()(record, this.parent, templateName, templateId, false);
         }
         else {
-            var appointmentSubject = createElement('div', {
-                className: cls.SUBJECT_CLASS, innerHTML: eventSubject
-            });
+            var appointmentSubject = createElement('div', { className: cls.SUBJECT_CLASS });
+            appointmentSubject.innerText = this.parent.sanitize(eventSubject);
             templateElement = [appointmentSubject];
         }
         append(templateElement, appointmentWrapper);
@@ -1303,6 +1301,29 @@ var EventBase = /** @class */ (function () {
         return eventArgs && eventArgs.changedTouches ? eventArgs.changedTouches[0] : e.changedTouches ? e.changedTouches[0] :
             eventArgs || e;
     };
+    EventBase.prototype.renderSpannedIcon = function (element, spanEvent) {
+        var iconElement = createElement('div', { className: cls.EVENT_INDICATOR_CLASS + ' ' + cls.ICON });
+        if (spanEvent.isLeft) {
+            var iconLeft = iconElement.cloneNode();
+            addClass([iconLeft], cls.EVENT_ICON_LEFT_CLASS);
+            prepend([iconLeft], element);
+        }
+        if (spanEvent.isRight) {
+            var iconRight = iconElement.cloneNode();
+            addClass([iconRight], cls.EVENT_ICON_RIGHT_CLASS);
+            append([iconRight], element);
+        }
+        if (spanEvent.isTop) {
+            var iconTop = iconElement.cloneNode();
+            addClass([iconTop], cls.EVENT_ICON_UP_CLASS);
+            prepend([iconTop], element);
+        }
+        if (spanEvent.isBottom) {
+            var iconBottom = iconElement.cloneNode();
+            addClass([iconBottom], cls.EVENT_ICON_DOWN_CLASS);
+            append([iconBottom], element);
+        }
+    };
     EventBase.prototype.unWireEvents = function () {
         var appElements = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));
         for (var _i = 0, appElements_1 = appElements; _i < appElements_1.length; _i++) {

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

@@ -409,10 +409,8 @@ var MonthEvent = /** @class */ (function (_super) {
         }
         else {
             var eventLocation = (record[this.fields.location] || this.parent.eventSettings.fields.location.default || '');
-            var appointmentSubject = createElement('div', {
-                className: cls.SUBJECT_CLASS,
-                innerHTML: (eventSubject + (eventLocation ? ';&nbsp' + eventLocation : ''))
-            });
+            var appointmentSubject = createElement('div', { className: cls.SUBJECT_CLASS });
+            appointmentSubject.innerText = this.parent.sanitize((eventSubject + (eventLocation ? '; ' + eventLocation : '')));
             var appointmentStartTime = createElement('div', {
                 className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''),
                 innerHTML: this.parent.getTimeString(eventData[this.fields.startTime])
@@ -455,7 +453,8 @@ var MonthEvent = /** @class */ (function (_super) {
                     var appTime = createElement('div', {
                         className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''), innerHTML: timeString
                     });
-                    var appLocation = createElement('div', { className: cls.LOCATION_CLASS, innerHTML: eventLocation });
+                    var appLocation = createElement('div', { className: cls.LOCATION_CLASS });
+                    appLocation.innerText = this.parent.sanitize(eventLocation);
                     innerElement = [appointmentSubject, appTime, appLocation];
                 }
                 var wrap = createElement('div', { className: 'e-inner-wrap' });

package/src/schedule/event-renderer/vertical-view.d.ts

@@ -38,7 +38,6 @@ export declare class VerticalEvent extends EventBase {
     private getResourceList;
     createAppointmentElement(record: Record<string, any>, isAllDay: boolean, data: Record<string, any>, resource: number): HTMLElement;
     private createMoreIndicator;
-    private renderSpannedIcon;
     isSpannedEvent(record: Record<string, any>, day: number, resource: number): Record<string, any>;
     private isWorkDayAvailable;
     renderAllDayEvents(eventObj: Record<string, any>, dayIndex: number, resource: number, dayCount: number, inline?: boolean): void;

package/src/schedule/event-renderer/vertical-view.js

@@ -12,7 +12,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { append, createElement, extend, EventHandler, prepend, Animation, formatUnit } from '@syncfusion/ej2-base';
+import { append, createElement, extend, EventHandler, Animation, formatUnit } from '@syncfusion/ej2-base';
 import { isNullOrUndefined, setStyleAttribute, remove, removeClass, addClass } from '@syncfusion/ej2-base';
 import { EventBase } from './event-base';
 import * as util from '../base/util';
@@ -344,7 +344,8 @@ var VerticalEvent = /** @class */ (function (_super) {
             templateElement = this.parent.getAppointmentTemplate()(record, this.parent, templateName, templateId, false);
         }
         else {
-            var appointmentSubject = createElement('div', { className: cls.SUBJECT_CLASS, innerHTML: recordSubject });
+            var appointmentSubject = createElement('div', { className: cls.SUBJECT_CLASS });
+            appointmentSubject.innerText = this.parent.sanitize(recordSubject);
             if (isAllDay) {
                 if (record[fieldMapping.isAllDay]) {
                     templateElement = [appointmentSubject];
@@ -376,10 +377,8 @@ var VerticalEvent = /** @class */ (function (_super) {
                     className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''),
                     innerHTML: timeStr
                 });
-                var appointmentLocation = createElement('div', {
-                    className: cls.LOCATION_CLASS,
-                    innerHTML: (record[fieldMapping.location] || this.parent.eventSettings.fields.location.default || '')
-                });
+                var appointmentLocation = createElement('div', { className: cls.LOCATION_CLASS });
+                appointmentLocation.innerText = this.parent.sanitize((record[fieldMapping.location] || this.parent.eventSettings.fields.location.default || ''));
                 templateElement = [appointmentSubject, appointmentTime, appointmentLocation];
             }
         }
@@ -396,7 +395,7 @@ var VerticalEvent = /** @class */ (function (_super) {
                 appointmentWrapper.appendChild(recurrenceIcon);
             }
         }
-        this.renderSpannedIcon(isAllDay ? appointmentDetails : appointmentWrapper, eventData);
+        this.parent.eventBase.renderSpannedIcon(isAllDay ? appointmentDetails : appointmentWrapper, eventData);
         if (!isNullOrUndefined(this.cssClass)) {
             addClass([appointmentWrapper], this.cssClass);
         }
@@ -428,29 +427,6 @@ var VerticalEvent = /** @class */ (function (_super) {
             countCell.innerHTML = '+' + this.parent.globalize.formatNumber(moreCount) + ' ' + (this.parent.isAdaptive ? '' : this.parent.localeObj.getConstant('more'));
         }
     };
-    VerticalEvent.prototype.renderSpannedIcon = function (element, spanEvent) {
-        var iconElement = createElement('div', { className: cls.EVENT_INDICATOR_CLASS + ' ' + cls.ICON });
-        if (spanEvent.isLeft) {
-            var iconLeft = iconElement.cloneNode();
-            addClass([iconLeft], cls.EVENT_ICON_LEFT_CLASS);
-            prepend([iconLeft], element);
-        }
-        if (spanEvent.isRight) {
-            var iconRight = iconElement.cloneNode();
-            addClass([iconRight], cls.EVENT_ICON_RIGHT_CLASS);
-            append([iconRight], element);
-        }
-        if (spanEvent.isTop) {
-            var iconTop = iconElement.cloneNode();
-            addClass([iconTop], cls.EVENT_ICON_UP_CLASS);
-            prepend([iconTop], element);
-        }
-        if (spanEvent.isBottom) {
-            var iconBottom = iconElement.cloneNode();
-            addClass([iconBottom], cls.EVENT_ICON_DOWN_CLASS);
-            append([iconBottom], element);
-        }
-    };
     VerticalEvent.prototype.isSpannedEvent = function (record, day, resource) {
         var currentDate = util.resetTime(this.dateRender[parseInt(resource.toString(), 10)][parseInt(day.toString(), 10)]);
         var renderedDate = this.getRenderedDates(this.dateRender[parseInt(resource.toString(), 10)]) || [currentDate];

package/src/schedule/event-renderer/year.d.ts

@@ -17,6 +17,7 @@ export declare class YearEvent extends TimelineEvent {
     private renderMoreIndicator;
     private createEventElement;
     isSpannedEvent(eventObj: Record<string, any>, monthDate: Date): Record<string, any>;
+    private updateSpannedEventDetails;
     getOverlapEvents(date: Date, appointments: Record<string, any>[]): Record<string, any>[];
     private getMonths;
     private removeCellHeight;