@syncfusion/ej2-schedule 20.4.52 → 21.1.35

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

@@ -1,4 +1,4 @@
-import { Component, ModuleDeclaration, Property, Event, Animation, Collection, append } from '@syncfusion/ej2-base';import { EventHandler, EmitType, Browser, Internationalization, getDefaultDateObject, cldrData, L10n } from '@syncfusion/ej2-base';import { getValue, compile, extend, isNullOrUndefined, NotifyPropertyChanges, INotifyPropertyChanged, Complex } from '@syncfusion/ej2-base';import { getElement, removeClass, addClass, classList, remove } from '@syncfusion/ej2-base';import { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';import { HeaderRenderer } from '../renderer/header-renderer';import { Scroll } from '../actions/scroll';import { ScheduleTouch } from '../actions/touch';import { KeyboardInteraction } from '../actions/keyboard';import { Data } from '../actions/data';import { View, CurrentAction, ReturnType, WeekRule } from '../base/type';import { EventBase } from '../event-renderer/event-base';import { InlineEdit } from '../event-renderer/inline-edit';import { QuickPopups } from '../popups/quick-popups';import { EventTooltip } from '../popups/event-tooltip';import { EventWindow } from '../popups/event-window';import { Render } from '../renderer/renderer';import { Day } from '../renderer/day';import { Week } from '../renderer/week';import { WorkWeek } from '../renderer/work-week';import { Month } from '../renderer/month';import { Year } from '../renderer/year';import { Agenda } from '../renderer/agenda';import { MonthAgenda } from '../renderer/month-agenda';import { TimelineViews } from '../renderer/timeline-view';import { TimelineMonth } from '../renderer/timeline-month';import { TimelineYear } from '../renderer/timeline-year';import { WorkHours } from '../models/work-hours';import { TimeScale } from '../models/time-scale';import { QuickInfoTemplates } from '../models/quick-info-templates';import { HeaderRows } from '../models/header-rows';import { Crud } from '../actions/crud';import { Resize } from '../actions/resize';import { DragAndDrop } from '../actions/drag';import { VirtualScroll } from '../actions/virtual-scroll';import { WorkCellInteraction } from '../actions/work-cells';import { WorkHoursModel, ViewsModel, EventSettingsModel, GroupModel, ResourcesModel, TimeScaleModel } from '../models/models';import { QuickInfoTemplatesModel, HeaderRowsModel } from '../models/models';import { EventSettings } from '../models/event-settings';import { Group } from '../models/group';import { Resources } from '../models/resources';import { ICalendarExport } from '../exports/calendar-export';import { ICalendarImport } from '../exports/calendar-import';import { ExcelExport } from '../exports/excel-export';import { Print } from '../exports/print';import { IRenderer, ActionEventArgs, NavigatingEventArgs, CellClickEventArgs, RenderCellEventArgs, ScrollCss, TimezoneFields } from '../base/interface';import { EventClickArgs, EventRenderedArgs, PopupOpenEventArgs, UIStateArgs, DragEventArgs, ResizeEventArgs } from '../base/interface';import { EventFieldsMapping, TdData, ResourceDetails, ResizeEdges, StateArgs, ExportOptions, SelectEventArgs } from '../base/interface';import { ViewsData, PopupCloseEventArgs, HoverEventArgs, MoreEventsClickArgs, CallbackFunction } from '../base/interface';import { CalendarUtil, Gregorian, Islamic, CalendarType } from '../../common/calendar-util';import { ResourceBase } from '../base/resource';import { Timezone, timezoneData } from '../timezone/timezone';import { RecurrenceEditor } from '../../recurrence-editor/recurrence-editor';import * as events from '../base/constant';import * as cls from '../base/css-constant';import * as util from '../base/util';
+import { Component, ModuleDeclaration, Property, Event, Animation, Collection, append } from '@syncfusion/ej2-base';import { EventHandler, EmitType, Browser, Internationalization, getDefaultDateObject, cldrData, L10n } from '@syncfusion/ej2-base';import { getValue, compile, extend, isNullOrUndefined, NotifyPropertyChanges, INotifyPropertyChanged, Complex } 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';import { ScheduleTouch } from '../actions/touch';import { KeyboardInteraction } from '../actions/keyboard';import { Data } from '../actions/data';import { View, CurrentAction, ReturnType, WeekRule } from '../base/type';import { EventBase } from '../event-renderer/event-base';import { InlineEdit } from '../event-renderer/inline-edit';import { QuickPopups } from '../popups/quick-popups';import { EventTooltip } from '../popups/event-tooltip';import { EventWindow } from '../popups/event-window';import { Render } from '../renderer/renderer';import { Day } from '../renderer/day';import { Week } from '../renderer/week';import { WorkWeek } from '../renderer/work-week';import { Month } from '../renderer/month';import { Year } from '../renderer/year';import { Agenda } from '../renderer/agenda';import { MonthAgenda } from '../renderer/month-agenda';import { TimelineViews } from '../renderer/timeline-view';import { TimelineMonth } from '../renderer/timeline-month';import { TimelineYear } from '../renderer/timeline-year';import { WorkHours } from '../models/work-hours';import { TimeScale } from '../models/time-scale';import { QuickInfoTemplates } from '../models/quick-info-templates';import { HeaderRows } from '../models/header-rows';import { Crud } from '../actions/crud';import { Resize } from '../actions/resize';import { DragAndDrop } from '../actions/drag';import { VirtualScroll } from '../actions/virtual-scroll';import { WorkCellInteraction } from '../actions/work-cells';import { WorkHoursModel, ViewsModel, EventSettingsModel, GroupModel, ResourcesModel, TimeScaleModel } from '../models/models';import { QuickInfoTemplatesModel, HeaderRowsModel } from '../models/models';import { EventSettings } from '../models/event-settings';import { Group } from '../models/group';import { Resources } from '../models/resources';import { ICalendarExport } from '../exports/calendar-export';import { ICalendarImport } from '../exports/calendar-import';import { ExcelExport } from '../exports/excel-export';import { Print } from '../exports/print';import { IRenderer, ActionEventArgs, NavigatingEventArgs, CellClickEventArgs, RenderCellEventArgs, ScrollCss, TimezoneFields } from '../base/interface';import { EventClickArgs, EventRenderedArgs, PopupOpenEventArgs, UIStateArgs, DragEventArgs, ResizeEventArgs } from '../base/interface';import { EventFieldsMapping, TdData, ResourceDetails, ResizeEdges, StateArgs, ExportOptions, SelectEventArgs } from '../base/interface';import { ViewsData, PopupCloseEventArgs, HoverEventArgs, MoreEventsClickArgs, CallbackFunction } from '../base/interface';import { CalendarUtil, Gregorian, Islamic, CalendarType } from '../../common/calendar-util';import { ResourceBase } from '../base/resource';import { Timezone, timezoneData } from '../timezone/timezone';import { RecurrenceEditor } from '../../recurrence-editor/recurrence-editor';import * as events from '../base/constant';import * as cls from '../base/css-constant';import * as util from '../base/util';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -61,18 +61,18 @@ export interface ScheduleModel extends ComponentModel{
     /**
      * 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 %}
      *
@@ -86,13 +86,12 @@ export interface ScheduleModel extends ComponentModel{
      * 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[];
 
@@ -182,9 +181,9 @@ export interface ScheduleModel extends ComponentModel{
     /**
      * 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 %}
      *
@@ -242,6 +241,14 @@ export interface ScheduleModel extends ComponentModel{
      */
     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.
@@ -362,9 +369,9 @@ export interface ScheduleModel extends ComponentModel{
      * 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.
      *
@@ -551,8 +558,8 @@ export interface ScheduleModel extends ComponentModel{
      * 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.
      *
@@ -586,7 +593,7 @@ export interface ScheduleModel extends ComponentModel{
 
     /**
      * 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 %}
      *
@@ -596,7 +603,7 @@ export interface ScheduleModel extends ComponentModel{
 
     /**
      * 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 %}
      *

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
@@ -1260,6 +1274,13 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @private
      */
     templateParser(template: string): CallbackFunction;
+    /**
+     * Retrieves the selected cells.
+     *
+     * @returns {Element[]} The elements of currently selected cells will be returned.
+     * @private
+     */
+    getSelectedCells(): Element[];
     /**
      * Method to generate the announcement string
      *
@@ -1488,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 () {
@@ -789,13 +802,18 @@ var Schedule = /** @class */ (function (_super) {
      * @private
      */
     Schedule.prototype.removeSelectedClass = function () {
-        var selectedCells = this.getSelectedElements();
+        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);
+        if (this.keyboardInteractionModule && this.keyboardInteractionModule.selectedCells.length > 0) {
+            this.keyboardInteractionModule.selectedCells = [];
+        }
     };
     /**
      * Method to add selected class
@@ -807,9 +825,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) {
@@ -1175,6 +1195,15 @@ var Schedule = /** @class */ (function (_super) {
         }
         return undefined;
     };
+    /**
+     * Retrieves the selected cells.
+     *
+     * @returns {Element[]} The elements of currently selected cells will be returned.
+     * @private
+     */
+    Schedule.prototype.getSelectedCells = function () {
+        return [].slice.call(this.element.querySelectorAll('.' + cls.SELECTED_CELL_CLASS));
+    };
     /**
      * Method to generate the announcement string
      *
@@ -1633,6 +1662,7 @@ var Schedule = /** @class */ (function (_super) {
                 case 'dataSource':
                 case 'query':
                 case 'fields':
+                case 'includeFiltersInQuery':
                     this.initializeDataModule();
                     state.isDataManager = true;
                     break;
@@ -1865,7 +1895,10 @@ var Schedule = /** @class */ (function (_super) {
      * @returns {Element[]} The elements of currently selected cells will be returned.
      */
     Schedule.prototype.getSelectedElements = function () {
-        return [].slice.call(this.element.querySelectorAll('.' + cls.SELECTED_CELL_CLASS));
+        if (this.keyboardInteractionModule && this.keyboardInteractionModule.selectedCells.length > 0) {
+            return this.keyboardInteractionModule.selectedCells;
+        }
+        return this.getSelectedCells();
     };
     /**
      * To get the resource collection
@@ -2032,6 +2065,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.
@@ -2707,6 +2751,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

@@ -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);
@@ -558,7 +553,7 @@ var EventBase = /** @class */ (function () {
             return;
         }
         var activeEle = document.activeElement;
-        var selectedCell = this.parent.getSelectedElements();
+        var selectedCell = this.parent.getSelectedCells();
         if (selectedCell.length > 0 && ((activeEle && (this.parent.element.contains(activeEle) ||
             selectedCell.indexOf(activeEle) !== -1)) || isFocused)) {
             if (this.parent.keyboardInteractionModule) {
@@ -1118,9 +1113,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 +1297,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++) {