@syncfusion/ej2-schedule - npm Package Compare versions

Comparing version 16.2.45 to 16.2.46

CHANGELOG.md

@@ -9,2 +9,10 @@ # Changelog
 
+- An issue with creation of weekly recurrence appointment, without providing `repeat every` field value has been fixed.
+
+## 16.2.44 (2018-07-10)
+
+### Schedule
+
+#### Bug Fixes
+
 - An issue with delete icon not displaying in a disabled state on `quick popup`, when scheduler is set to `readonly` has been fixed.
@@ -11,0 +19,0 @@

dist/global/index.d.ts

@@ -0,1 +1,10 @@
+/*!
+*  filename: index.d.ts
+*  version : 16.2.46
+*  Copyright Syncfusion Inc. 2001 - 2018. All rights reserved.
+*  Use of this code is subject to the terms of our license.
+*  A copy of the current license can be obtained at any time by e-mailing
+*  [e-mail]. Any infringement will be prosecuted under
+*  applicable laws. 
+*/
 import * as _schedule from '@syncfusion/ej2-schedule';
@@ -2,0 +11,0 @@ import * as _base from '@syncfusion/ej2-base';

index.js

@@ -1,8 +0,4 @@
-define(["require", "exports", "./src/index"], function (require, exports, index_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    __export(index_1);
-});
+/**
+ * index
+ */
+export * from './src/index';

package.json

 {
   "name": "@syncfusion/ej2-schedule",
-  "version": "16.2.45",
+  "version": "16.2.46",
   "description": "Essential JS 2 Schedule Component",
@@ -8,14 +8,14 @@ "author": "Syncfusion Inc.",
   "main": "./dist/ej2-schedule.umd.min.js",
-  "module": "./dist/es6/ej2-schedule.es5.js",
+  "module": "./index.js",
   "es2015": "./dist/es6/ej2-schedule.es2015.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~16.2.45",
-    "@syncfusion/ej2-data": "~16.2.45",
-    "@syncfusion/ej2-popups": "~16.2.45",
-    "@syncfusion/ej2-calendars": "~16.2.45",
-    "@syncfusion/ej2-navigations": "~16.2.45",
-    "@syncfusion/ej2-dropdowns": "~16.2.45",
-    "@syncfusion/ej2-buttons": "~16.2.45",
-    "@syncfusion/ej2-inputs": "~16.2.45",
-    "@syncfusion/ej2-lists": "~16.2.45"
+    "@syncfusion/ej2-base": "~16.2.46",
+    "@syncfusion/ej2-data": "~16.2.46",
+    "@syncfusion/ej2-popups": "~16.2.46",
+    "@syncfusion/ej2-calendars": "~16.2.46",
+    "@syncfusion/ej2-navigations": "~16.2.46",
+    "@syncfusion/ej2-dropdowns": "~16.2.46",
+    "@syncfusion/ej2-buttons": "~16.2.46",
+    "@syncfusion/ej2-inputs": "~16.2.46",
+    "@syncfusion/ej2-lists": "~16.2.46"
   },
@@ -22,0 +22,0 @@ "devDependencies": {

ReadMe.md

@@ -1,22 +0,72 @@
-# Overview
+# ej2-schedule
 
-Schedule is an event calendar which facilitates user with the common Outlook-calendar features, thus allowing the users to plan and manage their appointments and its time in an efficient way.
+The schedule component is an event calendar that facilitates almost all the basic Outlook and Google Calendar features, allowing the user to plan and manage appointments and time efficiently. It receives data from a variety of data sources, such as an array of JSON objects, OData web services, RESTful or WCF services, and [`DataManager`](https://ej2.syncfusion.com/documentation/data/?lang=typescript) with built-in load on demand support to reduce the data transfer and load time. Also, it is availed with the multiple resources support that allots an unique individual space for more than one resources on the same calendar.
 
-Also, it comes with documentation and support which is available for commercial and community licensed users. To know more, please visit www.syncfusion.com.
+![Schedule](https://ej2.syncfusion.com/products/schedule/readme.png)
 
+> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at [here](https://www.syncfusion.com/sales/products) or start a free 30-day trial from [here](https://www.syncfusion.com/account/manage-trials/start-trials).
+
+> A free community [license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
+
+## Setup
+
+To install Schedule and its dependent packages, use the following command.
+
+```sh
+npm install @syncfusion/ej2-schedule
+```
+
+## Resources
+
+* [Getting Started](https://ej2.syncfusion.com/documentation/schedule/getting-started.html?lang=typescript)
+* [View Online Demos](https://ej2.syncfusion.com/16.2.41/demos/#/material/schedule/default.html)
+* [Product Page](https://www.syncfusion.com/products/javascript/scheduler)
+
+## Supported Frameworks
+
+Schedule component is also available in following list of frameworks.
+
+1. [Angular](https://github.com/syncfusion/ej2-ng-schedule)
+2. [React](https://github.com/syncfusion/ej2-react-schedule)
+3. [VueJS](https://www.syncfusion.com/products/vue/scheduler)
+4. [ASP.NET Core](https://www.syncfusion.com/products/aspnetcore/scheduler)
+5. [ASP.NET MVC](https://www.syncfusion.com/products/aspnetmvc/scheduler)
+6. [JavaScript (ES5)](https://www.syncfusion.com/products/javascript/scheduler)
+
+## Showcase samples
+
+* Fare Calendar ([Live Demo](https://ej2.syncfusion.com/16.2.41/demos/#/material/schedule/resources.html))
+
 ## Key Features
 
-* **Views** - Schedule is now availed with 6 different view modes – day, week, work week, month, agenda and month agenda. It is possible to configure view-based settings on each view mode. The `Week` view is set as active view by default.
-* **Data binding** - Seamless data binding with various client-side and remote data sources thus allowing the data to load on demand by default to reduce the data transfer and loading time.
-* **Recurrence** - Allows the user to repeat a set of events on a daily, weekly, monthly, or yearly basis.
-* **Template** - The key elements like events, date header, work cells and event tooltip comes with the default template support which allows the flexible end-user customization to embed any kind of text, images, or styles to it.
-* **Time zone** -  Regardless of whatever time zone your system follows, Schedule supports setting your own required time zone value to it as well as to each event – thus allowing the events to display on its exact local time.
-* **Customizable working days and hours** - Users can set specific work hour range which is visually differentiated with active colour. Also, the working days collection can be customized with specific days, so that the remaining days will be considered as weekend.
-* **Custom editor template** - Template option is availed for event editor, thus allowing the users to add their own custom editor design and also provides option to add additional fields onto the default event editor.
-* **Adaptive rendering** - Adapts with optimal user interfaces for mobile and desktop form-factors, thus helping the user’s application to scale elegantly across all the form-factors without any additional effort.
-* **Keyboard interaction** - All the common actions such as traversing through the appointments, multiple cell selection, add/edit/delete the appointments, navigate to other views, dates and much more can be performed through keyboard inputs.
-* **Localization** - All the static text and date content can be localized to any desired language. Also, it can be displayed with appropriate time mode and date-format as per the localized language.
-* **RTL** - Supports displaying the component to display in the direction from right to left.
+* [**Views**](https://ej2.syncfusion.com/16.2.41/demos/#/material/schedule/views.html) - Schedule is now availed with 6 different view modes – day, week, work week, month, agenda and month agenda. It is possible to configure view-based settings on each view mode. The `Week` view is set as active view by default.
+* [**Data binding**](https://ej2.syncfusion.com/16.2.41/demos/#/material/schedule/remote-data.html) - Seamless data binding with various client-side and remote data sources thus allowing the data to load on demand by default to reduce the data transfer and loading time.
+* [**Multiple resources**](https://ej2.syncfusion.com/16.2.41/demos/#/material/schedule/group.html) - Supports planning and management of events for multiple resources and allows to group them under appropriate resources. Also, supports date-wise grouping, linked appointments and other group related customizations.
+* [**Recurrence**](https://ej2.syncfusion.com/16.2.41/demos/#/material/schedule/recurrence-events.html) - Allows the user to repeat a set of events on a daily, weekly, monthly, or yearly basis.
+* [**Template**](https://ej2.syncfusion.com/16.2.41/demos/#/material/schedule/event-template.html) - The key elements like events, date header, work cells and event tooltip comes with the default template support which allows the flexible end-user customization to embed any kind of text, images, or styles to it.
+* [**Timezone**](https://ej2.syncfusion.com/16.2.41/demos/#/material/schedule/timezone.html) -  Regardless of whatever time zone your system follows, Schedule supports setting your own required time zone value to it as well as to each event – thus allowing the events to display on its exact local time.
+* [**Timescale**](https://ej2.syncfusion.com/16.2.41/demos/#/material/schedule/time-scale.html) - Allows to display customized time duration, with clear and accurate depiction of appointments across the appropriate time slots.
+* [**Customizable working days and hours**](https://ej2.syncfusion.com/16.2.41/demos/#/material/schedule/work-days.html) - Users can set specific [work hour](https://ej2.syncfusion.com/16.2.41/demos/#/material/schedule/workhour.html) range which is visually differentiated with active colour. Also, the working days collection can be customized with specific days, so that the remaining days will be considered as [weekend](https://ej2.syncfusion.com/16.2.41/demos/#/material/schedule/hide-weekend.html).
+* [**Custom editor template**](https://ej2.syncfusion.com/16.2.41/demos/#/material/schedule/editor-template.html) - Template option is availed for event editor, thus allowing the users to add their own custom editor design and also provides option to add additional fields onto the default event editor.
+* [**Adaptive rendering**](https://ej2.syncfusion.com/16.2.41/demos/#/material/schedule/month-agenda.html) - Adapts with optimal user interfaces for mobile and desktop form-factors, thus helping the user’s application to scale elegantly across all the form-factors without any additional effort.
+* [**Keyboard interaction**](https://ej2.syncfusion.com/16.2.41/demos/#/material/schedule/keyboard.html) - All the common actions such as traversing through the appointments, multiple cell selection, add/edit/delete the appointments, navigate to other views, dates and much more can be performed through keyboard inputs.
+* [**Localization**](https://ej2.syncfusion.com/documentation/schedule/localization.html?lang=typescript#localization) - All the static text and date content can be localized to any desired language. Also, it can be displayed with appropriate time mode and date-format as per the localized language.
+* [**RTL**](https://ej2.syncfusion.com/documentation/schedule/localization.html?lang=typescript#rtl) - Supports displaying the component to display in the direction from right to left.
 
-## Resources
-* [Demo](http://ej2.syncfusion.com/demos/#/material/schedule/default.html)
+## Support
+
+Product support is available through following mediums.
+
+* Creating incident through Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents) support system or [Community forum](https://www.syncfusion.com/forums/essential-js2).
+* New [GitHub issue](https://github.com/syncfusion/ej2-schedule/issues/new).
+* Ask your query in Stack Overflow with tag `syncfusion`, `ej2`.
+
+## License
+
+Check the license detail [here](https://github.com/syncfusion/ej2/blob/master/license).
+
+## Changelog
+
+Check the changelog [here](https://github.com/syncfusion/ej2-schedule/blob/master/CHANGELOG.md).
+
+© Copyright 2018 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.

recurrence-editor.js

@@ -1,8 +0,4 @@
-define(["require", "exports", "./src/recurrence-editor/index"], function (require, exports, index_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    __export(index_1);
-});
+/**
+ * recurrence-editor
+ */
+export * from './src/recurrence-editor/index';

schedule.js

@@ -1,8 +0,4 @@
-define(["require", "exports", "./src/schedule/index"], function (require, exports, index_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    __export(index_1);
-});
+/**
+ * schedule
+ */
+export * from './src/schedule/index';

src/components.js

@@ -1,9 +0,5 @@
-define(["require", "exports", "./schedule/base/schedule", "./recurrence-editor/recurrence-editor"], function (require, exports, schedule_1, recurrence_editor_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    __export(schedule_1);
-    __export(recurrence_editor_1);
-});
+/**
+ * Export Schedule and Recurrence Editor
+ */
+export * from './schedule/base/schedule';
+export * from './recurrence-editor/recurrence-editor';

src/index.js

@@ -1,9 +0,5 @@
-define(["require", "exports", "./schedule/index", "./recurrence-editor/index"], function (require, exports, index_1, index_2) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    __export(index_1);
-    __export(index_2);
-});
+/**
+ * Export Schedule components
+ */
+export * from './schedule/index';
+export * from './recurrence-editor/index';

src/recurrence-editor/date-generator.js

@@ -1,244 +0,291 @@
-define(["require", "exports", "@syncfusion/ej2-base", "../schedule/base/util"], function (require, exports, ej2_base_1, util_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    function generateSummary(rule, localeObject, locale) {
-        var ruleObject = extractObjectFromRule(rule);
-        var summary = localeObject.getConstant(EVERY) + ' ';
-        var cldrObj;
-        var cldrObj1;
-        if (locale === 'en' || locale === 'en-US') {
-            cldrObj1 = (ej2_base_1.getValue('months.stand-alone.abbreviated', ej2_base_1.getDefaultDateObject()));
-            cldrObj = (ej2_base_1.getValue('days.stand-alone.abbreviated', ej2_base_1.getDefaultDateObject()));
-        }
-        else {
-            cldrObj1 = (ej2_base_1.getValue('main.' + '' + locale + '.dates.calendars.gregorian.months.stand-alone.abbreviated', ej2_base_1.cldrData));
-            cldrObj = (ej2_base_1.getValue('main.' + '' + locale + '.dates.calendars.gregorian.days.stand-alone.abbreviated', ej2_base_1.cldrData));
-        }
-        if (ruleObject.interval > 1) {
-            summary += ruleObject.interval + ' ';
-        }
-        switch (ruleObject.freq) {
-            case 'DAILY':
-                summary += localeObject.getConstant(DAYS);
+import { isNullOrUndefined, getDefaultDateObject, getValue, cldrData } from '@syncfusion/ej2-base';
+import { MS_PER_DAY } from '../schedule/base/util';
+/**
+ * Date Generator from Recurrence Rule
+ */
+export function generateSummary(rule, localeObject, locale) {
+    var ruleObject = extractObjectFromRule(rule);
+    var summary = localeObject.getConstant(EVERY) + ' ';
+    var cldrObj;
+    var cldrObj1;
+    if (locale === 'en' || locale === 'en-US') {
+        cldrObj1 = (getValue('months.stand-alone.abbreviated', getDefaultDateObject()));
+        cldrObj = (getValue('days.stand-alone.abbreviated', getDefaultDateObject()));
+    }
+    else {
+        cldrObj1 = (getValue('main.' + '' + locale + '.dates.calendars.gregorian.months.stand-alone.abbreviated', cldrData));
+        cldrObj = (getValue('main.' + '' + locale + '.dates.calendars.gregorian.days.stand-alone.abbreviated', cldrData));
+    }
+    if (ruleObject.interval > 1) {
+        summary += ruleObject.interval + ' ';
+    }
+    switch (ruleObject.freq) {
+        case 'DAILY':
+            summary += localeObject.getConstant(DAYS);
+            break;
+        case 'WEEKLY':
+            summary += localeObject.getConstant(WEEKS) + ' ' + localeObject.getConstant(ON) + ' ';
+            ruleObject.day.forEach(function (day, index) {
+                summary += getValue(DAYINDEXOBJECT[day], cldrObj);
+                summary += (((ruleObject.day.length - 1) === index) ? '' : ', ');
+            });
+            break;
+        case 'MONTHLY':
+            summary += localeObject.getConstant(MONTHS) + ' ' + localeObject.getConstant(ON) + ' ';
+            summary += getMonthSummary(ruleObject, cldrObj, localeObject);
+            break;
+        case 'YEARLY':
+            summary += localeObject.getConstant(YEARS) + ' ' + localeObject.getConstant(ON) + ' ';
+            summary += getValue((ruleObject.month[0]).toString(), cldrObj1) + ' ';
+            summary += getMonthSummary(ruleObject, cldrObj, localeObject);
+            break;
+    }
+    if (ruleObject.count) {
+        summary += ', ' + (ruleObject.count) + ' ' + localeObject.getConstant(TIMES);
+    }
+    else if (ruleObject.until) {
+        var tempDate = ruleObject.until;
+        summary += ', ' + localeObject.getConstant(UNTIL)
+            + ' ' + tempDate.getDate()
+            + ' ' + getValue((tempDate.getMonth() + 1).toString(), cldrObj1)
+            + ' ' + tempDate.getFullYear();
+    }
+    return summary;
+}
+function getMonthSummary(ruleObject, cldrObj, localeObj) {
+    var summary = '';
+    if (ruleObject.monthDay.length) {
+        summary += ruleObject.monthDay[0];
+    }
+    else if (ruleObject.day) {
+        var pos = ruleObject.setPosition - 1;
+        summary += localeObj.getConstant(WEEKPOS[pos > -1 ? pos : (WEEKPOS.length - 1)])
+            + ' ' + getValue(DAYINDEXOBJECT[ruleObject.day[0]], cldrObj);
+    }
+    return summary;
+}
+export function generate(startDate, rule, excludeDate, startDayOfWeek, maximumCount, viewDate) {
+    if (maximumCount === void 0) { maximumCount = MAXOCCURRENCE; }
+    if (viewDate === void 0) { viewDate = null; }
+    var ruleObject = extractObjectFromRule(rule);
+    var cacheDate;
+    var data = [];
+    var modifiedDate = new Date(startDate.getTime());
+    if (viewDate && viewDate > startDate && !ruleObject.count) {
+        tempViewDate = new Date(new Date(viewDate.getTime()).setHours(0, 0, 0));
+    }
+    else {
+        tempViewDate = null;
+    }
+    if (!ruleObject.until && tempViewDate) {
+        cacheDate = new Date(tempViewDate.getTime());
+        cacheDate.setDate(tempViewDate.getDate() + 42 * (ruleObject.interval));
+        ruleObject.until = cacheDate;
+    }
+    if (ruleObject.until && startDate > ruleObject.until) {
+        return data;
+    }
+    maxOccurrence = maximumCount;
+    setFirstDayOfWeek(DAYINDEX[startDayOfWeek]);
+    tempExcludeDate = [];
+    var tempDate = isNullOrUndefined(excludeDate) ? [] : excludeDate.split(',');
+    tempDate.forEach(function (content) {
+        var parsedDate = getDateFromRecurrenceDateString(content);
+        tempExcludeDate.push(new Date(parsedDate.getTime()).setHours(0, 0, 0, 0));
+    });
+    switch (ruleObject.freq) {
+        case 'DAILY':
+            dailyType(modifiedDate, ruleObject.until, data, ruleObject);
+            break;
+        case 'WEEKLY':
+            weeklyType(modifiedDate, ruleObject.until, data, ruleObject);
+            break;
+        case 'MONTHLY':
+            monthlyType(modifiedDate, ruleObject.until, data, ruleObject);
+            break;
+        case 'YEARLY':
+            yearlyType(modifiedDate, ruleObject.until, data, ruleObject);
+    }
+    return data;
+}
+function getDateFromRecurrenceDateString(recDateString) {
+    return new Date(recDateString.substr(0, 4) +
+        '-' + recDateString.substr(4, 2) +
+        '-' + recDateString.substr(6, 5) +
+        ':' + recDateString.substr(11, 2) +
+        ':' + recDateString.substr(13));
+}
+function excludeDateHandler(data, date) {
+    var zeroIndex = new Date(date).setHours(0, 0, 0, 0);
+    if (tempExcludeDate.indexOf(zeroIndex) === -1 && (!tempViewDate || zeroIndex >= tempViewDate.getTime())) {
+        data.push(date);
+    }
+}
+function dailyType(startDate, endDate, data, ruleObject) {
+    var tempDate = new Date(startDate.getTime());
+    var interval = ruleObject.interval;
+    var expectedCount = ruleObject.count ? ruleObject.count : maxOccurrence;
+    var state;
+    while (compareDates(tempDate, endDate)) {
+        state = true;
+        state = validateRules(tempDate, ruleObject);
+        if (state) {
+            excludeDateHandler(data, tempDate.getTime());
+            if (expectedCount && (data.length + tempExcludeDate.length) >= expectedCount) {
                 break;
-            case 'WEEKLY':
-                summary += localeObject.getConstant(WEEKS) + ' ' + localeObject.getConstant(ON) + ' ';
-                ruleObject.day.forEach(function (day, index) {
-                    summary += ej2_base_1.getValue(DAYINDEXOBJECT[day], cldrObj);
-                    summary += (((ruleObject.day.length - 1) === index) ? '' : ', ');
-                });
-                break;
-            case 'MONTHLY':
-                summary += localeObject.getConstant(MONTHS) + ' ' + localeObject.getConstant(ON) + ' ';
-                summary += getMonthSummary(ruleObject, cldrObj, localeObject);
-                break;
-            case 'YEARLY':
-                summary += localeObject.getConstant(YEARS) + ' ' + localeObject.getConstant(ON) + ' ';
-                summary += ej2_base_1.getValue((ruleObject.month[0]).toString(), cldrObj1) + ' ';
-                summary += getMonthSummary(ruleObject, cldrObj, localeObject);
-                break;
+            }
         }
-        if (ruleObject.count) {
-            summary += ', ' + (ruleObject.count) + ' ' + localeObject.getConstant(TIMES);
-        }
-        else if (ruleObject.until) {
-            var tempDate = ruleObject.until;
-            summary += ', ' + localeObject.getConstant(UNTIL)
-                + ' ' + tempDate.getDate()
-                + ' ' + ej2_base_1.getValue((tempDate.getMonth() + 1).toString(), cldrObj1)
-                + ' ' + tempDate.getFullYear();
-        }
-        return summary;
+        tempDate.setDate(tempDate.getDate() + interval);
     }
-    exports.generateSummary = generateSummary;
-    function getMonthSummary(ruleObject, cldrObj, localeObj) {
-        var summary = '';
-        if (ruleObject.monthDay.length) {
-            summary += ruleObject.monthDay[0];
+}
+function weeklyType(startDate, endDate, data, ruleObject) {
+    var tempDate = getStartDateForWeek(startDate, ruleObject.day);
+    var interval = ruleObject.interval;
+    var expectedDays = ruleObject.day;
+    var expectedCount = ruleObject.count ? ruleObject.count : maxOccurrence;
+    var state;
+    var dayCycleData = processWeekDays(expectedDays);
+    while (compareDates(tempDate, endDate)) {
+        state = true;
+        state = validateRules(tempDate, ruleObject);
+        if (state) {
+            excludeDateHandler(data, tempDate.getTime());
+            if (expectedCount && (data.length + tempExcludeDate.length) >= expectedCount) {
+                break;
+            }
         }
-        else if (ruleObject.day) {
-            var pos = ruleObject.setPosition - 1;
-            summary += localeObj.getConstant(WEEKPOS[pos > -1 ? pos : (WEEKPOS.length - 1)])
-                + ' ' + ej2_base_1.getValue(DAYINDEXOBJECT[ruleObject.day[0]], cldrObj);
+        if (expectedDays.length > 1) {
+            tempDate.setDate(tempDate.getDate()
+                + dayCycleData[DAYINDEX[tempDate.getDay()]]
+                + ((expectedDays.indexOf(DAYINDEX[tempDate.getDay()]) === expectedDays.length - 1) ?
+                    ((interval - 1) * 7) : 0));
         }
-        return summary;
-    }
-    function generate(startDate, rule, excludeDate, startDayOfWeek, maximumCount, viewDate) {
-        if (maximumCount === void 0) { maximumCount = MAXOCCURRENCE; }
-        if (viewDate === void 0) { viewDate = null; }
-        var ruleObject = extractObjectFromRule(rule);
-        var cacheDate;
-        var data = [];
-        var modifiedDate = new Date(startDate.getTime());
-        if (viewDate && viewDate > startDate && !ruleObject.count) {
-            tempViewDate = new Date(new Date(viewDate.getTime()).setHours(0, 0, 0));
-        }
         else {
-            tempViewDate = null;
+            tempDate.setDate(tempDate.getDate()
+                + (interval * 7));
         }
-        if (!ruleObject.until && tempViewDate) {
-            cacheDate = new Date(tempViewDate.getTime());
-            cacheDate.setDate(tempViewDate.getDate() + 42 * (ruleObject.interval));
-            ruleObject.until = cacheDate;
-        }
-        if (ruleObject.until && startDate > ruleObject.until) {
-            return data;
-        }
-        maxOccurrence = maximumCount;
-        setFirstDayOfWeek(DAYINDEX[startDayOfWeek]);
-        tempExcludeDate = [];
-        var tempDate = ej2_base_1.isNullOrUndefined(excludeDate) ? [] : excludeDate.split(',');
-        tempDate.forEach(function (content) {
-            var parsedDate = getDateFromRecurrenceDateString(content);
-            tempExcludeDate.push(new Date(parsedDate.getTime()).setHours(0, 0, 0, 0));
-        });
-        switch (ruleObject.freq) {
-            case 'DAILY':
-                dailyType(modifiedDate, ruleObject.until, data, ruleObject);
-                break;
-            case 'WEEKLY':
-                weeklyType(modifiedDate, ruleObject.until, data, ruleObject);
-                break;
-            case 'MONTHLY':
-                monthlyType(modifiedDate, ruleObject.until, data, ruleObject);
-                break;
-            case 'YEARLY':
-                yearlyType(modifiedDate, ruleObject.until, data, ruleObject);
-        }
-        return data;
     }
-    exports.generate = generate;
-    function getDateFromRecurrenceDateString(recDateString) {
-        return new Date(recDateString.substr(0, 4) +
-            '-' + recDateString.substr(4, 2) +
-            '-' + recDateString.substr(6, 5) +
-            ':' + recDateString.substr(11, 2) +
-            ':' + recDateString.substr(13));
+}
+function monthlyType(startDate, endDate, data, ruleObject) {
+    var ruleType = validateMonthlyRuleType(ruleObject);
+    switch (ruleType) {
+        case 'day':
+            monthlyDayTypeProcess(startDate, endDate, data, ruleObject);
+            break;
+        case 'both':
+        case 'date':
+            monthlyDateTypeProcess(startDate, endDate, data, ruleObject);
+            break;
     }
-    function excludeDateHandler(data, date) {
-        var zeroIndex = new Date(date).setHours(0, 0, 0, 0);
-        if (tempExcludeDate.indexOf(zeroIndex) === -1 && (!tempViewDate || zeroIndex >= tempViewDate.getTime())) {
-            data.push(date);
-        }
+}
+function yearlyType(startDate, endDate, data, ruleObject) {
+    var typeValue = checkYearlyType(ruleObject);
+    switch (typeValue) {
+        case 'MONTH':
+            monthlyType(startDate, endDate, data, ruleObject);
+            break;
+        case 'WEEKNO':
+            processWeekNo(startDate, endDate, data, ruleObject);
+            break;
+        case 'YEARDAY':
+            processYearDay(startDate, endDate, data, ruleObject);
+            break;
     }
-    function dailyType(startDate, endDate, data, ruleObject) {
-        var tempDate = new Date(startDate.getTime());
-        var interval = ruleObject.interval;
-        var expectedCount = ruleObject.count ? ruleObject.count : maxOccurrence;
-        var state;
-        while (compareDates(tempDate, endDate)) {
-            state = true;
-            state = validateRules(tempDate, ruleObject);
-            if (state) {
-                excludeDateHandler(data, tempDate.getTime());
-                if (expectedCount && (data.length + tempExcludeDate.length) >= expectedCount) {
-                    break;
+}
+function processWeekNo(startDate, endDate, data, ruleObject) {
+    var stDate = new Date(startDate.getFullYear(), 0, 0);
+    var tempDate;
+    var expectedCount = ruleObject.count ? ruleObject.count : maxOccurrence;
+    var state;
+    var startDay;
+    var firstWeekSpan;
+    var weekNos = ruleObject.weekNo;
+    var weekNo;
+    var maxDate;
+    var minDate;
+    while (compareDates(stDate, endDate)) {
+        startDay = dayIndex.indexOf(DAYINDEX[stDate.getDay()]);
+        firstWeekSpan = (6 - startDay) + 1;
+        for (var index = 0; index < weekNos.length; index++) {
+            weekNo = weekNos[index];
+            weekNo = (weekNo > 0) ? weekNo : 53 + weekNo + 1;
+            maxDate = (weekNo === 1) ? firstWeekSpan : firstWeekSpan + ((weekNo - 1) * 7);
+            minDate = (weekNo === 1) ? firstWeekSpan - 7 : firstWeekSpan + ((weekNo - 2) * 7);
+            while (minDate < maxDate) {
+                tempDate = new Date(stDate.getTime() + (MS_PER_DAY * minDate));
+                state = validateRules(tempDate, ruleObject);
+                if ((tempDate >= startDate) && state && compareDates(tempDate, endDate)) {
+                    excludeDateHandler(data, tempDate.getTime());
+                    if (expectedCount && (data.length + tempExcludeDate.length) >= expectedCount) {
+                        return;
+                    }
                 }
+                minDate++;
             }
-            tempDate.setDate(tempDate.getDate() + interval);
         }
+        stDate = new Date(tempDate.getFullYear() + ruleObject.interval, 0, 0);
     }
-    function weeklyType(startDate, endDate, data, ruleObject) {
-        var tempDate = getStartDateForWeek(startDate, ruleObject.day);
-        var interval = ruleObject.interval;
-        var expectedDays = ruleObject.day;
-        var expectedCount = ruleObject.count ? ruleObject.count : maxOccurrence;
-        var state;
-        var dayCycleData = processWeekDays(expectedDays);
-        while (compareDates(tempDate, endDate)) {
-            state = true;
+}
+function processYearDay(startDate, endDate, data, ruleObject) {
+    var stDate = new Date(startDate.getFullYear(), 0, 0);
+    var tempDate;
+    var expectedCount = ruleObject.count ? ruleObject.count : maxOccurrence;
+    var state;
+    var date;
+    while (compareDates(stDate, endDate)) {
+        for (var index = 0; index < ruleObject.yearDay.length; index++) {
+            date = ruleObject.yearDay[index];
+            tempDate = new Date(stDate.getTime());
+            if ((date === LEAPYEAR || date === -LEAPYEAR) && ((tempDate.getFullYear() + 1) % 4 !== 0)) {
+                tempDate.setDate(tempDate.getDate() + 1);
+                continue;
+            }
+            tempDate.setDate(tempDate.getDate() + ((date < 0) ? getMaxYearDay(tempDate.getFullYear() + 1) + 1 + date : date));
             state = validateRules(tempDate, ruleObject);
-            if (state) {
+            if ((tempDate >= startDate) && state && compareDates(tempDate, endDate)) {
                 excludeDateHandler(data, tempDate.getTime());
                 if (expectedCount && (data.length + tempExcludeDate.length) >= expectedCount) {
-                    break;
+                    return;
                 }
             }
-            if (expectedDays.length > 1) {
-                tempDate.setDate(tempDate.getDate()
-                    + dayCycleData[DAYINDEX[tempDate.getDay()]]
-                    + ((expectedDays.indexOf(DAYINDEX[tempDate.getDay()]) === expectedDays.length - 1) ?
-                        ((interval - 1) * 7) : 0));
-            }
-            else {
-                tempDate.setDate(tempDate.getDate()
-                    + (interval * 7));
-            }
         }
+        stDate = new Date(tempDate.getFullYear() + ruleObject.interval, 0, 0);
     }
-    function monthlyType(startDate, endDate, data, ruleObject) {
-        var ruleType = validateMonthlyRuleType(ruleObject);
-        switch (ruleType) {
-            case 'day':
-                monthlyDayTypeProcess(startDate, endDate, data, ruleObject);
-                break;
-            case 'both':
-            case 'date':
-                monthlyDateTypeProcess(startDate, endDate, data, ruleObject);
-                break;
-        }
+}
+function getMaxYearDay(date) {
+    return (date % 4 === 0) ? LEAPYEAR : NORMALYEAR;
+}
+function checkYearlyType(ruleObject) {
+    if (ruleObject.yearDay.length) {
+        return 'YEARDAY';
     }
-    function yearlyType(startDate, endDate, data, ruleObject) {
-        var typeValue = checkYearlyType(ruleObject);
-        switch (typeValue) {
-            case 'MONTH':
-                monthlyType(startDate, endDate, data, ruleObject);
-                break;
-            case 'WEEKNO':
-                processWeekNo(startDate, endDate, data, ruleObject);
-                break;
-            case 'YEARDAY':
-                processYearDay(startDate, endDate, data, ruleObject);
-                break;
-        }
+    else if (ruleObject.weekNo.length) {
+        return 'WEEKNO';
     }
-    function processWeekNo(startDate, endDate, data, ruleObject) {
-        var stDate = new Date(startDate.getFullYear(), 0, 0);
-        var tempDate;
-        var expectedCount = ruleObject.count ? ruleObject.count : maxOccurrence;
-        var state;
-        var startDay;
-        var firstWeekSpan;
-        var weekNos = ruleObject.weekNo;
-        var weekNo;
-        var maxDate;
-        var minDate;
-        while (compareDates(stDate, endDate)) {
-            startDay = dayIndex.indexOf(DAYINDEX[stDate.getDay()]);
-            firstWeekSpan = (6 - startDay) + 1;
-            for (var index = 0; index < weekNos.length; index++) {
-                weekNo = weekNos[index];
-                weekNo = (weekNo > 0) ? weekNo : 53 + weekNo + 1;
-                maxDate = (weekNo === 1) ? firstWeekSpan : firstWeekSpan + ((weekNo - 1) * 7);
-                minDate = (weekNo === 1) ? firstWeekSpan - 7 : firstWeekSpan + ((weekNo - 2) * 7);
-                while (minDate < maxDate) {
-                    tempDate = new Date(stDate.getTime() + (util_1.MS_PER_DAY * minDate));
-                    state = validateRules(tempDate, ruleObject);
-                    if ((tempDate >= startDate) && state && compareDates(tempDate, endDate)) {
-                        excludeDateHandler(data, tempDate.getTime());
-                        if (expectedCount && (data.length + tempExcludeDate.length) >= expectedCount) {
-                            return;
-                        }
-                    }
-                    minDate++;
-                }
-            }
-            stDate = new Date(tempDate.getFullYear() + ruleObject.interval, 0, 0);
-        }
+    return 'MONTH';
+}
+function monthlyDateTypeProcess(startDate, endDate, data, ruleObject) {
+    var tempDate = new Date(startDate.getTime());
+    var mainDate = new Date(startDate.getTime());
+    var expectedCount = ruleObject.count ? ruleObject.count : maxOccurrence;
+    var interval = ruleObject.interval;
+    var monthInit = 0;
+    var date;
+    var state;
+    tempDate.setDate(1);
+    mainDate.setDate(1);
+    if (ruleObject.month.length) {
+        tempDate.setMonth(ruleObject.month[0] - 1);
     }
-    function processYearDay(startDate, endDate, data, ruleObject) {
-        var stDate = new Date(startDate.getFullYear(), 0, 0);
-        var tempDate;
-        var expectedCount = ruleObject.count ? ruleObject.count : maxOccurrence;
-        var state;
-        var date;
-        while (compareDates(stDate, endDate)) {
-            for (var index = 0; index < ruleObject.yearDay.length; index++) {
-                date = ruleObject.yearDay[index];
-                tempDate = new Date(stDate.getTime());
-                if ((date === LEAPYEAR || date === -LEAPYEAR) && ((tempDate.getFullYear() + 1) % 4 !== 0)) {
-                    tempDate.setDate(tempDate.getDate() + 1);
-                    continue;
+    while (compareDates(tempDate, endDate)) {
+        for (var index = 0; index < ruleObject.monthDay.length; index++) {
+            date = ruleObject.monthDay[index];
+            var maxDate = (tempDate.getMonth() === 1) ?
+                (tempDate.getFullYear() % 4 === 0 ? 29 : 28) : monthDay[tempDate.getMonth()];
+            date = date > 0 ? date : (maxDate + date + 1);
+            if ((date > 0) && validateProperDate(tempDate, date, mainDate)) {
+                tempDate.setDate(date);
+                if (endDate && tempDate > endDate) {
+                    return;
                 }
-                tempDate.setDate(tempDate.getDate() + ((date < 0) ? getMaxYearDay(tempDate.getFullYear() + 1) + 1 + date : date));
                 state = validateRules(tempDate, ruleObject);
@@ -252,379 +299,329 @@ if ((tempDate >= startDate) && state && compareDates(tempDate, endDate)) {
             }
-            stDate = new Date(tempDate.getFullYear() + ruleObject.interval, 0, 0);
         }
+        monthInit = setNextValidDate(tempDate, ruleObject, monthInit, interval);
     }
-    function getMaxYearDay(date) {
-        return (date % 4 === 0) ? LEAPYEAR : NORMALYEAR;
+}
+function setNextValidDate(tempDate, ruleObject, monthInit, interval, beginDate) {
+    if (beginDate === void 0) { beginDate = null; }
+    var monthData = beginDate ? beginDate.getMonth() : 0;
+    tempDate.setDate(1);
+    if (ruleObject.month.length) {
+        monthInit++;
+        monthInit = monthInit % ruleObject.month.length;
+        tempDate.setMonth(ruleObject.month[monthInit] - 1);
+        if (monthInit === 0) {
+            tempDate.setFullYear(tempDate.getFullYear() + interval);
+        }
     }
-    function checkYearlyType(ruleObject) {
-        if (ruleObject.yearDay.length) {
-            return 'YEARDAY';
+    else {
+        if (beginDate && (beginDate.getFullYear() < tempDate.getFullYear())) {
+            monthData = tempDate.getMonth() - 1;
         }
-        else if (ruleObject.weekNo.length) {
-            return 'WEEKNO';
-        }
-        return 'MONTH';
+        tempDate.setMonth((beginDate ?
+            monthData :
+            tempDate.getMonth()) + interval);
     }
-    function monthlyDateTypeProcess(startDate, endDate, data, ruleObject) {
-        var tempDate = new Date(startDate.getTime());
-        var mainDate = new Date(startDate.getTime());
-        var expectedCount = ruleObject.count ? ruleObject.count : maxOccurrence;
-        var interval = ruleObject.interval;
-        var monthInit = 0;
-        var date;
-        var state;
-        tempDate.setDate(1);
-        mainDate.setDate(1);
-        if (ruleObject.month.length) {
-            tempDate.setMonth(ruleObject.month[0] - 1);
-        }
-        while (compareDates(tempDate, endDate)) {
-            for (var index = 0; index < ruleObject.monthDay.length; index++) {
-                date = ruleObject.monthDay[index];
-                var maxDate = (tempDate.getMonth() === 1) ?
-                    (tempDate.getFullYear() % 4 === 0 ? 29 : 28) : monthDay[tempDate.getMonth()];
-                date = date > 0 ? date : (maxDate + date + 1);
-                if ((date > 0) && validateProperDate(tempDate, date, mainDate)) {
-                    tempDate.setDate(date);
-                    if (endDate && tempDate > endDate) {
-                        return;
-                    }
-                    state = validateRules(tempDate, ruleObject);
-                    if ((tempDate >= startDate) && state && compareDates(tempDate, endDate)) {
-                        excludeDateHandler(data, tempDate.getTime());
-                        if (expectedCount && (data.length + tempExcludeDate.length) >= expectedCount) {
-                            return;
-                        }
-                    }
+    return monthInit;
+}
+function monthlyDayTypeProcess(startDate, endDate, data, ruleObject) {
+    var tempDate = new Date(startDate.getTime());
+    var expectedDays = ruleObject.day;
+    var expectedCount = ruleObject.count ? ruleObject.count : maxOccurrence;
+    var dayCycleData = processWeekDays(expectedDays);
+    var interval = ruleObject.interval;
+    var state;
+    var monthCollection = [];
+    var weekCollection = [];
+    var month;
+    var index;
+    var beginDate;
+    var monthInit = 0;
+    tempDate.setDate(1);
+    if (ruleObject.month.length) {
+        tempDate.setMonth(ruleObject.month[0] - 1);
+    }
+    tempDate = getStartDateForWeek(tempDate, ruleObject.day);
+    while (compareDates(tempDate, endDate)) {
+        month = tempDate.getMonth();
+        beginDate = new Date(tempDate.getTime());
+        if (expectedDays.length > 1) {
+            while (tempDate.getMonth() === month) {
+                weekCollection.push(tempDate.getTime());
+                if (DAYINDEX[tempDate.getDay()] === expectedDays[expectedDays.length - 1]) {
+                    monthCollection.push(weekCollection);
+                    weekCollection = [];
                 }
+                tempDate.setDate(tempDate.getDate()
+                    + dayCycleData[DAYINDEX[tempDate.getDay()]]);
             }
-            monthInit = setNextValidDate(tempDate, ruleObject, monthInit, interval);
         }
-    }
-    function setNextValidDate(tempDate, ruleObject, monthInit, interval, beginDate) {
-        if (beginDate === void 0) { beginDate = null; }
-        var monthData = beginDate ? beginDate.getMonth() : 0;
-        tempDate.setDate(1);
-        if (ruleObject.month.length) {
-            monthInit++;
-            monthInit = monthInit % ruleObject.month.length;
-            tempDate.setMonth(ruleObject.month[monthInit] - 1);
-            if (monthInit === 0) {
-                tempDate.setFullYear(tempDate.getFullYear() + interval);
-            }
-        }
         else {
-            if (beginDate && (beginDate.getFullYear() < tempDate.getFullYear())) {
-                monthData = tempDate.getMonth() - 1;
+            var currentMonthDate = new Date(tempDate.getTime());
+            while (currentMonthDate.getMonth() === month) {
+                monthCollection.push([currentMonthDate.getTime()]);
+                currentMonthDate.setDate(currentMonthDate.getDate() + (7));
             }
-            tempDate.setMonth((beginDate ?
-                monthData :
-                tempDate.getMonth()) + interval);
         }
-        return monthInit;
-    }
-    function monthlyDayTypeProcess(startDate, endDate, data, ruleObject) {
-        var tempDate = new Date(startDate.getTime());
-        var expectedDays = ruleObject.day;
-        var expectedCount = ruleObject.count ? ruleObject.count : maxOccurrence;
-        var dayCycleData = processWeekDays(expectedDays);
-        var interval = ruleObject.interval;
-        var state;
-        var monthCollection = [];
-        var weekCollection = [];
-        var month;
-        var index;
-        var beginDate;
-        var monthInit = 0;
-        tempDate.setDate(1);
-        if (ruleObject.month.length) {
-            tempDate.setMonth(ruleObject.month[0] - 1);
-        }
-        tempDate = getStartDateForWeek(tempDate, ruleObject.day);
-        while (compareDates(tempDate, endDate)) {
-            month = tempDate.getMonth();
-            beginDate = new Date(tempDate.getTime());
-            if (expectedDays.length > 1) {
-                while (tempDate.getMonth() === month) {
-                    weekCollection.push(tempDate.getTime());
-                    if (DAYINDEX[tempDate.getDay()] === expectedDays[expectedDays.length - 1]) {
-                        monthCollection.push(weekCollection);
-                        weekCollection = [];
-                    }
-                    tempDate.setDate(tempDate.getDate()
-                        + dayCycleData[DAYINDEX[tempDate.getDay()]]);
+        index = ((ruleObject.setPosition < 1) ? (monthCollection.length + ruleObject.setPosition) : ruleObject.setPosition - 1);
+        if (ruleObject.setPosition === null) {
+            index = 0;
+            var datas = [];
+            for (var week = 0; week < monthCollection.length; week++) {
+                for (var row = 0; row < monthCollection[week].length; row++) {
+                    datas.push(monthCollection[week][row]);
                 }
             }
-            else {
-                var currentMonthDate = new Date(tempDate.getTime());
-                while (currentMonthDate.getMonth() === month) {
-                    monthCollection.push([currentMonthDate.getTime()]);
-                    currentMonthDate.setDate(currentMonthDate.getDate() + (7));
+            monthCollection = [datas];
+        }
+        for (var week = 0; week < monthCollection[index].length; week++) {
+            var dayData = monthCollection[index][week];
+            var chDate = new Date(dayData);
+            state = validateRules(chDate, ruleObject);
+            if ((chDate >= startDate) && compareDates(chDate, endDate) && state) {
+                excludeDateHandler(data, dayData);
+                if (expectedCount && (data.length + tempExcludeDate.length) >= expectedCount) {
+                    return;
                 }
             }
-            index = ((ruleObject.setPosition < 1) ? (monthCollection.length + ruleObject.setPosition) : ruleObject.setPosition - 1);
-            if (ruleObject.setPosition === null) {
-                index = 0;
-                var datas = [];
-                for (var week = 0; week < monthCollection.length; week++) {
-                    for (var row = 0; row < monthCollection[week].length; row++) {
-                        datas.push(monthCollection[week][row]);
-                    }
-                }
-                monthCollection = [datas];
-            }
-            for (var week = 0; week < monthCollection[index].length; week++) {
-                var dayData = monthCollection[index][week];
-                var chDate = new Date(dayData);
-                state = validateRules(chDate, ruleObject);
-                if ((chDate >= startDate) && compareDates(chDate, endDate) && state) {
-                    excludeDateHandler(data, dayData);
-                    if (expectedCount && (data.length + tempExcludeDate.length) >= expectedCount) {
-                        return;
-                    }
-                }
-            }
-            monthInit = setNextValidDate(tempDate, ruleObject, monthInit, interval, beginDate);
-            monthCollection = [];
-            weekCollection = [];
-            tempDate = getStartDateForWeek(tempDate, ruleObject.day);
         }
+        monthInit = setNextValidDate(tempDate, ruleObject, monthInit, interval, beginDate);
+        monthCollection = [];
+        weekCollection = [];
+        tempDate = getStartDateForWeek(tempDate, ruleObject.day);
     }
-    function compareDates(startDate, endDate) {
-        return endDate ? (startDate <= endDate) : true;
+}
+function compareDates(startDate, endDate) {
+    return endDate ? (startDate <= endDate) : true;
+}
+function checkDayIndex(day, expectedDays) {
+    return (expectedDays.indexOf(DAYINDEX[day]) === -1);
+}
+function getStartDateForWeek(startDate, expectedDays) {
+    var tempDate = new Date(startDate.getTime());
+    if (expectedDays.indexOf(DAYINDEX[tempDate.getDay()]) === -1) {
+        do {
+            tempDate.setDate(tempDate.getDate() + 1);
+        } while (expectedDays.indexOf(DAYINDEX[tempDate.getDay()]) === -1);
     }
-    function checkDayIndex(day, expectedDays) {
-        return (expectedDays.indexOf(DAYINDEX[day]) === -1);
-    }
-    function getStartDateForWeek(startDate, expectedDays) {
-        var tempDate = new Date(startDate.getTime());
-        if (expectedDays.indexOf(DAYINDEX[tempDate.getDay()]) === -1) {
-            do {
-                tempDate.setDate(tempDate.getDate() + 1);
-            } while (expectedDays.indexOf(DAYINDEX[tempDate.getDay()]) === -1);
+    return tempDate;
+}
+export function extractObjectFromRule(rules) {
+    var ruleObject = {
+        freq: null,
+        interval: 1,
+        count: null,
+        until: null,
+        day: [],
+        month: [],
+        weekNo: [],
+        monthDay: [],
+        yearDay: [],
+        setPosition: null,
+        validRules: []
+    };
+    var rulesList = rules.split(';');
+    var splitData = [];
+    var temp;
+    rulesList.forEach(function (data) {
+        splitData = data.split('=');
+        switch (splitData[0]) {
+            case 'UNTIL':
+                temp = splitData[1];
+                ruleObject.until = getDateFromRecurrenceDateString(temp);
+                break;
+            case 'BYDAY':
+                ruleObject.day = splitData[1].split(',');
+                ruleObject.validRules.push(splitData[0]);
+                break;
+            case 'BYMONTHDAY':
+                ruleObject.monthDay = splitData[1].split(',').map(Number);
+                ruleObject.validRules.push(splitData[0]);
+                break;
+            case 'BYMONTH':
+                ruleObject.month = splitData[1].split(',').map(Number);
+                ruleObject.validRules.push(splitData[0]);
+                break;
+            case 'BYYEARDAY':
+                ruleObject.yearDay = splitData[1].split(',').map(Number);
+                ruleObject.validRules.push(splitData[0]);
+                break;
+            case 'BYWEEKNO':
+                ruleObject.weekNo = splitData[1].split(',').map(Number);
+                ruleObject.validRules.push(splitData[0]);
+                break;
+            case 'INTERVAL':
+                ruleObject.interval = parseInt(splitData[1], 10);
+                break;
+            case 'COUNT':
+                ruleObject.count = parseInt(splitData[1], 10);
+                break;
+            case 'BYSETPOS':
+                ruleObject.setPosition = parseInt(splitData[1], 10);
+                break;
+            case 'FREQ':
+                ruleObject.freq = splitData[1];
+                break;
         }
-        return tempDate;
+    });
+    if ((ruleObject.freq === 'MONTHLY') && (ruleObject.monthDay.length === 0)) {
+        var index = ruleObject.validRules.indexOf('BYDAY');
+        ruleObject.validRules.splice(index, 1);
     }
-    function extractObjectFromRule(rules) {
-        var ruleObject = {
-            freq: null,
-            interval: 1,
-            count: null,
-            until: null,
-            day: [],
-            month: [],
-            weekNo: [],
-            monthDay: [],
-            yearDay: [],
-            setPosition: null,
-            validRules: []
-        };
-        var rulesList = rules.split(';');
-        var splitData = [];
-        var temp;
-        rulesList.forEach(function (data) {
-            splitData = data.split('=');
-            switch (splitData[0]) {
-                case 'UNTIL':
-                    temp = splitData[1];
-                    ruleObject.until = getDateFromRecurrenceDateString(temp);
-                    break;
-                case 'BYDAY':
-                    ruleObject.day = splitData[1].split(',');
-                    ruleObject.validRules.push(splitData[0]);
-                    break;
-                case 'BYMONTHDAY':
-                    ruleObject.monthDay = splitData[1].split(',').map(Number);
-                    ruleObject.validRules.push(splitData[0]);
-                    break;
-                case 'BYMONTH':
-                    ruleObject.month = splitData[1].split(',').map(Number);
-                    ruleObject.validRules.push(splitData[0]);
-                    break;
-                case 'BYYEARDAY':
-                    ruleObject.yearDay = splitData[1].split(',').map(Number);
-                    ruleObject.validRules.push(splitData[0]);
-                    break;
-                case 'BYWEEKNO':
-                    ruleObject.weekNo = splitData[1].split(',').map(Number);
-                    ruleObject.validRules.push(splitData[0]);
-                    break;
-                case 'INTERVAL':
-                    ruleObject.interval = parseInt(splitData[1], 10);
-                    break;
-                case 'COUNT':
-                    ruleObject.count = parseInt(splitData[1], 10);
-                    break;
-                case 'BYSETPOS':
-                    ruleObject.setPosition = parseInt(splitData[1], 10);
-                    break;
-                case 'FREQ':
-                    ruleObject.freq = splitData[1];
-                    break;
+    return ruleObject;
+}
+function validateProperDate(tempDate, data, startDate) {
+    var maxDate = (tempDate.getMonth() === 1) ? (tempDate.getFullYear() % 4 === 0 ? 29 : 28) : monthDay[tempDate.getMonth()];
+    return (data <= maxDate) && (tempDate >= startDate);
+}
+function processWeekDays(expectedDays) {
+    var dayCycle = {};
+    expectedDays.forEach(function (element, index) {
+        if (index === expectedDays.length - 1) {
+            var startIndex = dayIndex.indexOf(element);
+            var temp = startIndex;
+            while (temp % 7 !== dayIndex.indexOf(expectedDays[0])) {
+                temp++;
             }
-        });
-        if ((ruleObject.freq === 'MONTHLY') && (ruleObject.monthDay.length === 0)) {
-            var index = ruleObject.validRules.indexOf('BYDAY');
-            ruleObject.validRules.splice(index, 1);
+            dayCycle[element] = temp - startIndex;
         }
-        return ruleObject;
-    }
-    exports.extractObjectFromRule = extractObjectFromRule;
-    function validateProperDate(tempDate, data, startDate) {
-        var maxDate = (tempDate.getMonth() === 1) ? (tempDate.getFullYear() % 4 === 0 ? 29 : 28) : monthDay[tempDate.getMonth()];
-        return (data <= maxDate) && (tempDate >= startDate);
-    }
-    function processWeekDays(expectedDays) {
-        var dayCycle = {};
-        expectedDays.forEach(function (element, index) {
-            if (index === expectedDays.length - 1) {
-                var startIndex = dayIndex.indexOf(element);
-                var temp = startIndex;
-                while (temp % 7 !== dayIndex.indexOf(expectedDays[0])) {
-                    temp++;
-                }
-                dayCycle[element] = temp - startIndex;
-            }
-            else {
-                dayCycle[element] = dayIndex.indexOf(expectedDays[(index + 1)]) - dayIndex.indexOf(element);
-            }
-        });
-        return dayCycle;
-    }
-    function checkMonth(tempDate, expectedMonth) {
-        return (expectedMonth.indexOf(tempDate.getMonth() + 1) === -1);
-    }
-    function checkDate(tempDate, expectedDate) {
-        var temp = expectedDate.slice(0);
-        var data;
-        var maxDate = (tempDate.getMonth() === 1) ?
-            (tempDate.getFullYear() % 4 === 0 ? 29 : 28) : monthDay[tempDate.getMonth()];
-        data = temp.shift();
-        while (data) {
-            if (data < 0) {
-                data = data + maxDate + 1;
-            }
-            if (data === tempDate.getDate()) {
-                return false;
-            }
-            data = temp.shift();
+        else {
+            dayCycle[element] = dayIndex.indexOf(expectedDays[(index + 1)]) - dayIndex.indexOf(element);
         }
-        return true;
-    }
-    function checkYear(tempDate, expectedyearDay) {
-        var temp = expectedyearDay.slice(0);
-        var data;
-        var yearDay = getYearDay(tempDate);
-        data = temp.shift();
-        while (data) {
-            if (data < 0) {
-                data = data + getMaxYearDay(tempDate.getFullYear()) + 1;
-            }
-            if (data === yearDay) {
-                return false;
-            }
-            data = temp.shift();
+    });
+    return dayCycle;
+}
+function checkMonth(tempDate, expectedMonth) {
+    return (expectedMonth.indexOf(tempDate.getMonth() + 1) === -1);
+}
+function checkDate(tempDate, expectedDate) {
+    var temp = expectedDate.slice(0);
+    var data;
+    var maxDate = (tempDate.getMonth() === 1) ?
+        (tempDate.getFullYear() % 4 === 0 ? 29 : 28) : monthDay[tempDate.getMonth()];
+    data = temp.shift();
+    while (data) {
+        if (data < 0) {
+            data = data + maxDate + 1;
         }
-        return true;
-    }
-    function getYearDay(currentDate) {
-        if (!startDateCollection[currentDate.getFullYear()]) {
-            startDateCollection[currentDate.getFullYear()] = new Date(currentDate.getFullYear(), 0, 0);
+        if (data === tempDate.getDate()) {
+            return false;
         }
-        var tempDate = startDateCollection[currentDate.getFullYear()];
-        var diff = currentDate.getTime() - tempDate.getTime();
-        return Math.ceil(diff / util_1.MS_PER_DAY);
+        data = temp.shift();
     }
-    function validateMonthlyRuleType(ruleObject) {
-        if (ruleObject.monthDay.length && !ruleObject.day.length) {
-            return 'date';
+    return true;
+}
+function checkYear(tempDate, expectedyearDay) {
+    var temp = expectedyearDay.slice(0);
+    var data;
+    var yearDay = getYearDay(tempDate);
+    data = temp.shift();
+    while (data) {
+        if (data < 0) {
+            data = data + getMaxYearDay(tempDate.getFullYear()) + 1;
         }
-        else if (!ruleObject.monthDay.length && ruleObject.day.length) {
-            return 'day';
+        if (data === yearDay) {
+            return false;
         }
-        return 'both';
+        data = temp.shift();
     }
-    function rotate(days) {
-        var data = days.shift();
-        days.push(data);
+    return true;
+}
+function getYearDay(currentDate) {
+    if (!startDateCollection[currentDate.getFullYear()]) {
+        startDateCollection[currentDate.getFullYear()] = new Date(currentDate.getFullYear(), 0, 0);
     }
-    function setFirstDayOfWeek(day) {
-        while (dayIndex[0] !== day) {
-            rotate(dayIndex);
-        }
+    var tempDate = startDateCollection[currentDate.getFullYear()];
+    var diff = currentDate.getTime() - tempDate.getTime();
+    return Math.ceil(diff / MS_PER_DAY);
+}
+function validateMonthlyRuleType(ruleObject) {
+    if (ruleObject.monthDay.length && !ruleObject.day.length) {
+        return 'date';
     }
-    function validateRules(tempDate, ruleObject) {
-        var state = true;
-        var expectedDays = ruleObject.day;
-        var expectedMonth = ruleObject.month;
-        var expectedDate = ruleObject.monthDay;
-        var expectedyearDay = ruleObject.yearDay;
-        ruleObject.validRules.forEach(function (rule) {
-            switch (rule) {
-                case 'BYDAY':
-                    if (checkDayIndex(tempDate.getDay(), expectedDays)) {
-                        state = false;
-                    }
-                    break;
-                case 'BYMONTH':
-                    if (checkMonth(tempDate, expectedMonth)) {
-                        state = false;
-                    }
-                    break;
-                case 'BYMONTHDAY':
-                    if (checkDate(tempDate, expectedDate)) {
-                        state = false;
-                    }
-                    break;
-                case 'BYYEARDAY':
-                    if (checkYear(tempDate, expectedyearDay)) {
-                        state = false;
-                    }
-                    break;
-            }
-        });
-        return state;
+    else if (!ruleObject.monthDay.length && ruleObject.day.length) {
+        return 'day';
     }
-    var startDateCollection = {};
-    var tempExcludeDate;
-    var dayIndex = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'];
-    var maxOccurrence;
-    var tempViewDate;
-    var monthDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-    var DAYINDEX = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'];
-    var MAXOCCURRENCE = 43;
-    var LEAPYEAR = 366;
-    var NORMALYEAR = 365;
-    var WEEKPOS = ['first', 'second', 'third', 'fourth', 'last'];
-    var TIMES = 'summaryTimes';
-    var ON = 'summaryOn';
-    var EVERY = 'every';
-    var UNTIL = 'summaryUntil';
-    var DAYS = 'summaryDay';
-    var WEEKS = 'summaryWeek';
-    var MONTHS = 'summaryMonth';
-    var YEARS = 'summaryYear';
-    var DAYINDEXOBJECT = {
-        SU: 'sun',
-        MO: 'mon',
-        TU: 'tue',
-        WE: 'wed',
-        TH: 'thu',
-        FR: 'fri',
-        SA: 'sat'
-    };
-    function getRecurrenceStringFromDate(date) {
-        return [date.getUTCFullYear(),
-            roundDateValues(date.getUTCMonth() + 1),
-            roundDateValues(date.getUTCDate()),
-            'T',
-            roundDateValues(date.getUTCHours()),
-            roundDateValues(date.getUTCMinutes()),
-            roundDateValues(date.getUTCSeconds()),
-            'Z'].join('');
+    return 'both';
+}
+function rotate(days) {
+    var data = days.shift();
+    days.push(data);
+}
+function setFirstDayOfWeek(day) {
+    while (dayIndex[0] !== day) {
+        rotate(dayIndex);
     }
-    exports.getRecurrenceStringFromDate = getRecurrenceStringFromDate;
-    function roundDateValues(date) {
-        return ('0' + date).slice(-2);
-    }
-});
+}
+function validateRules(tempDate, ruleObject) {
+    var state = true;
+    var expectedDays = ruleObject.day;
+    var expectedMonth = ruleObject.month;
+    var expectedDate = ruleObject.monthDay;
+    var expectedyearDay = ruleObject.yearDay;
+    ruleObject.validRules.forEach(function (rule) {
+        switch (rule) {
+            case 'BYDAY':
+                if (checkDayIndex(tempDate.getDay(), expectedDays)) {
+                    state = false;
+                }
+                break;
+            case 'BYMONTH':
+                if (checkMonth(tempDate, expectedMonth)) {
+                    state = false;
+                }
+                break;
+            case 'BYMONTHDAY':
+                if (checkDate(tempDate, expectedDate)) {
+                    state = false;
+                }
+                break;
+            case 'BYYEARDAY':
+                if (checkYear(tempDate, expectedyearDay)) {
+                    state = false;
+                }
+                break;
+        }
+    });
+    return state;
+}
+var startDateCollection = {};
+var tempExcludeDate;
+var dayIndex = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'];
+var maxOccurrence;
+var tempViewDate;
+var monthDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+var DAYINDEX = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'];
+var MAXOCCURRENCE = 43;
+var LEAPYEAR = 366;
+var NORMALYEAR = 365;
+var WEEKPOS = ['first', 'second', 'third', 'fourth', 'last'];
+var TIMES = 'summaryTimes';
+var ON = 'summaryOn';
+var EVERY = 'every';
+var UNTIL = 'summaryUntil';
+var DAYS = 'summaryDay';
+var WEEKS = 'summaryWeek';
+var MONTHS = 'summaryMonth';
+var YEARS = 'summaryYear';
+var DAYINDEXOBJECT = {
+    SU: 'sun',
+    MO: 'mon',
+    TU: 'tue',
+    WE: 'wed',
+    TH: 'thu',
+    FR: 'fri',
+    SA: 'sat'
+};
+export function getRecurrenceStringFromDate(date) {
+    return [date.getUTCFullYear(),
+        roundDateValues(date.getUTCMonth() + 1),
+        roundDateValues(date.getUTCDate()),
+        'T',
+        roundDateValues(date.getUTCHours()),
+        roundDateValues(date.getUTCMinutes()),
+        roundDateValues(date.getUTCSeconds()),
+        'Z'].join('');
+}
+function roundDateValues(date) {
+    return ('0' + date).slice(-2);
+}

src/recurrence-editor/index.js

@@ -1,8 +0,4 @@
-define(["require", "exports", "./recurrence-editor"], function (require, exports, recurrence_editor_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    __export(recurrence_editor_1);
-});
+/**
+ * Recurrence-Editor component exported items
+ */
+export * from './recurrence-editor';

src/recurrence-editor/recurrence-editor.js

@@ -17,296 +17,359 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-dropdowns", "@syncfusion/ej2-inputs", "@syncfusion/ej2-calendars", "@syncfusion/ej2-buttons", "@syncfusion/ej2-base", "./date-generator"], function (require, exports, ej2_base_1, ej2_base_2, ej2_dropdowns_1, ej2_inputs_1, ej2_calendars_1, ej2_buttons_1, ej2_base_3, date_generator_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var HEADER = 'e-editor';
-    var INPUTWARAPPER = 'e-input-wrapper';
-    var INPUTWARAPPERSIDE = 'e-input-wrapper-side';
-    var REPEATELEMENT = 'e-repeat-element';
-    var REPEATINTERVAL = 'e-repeat-interval';
-    var INTERVALCLASS = 'e-interval';
-    var DAYWRAPPER = 'e-days';
-    var WEEKWRAPPER = 'e-non-week';
-    var WEEKPOSITION = 'e-week-position';
-    var YEAREXPANDERWRAPPER = 'e-year-expander';
-    var YEAREXPANDERELEMENT = 'e-year-expander-element';
-    var MONETHEXPANDERWRAPPER = 'e-month-expander';
-    var MONETHEXPANDWRAPPER = 'e-month-expand-wrapper';
-    var MONTHEXPANDERELEMENT = 'e-month-expander-element';
-    var MONTHEXPANDERCHECKBOXWRAPPER = 'e-month-expander-checkbox-wrapper';
-    var FORMLEFT = 'e-form-left';
-    var FORMRIGHT = 'e-form-right';
-    var MONTHDAYWRAPPER = 'e-month-day';
-    var MONTHEXPANNDERELEM = 'e-month-expander-wrapper';
-    var MONTHPOS = 'e-month-pos';
-    var MONTHWEEK = 'e-month-week';
-    var ENDON = 'e-end-on';
-    var MONTHEXPANDERLABEL = 'e-month-expander-label';
-    var WEEKEXPANDERLABEL = 'e-week-expander-label';
-    var ENDONLABEL = 'e-end-on-label';
-    var ENDONLEFT = 'e-end-on-left';
-    var MONTHDAYELEMENT = 'e-monthday-element';
-    var ENDONELEMENT = 'e-end-on-element';
-    var ENDONDATE = 'e-end-on-date';
-    var UNTILDATE = 'e-until-date';
-    var ENDONCOUNTWRAPPER = 'e-end-on-count';
-    var ENDONCOUNT = 'e-recurrence-count';
-    var HIDEWRAPPER = 'e-hide-recurrence-element';
-    var RTLCLASS = 'e-rtl';
-    var PRIMARY = 'e-primary';
-    var ACTIVE = 'e-active';
-    var RECURRENCETABLE = 'e-recurrence-table';
-    var REPEATCONTENT = 'e-repeat-content';
-    var REPEATCONTENTWRAPPER = 'e-repeat-content-wrapper';
-    var NONE = 'none';
-    var DAILY = 'daily';
-    var WEEKLY = 'weekly';
-    var MONTHLY = 'monthly';
-    var YEARLY = 'yearly';
-    var NEVER = 'never';
-    var UNTIL = 'until';
-    var COUNT = 'count';
-    var TEXTFIELD = 'text';
-    var VALUEFIELD = 'value';
-    var LAST = 'last';
-    var REPEAT = 'repeat';
-    var REPEATEVERY = 'repeatEvery';
-    var ON = 'on';
-    var END = 'end';
-    var RADIOLABEL = 'onDay';
-    var RULEUNTIL = 'UNTIL';
-    var RULEBYDAY = 'BYDAY';
-    var RULEBYMONTHDAY = 'BYMONTHDAY';
-    var RULEBYMONTH = 'BYMONTH';
-    var RULEINTERVAL = 'INTERVAL';
-    var RULECOUNT = 'COUNT';
-    var RULESETPOS = 'BYSETPOS';
-    var RULEFREQ = 'FREQ';
-    var RULEDAILY = 'DAILY';
-    var RULEWEEKLY = 'WEEKLY';
-    var RULEMONTHLY = 'MONTHLY';
-    var RULEYEARLY = 'YEARLY';
-    var RULESUNDAY = 'SU';
-    var RULEMONDAY = 'MO';
-    var RULETUESDAY = 'TU';
-    var RULEWEDNESDAY = 'WE';
-    var RULETHURSDAY = 'TH';
-    var RULEFRIDAY = 'FR';
-    var RULESATURDAY = 'SA';
-    var KEYSUNDAY = 'sun';
-    var KEYMONDAY = 'mon';
-    var KEYTUESDAY = 'tue';
-    var KEYWEDNESDAY = 'wed';
-    var KEYTHURSDAY = 'thu';
-    var KEYFRIDAY = 'fri';
-    var KEYSATURDAY = 'sat';
-    var EQUAL = '=';
-    var SEMICOLON = ';';
-    var COMMA = ',';
-    var FIRST = 'first';
-    var SECOND = 'second';
-    var THIRD = 'third';
-    var FOURTH = 'fourth';
-    var contentType = {
-        none: '',
-        daily: 'days',
-        weekly: 'weeks',
-        monthly: 'months',
-        yearly: 'years'
+import { Component, Property, NotifyPropertyChanges, Event, Browser } from '@syncfusion/ej2-base';
+import { getDefaultDateObject, getValue, cldrData, L10n, isNullOrUndefined, removeClass, addClass } from '@syncfusion/ej2-base';
+import { DropDownList } from '@syncfusion/ej2-dropdowns';
+import { NumericTextBox } from '@syncfusion/ej2-inputs';
+import { DatePicker } from '@syncfusion/ej2-calendars';
+import { Button, RadioButton } from '@syncfusion/ej2-buttons';
+import { EventHandler, classList } from '@syncfusion/ej2-base';
+import { extractObjectFromRule, generate, generateSummary, getRecurrenceStringFromDate } from './date-generator';
+var HEADER = 'e-editor';
+var INPUTWARAPPER = 'e-input-wrapper';
+var INPUTWARAPPERSIDE = 'e-input-wrapper-side';
+var REPEATELEMENT = 'e-repeat-element';
+var REPEATINTERVAL = 'e-repeat-interval';
+var INTERVALCLASS = 'e-interval';
+var DAYWRAPPER = 'e-days';
+var WEEKWRAPPER = 'e-non-week';
+var WEEKPOSITION = 'e-week-position';
+var YEAREXPANDERWRAPPER = 'e-year-expander';
+var YEAREXPANDERELEMENT = 'e-year-expander-element';
+var MONETHEXPANDERWRAPPER = 'e-month-expander';
+var MONETHEXPANDWRAPPER = 'e-month-expand-wrapper';
+var MONTHEXPANDERELEMENT = 'e-month-expander-element';
+var MONTHEXPANDERCHECKBOXWRAPPER = 'e-month-expander-checkbox-wrapper';
+var FORMLEFT = 'e-form-left';
+var FORMRIGHT = 'e-form-right';
+var MONTHDAYWRAPPER = 'e-month-day';
+var MONTHEXPANNDERELEM = 'e-month-expander-wrapper';
+var MONTHPOS = 'e-month-pos';
+var MONTHWEEK = 'e-month-week';
+var ENDON = 'e-end-on';
+var MONTHEXPANDERLABEL = 'e-month-expander-label';
+var WEEKEXPANDERLABEL = 'e-week-expander-label';
+var ENDONLABEL = 'e-end-on-label';
+var ENDONLEFT = 'e-end-on-left';
+var MONTHDAYELEMENT = 'e-monthday-element';
+var ENDONELEMENT = 'e-end-on-element';
+var ENDONDATE = 'e-end-on-date';
+var UNTILDATE = 'e-until-date';
+var ENDONCOUNTWRAPPER = 'e-end-on-count';
+var ENDONCOUNT = 'e-recurrence-count';
+var HIDEWRAPPER = 'e-hide-recurrence-element';
+var RTLCLASS = 'e-rtl';
+var PRIMARY = 'e-primary';
+var ACTIVE = 'e-active';
+var RECURRENCETABLE = 'e-recurrence-table';
+var REPEATCONTENT = 'e-repeat-content';
+var REPEATCONTENTWRAPPER = 'e-repeat-content-wrapper';
+var NONE = 'none';
+var DAILY = 'daily';
+var WEEKLY = 'weekly';
+var MONTHLY = 'monthly';
+var YEARLY = 'yearly';
+var NEVER = 'never';
+var UNTIL = 'until';
+var COUNT = 'count';
+var TEXTFIELD = 'text';
+var VALUEFIELD = 'value';
+var LAST = 'last';
+var REPEAT = 'repeat';
+var REPEATEVERY = 'repeatEvery';
+var ON = 'on';
+var END = 'end';
+var RADIOLABEL = 'onDay';
+var RULEUNTIL = 'UNTIL';
+var RULEBYDAY = 'BYDAY';
+var RULEBYMONTHDAY = 'BYMONTHDAY';
+var RULEBYMONTH = 'BYMONTH';
+var RULEINTERVAL = 'INTERVAL';
+var RULECOUNT = 'COUNT';
+var RULESETPOS = 'BYSETPOS';
+var RULEFREQ = 'FREQ';
+var RULEDAILY = 'DAILY';
+var RULEWEEKLY = 'WEEKLY';
+var RULEMONTHLY = 'MONTHLY';
+var RULEYEARLY = 'YEARLY';
+var RULESUNDAY = 'SU';
+var RULEMONDAY = 'MO';
+var RULETUESDAY = 'TU';
+var RULEWEDNESDAY = 'WE';
+var RULETHURSDAY = 'TH';
+var RULEFRIDAY = 'FR';
+var RULESATURDAY = 'SA';
+var KEYSUNDAY = 'sun';
+var KEYMONDAY = 'mon';
+var KEYTUESDAY = 'tue';
+var KEYWEDNESDAY = 'wed';
+var KEYTHURSDAY = 'thu';
+var KEYFRIDAY = 'fri';
+var KEYSATURDAY = 'sat';
+var EQUAL = '=';
+var SEMICOLON = ';';
+var COMMA = ',';
+var FIRST = 'first';
+var SECOND = 'second';
+var THIRD = 'third';
+var FOURTH = 'fourth';
+var contentType = {
+    none: '',
+    daily: 'days',
+    weekly: 'weeks',
+    monthly: 'months',
+    yearly: 'years'
+};
+var valueData = {
+    'sun': RULESUNDAY,
+    'mon': RULEMONDAY,
+    'tue': RULETUESDAY,
+    'wed': RULEWEDNESDAY,
+    'thu': RULETHURSDAY,
+    'fri': RULEFRIDAY,
+    'sat': RULESATURDAY
+};
+var neverClassList = [DAYWRAPPER, WEEKWRAPPER, ENDON, INTERVALCLASS, YEAREXPANDERWRAPPER, MONETHEXPANDERWRAPPER];
+var weekClassList = [WEEKWRAPPER];
+var monthClassList = [DAYWRAPPER, YEAREXPANDERWRAPPER];
+var yearClassList = [DAYWRAPPER];
+var dailyClassList = [DAYWRAPPER, WEEKWRAPPER, YEAREXPANDERWRAPPER, MONETHEXPANDERWRAPPER];
+var noEndClassList = [ENDONDATE, ENDONCOUNTWRAPPER];
+var endOnCountClassList = [ENDONDATE];
+var endOnDateClassList = [ENDONCOUNTWRAPPER];
+/**
+ * Represents the RecurrenceEditor component.
+ * ```html
+ * <div id="recurrence"></div>
+ * ```
+ * ```typescript
+ * <script>
+ *   var recObj = new RecurrenceEditor();
+ *   recObj.appendTo("#recurrence");
+ * </script>
+ * ```
+ */
+var RecurrenceEditor = /** @class */ (function (_super) {
+    __extends(RecurrenceEditor, _super);
+    /**
+     * Constructor for creating the widget
+     * @param  {object} options?
+     */
+    function RecurrenceEditor(options, element) {
+        var _this = _super.call(this, options, element) || this;
+        _this.defaultLocale = {
+            none: 'None',
+            daily: 'Daily',
+            weekly: 'Weekly',
+            monthly: 'Monthly',
+            month: 'Month',
+            yearly: 'Yearly',
+            never: 'Never',
+            until: 'Until',
+            count: 'Count',
+            first: 'First',
+            second: 'Second',
+            third: 'Third',
+            fourth: 'Fourth',
+            last: 'Last',
+            repeat: 'Repeat',
+            repeatEvery: 'Repeat every',
+            on: 'Repeat On',
+            end: 'End',
+            onDay: 'Day',
+            days: 'Day(s)',
+            weeks: 'Week(s)',
+            months: 'Month(s)',
+            years: 'Year(s)',
+            every: 'every',
+            summaryTimes: 'time(s)',
+            summaryOn: 'on',
+            summaryUntil: 'until',
+            summaryRepeat: 'Repeats',
+            summaryDay: 'day(s)',
+            summaryWeek: 'week(s)',
+            summaryMonth: 'month(s)',
+            summaryYear: 'year(s)',
+            monthWeek: 'Month Week',
+            monthPosition: 'Month Position',
+            monthExpander: 'Month Expander',
+            yearExpander: 'Year Expander',
+            repeatInterval: 'Repeat Interval'
+        };
+        _this.renderStatus = false;
+        _this.dayButtons = [];
+        _this.monthButtons = [];
+        return _this;
+    }
+    RecurrenceEditor.prototype.startState = function (freq, endOn, startDate) {
+        this.showFormElement();
+        this.updateForm(freq);
+        this.freshOnEndForm();
+        this.updateEndOnForm(endOn);
+        this.selectMonthDay(startDate);
+        this.updateUntilDate(startDate);
+        this.onMonthDay.setProperties({ checked: true });
     };
-    var valueData = {
-        'sun': RULESUNDAY,
-        'mon': RULEMONDAY,
-        'tue': RULETUESDAY,
-        'wed': RULEWEDNESDAY,
-        'thu': RULETHURSDAY,
-        'fri': RULEFRIDAY,
-        'sat': RULESATURDAY
+    RecurrenceEditor.prototype.preRender = function () {
+        this.localeObj = new L10n(this.getModuleName(), this.defaultLocale, this.locale);
+        // pre render code snippets
     };
-    var neverClassList = [DAYWRAPPER, WEEKWRAPPER, ENDON, INTERVALCLASS, YEAREXPANDERWRAPPER, MONETHEXPANDERWRAPPER];
-    var weekClassList = [WEEKWRAPPER];
-    var monthClassList = [DAYWRAPPER, YEAREXPANDERWRAPPER];
-    var yearClassList = [DAYWRAPPER];
-    var dailyClassList = [DAYWRAPPER, WEEKWRAPPER, YEAREXPANDERWRAPPER, MONETHEXPANDERWRAPPER];
-    var noEndClassList = [ENDONDATE, ENDONCOUNTWRAPPER];
-    var endOnCountClassList = [ENDONDATE];
-    var endOnDateClassList = [ENDONCOUNTWRAPPER];
-    var RecurrenceEditor = (function (_super) {
-        __extends(RecurrenceEditor, _super);
-        function RecurrenceEditor(options, element) {
-            var _this = _super.call(this, options, element) || this;
-            _this.defaultLocale = {
-                none: 'None',
-                daily: 'Daily',
-                weekly: 'Weekly',
-                monthly: 'Monthly',
-                month: 'Month',
-                yearly: 'Yearly',
-                never: 'Never',
-                until: 'Until',
-                count: 'Count',
-                first: 'First',
-                second: 'Second',
-                third: 'Third',
-                fourth: 'Fourth',
-                last: 'Last',
-                repeat: 'Repeat',
-                repeatEvery: 'Repeat every',
-                on: 'Repeat On',
-                end: 'End',
-                onDay: 'Day',
-                days: 'Day(s)',
-                weeks: 'Week(s)',
-                months: 'Month(s)',
-                years: 'Year(s)',
-                every: 'every',
-                summaryTimes: 'time(s)',
-                summaryOn: 'on',
-                summaryUntil: 'until',
-                summaryRepeat: 'Repeats',
-                summaryDay: 'day(s)',
-                summaryWeek: 'week(s)',
-                summaryMonth: 'month(s)',
-                summaryYear: 'year(s)',
-                monthWeek: 'Month Week',
-                monthPosition: 'Month Position',
-                monthExpander: 'Month Expander',
-                yearExpander: 'Year Expander',
-                repeatInterval: 'Repeat Interval'
-            };
-            _this.renderStatus = false;
-            _this.dayButtons = [];
-            _this.monthButtons = [];
-            return _this;
+    RecurrenceEditor.prototype.applyCustomClass = function (cssClass) {
+        if (cssClass) {
+            addClass([this.element], cssClass);
         }
-        RecurrenceEditor.prototype.startState = function (freq, endOn, startDate) {
-            this.showFormElement();
-            this.updateForm(freq);
-            this.freshOnEndForm();
-            this.updateEndOnForm(endOn);
-            this.selectMonthDay(startDate);
-            this.updateUntilDate(startDate);
-            this.onMonthDay.setProperties({ checked: true });
-        };
-        RecurrenceEditor.prototype.preRender = function () {
-            this.localeObj = new ej2_base_2.L10n(this.getModuleName(), this.defaultLocale, this.locale);
-        };
-        RecurrenceEditor.prototype.applyCustomClass = function (cssClass) {
-            if (cssClass) {
-                ej2_base_2.addClass([this.element], cssClass);
-            }
-        };
-        RecurrenceEditor.prototype.initialize = function () {
-            this.renderComponent();
-            if (!ej2_base_2.isNullOrUndefined(this.value)) {
-                this.setRecurrenceRule(this.value);
-            }
-            this.startState(this.repeatType.value.toString().toUpperCase(), NEVER, this.startDate);
-            this.updateForm(this.repeatType.value.toString());
-            this.applyCustomClass(this.cssClass);
-        };
-        RecurrenceEditor.prototype.triggerChangeEvent = function () {
-            if (this.renderStatus) {
-                var value = this.getRecurrenceRule();
-                this.trigger('change', { value: value });
-                this.setProperties({ value: value }, false);
-            }
-        };
-        RecurrenceEditor.prototype.resetDayButton = function () {
-            var elements = [].slice.call(this.element.querySelectorAll('.' + DAYWRAPPER + ' button'));
-            elements.forEach(function (element) { return ej2_base_2.removeClass([element], [ACTIVE, PRIMARY]); });
-        };
-        RecurrenceEditor.prototype.daySelection = function (dayIndex) {
-            this.resetDayButton();
-            var days = [0, 1, 2, 3, 4, 5, 6];
-            this.rotateArray(days, this.firstDayOfWeek);
-            var element = this.element.querySelector('.' + DAYWRAPPER + ' button[data-index="' + days.indexOf(dayIndex) + '"]');
+    };
+    RecurrenceEditor.prototype.initialize = function () {
+        this.renderComponent();
+        if (!isNullOrUndefined(this.value)) {
+            this.setRecurrenceRule(this.value);
+        }
+        this.startState(this.repeatType.value.toString().toUpperCase(), NEVER, this.startDate);
+        this.updateForm(this.repeatType.value.toString());
+        this.applyCustomClass(this.cssClass);
+    };
+    RecurrenceEditor.prototype.triggerChangeEvent = function () {
+        if (this.renderStatus) {
+            var value = this.getRecurrenceRule();
+            this.trigger('change', { value: value });
+            this.setProperties({ value: value }, false);
+        }
+    };
+    RecurrenceEditor.prototype.resetDayButton = function () {
+        var elements = [].slice.call(this.element.querySelectorAll('.' + DAYWRAPPER + ' button'));
+        elements.forEach(function (element) { return removeClass([element], [ACTIVE, PRIMARY]); });
+    };
+    RecurrenceEditor.prototype.daySelection = function (dayIndex) {
+        this.resetDayButton();
+        var days = [0, 1, 2, 3, 4, 5, 6];
+        this.rotateArray(days, this.firstDayOfWeek);
+        var element = this.element.querySelector('.' + DAYWRAPPER + ' button[data-index="' + days.indexOf(dayIndex) + '"]');
+        if (element) {
+            addClass([element], [ACTIVE, PRIMARY]);
+        }
+    };
+    RecurrenceEditor.prototype.rtlClass = function (status) {
+        if (status) {
+            addClass([this.element], RTLCLASS);
+        }
+        else {
+            removeClass([this.element], RTLCLASS);
+        }
+    };
+    RecurrenceEditor.prototype.updateUntilDate = function (date) {
+        var tempDate = new Date(date.getTime());
+        tempDate.setDate(tempDate.getDate() + 60);
+        this.untilDateObj.setProperties({ value: tempDate });
+    };
+    RecurrenceEditor.prototype.selectMonthDay = function (date) {
+        var weekday = [KEYSUNDAY, KEYMONDAY, KEYTUESDAY, KEYWEDNESDAY, KEYTHURSDAY, KEYFRIDAY, KEYSATURDAY];
+        this.monthDate.setProperties({ value: date.getDate() });
+        this.monthWeekDays.setProperties({ value: valueData[weekday[date.getDay()]] });
+        this.monthValue.setProperties({ value: '' + (date.getMonth() + 1) });
+        this.monthWeekPos.setProperties({ value: this.getDayPosition(date) });
+        this.daySelection(date.getDay());
+    };
+    RecurrenceEditor.prototype.updateForm = function (state) {
+        var _this = this;
+        this.repeatType.setProperties({ value: state });
+        var end = this.element.querySelector('.' + ENDON);
+        if (state === DAILY) {
+            classList(end, [FORMLEFT], [FORMRIGHT]);
+        }
+        else {
+            classList(end, [FORMRIGHT], [FORMLEFT]);
+        }
+        switch (state) {
+            case NONE:
+                neverClassList.forEach(function (className) { return addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });
+                break;
+            case WEEKLY:
+                weekClassList.forEach(function (className) { return addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });
+                break;
+            case MONTHLY:
+                monthClassList.forEach(function (className) { return addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });
+                break;
+            case YEARLY:
+                yearClassList.forEach(function (className) { return addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });
+                break;
+            case DAILY:
+                dailyClassList.forEach(function (className) { return addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });
+                break;
+        }
+    };
+    RecurrenceEditor.prototype.updateEndOnForm = function (state) {
+        var _this = this;
+        this.endType.setProperties({ value: state });
+        switch (state) {
+            case NEVER:
+                noEndClassList.forEach(function (className) { return addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });
+                break;
+            case UNTIL:
+                endOnDateClassList.forEach(function (className) { return addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });
+                break;
+            case COUNT:
+                endOnCountClassList.forEach(function (className) { return addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });
+                break;
+        }
+    };
+    RecurrenceEditor.prototype.freshOnEndForm = function () {
+        var _this = this;
+        noEndClassList.forEach(function (className) {
+            var element = _this.element.querySelector('.' + className);
             if (element) {
-                ej2_base_2.addClass([element], [ACTIVE, PRIMARY]);
+                removeClass([element], HIDEWRAPPER);
             }
-        };
-        RecurrenceEditor.prototype.rtlClass = function (status) {
-            if (status) {
-                ej2_base_2.addClass([this.element], RTLCLASS);
+        });
+    };
+    RecurrenceEditor.prototype.showFormElement = function () {
+        var _this = this;
+        neverClassList.forEach(function (className) { return removeClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });
+    };
+    RecurrenceEditor.prototype.renderDropdowns = function () {
+        var _this = this;
+        var self = this;
+        this.repeatType = new DropDownList({
+            //set the data to dataSource property
+            dataSource: this.getRepeatData(),
+            floatLabelType: 'Always',
+            enableRtl: this.enableRtl,
+            index: this.selectedType,
+            fields: {
+                text: TEXTFIELD,
+                value: VALUEFIELD
+            },
+            placeholder: this.localeObj.getConstant(REPEAT),
+            htmlAttributes: { 'title': this.localeObj.getConstant(REPEAT) },
+            change: function (args) {
+                self.setProperties({ selectedType: args.value }, false);
+                self.element.querySelector('.' + REPEATCONTENT).innerHTML =
+                    self.localeObj.getConstant(contentType[args.value]);
+                self.showFormElement();
+                self.updateForm(args.value);
+                self.resetFormValues();
+                self.triggerChangeEvent();
             }
-            else {
-                ej2_base_2.removeClass([this.element], RTLCLASS);
+        });
+        // set placeholder to DropDownList input element
+        this.repeatType.appendTo(this.element.querySelector('.' + REPEATELEMENT));
+        this.endType = new DropDownList({
+            dataSource: this.getEndData(),
+            popupWidth: this.getPopupWidth(),
+            enableRtl: this.enableRtl,
+            index: 1,
+            fields: {
+                text: TEXTFIELD,
+                value: VALUEFIELD
+            },
+            change: function (args) {
+                self.freshOnEndForm();
+                self.updateEndOnForm(args.value);
+                self.resetFormValues();
+                self.triggerChangeEvent();
             }
-        };
-        RecurrenceEditor.prototype.updateUntilDate = function (date) {
-            var tempDate = new Date(date.getTime());
-            tempDate.setDate(tempDate.getDate() + 60);
-            this.untilDateObj.setProperties({ value: tempDate });
-        };
-        RecurrenceEditor.prototype.selectMonthDay = function (date) {
-            var weekday = [KEYSUNDAY, KEYMONDAY, KEYTUESDAY, KEYWEDNESDAY, KEYTHURSDAY, KEYFRIDAY, KEYSATURDAY];
-            this.monthDate.setProperties({ value: date.getDate() });
-            this.monthWeekDays.setProperties({ value: valueData[weekday[date.getDay()]] });
-            this.monthValue.setProperties({ value: '' + (date.getMonth() + 1) });
-            this.monthWeekPos.setProperties({ value: this.getDayPosition(date) });
-            this.daySelection(date.getDay());
-        };
-        RecurrenceEditor.prototype.updateForm = function (state) {
-            var _this = this;
-            this.repeatType.setProperties({ value: state });
-            var end = this.element.querySelector('.' + ENDON);
-            if (state === DAILY) {
-                ej2_base_3.classList(end, [FORMLEFT], [FORMRIGHT]);
-            }
-            else {
-                ej2_base_3.classList(end, [FORMRIGHT], [FORMLEFT]);
-            }
-            switch (state) {
-                case NONE:
-                    neverClassList.forEach(function (className) { return ej2_base_2.addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });
-                    break;
-                case WEEKLY:
-                    weekClassList.forEach(function (className) { return ej2_base_2.addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });
-                    break;
-                case MONTHLY:
-                    monthClassList.forEach(function (className) { return ej2_base_2.addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });
-                    break;
-                case YEARLY:
-                    yearClassList.forEach(function (className) { return ej2_base_2.addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });
-                    break;
-                case DAILY:
-                    dailyClassList.forEach(function (className) { return ej2_base_2.addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });
-                    break;
-            }
-        };
-        RecurrenceEditor.prototype.updateEndOnForm = function (state) {
-            var _this = this;
-            this.endType.setProperties({ value: state });
-            switch (state) {
-                case NEVER:
-                    noEndClassList.forEach(function (className) { return ej2_base_2.addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });
-                    break;
-                case UNTIL:
-                    endOnDateClassList.forEach(function (className) { return ej2_base_2.addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });
-                    break;
-                case COUNT:
-                    endOnCountClassList.forEach(function (className) { return ej2_base_2.addClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });
-                    break;
-            }
-        };
-        RecurrenceEditor.prototype.freshOnEndForm = function () {
-            var _this = this;
-            noEndClassList.forEach(function (className) {
-                var element = _this.element.querySelector('.' + className);
-                if (element) {
-                    ej2_base_2.removeClass([element], HIDEWRAPPER);
-                }
-            });
-        };
-        RecurrenceEditor.prototype.showFormElement = function () {
-            var _this = this;
-            neverClassList.forEach(function (className) { return ej2_base_2.removeClass([_this.element.querySelector('.' + className)], HIDEWRAPPER); });
-        };
-        RecurrenceEditor.prototype.renderDropdowns = function () {
-            var _this = this;
-            var self = this;
-            this.repeatType = new ej2_dropdowns_1.DropDownList({
-                dataSource: this.getRepeatData(),
-                floatLabelType: 'Always',
-                enableRtl: this.enableRtl,
-                index: this.selectedType,
+        });
+        this.endType.appendTo(this.element.querySelector('.' + ENDONELEMENT));
+        var renderDropDownList = function (dropDownData) {
+            return new DropDownList({
+                dataSource: dropDownData,
+                popupWidth: _this.getPopupWidth(),
+                enableRtl: _this.enableRtl,
                 fields: {
@@ -316,27 +379,5 @@ text: TEXTFIELD,
                 },
-                placeholder: this.localeObj.getConstant(REPEAT),
-                htmlAttributes: { 'title': this.localeObj.getConstant(REPEAT) },
-                change: function (args) {
-                    self.setProperties({ selectedType: args.value }, false);
-                    self.element.querySelector('.' + REPEATCONTENT).innerHTML =
-                        self.localeObj.getConstant(contentType[args.value]);
-                    self.showFormElement();
-                    self.updateForm(args.value);
-                    self.resetFormValues();
-                    self.triggerChangeEvent();
-                }
-            });
-            this.repeatType.appendTo(this.element.querySelector('.' + REPEATELEMENT));
-            this.endType = new ej2_dropdowns_1.DropDownList({
-                dataSource: this.getEndData(),
-                popupWidth: this.getPopupWidth(),
-                enableRtl: this.enableRtl,
                 index: 1,
-                fields: {
-                    text: TEXTFIELD,
-                    value: VALUEFIELD
-                },
                 change: function (args) {
-                    self.freshOnEndForm();
-                    self.updateEndOnForm(args.value);
+                    self.onWeekDay.setProperties({ checked: true });
                     self.resetFormValues();
@@ -346,646 +387,650 @@ self.triggerChangeEvent();
             });
-            this.endType.appendTo(this.element.querySelector('.' + ENDONELEMENT));
-            var renderDropDownList = function (dropDownData) {
-                return new ej2_dropdowns_1.DropDownList({
-                    dataSource: dropDownData,
-                    popupWidth: _this.getPopupWidth(),
-                    enableRtl: _this.enableRtl,
-                    fields: {
-                        text: TEXTFIELD,
-                        value: VALUEFIELD
-                    },
-                    index: 1,
-                    change: function (args) {
-                        self.onWeekDay.setProperties({ checked: true });
-                        self.resetFormValues();
-                        self.triggerChangeEvent();
-                    }
-                });
-            };
-            this.monthWeekPos = renderDropDownList(this.getMonthPosData());
-            this.monthWeekPos.appendTo(this.element.querySelector('.' + MONTHPOS));
-            this.monthWeekDays = renderDropDownList(this.getDayData('wide'));
-            this.monthWeekDays.appendTo(this.element.querySelector('.' + MONTHWEEK));
-            this.monthValue = new ej2_dropdowns_1.DropDownList({
-                dataSource: this.getMonthData(),
-                fields: {
-                    text: TEXTFIELD,
-                    value: VALUEFIELD
-                },
-                floatLabelType: 'Always',
-                enableRtl: this.enableRtl,
-                index: 7,
-                change: function (args) {
-                    self.resetFormValues();
-                    self.triggerChangeEvent();
-                }
-            });
-            this.monthValue.appendTo(this.element.querySelector('.' + YEAREXPANDERELEMENT));
         };
-        RecurrenceEditor.prototype.setDefaultValue = function () {
-            var formelement = [].slice.call(this.element.querySelectorAll('.e-control .e-numerictextbox'));
-            for (var _i = 0, formelement_1 = formelement; _i < formelement_1.length; _i++) {
-                var element = formelement_1[_i];
-                var instance = element.ej2_instances[0];
-                if (instance.element.classList.contains(REPEATINTERVAL)) {
-                    instance.value = 1;
+        this.monthWeekPos = renderDropDownList(this.getMonthPosData());
+        this.monthWeekPos.appendTo(this.element.querySelector('.' + MONTHPOS));
+        this.monthWeekDays = renderDropDownList(this.getDayData('wide'));
+        this.monthWeekDays.appendTo(this.element.querySelector('.' + MONTHWEEK));
+        this.monthValue = new DropDownList({
+            dataSource: this.getMonthData(),
+            fields: {
+                text: TEXTFIELD,
+                value: VALUEFIELD
+            },
+            floatLabelType: 'Always',
+            enableRtl: this.enableRtl,
+            index: 7,
+            change: function (args) {
+                self.resetFormValues();
+                self.triggerChangeEvent();
+            }
+        });
+        this.monthValue.appendTo(this.element.querySelector('.' + YEAREXPANDERELEMENT));
+    };
+    RecurrenceEditor.prototype.setDefaultValue = function () {
+        var formelement = [].slice.call(this.element.querySelectorAll('.e-control .e-numerictextbox'));
+        for (var _i = 0, formelement_1 = formelement; _i < formelement_1.length; _i++) {
+            var element = formelement_1[_i];
+            var instance = element.ej2_instances[0];
+            if (instance.element.classList.contains(REPEATINTERVAL)) {
+                instance.value = 1;
+                instance.dataBind();
+            }
+            else if (instance.element.classList.contains(ENDONCOUNT)) {
+                instance.value = 10;
+                instance.dataBind();
+            }
+        }
+    };
+    RecurrenceEditor.prototype.resetFormValues = function () {
+        var recurreneElement = [].slice.call(this.element.querySelectorAll('.e-control [type="text"]'));
+        for (var _i = 0, recurreneElement_1 = recurreneElement; _i < recurreneElement_1.length; _i++) {
+            var element = recurreneElement_1[_i];
+            var instance = void 0;
+            if (element.classList.contains('e-datepicker')) {
+                instance = element.ej2_instances[0];
+                if (instance.value) {
+                    instance.value = instance.value;
                     instance.dataBind();
                 }
-                else if (instance.element.classList.contains(ENDONCOUNT)) {
-                    instance.value = 10;
-                    instance.dataBind();
+                else {
+                    this.updateUntilDate(this.startDate);
                 }
             }
-        };
-        RecurrenceEditor.prototype.resetFormValues = function () {
-            var recurreneElement = [].slice.call(this.element.querySelectorAll('.e-control [type="text"]'));
-            for (var _i = 0, recurreneElement_1 = recurreneElement; _i < recurreneElement_1.length; _i++) {
-                var element = recurreneElement_1[_i];
-                var instance = void 0;
-                if (element.classList.contains('e-datepicker')) {
-                    instance = element.ej2_instances[0];
-                    if (instance.value) {
-                        instance.value = instance.value;
-                        instance.dataBind();
-                    }
-                    else {
-                        this.updateUntilDate(this.startDate);
-                    }
+            else if (element.classList.contains('e-dropdownlist')) {
+                instance = element.ej2_instances[0];
+                instance.index = instance.index || 0;
+                instance.dataBind();
+            }
+            else if (element.classList.contains('e-numerictextbox')) {
+                instance = element.ej2_instances[0];
+                var value = void 0;
+                if (instance.element.classList.contains(REPEATINTERVAL)) {
+                    value = 1;
                 }
-                else if (element.classList.contains('e-dropdownlist')) {
-                    instance = element.ej2_instances[0];
-                    instance.index = instance.index || 0;
-                    instance.dataBind();
+                else if (instance.element.classList.contains(ENDONCOUNT)) {
+                    value = 10;
                 }
-                else if (element.classList.contains('e-numerictextbox')) {
-                    instance = element.ej2_instances[0];
-                    var value = void 0;
-                    if (instance.element.classList.contains(REPEATINTERVAL)) {
-                        value = 1;
-                    }
-                    else if (instance.element.classList.contains(ENDONCOUNT)) {
-                        value = 10;
-                    }
-                    else {
-                        value = this.startDate.getDate();
-                    }
-                    instance.value = instance.value || value;
-                    instance.dataBind();
+                else {
+                    value = this.startDate.getDate();
                 }
+                instance.value = instance.value || value;
+                instance.dataBind();
             }
-        };
-        RecurrenceEditor.prototype.getPopupWidth = function () {
-            return ej2_base_1.Browser.isDevice ? '100%' : 'auto';
-        };
-        RecurrenceEditor.prototype.renderDatePickers = function () {
-            var self = this;
-            this.untilDateObj = new ej2_calendars_1.DatePicker({
-                enableRtl: this.enableRtl,
-                min: this.minDate,
-                max: this.maxDate,
-                change: function (args) {
-                    if (args.value) {
-                        self.triggerChangeEvent();
-                    }
+        }
+    };
+    RecurrenceEditor.prototype.getPopupWidth = function () {
+        return Browser.isDevice ? '100%' : 'auto';
+    };
+    RecurrenceEditor.prototype.renderDatePickers = function () {
+        var self = this;
+        this.untilDateObj = new DatePicker({
+            enableRtl: this.enableRtl,
+            min: this.minDate,
+            max: this.maxDate,
+            change: function (args) {
+                if (args.value) {
+                    self.triggerChangeEvent();
                 }
-            });
-            this.untilDateObj.appendTo(this.element.querySelector('.' + UNTILDATE));
-        };
-        RecurrenceEditor.prototype.dayButtonRender = function () {
-            var _this = this;
-            var btns = [].slice.call(this.element.querySelectorAll('.' + DAYWRAPPER + ' button'));
-            var self = this;
-            for (var _i = 0, btns_1 = btns; _i < btns_1.length; _i++) {
-                var btn = btns_1[_i];
-                var button = new ej2_buttons_1.Button({ isToggle: true, enableRtl: this.enableRtl }, btn);
-                this.dayButtons.push(button);
-                ej2_base_3.EventHandler.add(btn, 'click', function (args) {
-                    var btns = [].slice.call(_this.element.querySelectorAll('.' + DAYWRAPPER + ' button.' + PRIMARY));
-                    var element = args.target;
-                    if (!element.classList.contains(PRIMARY)) {
-                        ej2_base_2.addClass([element], PRIMARY);
-                        self.triggerChangeEvent();
-                    }
-                    else if (btns.length > 1) {
-                        ej2_base_2.removeClass([element], PRIMARY);
-                        self.triggerChangeEvent();
-                    }
-                });
             }
-        };
-        RecurrenceEditor.prototype.radioButtonRender = function () {
-            var self = this;
-            this.onMonthDay = new ej2_buttons_1.RadioButton({
-                label: this.localeObj.getConstant(RADIOLABEL),
-                enableRtl: this.enableRtl,
-                name: 'monthType',
-                value: 'day',
-                change: function (args) {
-                    self.resetFormValues();
+        });
+        this.untilDateObj.appendTo(this.element.querySelector('.' + UNTILDATE));
+    };
+    RecurrenceEditor.prototype.dayButtonRender = function () {
+        var _this = this;
+        var btns = [].slice.call(this.element.querySelectorAll('.' + DAYWRAPPER + ' button'));
+        var self = this;
+        for (var _i = 0, btns_1 = btns; _i < btns_1.length; _i++) {
+            var btn = btns_1[_i];
+            var button = new Button({ isToggle: true, enableRtl: this.enableRtl }, btn);
+            this.dayButtons.push(button);
+            EventHandler.add(btn, 'click', function (args) {
+                var btns = [].slice.call(_this.element.querySelectorAll('.' + DAYWRAPPER + ' button.' + PRIMARY));
+                var element = args.target;
+                if (!element.classList.contains(PRIMARY)) {
+                    addClass([element], PRIMARY);
                     self.triggerChangeEvent();
                 }
-            });
-            this.onMonthDay.appendTo(this.element.querySelector('.' + MONTHEXPANDERELEMENT));
-            this.monthButtons.push(this.onMonthDay);
-            this.onWeekDay = new ej2_buttons_1.RadioButton({
-                label: '',
-                name: 'monthType',
-                enableRtl: this.enableRtl,
-                value: 'daypos',
-                change: function (args) {
-                    self.resetFormValues();
+                else if (btns.length > 1) {
+                    removeClass([element], PRIMARY);
                     self.triggerChangeEvent();
                 }
             });
-            this.onWeekDay.appendTo(this.element.querySelector('.' + MONTHEXPANNDERELEM));
-            this.monthButtons.push(this.onWeekDay);
-        };
-        RecurrenceEditor.prototype.numericTextboxRender = function () {
-            var self = this;
-            this.recurrenceCount = new ej2_inputs_1.NumericTextBox({
-                value: 10,
-                format: '#',
-                enableRtl: this.enableRtl,
-                floatLabelType: 'Always',
-                min: 1,
-                change: function (args) {
-                    self.triggerChangeEvent();
-                }
-            });
-            this.recurrenceCount.appendTo(this.element.querySelector('.' + ENDONCOUNT));
-            this.monthDate = new ej2_inputs_1.NumericTextBox({
-                value: 1,
-                format: '#',
-                enableRtl: this.enableRtl,
-                min: 1,
-                max: 31,
-                change: function (args) {
-                    self.onMonthDay.setProperties({ checked: true });
-                    self.triggerChangeEvent();
-                }
-            });
-            this.monthDate.appendTo(this.element.querySelector('.' + MONTHDAYWRAPPER));
-            this.repeatInterval = new ej2_inputs_1.NumericTextBox({
-                value: 1,
-                format: '#',
-                min: 1,
-                enableRtl: this.enableRtl,
-                floatLabelType: 'Always',
-                placeholder: this.localeObj.getConstant(REPEATEVERY),
-                change: function (args) {
-                    self.triggerChangeEvent();
-                }
-            });
-            this.repeatInterval.appendTo(this.element.querySelector('.' + REPEATINTERVAL));
-        };
-        RecurrenceEditor.prototype.renderComponent = function () {
-            this.setTemplate();
-            this.renderDropdowns();
-            this.renderDatePickers();
-            this.dayButtonRender();
-            this.radioButtonRender();
-            this.numericTextboxRender();
-        };
-        RecurrenceEditor.prototype.rotateArray = function (data, count) {
-            var temp;
-            for (var index = 0; index < count; index++) {
-                temp = data.shift();
-                data.push(temp);
+        }
+    };
+    RecurrenceEditor.prototype.radioButtonRender = function () {
+        var self = this;
+        this.onMonthDay = new RadioButton({
+            label: this.localeObj.getConstant(RADIOLABEL),
+            enableRtl: this.enableRtl,
+            name: 'monthType',
+            value: 'day',
+            change: function (args) {
+                self.resetFormValues();
+                self.triggerChangeEvent();
             }
-        };
-        RecurrenceEditor.prototype.getEndData = function () {
-            var endData = [NEVER, UNTIL, COUNT];
-            var self = this;
-            var dataSource = [];
-            endData.forEach(function (data) {
-                dataSource.push({ text: self.localeObj.getConstant(data), value: data });
-            });
-            return dataSource;
-        };
-        RecurrenceEditor.prototype.getDayPosition = function (date) {
-            var temp = new Date(date.getTime());
-            var endDate = new Date(date.getTime());
-            var day = date.getDay();
-            var positionCollection = [];
-            temp.setDate(1);
-            endDate.setDate(1);
-            endDate.setMonth(endDate.getMonth() + 1);
-            while (temp < endDate) {
-                if (temp.getDay() === day) {
-                    positionCollection.push(temp.getTime());
-                }
-                temp.setDate(temp.getDate() + 1);
+        });
+        this.onMonthDay.appendTo(this.element.querySelector('.' + MONTHEXPANDERELEMENT));
+        this.monthButtons.push(this.onMonthDay);
+        this.onWeekDay = new RadioButton({
+            label: '',
+            name: 'monthType',
+            enableRtl: this.enableRtl,
+            value: 'daypos',
+            change: function (args) {
+                self.resetFormValues();
+                self.triggerChangeEvent();
             }
-            if (positionCollection.indexOf(date.getTime()) === positionCollection.length - 1) {
-                return -1;
+        });
+        this.onWeekDay.appendTo(this.element.querySelector('.' + MONTHEXPANNDERELEM));
+        this.monthButtons.push(this.onWeekDay);
+    };
+    RecurrenceEditor.prototype.numericTextboxRender = function () {
+        var self = this;
+        this.recurrenceCount = new NumericTextBox({
+            value: 10,
+            format: '#',
+            enableRtl: this.enableRtl,
+            floatLabelType: 'Always',
+            min: 1,
+            change: function (args) {
+                self.triggerChangeEvent();
             }
-            return (positionCollection.indexOf(date.getTime()) + 1);
-        };
-        RecurrenceEditor.prototype.getRepeatData = function () {
-            var data = [];
-            var self = this;
-            this.frequencies.forEach(function (element) {
-                var textValue = (element === NONE) ? NEVER : element;
-                data.push({ text: self.localeObj.getConstant(textValue), value: element });
-            });
-            return data;
-        };
-        RecurrenceEditor.prototype.getMonthPosData = function () {
-            var monthpos = [FIRST, SECOND, THIRD, FOURTH, LAST];
-            var monthposValue = {
-                first: 1,
-                second: 2,
-                third: 3,
-                fourth: 4,
-                last: -1
-            };
-            var self = this;
-            var dataSource = [];
-            monthpos.forEach(function (data) {
-                dataSource.push({ text: self.localeObj.getConstant(data), value: monthposValue[data] });
-            });
-            return dataSource;
-        };
-        RecurrenceEditor.prototype.getDayData = function (format) {
-            var weekday = [KEYSUNDAY, KEYMONDAY, KEYTUESDAY, KEYWEDNESDAY, KEYTHURSDAY, KEYFRIDAY, KEYSATURDAY];
-            var dayData = [];
-            var cldrObj;
-            this.rotateArray(weekday, this.firstDayOfWeek);
-            if (this.locale === 'en' || this.locale === 'en-US') {
-                cldrObj = (ej2_base_2.getValue('days.stand-alone.' + format, ej2_base_2.getDefaultDateObject()));
+        });
+        this.recurrenceCount.appendTo(this.element.querySelector('.' + ENDONCOUNT));
+        this.monthDate = new NumericTextBox({
+            value: 1,
+            format: '#',
+            enableRtl: this.enableRtl,
+            min: 1,
+            max: 31,
+            change: function (args) {
+                self.onMonthDay.setProperties({ checked: true });
+                self.triggerChangeEvent();
             }
-            else {
-                cldrObj = (ej2_base_2.getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.days.stand-alone.' + format, ej2_base_2.cldrData));
+        });
+        this.monthDate.appendTo(this.element.querySelector('.' + MONTHDAYWRAPPER));
+        this.repeatInterval = new NumericTextBox({
+            value: 1,
+            format: '#',
+            min: 1,
+            enableRtl: this.enableRtl,
+            floatLabelType: 'Always',
+            placeholder: this.localeObj.getConstant(REPEATEVERY),
+            change: function (args) {
+                self.triggerChangeEvent();
             }
-            for (var _i = 0, weekday_1 = weekday; _i < weekday_1.length; _i++) {
-                var obj = weekday_1[_i];
-                dayData.push({ text: ej2_base_2.getValue(obj, cldrObj), value: valueData[obj] });
+        });
+        this.repeatInterval.appendTo(this.element.querySelector('.' + REPEATINTERVAL));
+    };
+    RecurrenceEditor.prototype.renderComponent = function () {
+        this.setTemplate();
+        this.renderDropdowns();
+        this.renderDatePickers();
+        this.dayButtonRender();
+        this.radioButtonRender();
+        this.numericTextboxRender();
+    };
+    RecurrenceEditor.prototype.rotateArray = function (data, count) {
+        var temp;
+        for (var index = 0; index < count; index++) {
+            temp = data.shift();
+            data.push(temp);
+        }
+    };
+    RecurrenceEditor.prototype.getEndData = function () {
+        var endData = [NEVER, UNTIL, COUNT];
+        var self = this;
+        var dataSource = [];
+        endData.forEach(function (data) {
+            dataSource.push({ text: self.localeObj.getConstant(data), value: data });
+        });
+        return dataSource;
+    };
+    RecurrenceEditor.prototype.getDayPosition = function (date) {
+        var temp = new Date(date.getTime());
+        var endDate = new Date(date.getTime());
+        var day = date.getDay();
+        var positionCollection = [];
+        temp.setDate(1);
+        endDate.setDate(1);
+        endDate.setMonth(endDate.getMonth() + 1);
+        while (temp < endDate) {
+            if (temp.getDay() === day) {
+                positionCollection.push(temp.getTime());
             }
-            return dayData;
+            temp.setDate(temp.getDate() + 1);
+        }
+        if (positionCollection.indexOf(date.getTime()) === positionCollection.length - 1) {
+            return -1;
+        }
+        return (positionCollection.indexOf(date.getTime()) + 1);
+    };
+    RecurrenceEditor.prototype.getRepeatData = function () {
+        var data = [];
+        var self = this;
+        this.frequencies.forEach(function (element) {
+            var textValue = (element === NONE) ? NEVER : element;
+            data.push({ text: self.localeObj.getConstant(textValue), value: element });
+        });
+        return data;
+    };
+    RecurrenceEditor.prototype.getMonthPosData = function () {
+        var monthpos = [FIRST, SECOND, THIRD, FOURTH, LAST];
+        var monthposValue = {
+            first: 1,
+            second: 2,
+            third: 3,
+            fourth: 4,
+            last: -1
         };
-        RecurrenceEditor.prototype.getMonthData = function () {
-            var monthData = [];
-            var cldrObj;
-            if (this.locale === 'en' || this.locale === 'en-US') {
-                cldrObj = (ej2_base_2.getValue('months.stand-alone.wide', ej2_base_2.getDefaultDateObject()));
+        var self = this;
+        var dataSource = [];
+        monthpos.forEach(function (data) {
+            dataSource.push({ text: self.localeObj.getConstant(data), value: monthposValue[data] });
+        });
+        return dataSource;
+    };
+    RecurrenceEditor.prototype.getDayData = function (format) {
+        var weekday = [KEYSUNDAY, KEYMONDAY, KEYTUESDAY, KEYWEDNESDAY, KEYTHURSDAY, KEYFRIDAY, KEYSATURDAY];
+        var dayData = [];
+        var cldrObj;
+        this.rotateArray(weekday, this.firstDayOfWeek);
+        if (this.locale === 'en' || this.locale === 'en-US') {
+            cldrObj = (getValue('days.stand-alone.' + format, getDefaultDateObject()));
+        }
+        else {
+            cldrObj = (getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.days.stand-alone.' + format, cldrData));
+        }
+        for (var _i = 0, weekday_1 = weekday; _i < weekday_1.length; _i++) {
+            var obj = weekday_1[_i];
+            dayData.push({ text: getValue(obj, cldrObj), value: valueData[obj] });
+        }
+        return dayData;
+    };
+    RecurrenceEditor.prototype.getMonthData = function () {
+        var monthData = [];
+        var cldrObj;
+        if (this.locale === 'en' || this.locale === 'en-US') {
+            cldrObj = (getValue('months.stand-alone.wide', getDefaultDateObject()));
+        }
+        else {
+            cldrObj = (getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.months.stand-alone.wide', cldrData));
+        }
+        for (var _i = 0, _a = Object.keys(cldrObj); _i < _a.length; _i++) {
+            var obj = _a[_i];
+            monthData.push({
+                text: getValue(obj, cldrObj),
+                value: obj
+            });
+        }
+        return monthData;
+    };
+    RecurrenceEditor.prototype.setTemplate = function () {
+        var dayData = this.getDayData('narrow');
+        this.element.innerHTML = '<div class="' + HEADER + '">' +
+            '<div class="' + INPUTWARAPPER + ' ' + FORMLEFT + '">' +
+            '<input type="text" tabindex="0" class="' + REPEATELEMENT +
+            '"label="' + REPEATELEMENT.substr(2) + '" />' +
+            '</div><div class="' + INPUTWARAPPER + ' ' +
+            INTERVALCLASS + ' ' + FORMRIGHT + '"><table  class="' + RECURRENCETABLE + ' ' + REPEATCONTENTWRAPPER + '"><tr>' +
+            '<td><input type="text" tabindex="0" class="' + REPEATINTERVAL +
+            '"title="' + this.localeObj.getConstant('repeatInterval') + '" /></td>' +
+            '<td><span class="' + REPEATCONTENT + '"></span></td>' +
+            '</tr></table></div><div class="' + INPUTWARAPPERSIDE + ' ' + DAYWRAPPER + ' ' + FORMLEFT + '">' +
+            '<div class=' + WEEKEXPANDERLABEL + '>' + this.localeObj.getConstant(ON) + '</div>' +
+            '<button type="button" class="e-round" data-index="0" title="' + dayData[0].text + '">' + dayData[0].text + '</button>' +
+            '<button type="button" class="e-round" data-index="1" title="' + dayData[1].text + '">' + dayData[1].text + '</button>' +
+            '<button type="button" class="e-round" data-index="2" title="' + dayData[2].text + '">' + dayData[2].text + '</button>' +
+            '<button type="button" class="e-round" data-index="3" title="' + dayData[3].text + '">' + dayData[3].text + '</button>' +
+            '<button type="button" class="e-round" data-index="4" title="' + dayData[4].text + '">' + dayData[4].text + '</button>' +
+            '<button type="button" class="e-round" data-index="5" title="' + dayData[5].text + '">' + dayData[5].text + '</button>' +
+            '<button type="button" class="e-round" data-index="6" title="' + dayData[6].text + '">' + dayData[6].text + '</button></div>' +
+            '<div class="' + INPUTWARAPPERSIDE + ' ' + WEEKWRAPPER + ' ' + FORMLEFT + '">' +
+            '<div class=' + MONTHEXPANDERLABEL + '>' + this.localeObj.getConstant(ON) + '</div>' +
+            '<div class="' + YEAREXPANDERWRAPPER + '">' +
+            '<input class="' + YEAREXPANDERELEMENT + '" type="text" tabindex="0" title="' +
+            this.localeObj.getConstant('yearExpander') + '"/>' +
+            '</div>' +
+            '<div class="' + MONETHEXPANDERWRAPPER + '">' +
+            '<table class="' + RECURRENCETABLE + ' ' + MONETHEXPANDWRAPPER + '"><tr><td>' +
+            '<div class="' + INPUTWARAPPER + ' ' + MONTHEXPANDERCHECKBOXWRAPPER + '">' +
+            '<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="' +
+            this.localeObj.getConstant('monthExpander') + '" />' +
+            '</div></td></tr>' +
+            '<tr><td>' +
+            '<div class="' + INPUTWARAPPER + ' ' + MONTHEXPANDERCHECKBOXWRAPPER + '" style="min-width: 30px;margin-bottom:18px;">' +
+            '<input class="' + MONTHEXPANNDERELEM + '"title="' + this.localeObj.getConstant('monthExpander') + '" type="radio">' +
+            '</div></td>' +
+            '<td><div class="' + INPUTWARAPPER + ' ' + WEEKPOSITION + '" >' +
+            '<input type="text" tabindex="0" class="' + MONTHPOS + '"title="' + this.localeObj.getConstant('monthPosition') + '" />' +
+            '</div></td>' +
+            '<td><div class="' + INPUTWARAPPER + '" >' +
+            '<input type="text" tabindex="0" class="' + MONTHWEEK + '"title="' + this.localeObj.getConstant('monthWeek') + '" />' +
+            '</div></td></tr></table>' +
+            '</div></div>' +
+            '<div class="' + INPUTWARAPPERSIDE + ' ' + ENDON + ' ' + FORMRIGHT + '">' +
+            '<div class=' + ENDONLABEL + '>' + this.localeObj.getConstant(END) + '</div>' +
+            '<div class="' + INPUTWARAPPER + ' ' + ENDONLEFT + '">' +
+            '<input type="text" tabindex="0" class="' + ENDONELEMENT + '"title="' + this.localeObj.getConstant(END) + '" />' +
+            '</div>' +
+            '<div class="' + INPUTWARAPPER + ' ' + ENDONDATE + '" >' +
+            '<input type="text" tabindex="0" class="' + UNTILDATE + '"title="' + this.localeObj.getConstant(UNTIL) + '" />' +
+            '</div>' +
+            '<div class="' + INPUTWARAPPER + ' ' + ENDONCOUNTWRAPPER + '">' +
+            '<input type="text" tabindex="0" class="' + ENDONCOUNT + '"title="' + this.localeObj.getConstant(COUNT) + '" />' +
+            '</div></div>' +
+            '</div></div>';
+    };
+    RecurrenceEditor.prototype.getSelectedDaysData = function () {
+        var ruleData = RULEBYDAY + EQUAL;
+        var elements = this.element.querySelectorAll('.' + DAYWRAPPER + ' button.' + PRIMARY);
+        var weekday = [RULESUNDAY, RULEMONDAY, RULETUESDAY, RULEWEDNESDAY, RULETHURSDAY, RULEFRIDAY, RULESATURDAY];
+        this.rotateArray(weekday, this.firstDayOfWeek);
+        for (var index = 0; index < elements.length; index++) {
+            ruleData += weekday[parseInt(elements[index].getAttribute('data-index'), 10)] + (index === (elements.length - 1) ? '' : COMMA);
+        }
+        return ruleData + SEMICOLON;
+    };
+    RecurrenceEditor.prototype.getSelectedMonthData = function () {
+        var ruleData;
+        if (this.onWeekDay.checked) {
+            ruleData = RULEBYDAY + EQUAL + this.monthWeekDays.value + SEMICOLON
+                + RULESETPOS + EQUAL + this.monthWeekPos.value + SEMICOLON;
+        }
+        else {
+            ruleData = RULEBYMONTHDAY + EQUAL + this.monthDate.value + SEMICOLON;
+        }
+        return ruleData;
+    };
+    RecurrenceEditor.prototype.getIntervalData = function () {
+        return RULEINTERVAL + EQUAL + this.repeatInterval.value + SEMICOLON;
+    };
+    RecurrenceEditor.prototype.getEndOnCount = function () {
+        return RULECOUNT + EQUAL + this.recurrenceCount.value + SEMICOLON;
+    };
+    RecurrenceEditor.prototype.getYearMonthRuleData = function () {
+        return RULEBYMONTH + EQUAL + this.monthValue.value + SEMICOLON;
+    };
+    RecurrenceEditor.prototype.updateWeekButton = function (keys) {
+        var weekday = [RULESUNDAY, RULEMONDAY, RULETUESDAY, RULEWEDNESDAY, RULETHURSDAY, RULEFRIDAY, RULESATURDAY];
+        this.rotateArray(weekday, this.firstDayOfWeek);
+        for (var _i = 0, _a = this.dayButtons; _i < _a.length; _i++) {
+            var obj = _a[_i];
+            var index = parseInt(obj.element.getAttribute('data-index'), 10);
+            if (keys.indexOf(weekday[index]) !== -1) {
+                obj.setProperties({ isPrimary: true });
             }
             else {
-                cldrObj = (ej2_base_2.getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.months.stand-alone.wide', ej2_base_2.cldrData));
+                obj.setProperties({ isPrimary: false });
             }
-            for (var _i = 0, _a = Object.keys(cldrObj); _i < _a.length; _i++) {
-                var obj = _a[_i];
-                monthData.push({
-                    text: ej2_base_2.getValue(obj, cldrObj),
-                    value: obj
-                });
-            }
-            return monthData;
-        };
-        RecurrenceEditor.prototype.setTemplate = function () {
-            var dayData = this.getDayData('narrow');
-            this.element.innerHTML = '<div class="' + HEADER + '">' +
-                '<div class="' + INPUTWARAPPER + ' ' + FORMLEFT + '">' +
-                '<input type="text" tabindex="0" class="' + REPEATELEMENT +
-                '"label="' + REPEATELEMENT.substr(2) + '" />' +
-                '</div><div class="' + INPUTWARAPPER + ' ' +
-                INTERVALCLASS + ' ' + FORMRIGHT + '"><table  class="' + RECURRENCETABLE + ' ' + REPEATCONTENTWRAPPER + '"><tr>' +
-                '<td><input type="text" tabindex="0" class="' + REPEATINTERVAL +
-                '"title="' + this.localeObj.getConstant('repeatInterval') + '" /></td>' +
-                '<td><span class="' + REPEATCONTENT + '"></span></td>' +
-                '</tr></table></div><div class="' + INPUTWARAPPERSIDE + ' ' + DAYWRAPPER + ' ' + FORMLEFT + '">' +
-                '<div class=' + WEEKEXPANDERLABEL + '>' + this.localeObj.getConstant(ON) + '</div>' +
-                '<button type="button" class="e-round" data-index="0" title="' + dayData[0].text + '">' + dayData[0].text + '</button>' +
-                '<button type="button" class="e-round" data-index="1" title="' + dayData[1].text + '">' + dayData[1].text + '</button>' +
-                '<button type="button" class="e-round" data-index="2" title="' + dayData[2].text + '">' + dayData[2].text + '</button>' +
-                '<button type="button" class="e-round" data-index="3" title="' + dayData[3].text + '">' + dayData[3].text + '</button>' +
-                '<button type="button" class="e-round" data-index="4" title="' + dayData[4].text + '">' + dayData[4].text + '</button>' +
-                '<button type="button" class="e-round" data-index="5" title="' + dayData[5].text + '">' + dayData[5].text + '</button>' +
-                '<button type="button" class="e-round" data-index="6" title="' + dayData[6].text + '">' + dayData[6].text + '</button></div>' +
-                '<div class="' + INPUTWARAPPERSIDE + ' ' + WEEKWRAPPER + ' ' + FORMLEFT + '">' +
-                '<div class=' + MONTHEXPANDERLABEL + '>' + this.localeObj.getConstant(ON) + '</div>' +
-                '<div class="' + YEAREXPANDERWRAPPER + '">' +
-                '<input class="' + YEAREXPANDERELEMENT + '" type="text" tabindex="0" title="' +
-                this.localeObj.getConstant('yearExpander') + '"/>' +
-                '</div>' +
-                '<div class="' + MONETHEXPANDERWRAPPER + '">' +
-                '<table class="' + RECURRENCETABLE + ' ' + MONETHEXPANDWRAPPER + '"><tr><td>' +
-                '<div class="' + INPUTWARAPPER + ' ' + MONTHEXPANDERCHECKBOXWRAPPER + '">' +
-                '<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="' +
-                this.localeObj.getConstant('monthExpander') + '" />' +
-                '</div></td></tr>' +
-                '<tr><td>' +
-                '<div class="' + INPUTWARAPPER + ' ' + MONTHEXPANDERCHECKBOXWRAPPER + '" style="min-width: 30px;margin-bottom:18px;">' +
-                '<input class="' + MONTHEXPANNDERELEM + '"title="' + this.localeObj.getConstant('monthExpander') + '" type="radio">' +
-                '</div></td>' +
-                '<td><div class="' + INPUTWARAPPER + ' ' + WEEKPOSITION + '" >' +
-                '<input type="text" tabindex="0" class="' + MONTHPOS + '"title="' + this.localeObj.getConstant('monthPosition') + '" />' +
-                '</div></td>' +
-                '<td><div class="' + INPUTWARAPPER + '" >' +
-                '<input type="text" tabindex="0" class="' + MONTHWEEK + '"title="' + this.localeObj.getConstant('monthWeek') + '" />' +
-                '</div></td></tr></table>' +
-                '</div></div>' +
-                '<div class="' + INPUTWARAPPERSIDE + ' ' + ENDON + ' ' + FORMRIGHT + '">' +
-                '<div class=' + ENDONLABEL + '>' + this.localeObj.getConstant(END) + '</div>' +
-                '<div class="' + INPUTWARAPPER + ' ' + ENDONLEFT + '">' +
-                '<input type="text" tabindex="0" class="' + ENDONELEMENT + '"title="' + this.localeObj.getConstant(END) + '" />' +
-                '</div>' +
-                '<div class="' + INPUTWARAPPER + ' ' + ENDONDATE + '" >' +
-                '<input type="text" tabindex="0" class="' + UNTILDATE + '"title="' + this.localeObj.getConstant(UNTIL) + '" />' +
-                '</div>' +
-                '<div class="' + INPUTWARAPPER + ' ' + ENDONCOUNTWRAPPER + '">' +
-                '<input type="text" tabindex="0" class="' + ENDONCOUNT + '"title="' + this.localeObj.getConstant(COUNT) + '" />' +
-                '</div></div>' +
-                '</div></div>';
-        };
-        RecurrenceEditor.prototype.getSelectedDaysData = function () {
-            var ruleData = RULEBYDAY + EQUAL;
-            var elements = this.element.querySelectorAll('.' + DAYWRAPPER + ' button.' + PRIMARY);
-            var weekday = [RULESUNDAY, RULEMONDAY, RULETUESDAY, RULEWEDNESDAY, RULETHURSDAY, RULEFRIDAY, RULESATURDAY];
-            this.rotateArray(weekday, this.firstDayOfWeek);
-            for (var index = 0; index < elements.length; index++) {
-                ruleData += weekday[parseInt(elements[index].getAttribute('data-index'), 10)] + (index === (elements.length - 1) ? '' : COMMA);
-            }
-            return ruleData + SEMICOLON;
-        };
-        RecurrenceEditor.prototype.getSelectedMonthData = function () {
-            var ruleData;
-            if (this.onWeekDay.checked) {
-                ruleData = RULEBYDAY + EQUAL + this.monthWeekDays.value + SEMICOLON
-                    + RULESETPOS + EQUAL + this.monthWeekPos.value + SEMICOLON;
-            }
-            else {
-                ruleData = RULEBYMONTHDAY + EQUAL + this.monthDate.value + SEMICOLON;
-            }
-            return ruleData;
-        };
-        RecurrenceEditor.prototype.getIntervalData = function () {
-            return RULEINTERVAL + EQUAL + this.repeatInterval.value + SEMICOLON;
-        };
-        RecurrenceEditor.prototype.getEndOnCount = function () {
-            return RULECOUNT + EQUAL + this.recurrenceCount.value + SEMICOLON;
-        };
-        RecurrenceEditor.prototype.getYearMonthRuleData = function () {
-            return RULEBYMONTH + EQUAL + this.monthValue.value + SEMICOLON;
-        };
-        RecurrenceEditor.prototype.updateWeekButton = function (keys) {
-            var weekday = [RULESUNDAY, RULEMONDAY, RULETUESDAY, RULEWEDNESDAY, RULETHURSDAY, RULEFRIDAY, RULESATURDAY];
-            this.rotateArray(weekday, this.firstDayOfWeek);
-            for (var _i = 0, _a = this.dayButtons; _i < _a.length; _i++) {
-                var obj = _a[_i];
-                var index = parseInt(obj.element.getAttribute('data-index'), 10);
-                if (keys.indexOf(weekday[index]) !== -1) {
-                    obj.setProperties({ isPrimary: true });
+        }
+    };
+    RecurrenceEditor.prototype.updateMonthUI = function () {
+        if (this.ruleObject.monthDay.length) {
+            this.monthDate.setProperties({ value: this.ruleObject.monthDay[0] });
+            this.onMonthDay.setProperties({ checked: true });
+        }
+        else {
+            this.onWeekDay.setProperties({ checked: true });
+            this.monthWeekPos.setProperties({ value: this.ruleObject.setPosition });
+            for (var _i = 0, _a = Object.keys(valueData); _i < _a.length; _i++) {
+                var key = _a[_i];
+                if (valueData[key] === this.ruleObject.day[0]) {
+                    this.monthWeekDays.setProperties({ value: this.ruleObject.day[0] });
+                    break;
                 }
-                else {
-                    obj.setProperties({ isPrimary: false });
-                }
             }
-        };
-        RecurrenceEditor.prototype.updateMonthUI = function () {
-            if (this.ruleObject.monthDay.length) {
-                this.monthDate.setProperties({ value: this.ruleObject.monthDay[0] });
-                this.onMonthDay.setProperties({ checked: true });
-            }
-            else {
-                this.onWeekDay.setProperties({ checked: true });
-                this.monthWeekPos.setProperties({ value: this.ruleObject.setPosition });
-                for (var _i = 0, _a = Object.keys(valueData); _i < _a.length; _i++) {
-                    var key = _a[_i];
-                    if (valueData[key] === this.ruleObject.day[0]) {
-                        this.monthWeekDays.setProperties({ value: this.ruleObject.day[0] });
-                        break;
-                    }
-                }
-            }
-        };
-        RecurrenceEditor.prototype.updateUI = function (repeat, state) {
-            this.repeatInterval.setProperties({ value: this.ruleObject.interval });
-            switch (state) {
-                case UNTIL:
-                    this.untilDateObj.setProperties({ value: this.ruleObject.until });
+        }
+    };
+    RecurrenceEditor.prototype.updateUI = function (repeat, state) {
+        this.repeatInterval.setProperties({ value: this.ruleObject.interval });
+        switch (state) {
+            case UNTIL:
+                this.untilDateObj.setProperties({ value: this.ruleObject.until });
+                break;
+            case COUNT:
+                this.recurrenceCount.setProperties({ value: this.ruleObject.count });
+                break;
+        }
+        switch (repeat) {
+            case WEEKLY:
+                this.updateWeekButton(this.ruleObject.day);
+                break;
+            case YEARLY:
+                this.monthValue.setProperties({ index: (this.ruleObject.month[0] - 1) });
+                this.updateMonthUI();
+                break;
+            case MONTHLY:
+                this.updateMonthUI();
+                break;
+        }
+    };
+    RecurrenceEditor.prototype.getUntilData = function () {
+        var tempStr = getRecurrenceStringFromDate(this.untilDateObj.value);
+        return RULEUNTIL + EQUAL + tempStr + SEMICOLON;
+    };
+    RecurrenceEditor.prototype.destroyComponents = function () {
+        if (!this.recurrenceCount.isDestroyed) {
+            this.recurrenceCount.destroy();
+        }
+        if (!this.monthDate.isDestroyed) {
+            this.monthDate.destroy();
+        }
+        if (!this.repeatInterval.isDestroyed) {
+            this.repeatInterval.destroy();
+        }
+        if (!this.untilDateObj.isDestroyed) {
+            this.untilDateObj.destroy();
+        }
+        if (!this.repeatType.isDestroyed) {
+            this.repeatType.destroy();
+        }
+        if (!this.endType.isDestroyed) {
+            this.endType.destroy();
+        }
+        if (!this.monthWeekPos.isDestroyed) {
+            this.monthWeekPos.destroy();
+        }
+        if (!this.monthWeekDays.isDestroyed) {
+            this.monthWeekDays.destroy();
+        }
+        if (!this.monthValue.isDestroyed) {
+            this.monthValue.destroy();
+        }
+        this.dayButtons.forEach(function (element) { return element.destroy(); });
+        this.dayButtons = [];
+        this.monthButtons.forEach(function (element) { return element.destroy(); });
+        this.monthButtons = [];
+    };
+    RecurrenceEditor.prototype.resetFields = function () {
+        this.startState(NONE, NEVER, this.startDate);
+        this.setDefaultValue();
+    };
+    RecurrenceEditor.prototype.getRuleSummary = function (rule) {
+        if (rule === void 0) { rule = this.getRecurrenceRule(); }
+        return generateSummary(rule, this.localeObj, this.locale);
+    };
+    RecurrenceEditor.prototype.getRecurrenceDates = function (startDate, rule, excludeDate, maximumCount, viewDate) {
+        viewDate = isNullOrUndefined(viewDate) ? this.startDate : viewDate;
+        return generate(startDate, rule, excludeDate, this.firstDayOfWeek, maximumCount, viewDate);
+    };
+    RecurrenceEditor.prototype.getRecurrenceRule = function () {
+        var ruleData = RULEFREQ + EQUAL;
+        switch (this.repeatType.value) {
+            case DAILY:
+                ruleData += RULEDAILY + SEMICOLON;
+                break;
+            case WEEKLY:
+                ruleData += RULEWEEKLY + SEMICOLON + this.getSelectedDaysData();
+                break;
+            case MONTHLY:
+                ruleData += RULEMONTHLY + SEMICOLON + this.getSelectedMonthData();
+                break;
+            case YEARLY:
+                ruleData += RULEYEARLY + SEMICOLON + this.getSelectedMonthData() + this.getYearMonthRuleData();
+                break;
+            case NONE:
+                return '';
+        }
+        ruleData += this.getIntervalData();
+        switch (this.endType.value) {
+            case UNTIL:
+                ruleData += this.getUntilData();
+                break;
+            case COUNT:
+                ruleData += this.getEndOnCount();
+                break;
+        }
+        return ruleData;
+    };
+    RecurrenceEditor.prototype.setRecurrenceRule = function (rule, startDate) {
+        if (startDate === void 0) { startDate = this.startDate; }
+        if (!rule) {
+            this.repeatType.setProperties({ value: NONE });
+        }
+        this.ruleObject = extractObjectFromRule(rule);
+        var endon = this.ruleObject.count ? COUNT : (this.ruleObject.until ? UNTIL : NEVER);
+        switch (this.ruleObject.freq) {
+            case RULEDAILY:
+                this.startState(DAILY, endon, startDate);
+                this.updateUI(DAILY, endon);
+                break;
+            case RULEWEEKLY:
+                this.startState(WEEKLY, endon, startDate);
+                this.updateUI(WEEKLY, endon);
+                break;
+            case RULEMONTHLY:
+                this.startState(MONTHLY, endon, startDate);
+                this.updateUI(MONTHLY, endon);
+                break;
+            case RULEYEARLY:
+                this.startState(YEARLY, endon, startDate);
+                this.updateUI(YEARLY, endon);
+                break;
+        }
+    };
+    /**
+     * Destroys the widget.
+     * @returns void
+     */
+    RecurrenceEditor.prototype.destroy = function () {
+        this.destroyComponents();
+        _super.prototype.destroy.call(this);
+        var removeClasses = ['e-' + this.getModuleName()];
+        if (this.cssClass) {
+            removeClasses = removeClasses.concat(this.cssClass.split(' '));
+        }
+        removeClass([this.element], removeClasses);
+        this.element.innerHTML = '';
+    };
+    /**
+     * Get component name.
+     * @returns string
+     * @private
+     */
+    RecurrenceEditor.prototype.getModuleName = function () {
+        return 'recurrenceeditor';
+    };
+    /**
+     * Get the properties to be maintained in the persisted state.
+     * @returns string
+     */
+    RecurrenceEditor.prototype.getPersistData = function () {
+        return this.addOnPersist([]);
+    };
+    /**
+     * Initialize the control rendering
+     * @returns void
+     * @private
+     */
+    RecurrenceEditor.prototype.render = function () {
+        this.initialize();
+        this.rtlClass(this.enableRtl);
+        this.renderStatus = true;
+    };
+    /**
+     * Called internally, if any of the property value changed.
+     * @private
+     */
+    RecurrenceEditor.prototype.onPropertyChanged = function (newProp, oldProp) {
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            switch (prop) {
+                case 'startDate':
+                    this.selectMonthDay(newProp.startDate);
+                    this.updateUntilDate(newProp.startDate);
+                    this.endType.setProperties({ index: 0 });
                     break;
-                case COUNT:
-                    this.recurrenceCount.setProperties({ value: this.ruleObject.count });
+                case 'enableRtl':
+                    this.rtlClass(newProp.enableRtl);
                     break;
-            }
-            switch (repeat) {
-                case WEEKLY:
-                    this.updateWeekButton(this.ruleObject.day);
+                case 'cssClass':
+                    this.applyCustomClass(newProp.cssClass);
                     break;
-                case YEARLY:
-                    this.monthValue.setProperties({ index: (this.ruleObject.month[0] - 1) });
-                    this.updateMonthUI();
+                case 'selectedType':
+                    this.repeatType.setProperties({ index: this.selectedType });
                     break;
-                case MONTHLY:
-                    this.updateMonthUI();
+                case 'minDate':
+                    this.untilDateObj.setProperties({ minDate: this.minDate });
                     break;
-            }
-        };
-        RecurrenceEditor.prototype.getUntilData = function () {
-            var tempStr = date_generator_1.getRecurrenceStringFromDate(this.untilDateObj.value);
-            return RULEUNTIL + EQUAL + tempStr + SEMICOLON;
-        };
-        RecurrenceEditor.prototype.destroyComponents = function () {
-            if (!this.recurrenceCount.isDestroyed) {
-                this.recurrenceCount.destroy();
-            }
-            if (!this.monthDate.isDestroyed) {
-                this.monthDate.destroy();
-            }
-            if (!this.repeatInterval.isDestroyed) {
-                this.repeatInterval.destroy();
-            }
-            if (!this.untilDateObj.isDestroyed) {
-                this.untilDateObj.destroy();
-            }
-            if (!this.repeatType.isDestroyed) {
-                this.repeatType.destroy();
-            }
-            if (!this.endType.isDestroyed) {
-                this.endType.destroy();
-            }
-            if (!this.monthWeekPos.isDestroyed) {
-                this.monthWeekPos.destroy();
-            }
-            if (!this.monthWeekDays.isDestroyed) {
-                this.monthWeekDays.destroy();
-            }
-            if (!this.monthValue.isDestroyed) {
-                this.monthValue.destroy();
-            }
-            this.dayButtons.forEach(function (element) { return element.destroy(); });
-            this.dayButtons = [];
-            this.monthButtons.forEach(function (element) { return element.destroy(); });
-            this.monthButtons = [];
-        };
-        RecurrenceEditor.prototype.resetFields = function () {
-            this.startState(NONE, NEVER, this.startDate);
-            this.setDefaultValue();
-        };
-        RecurrenceEditor.prototype.getRuleSummary = function (rule) {
-            if (rule === void 0) { rule = this.getRecurrenceRule(); }
-            return date_generator_1.generateSummary(rule, this.localeObj, this.locale);
-        };
-        RecurrenceEditor.prototype.getRecurrenceDates = function (startDate, rule, excludeDate, maximumCount, viewDate) {
-            viewDate = ej2_base_2.isNullOrUndefined(viewDate) ? this.startDate : viewDate;
-            return date_generator_1.generate(startDate, rule, excludeDate, this.firstDayOfWeek, maximumCount, viewDate);
-        };
-        RecurrenceEditor.prototype.getRecurrenceRule = function () {
-            var ruleData = RULEFREQ + EQUAL;
-            switch (this.repeatType.value) {
-                case DAILY:
-                    ruleData += RULEDAILY + SEMICOLON;
+                case 'maxDate':
+                    this.untilDateObj.setProperties({ maxDate: this.maxDate });
                     break;
-                case WEEKLY:
-                    ruleData += RULEWEEKLY + SEMICOLON + this.getSelectedDaysData();
+                case 'value':
+                    if (this.getRecurrenceRule() !== this.value) {
+                        this.setRecurrenceRule(this.value);
+                    }
                     break;
-                case MONTHLY:
-                    ruleData += RULEMONTHLY + SEMICOLON + this.getSelectedMonthData();
+                case 'locale':
+                case 'frequencies':
+                case 'firstDayOfWeek':
+                    this.refresh();
                     break;
-                case YEARLY:
-                    ruleData += RULEYEARLY + SEMICOLON + this.getSelectedMonthData() + this.getYearMonthRuleData();
-                    break;
-                case NONE:
-                    return '';
             }
-            ruleData += this.getIntervalData();
-            switch (this.endType.value) {
-                case UNTIL:
-                    ruleData += this.getUntilData();
-                    break;
-                case COUNT:
-                    ruleData += this.getEndOnCount();
-                    break;
-            }
-            return ruleData;
-        };
-        RecurrenceEditor.prototype.setRecurrenceRule = function (rule, startDate) {
-            if (startDate === void 0) { startDate = this.startDate; }
-            if (!rule) {
-                this.repeatType.setProperties({ value: NONE });
-            }
-            this.ruleObject = date_generator_1.extractObjectFromRule(rule);
-            var endon = this.ruleObject.count ? COUNT : (this.ruleObject.until ? UNTIL : NEVER);
-            switch (this.ruleObject.freq) {
-                case RULEDAILY:
-                    this.startState(DAILY, endon, startDate);
-                    this.updateUI(DAILY, endon);
-                    break;
-                case RULEWEEKLY:
-                    this.startState(WEEKLY, endon, startDate);
-                    this.updateUI(WEEKLY, endon);
-                    break;
-                case RULEMONTHLY:
-                    this.startState(MONTHLY, endon, startDate);
-                    this.updateUI(MONTHLY, endon);
-                    break;
-                case RULEYEARLY:
-                    this.startState(YEARLY, endon, startDate);
-                    this.updateUI(YEARLY, endon);
-                    break;
-            }
-        };
-        RecurrenceEditor.prototype.destroy = function () {
-            this.destroyComponents();
-            _super.prototype.destroy.call(this);
-            var removeClasses = ['e-' + this.getModuleName()];
-            if (this.cssClass) {
-                removeClasses = removeClasses.concat(this.cssClass.split(' '));
-            }
-            ej2_base_2.removeClass([this.element], removeClasses);
-            this.element.innerHTML = '';
-        };
-        RecurrenceEditor.prototype.getModuleName = function () {
-            return 'recurrenceeditor';
-        };
-        RecurrenceEditor.prototype.getPersistData = function () {
-            return this.addOnPersist([]);
-        };
-        RecurrenceEditor.prototype.render = function () {
-            this.initialize();
-            this.rtlClass(this.enableRtl);
-            this.renderStatus = true;
-        };
-        RecurrenceEditor.prototype.onPropertyChanged = function (newProp, oldProp) {
-            for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
-                var prop = _a[_i];
-                switch (prop) {
-                    case 'startDate':
-                        this.selectMonthDay(newProp.startDate);
-                        this.updateUntilDate(newProp.startDate);
-                        this.endType.setProperties({ index: 0 });
-                        break;
-                    case 'enableRtl':
-                        this.rtlClass(newProp.enableRtl);
-                        break;
-                    case 'cssClass':
-                        this.applyCustomClass(newProp.cssClass);
-                        break;
-                    case 'selectedType':
-                        this.repeatType.setProperties({ index: this.selectedType });
-                        break;
-                    case 'minDate':
-                        this.untilDateObj.setProperties({ minDate: this.minDate });
-                        break;
-                    case 'maxDate':
-                        this.untilDateObj.setProperties({ maxDate: this.maxDate });
-                        break;
-                    case 'value':
-                        if (this.getRecurrenceRule() !== this.value) {
-                            this.setRecurrenceRule(this.value);
-                        }
-                        break;
-                    case 'locale':
-                    case 'frequencies':
-                    case 'firstDayOfWeek':
-                        this.refresh();
-                        break;
-                }
-            }
-        };
-        __decorate([
-            ej2_base_1.Property(['none', 'daily', 'weekly', 'monthly', 'yearly'])
-        ], RecurrenceEditor.prototype, "frequencies", void 0);
-        __decorate([
-            ej2_base_1.Property(0)
-        ], RecurrenceEditor.prototype, "firstDayOfWeek", void 0);
-        __decorate([
-            ej2_base_1.Property(new Date())
-        ], RecurrenceEditor.prototype, "startDate", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], RecurrenceEditor.prototype, "dateFormat", void 0);
-        __decorate([
-            ej2_base_1.Property('en-US')
-        ], RecurrenceEditor.prototype, "locale", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], RecurrenceEditor.prototype, "cssClass", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], RecurrenceEditor.prototype, "enableRtl", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], RecurrenceEditor.prototype, "value", void 0);
-        __decorate([
-            ej2_base_1.Property(new Date(1900, 1, 1))
-        ], RecurrenceEditor.prototype, "minDate", void 0);
-        __decorate([
-            ej2_base_1.Property(new Date(2099, 12, 31))
-        ], RecurrenceEditor.prototype, "maxDate", void 0);
-        __decorate([
-            ej2_base_1.Property(0)
-        ], RecurrenceEditor.prototype, "selectedType", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], RecurrenceEditor.prototype, "change", void 0);
-        RecurrenceEditor = __decorate([
-            ej2_base_1.NotifyPropertyChanges
-        ], RecurrenceEditor);
-        return RecurrenceEditor;
-    }(ej2_base_1.Component));
-    exports.RecurrenceEditor = RecurrenceEditor;
-});
+        }
+    };
+    __decorate([
+        Property(['none', 'daily', 'weekly', 'monthly', 'yearly'])
+    ], RecurrenceEditor.prototype, "frequencies", void 0);
+    __decorate([
+        Property(0)
+    ], RecurrenceEditor.prototype, "firstDayOfWeek", void 0);
+    __decorate([
+        Property(new Date())
+    ], RecurrenceEditor.prototype, "startDate", void 0);
+    __decorate([
+        Property()
+    ], RecurrenceEditor.prototype, "dateFormat", void 0);
+    __decorate([
+        Property('en-US')
+    ], RecurrenceEditor.prototype, "locale", void 0);
+    __decorate([
+        Property()
+    ], RecurrenceEditor.prototype, "cssClass", void 0);
+    __decorate([
+        Property(false)
+    ], RecurrenceEditor.prototype, "enableRtl", void 0);
+    __decorate([
+        Property()
+    ], RecurrenceEditor.prototype, "value", void 0);
+    __decorate([
+        Property(new Date(1900, 1, 1))
+    ], RecurrenceEditor.prototype, "minDate", void 0);
+    __decorate([
+        Property(new Date(2099, 12, 31))
+    ], RecurrenceEditor.prototype, "maxDate", void 0);
+    __decorate([
+        Property(0)
+    ], RecurrenceEditor.prototype, "selectedType", void 0);
+    __decorate([
+        Event()
+    ], RecurrenceEditor.prototype, "change", void 0);
+    RecurrenceEditor = __decorate([
+        NotifyPropertyChanges
+    ], RecurrenceEditor);
+    return RecurrenceEditor;
+}(Component));
+export { RecurrenceEditor };

src/schedule/actions/crud.js

@@ -1,49 +0,161 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "../../recurrence-editor/date-generator", "../base/constant", "../timezone/timezone"], function (require, exports, ej2_base_1, ej2_data_1, date_generator_1, events, timezone_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var Crud = (function () {
-        function Crud(parent) {
-            this.parent = parent;
-            this.timezone = new timezone_1.Timezone();
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
+import { Query, DataManager, Predicate } from '@syncfusion/ej2-data';
+import { getRecurrenceStringFromDate } from '../../recurrence-editor/date-generator';
+import * as events from '../base/constant';
+import { Timezone } from '../timezone/timezone';
+/**
+ * Schedule CRUD operations
+ */
+var Crud = /** @class */ (function () {
+    function Crud(parent) {
+        this.parent = parent;
+        this.timezone = new Timezone();
+    }
+    Crud.prototype.getQuery = function () {
+        var start = this.parent.activeView.startDate();
+        var end = this.parent.activeView.endDate();
+        return this.parent.dataModule.generateQuery(start, end);
+    };
+    Crud.prototype.refreshData = function (args) {
+        var _this = this;
+        var actionArgs = { requestType: args.requestType, cancel: false, data: args.data };
+        if (this.parent.dataModule.dataManager.dataSource.offline) {
+            this.parent.trigger(events.actionComplete, actionArgs);
+            this.parent.renderModule.refreshDataManager();
+            return;
         }
-        Crud.prototype.getQuery = function () {
-            var start = this.parent.activeView.startDate();
-            var end = this.parent.activeView.endDate();
-            return this.parent.dataModule.generateQuery(start, end);
+        else {
+            args.promise.then(function (e) {
+                if (_this.parent.isDestroyed) {
+                    return;
+                }
+                _this.parent.trigger(events.actionComplete, actionArgs);
+                if (actionArgs.cancel) {
+                    return;
+                }
+                _this.parent.renderModule.refreshDataManager();
+            }).catch(function (e) {
+                if (_this.parent.isDestroyed) {
+                    return;
+                }
+                _this.parent.trigger(events.actionFailure, { error: e });
+            });
+        }
+    };
+    Crud.prototype.addEvent = function (eventData) {
+        var fields = this.parent.eventFields;
+        var promise = null;
+        var editParms = { addedRecords: [], changedRecords: [], deletedRecords: [] };
+        var args = {
+            cancel: false,
+            data: (eventData instanceof Array) ? eventData : [eventData],
+            requestType: 'eventCreate'
         };
-        Crud.prototype.refreshData = function (args) {
-            var _this = this;
-            var actionArgs = { requestType: args.requestType, cancel: false, data: args.data };
-            if (this.parent.dataModule.dataManager.dataSource.offline) {
-                this.parent.trigger(events.actionComplete, actionArgs);
-                this.parent.renderModule.refreshDataManager();
+        this.parent.trigger(events.actionBegin, args);
+        if (args.cancel) {
+            return;
+        }
+        if (eventData instanceof Array) {
+            for (var _i = 0, _a = eventData; _i < _a.length; _i++) {
+                var event_1 = _a[_i];
+                this.processCrudTimezone(event_1);
+                editParms.addedRecords.push(event_1);
+            }
+            promise = this.parent.dataModule.dataManager.saveChanges(editParms, fields.id, null, this.getQuery());
+        }
+        else {
+            this.processCrudTimezone(eventData);
+            promise = this.parent.dataModule.dataManager.insert(eventData, null, this.getQuery());
+        }
+        var crudArgs = { requestType: 'eventCreated', cancel: false, data: eventData, promise: promise };
+        this.refreshData(crudArgs);
+    };
+    Crud.prototype.saveEvent = function (event, action) {
+        var fields = this.parent.eventFields;
+        var promise = null;
+        var editParms = { addedRecords: [], changedRecords: [], deletedRecords: [] };
+        var args = { requestType: 'eventChange', cancel: false };
+        var dataObj = [];
+        (event instanceof Array) ? dataObj = event : dataObj.push(event);
+        var data = event;
+        if (isNullOrUndefined(action)) {
+            args.data = data;
+            this.parent.trigger(events.actionBegin, args);
+            if (args.cancel) {
                 return;
             }
-            else {
-                args.promise.then(function (e) {
-                    if (_this.parent.isDestroyed) {
+            this.processCrudTimezone(data);
+            promise = this.parent.dataModule.dataManager.update(fields.id, event, null, this.getQuery());
+        }
+        else {
+            var parentEvent = this.parent.eventBase.getRecurrenceEvent(data);
+            switch (action) {
+                case 'EditOccurrence':
+                    args.data = { occurrence: event, parent: parentEvent };
+                    this.parent.trigger(events.actionBegin, args);
+                    if (args.cancel) {
                         return;
                     }
-                    _this.parent.trigger(events.actionComplete, actionArgs);
-                    if (actionArgs.cancel) {
-                        return;
+                    var exDate = this.excludeDateCheck(data[fields.startTime], parentEvent[fields.recurrenceException]);
+                    if (exDate !== parentEvent[fields.recurrenceException]) {
+                        parentEvent[fields.recurrenceException] = exDate;
+                        data[fields.recurrenceID] = parentEvent[fields.id];
+                        this.processCrudTimezone(parentEvent);
+                        editParms.changedRecords.push(parentEvent);
+                        this.processCrudTimezone(data);
+                        editParms.addedRecords.push(data);
                     }
-                    _this.parent.renderModule.refreshDataManager();
-                }).catch(function (e) {
-                    if (_this.parent.isDestroyed) {
+                    else {
+                        this.processCrudTimezone(data);
+                        editParms.changedRecords.push(data);
+                    }
+                    break;
+                case 'EditSeries':
+                    args.data = data;
+                    this.parent.trigger(events.actionBegin, args);
+                    if (args.cancel) {
                         return;
                     }
-                    _this.parent.trigger(events.actionFailure, { error: e });
-                });
+                    var delApp = new DataManager(this.parent.eventsData).
+                        executeLocal(new Query().where(fields.recurrenceID, 'equal', parentEvent[fields.id]));
+                    data[fields.id] = parentEvent[fields.id];
+                    data[fields.recurrenceException] = null;
+                    data[fields.recurrenceID] = null;
+                    this.processCrudTimezone(data);
+                    editParms.changedRecords.push(data);
+                    for (var _i = 0, delApp_1 = delApp; _i < delApp_1.length; _i++) {
+                        var event_2 = delApp_1[_i];
+                        editParms.deletedRecords.push(event_2);
+                    }
+                    break;
             }
-        };
-        Crud.prototype.addEvent = function (eventData) {
-            var fields = this.parent.eventFields;
-            var promise = null;
-            var editParms = { addedRecords: [], changedRecords: [], deletedRecords: [] };
-            var args = {
-                cancel: false,
-                data: (eventData instanceof Array) ? eventData : [eventData],
-                requestType: 'eventCreate'
-            };
+            promise = this.parent.dataModule.dataManager.saveChanges(editParms, fields.id, null, this.getQuery());
+        }
+        this.parent.eventBase.selectWorkCellByTime(dataObj);
+        var crudArgs = { requestType: 'eventChanged', cancel: false, data: args.data, promise: promise };
+        this.refreshData(crudArgs);
+    };
+    Crud.prototype.deleteEvent = function (id, action) {
+        var fields = this.parent.eventFields;
+        var editParms = { addedRecords: [], changedRecords: [], deletedRecords: [] };
+        var dataObj = [];
+        var normalEvent = [];
+        var recEvent = [];
+        switch (typeof id) {
+            case 'string':
+            case 'number':
+                dataObj = new DataManager(this.parent.eventsData).
+                    executeLocal(new Query().where(fields.id, 'equal', id));
+                break;
+            case 'object':
+                (id instanceof Array) ? dataObj = id : dataObj.push(id);
+                break;
+        }
+        for (var _i = 0, dataObj_1 = dataObj; _i < dataObj_1.length; _i++) {
+            var event_3 = dataObj_1[_i];
+            (!isNullOrUndefined(event_3[fields.recurrenceRule])) ? recEvent.push(event_3) : normalEvent.push(event_3);
+        }
+        var args = { requestType: 'eventRemove', cancel: false };
+        if (action !== 'DeleteOccurrence') {
+            args.data = dataObj;
             this.parent.trigger(events.actionBegin, args);
@@ -53,39 +165,16 @@ if (args.cancel) {
             }
-            if (eventData instanceof Array) {
-                for (var _i = 0, _a = eventData; _i < _a.length; _i++) {
-                    var event_1 = _a[_i];
-                    this.processCrudTimezone(event_1);
-                    editParms.addedRecords.push(event_1);
-                }
-                promise = this.parent.dataModule.dataManager.saveChanges(editParms, fields.id, null, this.getQuery());
+        }
+        if (isNullOrUndefined(action) || normalEvent.length > 0) {
+            for (var _a = 0, normalEvent_1 = normalEvent; _a < normalEvent_1.length; _a++) {
+                var event_4 = normalEvent_1[_a];
+                editParms.deletedRecords.push(event_4);
             }
-            else {
-                this.processCrudTimezone(eventData);
-                promise = this.parent.dataModule.dataManager.insert(eventData, null, this.getQuery());
-            }
-            var crudArgs = { requestType: 'eventCreated', cancel: false, data: eventData, promise: promise };
-            this.refreshData(crudArgs);
-        };
-        Crud.prototype.saveEvent = function (event, action) {
-            var fields = this.parent.eventFields;
-            var promise = null;
-            var editParms = { addedRecords: [], changedRecords: [], deletedRecords: [] };
-            var args = { requestType: 'eventChange', cancel: false };
-            var dataObj = [];
-            (event instanceof Array) ? dataObj = event : dataObj.push(event);
-            var data = event;
-            if (ej2_base_1.isNullOrUndefined(action)) {
-                args.data = data;
-                this.parent.trigger(events.actionBegin, args);
-                if (args.cancel) {
-                    return;
-                }
-                this.processCrudTimezone(data);
-                promise = this.parent.dataModule.dataManager.update(fields.id, event, null, this.getQuery());
-            }
-            else {
-                var parentEvent = this.parent.eventBase.getRecurrenceEvent(data);
-                switch (action) {
-                    case 'EditOccurrence':
-                        args.data = { occurrence: event, parent: parentEvent };
+        }
+        if (recEvent.length > 0) {
+            switch (action) {
+                case 'Delete':
+                case 'DeleteOccurrence':
+                    for (var i = 0; i < recEvent.length; i++) {
+                        var parentEvent = this.parent.eventBase.getRecurrenceEvent(recEvent[i]);
+                        args.data = { occurrence: recEvent[i], parent: parentEvent };
                         this.parent.trigger(events.actionBegin, args);
@@ -95,153 +184,68 @@ if (args.cancel) {
                         }
-                        var exDate = this.excludeDateCheck(data[fields.startTime], parentEvent[fields.recurrenceException]);
-                        if (exDate !== parentEvent[fields.recurrenceException]) {
-                            parentEvent[fields.recurrenceException] = exDate;
-                            data[fields.recurrenceID] = parentEvent[fields.id];
-                            this.processCrudTimezone(parentEvent);
-                            editParms.changedRecords.push(parentEvent);
-                            this.processCrudTimezone(data);
-                            editParms.addedRecords.push(data);
+                        parentEvent[fields.recurrenceException] =
+                            this.excludeDateCheck(recEvent[i][fields.startTime], parentEvent[fields.recurrenceException]);
+                        this.processCrudTimezone(parentEvent);
+                        editParms.changedRecords.push(parentEvent);
+                        if (recEvent[i][fields.id] !== parentEvent[fields.id]) {
+                            editParms.deletedRecords.push(recEvent[i]);
                         }
-                        else {
-                            this.processCrudTimezone(data);
-                            editParms.changedRecords.push(data);
+                    }
+                    break;
+                case 'DeleteSeries':
+                    for (var _b = 0, recEvent_1 = recEvent; _b < recEvent_1.length; _b++) {
+                        var app = recEvent_1[_b];
+                        var predicate = new Predicate(fields.id, 'equal', (app[fields.recurrenceID] || id)).
+                            or(new Predicate(fields.recurrenceID, 'equal', (app[fields.recurrenceID] || id)));
+                        var delApp = new DataManager(this.parent.eventsData).executeLocal(new Query().where(predicate));
+                        for (var _c = 0, delApp_2 = delApp; _c < delApp_2.length; _c++) {
+                            var event_5 = delApp_2[_c];
+                            editParms.deletedRecords.push(event_5);
                         }
-                        break;
-                    case 'EditSeries':
-                        args.data = data;
-                        this.parent.trigger(events.actionBegin, args);
-                        if (args.cancel) {
-                            return;
-                        }
-                        var delApp = new ej2_data_1.DataManager(this.parent.eventsData).
-                            executeLocal(new ej2_data_1.Query().where(fields.recurrenceID, 'equal', parentEvent[fields.id]));
-                        data[fields.id] = parentEvent[fields.id];
-                        data[fields.recurrenceException] = null;
-                        data[fields.recurrenceID] = null;
-                        this.processCrudTimezone(data);
-                        editParms.changedRecords.push(data);
-                        for (var _i = 0, delApp_1 = delApp; _i < delApp_1.length; _i++) {
-                            var event_2 = delApp_1[_i];
-                            editParms.deletedRecords.push(event_2);
-                        }
-                        break;
-                }
-                promise = this.parent.dataModule.dataManager.saveChanges(editParms, fields.id, null, this.getQuery());
-            }
-            this.parent.eventBase.selectWorkCellByTime(dataObj);
-            var crudArgs = { requestType: 'eventChanged', cancel: false, data: args.data, promise: promise };
-            this.refreshData(crudArgs);
-        };
-        Crud.prototype.deleteEvent = function (id, action) {
-            var fields = this.parent.eventFields;
-            var editParms = { addedRecords: [], changedRecords: [], deletedRecords: [] };
-            var dataObj = [];
-            var normalEvent = [];
-            var recEvent = [];
-            switch (typeof id) {
-                case 'string':
-                case 'number':
-                    dataObj = new ej2_data_1.DataManager(this.parent.eventsData).
-                        executeLocal(new ej2_data_1.Query().where(fields.id, 'equal', id));
+                        editParms.deletedRecords.push(app);
+                    }
                     break;
-                case 'object':
-                    (id instanceof Array) ? dataObj = id : dataObj.push(id);
-                    break;
             }
-            for (var _i = 0, dataObj_1 = dataObj; _i < dataObj_1.length; _i++) {
-                var event_3 = dataObj_1[_i];
-                (!ej2_base_1.isNullOrUndefined(event_3[fields.recurrenceRule])) ? recEvent.push(event_3) : normalEvent.push(event_3);
+        }
+        var promise;
+        promise = this.parent.dataModule.dataManager.saveChanges(editParms, fields.id, null, this.getQuery());
+        this.parent.eventBase.selectWorkCellByTime(dataObj);
+        var crudArgs = { requestType: 'eventRemoved', cancel: false, data: args.data, promise: promise };
+        this.refreshData(crudArgs);
+    };
+    Crud.prototype.processCrudTimezone = function (events) {
+        var fields = this.parent.eventFields;
+        if (events[fields.startTimezone] || events[fields.endTimezone]) {
+            var startTimezone = events[fields.startTimezone] || events[fields.endTimezone];
+            var endTimezone = events[fields.endTimezone] || events[fields.startTimezone];
+            if (this.parent.timezone) {
+                var zone = this.parent.timezone;
+                events[fields.startTime] = this.timezone.convert(events[fields.startTime], startTimezone, zone);
+                events[fields.endTime] = this.timezone.convert(events[fields.endTime], endTimezone, zone);
+                events[fields.startTime] = this.timezone.remove(events[fields.startTime], zone);
+                events[fields.endTime] = this.timezone.remove(events[fields.endTime], zone);
             }
-            var args = { requestType: 'eventRemove', cancel: false };
-            if (action !== 'DeleteOccurrence') {
-                args.data = dataObj;
-                this.parent.trigger(events.actionBegin, args);
-                if (args.cancel) {
-                    return;
-                }
+            else {
+                events[fields.startTime] = this.timezone.remove(events[fields.startTime], startTimezone);
+                events[fields.endTime] = this.timezone.remove(events[fields.endTime], endTimezone);
             }
-            if (ej2_base_1.isNullOrUndefined(action) || normalEvent.length > 0) {
-                for (var _a = 0, normalEvent_1 = normalEvent; _a < normalEvent_1.length; _a++) {
-                    var event_4 = normalEvent_1[_a];
-                    editParms.deletedRecords.push(event_4);
-                }
+        }
+        else if (this.parent.timezone) {
+            events[fields.startTime] = this.timezone.remove(events[fields.startTime], this.parent.timezone);
+            events[fields.endTime] = this.timezone.remove(events[fields.endTime], this.parent.timezone);
+        }
+    };
+    Crud.prototype.excludeDateCheck = function (eventStartTime, exceptionDateList) {
+        var exDate = getRecurrenceStringFromDate(eventStartTime);
+        if (!isNullOrUndefined(exceptionDateList)) {
+            if (exceptionDateList.indexOf(exDate) === -1) {
+                exceptionDateList = !(isNullOrUndefined(exceptionDateList)) ? exceptionDateList + ',' + exDate : exDate;
             }
-            if (recEvent.length > 0) {
-                switch (action) {
-                    case 'Delete':
-                    case 'DeleteOccurrence':
-                        for (var i = 0; i < recEvent.length; i++) {
-                            var parentEvent = this.parent.eventBase.getRecurrenceEvent(recEvent[i]);
-                            args.data = { occurrence: recEvent[i], parent: parentEvent };
-                            this.parent.trigger(events.actionBegin, args);
-                            if (args.cancel) {
-                                return;
-                            }
-                            parentEvent[fields.recurrenceException] =
-                                this.excludeDateCheck(recEvent[i][fields.startTime], parentEvent[fields.recurrenceException]);
-                            this.processCrudTimezone(parentEvent);
-                            editParms.changedRecords.push(parentEvent);
-                            if (recEvent[i][fields.id] !== parentEvent[fields.id]) {
-                                editParms.deletedRecords.push(recEvent[i]);
-                            }
-                        }
-                        break;
-                    case 'DeleteSeries':
-                        for (var _b = 0, recEvent_1 = recEvent; _b < recEvent_1.length; _b++) {
-                            var app = recEvent_1[_b];
-                            var predicate = new ej2_data_1.Predicate(fields.id, 'equal', (app[fields.recurrenceID] || id)).
-                                or(new ej2_data_1.Predicate(fields.recurrenceID, 'equal', (app[fields.recurrenceID] || id)));
-                            var delApp = new ej2_data_1.DataManager(this.parent.eventsData).executeLocal(new ej2_data_1.Query().where(predicate));
-                            for (var _c = 0, delApp_2 = delApp; _c < delApp_2.length; _c++) {
-                                var event_5 = delApp_2[_c];
-                                editParms.deletedRecords.push(event_5);
-                            }
-                            editParms.deletedRecords.push(app);
-                        }
-                        break;
-                }
-            }
-            var promise;
-            promise = this.parent.dataModule.dataManager.saveChanges(editParms, fields.id, null, this.getQuery());
-            this.parent.eventBase.selectWorkCellByTime(dataObj);
-            var crudArgs = { requestType: 'eventRemoved', cancel: false, data: args.data, promise: promise };
-            this.refreshData(crudArgs);
-        };
-        Crud.prototype.processCrudTimezone = function (events) {
-            var fields = this.parent.eventFields;
-            if (events[fields.startTimezone] || events[fields.endTimezone]) {
-                var startTimezone = events[fields.startTimezone] || events[fields.endTimezone];
-                var endTimezone = events[fields.endTimezone] || events[fields.startTimezone];
-                if (this.parent.timezone) {
-                    var zone = this.parent.timezone;
-                    events[fields.startTime] = this.timezone.convert(events[fields.startTime], startTimezone, zone);
-                    events[fields.endTime] = this.timezone.convert(events[fields.endTime], endTimezone, zone);
-                    events[fields.startTime] = this.timezone.remove(events[fields.startTime], zone);
-                    events[fields.endTime] = this.timezone.remove(events[fields.endTime], zone);
-                }
-                else {
-                    events[fields.startTime] = this.timezone.remove(events[fields.startTime], startTimezone);
-                    events[fields.endTime] = this.timezone.remove(events[fields.endTime], endTimezone);
-                }
-            }
-            else if (this.parent.timezone) {
-                events[fields.startTime] = this.timezone.remove(events[fields.startTime], this.parent.timezone);
-                events[fields.endTime] = this.timezone.remove(events[fields.endTime], this.parent.timezone);
-            }
-        };
-        Crud.prototype.excludeDateCheck = function (eventStartTime, exceptionDateList) {
-            var exDate = date_generator_1.getRecurrenceStringFromDate(eventStartTime);
-            if (!ej2_base_1.isNullOrUndefined(exceptionDateList)) {
-                if (exceptionDateList.indexOf(exDate) === -1) {
-                    exceptionDateList = !(ej2_base_1.isNullOrUndefined(exceptionDateList)) ? exceptionDateList + ',' + exDate : exDate;
-                }
-            }
-            else {
-                exceptionDateList = exDate;
-            }
-            return exceptionDateList;
-        };
-        return Crud;
-    }());
-    exports.Crud = Crud;
-});
+        }
+        else {
+            exceptionDateList = exDate;
+        }
+        return exceptionDateList;
+    };
+    return Crud;
+}());
+export { Crud };

src/schedule/actions/data.js

@@ -1,28 +0,49 @@
-define(["require", "exports", "@syncfusion/ej2-data"], function (require, exports, ej2_data_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var Data = (function () {
-        function Data(dataSource, query) {
-            this.initDataManager(dataSource, query);
+import { Query, DataManager } from '@syncfusion/ej2-data';
+/**
+ * data module is used to generate query and data source.
+ * @hidden
+ */
+var Data = /** @class */ (function () {
+    /**
+     * Constructor for data module
+     * @private
+     */
+    function Data(dataSource, query) {
+        this.initDataManager(dataSource, query);
+    }
+    /**
+     * The function used to initialize dataManager and query
+     * @return {void}
+     * @private
+     */
+    Data.prototype.initDataManager = function (dataSource, query) {
+        this.dataManager = dataSource instanceof DataManager ? dataSource : new DataManager(dataSource);
+        this.query = query instanceof Query ? query : new Query();
+    };
+    /**
+     * The function used to generate updated Query from schedule model
+     * @return {void}
+     * @private
+     */
+    Data.prototype.generateQuery = function (startDate, endDate) {
+        var query = this.query.clone();
+        if (startDate) {
+            query.addParams('StartDate', startDate.toISOString());
         }
-        Data.prototype.initDataManager = function (dataSource, query) {
-            this.dataManager = dataSource instanceof ej2_data_1.DataManager ? dataSource : new ej2_data_1.DataManager(dataSource);
-            this.query = query instanceof ej2_data_1.Query ? query : new ej2_data_1.Query();
-        };
-        Data.prototype.generateQuery = function (startDate, endDate) {
-            var query = this.query.clone();
-            if (startDate) {
-                query.addParams('StartDate', startDate.toISOString());
-            }
-            if (endDate) {
-                query.addParams('EndDate', endDate.toISOString());
-            }
-            return query;
-        };
-        Data.prototype.getData = function (query) {
-            return this.dataManager.executeQuery(query);
-        };
-        return Data;
-    }());
-    exports.Data = Data;
-});
+        if (endDate) {
+            query.addParams('EndDate', endDate.toISOString());
+        }
+        return query;
+    };
+    /**
+     * The function used to get dataSource by executing given Query
+     * @param  {Query} query - A Query that specifies to generate dataSource
+     * @return {void}
+     * @private
+     */
+    Data.prototype.getData = function (query) {
+        return this.dataManager.executeQuery(query);
+    };
+    return Data;
+}());
+export { Data };

src/schedule/actions/keyboard.js

@@ -1,671 +0,684 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/constant", "../base/util", "../base/css-constant"], function (require, exports, ej2_base_1, ej2_base_2, event, util, cls) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var KeyboardInteraction = (function () {
-        function KeyboardInteraction(parent) {
-            this.selectedCells = [];
-            this.keyConfigs = {
-                downArrow: 'downarrow',
-                upArrow: 'uparrow',
-                rightArrow: 'rightarrow',
-                leftArrow: 'leftarrow',
-                shiftDownArrow: 'shift+downarrow',
-                shiftUpArrow: 'shift+uparrow',
-                shiftRightArrow: 'shift+rightarrow',
-                shiftLeftArrow: 'shift+leftarrow',
-                ctrlLeftArrow: 'ctrl+leftarrow',
-                ctrlRightArrow: 'ctrl+rightarrow',
-                altOne: 'alt+1',
-                altTwo: 'alt+2',
-                altThree: 'alt+3',
-                altFour: 'alt+4',
-                altFive: 'alt+5',
-                altSix: 'alt+6',
-                enter: 'enter',
-                escape: 'escape',
-                delete: 'delete',
-                home: 'home',
-                pageUp: 'pageup',
-                pageDown: 'pagedown',
-                tab: 'tab',
-                shiftTab: 'shift+tab'
-            };
-            this.parent = parent;
-            this.parent.element.tabIndex = this.parent.element.tabIndex === -1 ? 0 : this.parent.element.tabIndex;
-            this.keyboardModule = new ej2_base_1.KeyboardEvents(this.parent.element, {
-                keyAction: this.keyActionHandler.bind(this),
-                keyConfigs: this.keyConfigs,
-                eventName: 'keydown'
-            });
-            this.addEventListener();
-        }
-        KeyboardInteraction.prototype.keyActionHandler = function (e) {
-            switch (e.action) {
-                case 'downArrow':
-                case 'shiftDownArrow':
-                    this.processDown(e, e.shiftKey);
-                    break;
-                case 'upArrow':
-                case 'shiftUpArrow':
-                    this.processUp(e, e.shiftKey);
-                    break;
-                case 'leftArrow':
-                case 'shiftLeftArrow':
-                    this.processLeft(e, e.shiftKey);
-                    break;
-                case 'rightArrow':
-                case 'shiftRightArrow':
-                    this.processRight(e, e.shiftKey);
-                    break;
-                case 'ctrlLeftArrow':
-                    this.parent.changeDate(this.parent.activeView.getNextPreviousDate('previous'), e);
-                    if (this.parent.headerModule) {
-                        this.parent.headerModule.element.querySelector('.e-prev button').focus();
-                    }
-                    break;
-                case 'ctrlRightArrow':
-                    this.parent.changeDate(this.parent.activeView.getNextPreviousDate('next'), e);
-                    if (this.parent.headerModule) {
-                        this.parent.headerModule.element.querySelector('.e-next button').focus();
-                    }
-                    break;
-                case 'altOne':
-                case 'altTwo':
-                case 'altThree':
-                case 'altFour':
-                case 'altFive':
-                case 'altSix':
-                    this.processViewNavigation(e);
-                    break;
-                case 'enter':
-                    this.processEnter(e);
-                    break;
-                case 'home':
-                    this.focusFirstCell();
-                    break;
-                case 'tab':
-                case 'shiftTab':
-                    this.processTab(e, e.shiftKey);
-                    break;
-                case 'delete':
-                    this.processDelete(e);
-                    break;
-                case 'escape':
-                    this.processEscape();
-            }
+import { KeyboardEvents, closest, EventHandler, extend } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, addClass } from '@syncfusion/ej2-base';
+import * as event from '../base/constant';
+import * as util from '../base/util';
+import * as cls from '../base/css-constant';
+/**
+ * Keyboard interaction
+ */
+var KeyboardInteraction = /** @class */ (function () {
+    function KeyboardInteraction(parent) {
+        this.selectedCells = [];
+        this.keyConfigs = {
+            downArrow: 'downarrow',
+            upArrow: 'uparrow',
+            rightArrow: 'rightarrow',
+            leftArrow: 'leftarrow',
+            shiftDownArrow: 'shift+downarrow',
+            shiftUpArrow: 'shift+uparrow',
+            shiftRightArrow: 'shift+rightarrow',
+            shiftLeftArrow: 'shift+leftarrow',
+            ctrlLeftArrow: 'ctrl+leftarrow',
+            ctrlRightArrow: 'ctrl+rightarrow',
+            altOne: 'alt+1',
+            altTwo: 'alt+2',
+            altThree: 'alt+3',
+            altFour: 'alt+4',
+            altFive: 'alt+5',
+            altSix: 'alt+6',
+            enter: 'enter',
+            escape: 'escape',
+            delete: 'delete',
+            home: 'home',
+            pageUp: 'pageup',
+            pageDown: 'pagedown',
+            tab: 'tab',
+            shiftTab: 'shift+tab'
         };
-        KeyboardInteraction.prototype.addEventListener = function () {
-            this.parent.on(event.cellMouseDown, this.onCellMouseDown, this);
-        };
-        KeyboardInteraction.prototype.removeEventListener = function () {
-            this.parent.off(event.cellMouseDown, this.onCellMouseDown);
-        };
-        KeyboardInteraction.prototype.onCellMouseDown = function (e) {
-            if (e.event.shiftKey) {
-                return;
-            }
-            this.initialTarget = e.event.target;
-            if (this.parent.activeViewOptions.readonly || this.parent.currentView === 'MonthAgenda') {
-                return;
-            }
-            if (e.event.target.classList.contains(cls.WORK_CELLS_CLASS)) {
-                ej2_base_1.EventHandler.add(this.parent.getContentTable(), 'mousemove', this.onMouseSelection, this);
-                ej2_base_1.EventHandler.add(this.parent.getContentTable(), 'mouseup', this.onMoveup, this);
-            }
-            if (e.event.target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
-                var allDayRow = this.parent.getAllDayRow();
-                if (allDayRow) {
-                    ej2_base_1.EventHandler.add(allDayRow, 'mousemove', this.onMouseSelection, this);
-                    ej2_base_1.EventHandler.add(allDayRow, 'mouseup', this.onMoveup, this);
+        this.parent = parent;
+        this.parent.element.tabIndex = this.parent.element.tabIndex === -1 ? 0 : this.parent.element.tabIndex;
+        this.keyboardModule = new KeyboardEvents(this.parent.element, {
+            keyAction: this.keyActionHandler.bind(this),
+            keyConfigs: this.keyConfigs,
+            eventName: 'keydown'
+        });
+        this.addEventListener();
+    }
+    KeyboardInteraction.prototype.keyActionHandler = function (e) {
+        switch (e.action) {
+            case 'downArrow':
+            case 'shiftDownArrow':
+                this.processDown(e, e.shiftKey);
+                break;
+            case 'upArrow':
+            case 'shiftUpArrow':
+                this.processUp(e, e.shiftKey);
+                break;
+            case 'leftArrow':
+            case 'shiftLeftArrow':
+                this.processLeft(e, e.shiftKey);
+                break;
+            case 'rightArrow':
+            case 'shiftRightArrow':
+                this.processRight(e, e.shiftKey);
+                break;
+            case 'ctrlLeftArrow':
+                this.parent.changeDate(this.parent.activeView.getNextPreviousDate('previous'), e);
+                if (this.parent.headerModule) {
+                    this.parent.headerModule.element.querySelector('.e-prev button').focus();
                 }
+                break;
+            case 'ctrlRightArrow':
+                this.parent.changeDate(this.parent.activeView.getNextPreviousDate('next'), e);
+                if (this.parent.headerModule) {
+                    this.parent.headerModule.element.querySelector('.e-next button').focus();
+                }
+                break;
+            case 'altOne':
+            case 'altTwo':
+            case 'altThree':
+            case 'altFour':
+            case 'altFive':
+            case 'altSix':
+                this.processViewNavigation(e);
+                break;
+            case 'enter':
+                this.processEnter(e);
+                break;
+            case 'home':
+                this.focusFirstCell();
+                break;
+            case 'tab':
+            case 'shiftTab':
+                this.processTab(e, e.shiftKey);
+                break;
+            case 'delete':
+                this.processDelete(e);
+                break;
+            case 'escape':
+                this.processEscape();
+        }
+    };
+    KeyboardInteraction.prototype.addEventListener = function () {
+        this.parent.on(event.cellMouseDown, this.onCellMouseDown, this);
+    };
+    KeyboardInteraction.prototype.removeEventListener = function () {
+        this.parent.off(event.cellMouseDown, this.onCellMouseDown);
+    };
+    KeyboardInteraction.prototype.onCellMouseDown = function (e) {
+        if (e.event.shiftKey) {
+            return;
+        }
+        this.initialTarget = e.event.target;
+        if (this.parent.activeViewOptions.readonly || this.parent.currentView === 'MonthAgenda') {
+            return;
+        }
+        if (e.event.target.classList.contains(cls.WORK_CELLS_CLASS)) {
+            EventHandler.add(this.parent.getContentTable(), 'mousemove', this.onMouseSelection, this);
+            EventHandler.add(this.parent.getContentTable(), 'mouseup', this.onMoveup, this);
+        }
+        if (e.event.target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
+            var allDayRow = this.parent.getAllDayRow();
+            if (allDayRow) {
+                EventHandler.add(allDayRow, 'mousemove', this.onMouseSelection, this);
+                EventHandler.add(allDayRow, 'mouseup', this.onMoveup, this);
             }
-        };
-        KeyboardInteraction.prototype.onMouseSelection = function (e) {
-            var target = ej2_base_1.closest(e.target, '.' + cls.WORK_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS);
-            if (target) {
-                this.selectCells(true, target);
+        }
+    };
+    KeyboardInteraction.prototype.onMouseSelection = function (e) {
+        var target = closest(e.target, '.' + cls.WORK_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS);
+        if (target) {
+            this.selectCells(true, target);
+        }
+    };
+    KeyboardInteraction.prototype.onAppointmentSelection = function (e) {
+        var target = closest(e.target, '.' + cls.APPOINTMENT_CLASS);
+        this.parent.eventBase.getSelectedEventElements(target);
+    };
+    KeyboardInteraction.prototype.onMoveup = function (e) {
+        if (e.target.classList.contains(cls.WORK_CELLS_CLASS)) {
+            EventHandler.remove(this.parent.getContentTable(), 'mousemove', this.onMouseSelection);
+            EventHandler.remove(this.parent.getContentTable(), 'mouseup', this.onMoveup);
+        }
+        if (e.target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
+            var allDayRow = this.parent.getAllDayRow();
+            if (allDayRow) {
+                EventHandler.remove(allDayRow, 'mousemove', this.onMouseSelection);
+                EventHandler.remove(allDayRow, 'mouseup', this.onMoveup);
             }
-        };
-        KeyboardInteraction.prototype.onAppointmentSelection = function (e) {
-            var target = ej2_base_1.closest(e.target, '.' + cls.APPOINTMENT_CLASS);
-            this.parent.eventBase.getSelectedEventElements(target);
-        };
-        KeyboardInteraction.prototype.onMoveup = function (e) {
-            if (e.target.classList.contains(cls.WORK_CELLS_CLASS)) {
-                ej2_base_1.EventHandler.remove(this.parent.getContentTable(), 'mousemove', this.onMouseSelection);
-                ej2_base_1.EventHandler.remove(this.parent.getContentTable(), 'mouseup', this.onMoveup);
+        }
+    };
+    KeyboardInteraction.prototype.processEnter = function (e) {
+        if (this.parent.activeViewOptions.readonly) {
+            return;
+        }
+        var target = (e.target);
+        if (closest(target, '.' + cls.POPUP_WRAPPER_CLASS)) {
+            if (target.classList.contains(cls.QUICK_POPUP_EVENT_DETAILS_CLASS) ||
+                target.classList.contains(cls.EVENT_CREATE_CLASS) ||
+                target.classList.contains(cls.EDIT_EVENT_CLASS) ||
+                target.classList.contains(cls.DELETE_EVENT_CLASS) ||
+                target.classList.contains(cls.CLOSE_CLASS)) {
+                target.click();
+                e.preventDefault();
             }
-            if (e.target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
-                var allDayRow = this.parent.getAllDayRow();
-                if (allDayRow) {
-                    ej2_base_1.EventHandler.remove(allDayRow, 'mousemove', this.onMouseSelection);
-                    ej2_base_1.EventHandler.remove(allDayRow, 'mouseup', this.onMoveup);
-                }
+            else if (target.classList.contains(cls.SUBJECT_CLASS)) {
+                this.parent.element.querySelector('.' + cls.EVENT_CREATE_CLASS).click();
+                e.preventDefault();
             }
-        };
-        KeyboardInteraction.prototype.processEnter = function (e) {
-            if (this.parent.activeViewOptions.readonly) {
-                return;
+            return;
+        }
+        if (target.classList.contains(cls.WORK_CELLS_CLASS) || target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
+            if (this.selectedCells.length > 1) {
+                var start = this.parent.getCellDetails(this.selectedCells[0]);
+                var end = this.parent.getCellDetails(this.selectedCells[this.selectedCells.length - 1]);
+                start.endTime = end.endTime;
+                start.element = target;
+                this.parent.activeCellsData = start;
             }
-            var target = (e.target);
-            if (ej2_base_1.closest(target, '.' + cls.POPUP_WRAPPER_CLASS)) {
-                if (target.classList.contains(cls.QUICK_POPUP_EVENT_DETAILS_CLASS) ||
-                    target.classList.contains(cls.EVENT_CREATE_CLASS) ||
-                    target.classList.contains(cls.EDIT_EVENT_CLASS) ||
-                    target.classList.contains(cls.DELETE_EVENT_CLASS) ||
-                    target.classList.contains(cls.CLOSE_CLASS)) {
-                    target.click();
-                    e.preventDefault();
-                }
-                else if (target.classList.contains(cls.SUBJECT_CLASS)) {
-                    this.parent.element.querySelector('.' + cls.EVENT_CREATE_CLASS).click();
-                    e.preventDefault();
-                }
-                return;
+            else {
+                this.parent.activeCellsData = this.parent.getCellDetails(target);
             }
-            if (target.classList.contains(cls.WORK_CELLS_CLASS) || target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
-                if (this.selectedCells.length > 1) {
-                    var start = this.parent.getCellDetails(this.selectedCells[0]);
-                    var end = this.parent.getCellDetails(this.selectedCells[this.selectedCells.length - 1]);
-                    start.endTime = end.endTime;
-                    start.element = target;
-                    this.parent.activeCellsData = start;
+            var args = extend(this.parent.activeCellsData, { cancel: false, event: e });
+            this.parent.notify(event.cellClick, args);
+            return;
+        }
+        if (target.classList.contains(cls.APPOINTMENT_CLASS) || target.classList.contains(cls.MORE_EVENT_CLOSE_CLASS) ||
+            target.classList.contains(cls.ALLDAY_APPOINTMENT_SECTION_CLASS) || target.classList.contains(cls.MORE_INDICATOR_CLASS)) {
+            target.click();
+            return;
+        }
+        if (target.classList.contains(cls.MORE_EVENT_HEADER_DATE_CLASS)) {
+            this.parent.setProperties({ selectedDate: new Date(parseInt(target.getAttribute('data-date'), 10)) }, true);
+            this.parent.changeView('Day');
+            this.processEscape();
+            return;
+        }
+    };
+    KeyboardInteraction.prototype.getCells = function (isInverseTable, start, end) {
+        var tableEle = this.parent.getContentTable();
+        var cells = [].slice.call(tableEle.querySelectorAll('td'));
+        var maxRow = tableEle.rows.length;
+        var maxColumn = tableEle.rows[0].cells.length;
+        if (start.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
+            var allDayRow = this.parent.getAllDayRow();
+            cells = [].slice.call(allDayRow.cells);
+            maxRow = 1;
+            maxColumn = allDayRow.cells.length;
+        }
+        var startIndex = cells.indexOf(start);
+        var endIndex = cells.indexOf(end);
+        var inverseCells = [];
+        if (isInverseTable) {
+            for (var i = 0; i < maxColumn; i++) {
+                for (var j = 0; j < maxRow; j++) {
+                    inverseCells.push(cells[maxColumn * j + i]);
                 }
-                else {
-                    this.parent.activeCellsData = this.parent.getCellDetails(target);
-                }
-                var args = ej2_base_1.extend(this.parent.activeCellsData, { cancel: false, event: e });
-                this.parent.notify(event.cellClick, args);
-                return;
             }
-            if (target.classList.contains(cls.APPOINTMENT_CLASS) || target.classList.contains(cls.MORE_EVENT_CLOSE_CLASS) ||
-                target.classList.contains(cls.ALLDAY_APPOINTMENT_SECTION_CLASS) || target.classList.contains(cls.MORE_INDICATOR_CLASS)) {
-                target.click();
-                return;
-            }
-            if (target.classList.contains(cls.MORE_EVENT_HEADER_DATE_CLASS)) {
-                this.parent.setProperties({ selectedDate: new Date(parseInt(target.getAttribute('data-date'), 10)) }, true);
-                this.parent.changeView('Day');
-                this.processEscape();
-                return;
-            }
-        };
-        KeyboardInteraction.prototype.getCells = function (isInverseTable, start, end) {
-            var tableEle = this.parent.getContentTable();
-            var cells = [].slice.call(tableEle.querySelectorAll('td'));
-            var maxRow = tableEle.rows.length;
-            var maxColumn = tableEle.rows[0].cells.length;
-            if (start.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
-                var allDayRow = this.parent.getAllDayRow();
-                cells = [].slice.call(allDayRow.cells);
-                maxRow = 1;
-                maxColumn = allDayRow.cells.length;
-            }
-            var startIndex = cells.indexOf(start);
-            var endIndex = cells.indexOf(end);
-            var inverseCells = [];
-            if (isInverseTable) {
-                for (var i = 0; i < maxColumn; i++) {
-                    for (var j = 0; j < maxRow; j++) {
-                        inverseCells.push(cells[maxColumn * j + i]);
+            startIndex = inverseCells.indexOf(start);
+            endIndex = inverseCells.indexOf(end);
+        }
+        if (startIndex > endIndex) {
+            var temp = startIndex;
+            startIndex = endIndex;
+            endIndex = temp;
+        }
+        var sCells = isInverseTable ? inverseCells : cells;
+        return sCells.slice(startIndex, endIndex + 1);
+    };
+    KeyboardInteraction.prototype.focusFirstCell = function () {
+        if (this.parent.currentView === 'Agenda') {
+            var focusCell = this.parent.getContentTable().querySelector('.' + cls.AGENDA_CELLS_CLASS);
+            focusCell.setAttribute('tabindex', '0');
+            focusCell.focus();
+            return;
+        }
+        this.parent.eventBase.removeSelectedAppointmentClass();
+        this.selectCells(false, this.parent.getWorkCellElements()[0]);
+    };
+    KeyboardInteraction.prototype.isInverseTableSelect = function () {
+        return this.parent.activeView.isInverseTableSelect;
+    };
+    /** @hidden */
+    KeyboardInteraction.prototype.selectCells = function (isMultiple, target) {
+        this.parent.removeSelectedClass();
+        if (isMultiple) {
+            var initialId = void 0;
+            var selectedCells = this.getCells(this.isInverseTableSelect(), this.initialTarget, target);
+            if (this.parent.activeViewOptions.group.resources.length > 0) {
+                initialId = this.initialTarget.getAttribute('data-group-index');
+                var resourceSelectedCells = [];
+                for (var i = 0; i < selectedCells.length; i++) {
+                    if (selectedCells[i].getAttribute('data-group-index') === initialId) {
+                        resourceSelectedCells.push(selectedCells[i]);
                     }
                 }
-                startIndex = inverseCells.indexOf(start);
-                endIndex = inverseCells.indexOf(end);
+                selectedCells = resourceSelectedCells;
             }
-            if (startIndex > endIndex) {
-                var temp = startIndex;
-                startIndex = endIndex;
-                endIndex = temp;
-            }
-            var sCells = isInverseTable ? inverseCells : cells;
-            return sCells.slice(startIndex, endIndex + 1);
-        };
-        KeyboardInteraction.prototype.focusFirstCell = function () {
-            if (this.parent.currentView === 'Agenda') {
-                var focusCell = this.parent.getContentTable().querySelector('.' + cls.AGENDA_CELLS_CLASS);
-                focusCell.setAttribute('tabindex', '0');
-                focusCell.focus();
-                return;
-            }
-            this.parent.eventBase.removeSelectedAppointmentClass();
-            this.selectCells(false, this.parent.getWorkCellElements()[0]);
-        };
-        KeyboardInteraction.prototype.isInverseTableSelect = function () {
-            return this.parent.activeView.isInverseTableSelect;
-        };
-        KeyboardInteraction.prototype.selectCells = function (isMultiple, target) {
-            this.parent.removeSelectedClass();
-            if (isMultiple) {
-                var initialId = void 0;
-                var selectedCells = this.getCells(this.isInverseTableSelect(), this.initialTarget, target);
+            this.selectedCells = selectedCells;
+            if (selectedCells.length > 2 && !target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
+                var allDayCells = this.getAllDayCells(selectedCells);
                 if (this.parent.activeViewOptions.group.resources.length > 0) {
-                    initialId = this.initialTarget.getAttribute('data-group-index');
-                    var resourceSelectedCells = [];
-                    for (var i = 0; i < selectedCells.length; i++) {
-                        if (selectedCells[i].getAttribute('data-group-index') === initialId) {
-                            resourceSelectedCells.push(selectedCells[i]);
+                    var resourceAllDayCells = [];
+                    for (var i = 0; i < allDayCells.length; i++) {
+                        if (allDayCells[i].getAttribute('data-group-index') === initialId) {
+                            resourceAllDayCells.push(allDayCells[i]);
                         }
                     }
-                    selectedCells = resourceSelectedCells;
+                    allDayCells = resourceAllDayCells;
                 }
-                this.selectedCells = selectedCells;
-                if (selectedCells.length > 2 && !target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
-                    var allDayCells = this.getAllDayCells(selectedCells);
-                    if (this.parent.activeViewOptions.group.resources.length > 0) {
-                        var resourceAllDayCells = [];
-                        for (var i = 0; i < allDayCells.length; i++) {
-                            if (allDayCells[i].getAttribute('data-group-index') === initialId) {
-                                resourceAllDayCells.push(allDayCells[i]);
-                            }
-                        }
-                        allDayCells = resourceAllDayCells;
-                    }
-                    selectedCells = selectedCells.concat(allDayCells);
-                }
-                if ((target.getAttribute('data-group-index') !== initialId) && this.parent.activeViewOptions.group.resources.length > 0) {
-                    target = this.selectedCells[this.selectedCells.length - 1];
-                }
-                this.parent.addSelectedClass(selectedCells, target);
+                selectedCells = selectedCells.concat(allDayCells);
             }
-            else {
-                this.initialTarget = target;
-                this.selectedCells = [target];
-                this.parent.addSelectedClass([target], target);
+            if ((target.getAttribute('data-group-index') !== initialId) && this.parent.activeViewOptions.group.resources.length > 0) {
+                target = this.selectedCells[this.selectedCells.length - 1];
             }
-        };
-        KeyboardInteraction.prototype.selectAppointment = function (isReverse, target) {
-            var appointments = this.getAppointmentElements();
-            if (appointments.length < 0) {
-                return;
-            }
-            this.parent.eventBase.removeSelectedAppointmentClass();
-            var nextAppEle;
-            if (target.classList.contains(cls.APPOINTMENT_CLASS)) {
-                var targetIndex = appointments.indexOf(target);
-                nextAppEle = appointments[(isReverse ? targetIndex - 1 : targetIndex + 1)];
-            }
-            else {
-                nextAppEle = isReverse ? appointments[appointments.length - 1] : appointments[0];
-            }
-            if (nextAppEle) {
-                this.parent.eventBase.addSelectedAppointments([nextAppEle]);
-                nextAppEle.focus();
-                ej2_base_2.addClass([nextAppEle], cls.AGENDA_SELECTED_CELL);
-            }
-        };
-        KeyboardInteraction.prototype.selectAppointmentElementFromWorkCell = function (isReverse, target) {
-            var _this = this;
-            this.parent.eventBase.removeSelectedAppointmentClass();
-            this.parent.removeSelectedClass();
-            if (target.classList.contains(cls.WORK_CELLS_CLASS) || target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
-                var appointmentElements_1 = this.getUniqueAppointmentElements();
-                var filteredElements_1 = [];
-                var selectedDate_1 = parseInt(target.getAttribute('data-date'), 10);
-                var selectedSeriesEvents = this.parent.eventsProcessed.filter(function (eventObject) {
-                    return (!isReverse ? (eventObject[_this.parent.eventFields.startTime].getTime() >= selectedDate_1) :
-                        (eventObject[_this.parent.eventFields.startTime].getTime() <= selectedDate_1));
+            this.parent.addSelectedClass(selectedCells, target);
+        }
+        else {
+            this.initialTarget = target;
+            this.selectedCells = [target];
+            this.parent.addSelectedClass([target], target);
+        }
+    };
+    KeyboardInteraction.prototype.selectAppointment = function (isReverse, target) {
+        var appointments = this.getAppointmentElements();
+        if (appointments.length < 0) {
+            return;
+        }
+        this.parent.eventBase.removeSelectedAppointmentClass();
+        var nextAppEle;
+        if (target.classList.contains(cls.APPOINTMENT_CLASS)) {
+            var targetIndex = appointments.indexOf(target);
+            nextAppEle = appointments[(isReverse ? targetIndex - 1 : targetIndex + 1)];
+        }
+        else {
+            nextAppEle = isReverse ? appointments[appointments.length - 1] : appointments[0];
+        }
+        if (nextAppEle) {
+            this.parent.eventBase.addSelectedAppointments([nextAppEle]);
+            nextAppEle.focus();
+            addClass([nextAppEle], cls.AGENDA_SELECTED_CELL);
+        }
+    };
+    KeyboardInteraction.prototype.selectAppointmentElementFromWorkCell = function (isReverse, target) {
+        var _this = this;
+        this.parent.eventBase.removeSelectedAppointmentClass();
+        this.parent.removeSelectedClass();
+        if (target.classList.contains(cls.WORK_CELLS_CLASS) || target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
+            var appointmentElements_1 = this.getUniqueAppointmentElements();
+            var filteredElements_1 = [];
+            var selectedDate_1 = parseInt(target.getAttribute('data-date'), 10);
+            var selectedSeriesEvents = this.parent.eventsProcessed.filter(function (eventObject) {
+                return (!isReverse ? (eventObject[_this.parent.eventFields.startTime].getTime() >= selectedDate_1) :
+                    (eventObject[_this.parent.eventFields.startTime].getTime() <= selectedDate_1));
+            });
+            selectedSeriesEvents.filter(function (event) {
+                appointmentElements_1.filter(function (element) {
+                    if (JSON.stringify(event.Guid) === JSON.stringify(element.getAttribute('data-guid'))) {
+                        filteredElements_1.push(element);
+                    }
                 });
-                selectedSeriesEvents.filter(function (event) {
-                    appointmentElements_1.filter(function (element) {
-                        if (JSON.stringify(event.Guid) === JSON.stringify(element.getAttribute('data-guid'))) {
-                            filteredElements_1.push(element);
-                        }
-                    });
-                });
-                if (filteredElements_1.length > 0) {
-                    var selectedElement = isReverse ? filteredElements_1[filteredElements_1.length - 1] : filteredElements_1[0];
-                    var focusElements = this.getAppointmentElementsByGuid(selectedElement.getAttribute('data-guid'));
-                    this.parent.eventBase.addSelectedAppointments(focusElements);
-                    (focusElements[focusElements.length - 1]).focus();
-                }
+            });
+            if (filteredElements_1.length > 0) {
+                var selectedElement = isReverse ? filteredElements_1[filteredElements_1.length - 1] : filteredElements_1[0];
+                var focusElements = this.getAppointmentElementsByGuid(selectedElement.getAttribute('data-guid'));
+                this.parent.eventBase.addSelectedAppointments(focusElements);
+                (focusElements[focusElements.length - 1]).focus();
             }
-        };
-        KeyboardInteraction.prototype.getAllDayCells = function (cells) {
-            var allDayRow = this.parent.getAllDayRow();
-            if (!allDayRow) {
-                return [];
-            }
-            var startCell = cells[0];
-            var endCell = cells[cells.length - 1];
-            var start = this.parent.getCellDetails(startCell);
-            var end = this.parent.getCellDetails(endCell);
-            if (end.endTime.getTime() - start.startTime.getTime() >= util.MS_PER_DAY) {
-                var allDayCells = [].slice.call(allDayRow.cells);
-                return allDayCells.slice(startCell.cellIndex, endCell.cellIndex + 1);
-            }
+        }
+    };
+    KeyboardInteraction.prototype.getAllDayCells = function (cells) {
+        var allDayRow = this.parent.getAllDayRow();
+        if (!allDayRow) {
             return [];
-        };
-        KeyboardInteraction.prototype.getAppointmentElements = function () {
-            return [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));
-        };
-        KeyboardInteraction.prototype.getAppointmentElementsByGuid = function (guid) {
-            return [].slice.call(this.parent.element.querySelectorAll('div[data-guid="' + guid + '"]'));
-        };
-        KeyboardInteraction.prototype.getUniqueAppointmentElements = function () {
-            var appointments = this.getAppointmentElements();
-            var appointmentElements = [];
-            appointments.map(function (value) {
-                return value.getAttribute('data-guid');
-            }).filter(function (value, index, self) {
-                if (self.indexOf(value) === index) {
-                    appointmentElements.push(appointments[index]);
-                }
-            });
-            return appointmentElements;
-        };
-        KeyboardInteraction.prototype.getWorkCellFromAppointmentElement = function (target) {
-            var selectedObject = this.parent.eventBase.getEventByGuid(target.getAttribute('data-guid'));
-            return this.parent.eventBase.selectWorkCellByTime([selectedObject]);
-        };
-        KeyboardInteraction.prototype.processViewNavigation = function (e) {
-            var index = parseInt(e.key, 10) - 1;
-            if (index < this.parent.views.length) {
-                var view = this.parent.viewCollections[index].option;
-                this.parent.changeView(view, e, undefined, index);
-                if (this.parent.headerModule) {
-                    this.parent.headerModule.element.querySelector('.e-active-view button').focus();
-                }
+        }
+        var startCell = cells[0];
+        var endCell = cells[cells.length - 1];
+        var start = this.parent.getCellDetails(startCell);
+        var end = this.parent.getCellDetails(endCell);
+        if (end.endTime.getTime() - start.startTime.getTime() >= util.MS_PER_DAY) {
+            var allDayCells = [].slice.call(allDayRow.cells);
+            return allDayCells.slice(startCell.cellIndex, endCell.cellIndex + 1);
+        }
+        return [];
+    };
+    KeyboardInteraction.prototype.getAppointmentElements = function () {
+        return [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));
+    };
+    KeyboardInteraction.prototype.getAppointmentElementsByGuid = function (guid) {
+        return [].slice.call(this.parent.element.querySelectorAll('div[data-guid="' + guid + '"]'));
+    };
+    KeyboardInteraction.prototype.getUniqueAppointmentElements = function () {
+        var appointments = this.getAppointmentElements();
+        var appointmentElements = [];
+        appointments.map(function (value) {
+            return value.getAttribute('data-guid');
+        }).filter(function (value, index, self) {
+            if (self.indexOf(value) === index) {
+                appointmentElements.push(appointments[index]);
             }
-        };
-        KeyboardInteraction.prototype.processUp = function (e, isMultiple) {
-            if ((isMultiple && this.parent.currentView === 'MonthAgenda')) {
-                return;
+        });
+        return appointmentElements;
+    };
+    KeyboardInteraction.prototype.getWorkCellFromAppointmentElement = function (target) {
+        var selectedObject = this.parent.eventBase.getEventByGuid(target.getAttribute('data-guid'));
+        return this.parent.eventBase.selectWorkCellByTime([selectedObject]);
+    };
+    KeyboardInteraction.prototype.processViewNavigation = function (e) {
+        var index = parseInt(e.key, 10) - 1;
+        if (index < this.parent.views.length) {
+            var view = this.parent.viewCollections[index].option;
+            this.parent.changeView(view, e, undefined, index);
+            if (this.parent.headerModule) {
+                this.parent.headerModule.element.querySelector('.e-active-view button').focus();
             }
-            var target = (e.target);
-            var selectedElements = this.parent.getSelectedElements();
-            var selectedEventElements = this.parent.eventBase.getSelectedAppointments();
-            var moreEventWrapper = this.parent.element.querySelector('.' + cls.MORE_POPUP_WRAPPER_CLASS);
-            var quickPopupWrapper = this.getQuickPopupElement();
-            if (selectedElements.length > 0 && !e.target.classList.contains(cls.WORK_CELLS_CLASS)) {
-                target = selectedElements[selectedElements.length - 1];
-            }
-            if (selectedEventElements.length > 0 && !moreEventWrapper.classList.contains(cls.POPUP_OPEN) &&
-                !quickPopupWrapper.classList.contains(cls.POPUP_OPEN) &&
-                ['Day', 'Week', 'WorkWeek', 'Month'].indexOf(this.parent.currentView) !== -1) {
-                target = this.getWorkCellFromAppointmentElement(selectedEventElements[selectedEventElements.length - 1]);
-                this.parent.eventBase.removeSelectedAppointmentClass();
-            }
-            if (target.classList.contains(cls.WORK_CELLS_CLASS) && !this.parent.element.querySelector('.' + cls.POPUP_OPEN)) {
-                var tableEle = this.parent.getContentTable();
-                var curRowIndex = target.parentNode.sectionRowIndex;
-                if (curRowIndex > 0 && curRowIndex < tableEle.rows.length) {
-                    this.selectCells(isMultiple, tableEle.rows[curRowIndex - 1].cells[target.cellIndex]);
-                }
-            }
-            else if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') {
-                this.selectAppointment(true, target);
-            }
-        };
-        KeyboardInteraction.prototype.processDown = function (e, isMultiple) {
-            if ((isMultiple && this.parent.currentView === 'MonthAgenda')) {
-                return;
-            }
-            var target = (e.target);
-            var selectedCells = this.parent.getSelectedElements();
-            var selectedElements = this.parent.eventBase.getSelectedAppointments();
-            var moreEventWrapper = this.parent.element.querySelector('.' + cls.MORE_POPUP_WRAPPER_CLASS);
-            var quickPopupWrapper = this.getQuickPopupElement();
-            if (selectedCells.length > 0 && !e.target.classList.contains(cls.WORK_CELLS_CLASS)) {
-                target = selectedCells[selectedCells.length - 1];
-            }
-            if (selectedElements.length > 0 && !moreEventWrapper.classList.contains(cls.POPUP_OPEN) &&
-                !quickPopupWrapper.classList.contains(cls.POPUP_OPEN) &&
-                ['Day', 'Week', 'WorkWeek', 'Month'].indexOf(this.parent.currentView) !== -1) {
-                target = this.getWorkCellFromAppointmentElement(selectedElements[selectedElements.length - 1]);
-                this.parent.eventBase.removeSelectedAppointmentClass();
-            }
+        }
+    };
+    KeyboardInteraction.prototype.processUp = function (e, isMultiple) {
+        if ((isMultiple && this.parent.currentView === 'MonthAgenda')) {
+            return;
+        }
+        var target = (e.target);
+        var selectedElements = this.parent.getSelectedElements();
+        var selectedEventElements = this.parent.eventBase.getSelectedAppointments();
+        var moreEventWrapper = this.parent.element.querySelector('.' + cls.MORE_POPUP_WRAPPER_CLASS);
+        var quickPopupWrapper = this.getQuickPopupElement();
+        if (selectedElements.length > 0 && !e.target.classList.contains(cls.WORK_CELLS_CLASS)) {
+            target = selectedElements[selectedElements.length - 1];
+        }
+        if (selectedEventElements.length > 0 && !moreEventWrapper.classList.contains(cls.POPUP_OPEN) &&
+            !quickPopupWrapper.classList.contains(cls.POPUP_OPEN) &&
+            ['Day', 'Week', 'WorkWeek', 'Month'].indexOf(this.parent.currentView) !== -1) {
+            target = this.getWorkCellFromAppointmentElement(selectedEventElements[selectedEventElements.length - 1]);
+            this.parent.eventBase.removeSelectedAppointmentClass();
+        }
+        if (target.classList.contains(cls.WORK_CELLS_CLASS) && !this.parent.element.querySelector('.' + cls.POPUP_OPEN)) {
             var tableEle = this.parent.getContentTable();
-            if (target.classList.contains(cls.WORK_CELLS_CLASS) && !this.parent.element.querySelector('.' + cls.POPUP_OPEN)) {
-                var curRowIndex = target.parentNode.sectionRowIndex;
-                if (curRowIndex >= 0 && curRowIndex < tableEle.rows.length - 1) {
-                    this.selectCells(isMultiple, tableEle.rows[curRowIndex + 1].cells[target.cellIndex]);
-                }
+            var curRowIndex = target.parentNode.sectionRowIndex;
+            if (curRowIndex > 0 && curRowIndex < tableEle.rows.length) {
+                this.selectCells(isMultiple, tableEle.rows[curRowIndex - 1].cells[target.cellIndex]);
             }
-            else if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') {
-                this.selectAppointment(false, target);
-            }
-        };
-        KeyboardInteraction.prototype.processLeftRight = function (target) {
-            var tableEle = this.parent.getContentTable();
+        }
+        else if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') {
+            this.selectAppointment(true, target);
+        }
+    };
+    KeyboardInteraction.prototype.processDown = function (e, isMultiple) {
+        if ((isMultiple && this.parent.currentView === 'MonthAgenda')) {
+            return;
+        }
+        var target = (e.target);
+        var selectedCells = this.parent.getSelectedElements();
+        var selectedElements = this.parent.eventBase.getSelectedAppointments();
+        var moreEventWrapper = this.parent.element.querySelector('.' + cls.MORE_POPUP_WRAPPER_CLASS);
+        var quickPopupWrapper = this.getQuickPopupElement();
+        if (selectedCells.length > 0 && !e.target.classList.contains(cls.WORK_CELLS_CLASS)) {
+            target = selectedCells[selectedCells.length - 1];
+        }
+        if (selectedElements.length > 0 && !moreEventWrapper.classList.contains(cls.POPUP_OPEN) &&
+            !quickPopupWrapper.classList.contains(cls.POPUP_OPEN) &&
+            ['Day', 'Week', 'WorkWeek', 'Month'].indexOf(this.parent.currentView) !== -1) {
+            target = this.getWorkCellFromAppointmentElement(selectedElements[selectedElements.length - 1]);
+            this.parent.eventBase.removeSelectedAppointmentClass();
+        }
+        var tableEle = this.parent.getContentTable();
+        if (target.classList.contains(cls.WORK_CELLS_CLASS) && !this.parent.element.querySelector('.' + cls.POPUP_OPEN)) {
             var curRowIndex = target.parentNode.sectionRowIndex;
-            var key = {
-                element: tableEle,
-                rowIndex: curRowIndex,
-                columnIndex: target.cellIndex,
-                maxIndex: tableEle.rows[curRowIndex].cells.length
-            };
-            return key;
-        };
-        KeyboardInteraction.prototype.getQuickPopupElement = function () {
-            return (this.parent.isAdaptive ? document.body : this.parent.element).querySelector('.' + cls.POPUP_WRAPPER_CLASS);
-        };
-        KeyboardInteraction.prototype.isCancelLeftRightAction = function (isMultiple) {
-            if (this.parent.currentView === 'Agenda' || (isMultiple && this.parent.currentView === 'MonthAgenda')) {
-                return true;
+            if (curRowIndex >= 0 && curRowIndex < tableEle.rows.length - 1) {
+                this.selectCells(isMultiple, tableEle.rows[curRowIndex + 1].cells[target.cellIndex]);
             }
-            var moreEventWrapper = this.parent.element.querySelector('.' + cls.MORE_POPUP_WRAPPER_CLASS);
-            var quickPopupWrapper = this.getQuickPopupElement();
-            if (moreEventWrapper.classList.contains(cls.POPUP_OPEN) || quickPopupWrapper.classList.contains(cls.POPUP_OPEN)) {
-                return true;
-            }
-            return false;
+        }
+        else if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') {
+            this.selectAppointment(false, target);
+        }
+    };
+    KeyboardInteraction.prototype.processLeftRight = function (target) {
+        var tableEle = this.parent.getContentTable();
+        var curRowIndex = target.parentNode.sectionRowIndex;
+        var key = {
+            element: tableEle,
+            rowIndex: curRowIndex,
+            columnIndex: target.cellIndex,
+            maxIndex: tableEle.rows[curRowIndex].cells.length
         };
-        KeyboardInteraction.prototype.processRight = function (e, isMultiple) {
-            if (this.isCancelLeftRightAction(isMultiple)) {
+        return key;
+    };
+    KeyboardInteraction.prototype.getQuickPopupElement = function () {
+        return (this.parent.isAdaptive ? document.body : this.parent.element).querySelector('.' + cls.POPUP_WRAPPER_CLASS);
+    };
+    KeyboardInteraction.prototype.isCancelLeftRightAction = function (isMultiple) {
+        if (this.parent.currentView === 'Agenda' || (isMultiple && this.parent.currentView === 'MonthAgenda')) {
+            return true;
+        }
+        var moreEventWrapper = this.parent.element.querySelector('.' + cls.MORE_POPUP_WRAPPER_CLASS);
+        var quickPopupWrapper = this.getQuickPopupElement();
+        if (moreEventWrapper.classList.contains(cls.POPUP_OPEN) || quickPopupWrapper.classList.contains(cls.POPUP_OPEN)) {
+            return true;
+        }
+        return false;
+    };
+    KeyboardInteraction.prototype.processRight = function (e, isMultiple) {
+        if (this.isCancelLeftRightAction(isMultiple)) {
+            return;
+        }
+        var selectedCells = this.parent.getSelectedElements();
+        var targetCell;
+        var selectedAppointments = this.parent.eventBase.getSelectedAppointments();
+        var target = (e.target);
+        if (selectedCells.length > 0 && !target.classList.contains(cls.WORK_CELLS_CLASS) &&
+            !target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
+            target = selectedCells[selectedCells.length - 1];
+        }
+        if (selectedAppointments.length > 0) {
+            target = this.getWorkCellFromAppointmentElement(selectedAppointments[selectedAppointments.length - 1]);
+            this.parent.eventBase.removeSelectedAppointmentClass();
+            if (!target) {
                 return;
             }
-            var selectedCells = this.parent.getSelectedElements();
-            var targetCell;
-            var selectedAppointments = this.parent.eventBase.getSelectedAppointments();
-            var target = (e.target);
-            if (selectedCells.length > 0 && !target.classList.contains(cls.WORK_CELLS_CLASS) &&
-                !target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
-                target = selectedCells[selectedCells.length - 1];
-            }
-            if (selectedAppointments.length > 0) {
-                target = this.getWorkCellFromAppointmentElement(selectedAppointments[selectedAppointments.length - 1]);
-                this.parent.eventBase.removeSelectedAppointmentClass();
-                if (!target) {
-                    return;
+        }
+        if (target.classList.contains(cls.WORK_CELLS_CLASS)) {
+            var key = this.processLeftRight(target);
+            if (key.columnIndex >= 0 && key.columnIndex < key.maxIndex - 1) {
+                targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex].cells[target.cellIndex + 1], 'right');
+                if (!isNullOrUndefined(targetCell)) {
+                    this.selectCells(isMultiple, targetCell);
                 }
             }
-            if (target.classList.contains(cls.WORK_CELLS_CLASS)) {
-                var key = this.processLeftRight(target);
-                if (key.columnIndex >= 0 && key.columnIndex < key.maxIndex - 1) {
-                    targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex].cells[target.cellIndex + 1], 'right');
-                    if (!ej2_base_2.isNullOrUndefined(targetCell)) {
+            else if (key.columnIndex === key.maxIndex - 1) {
+                if (!this.isInverseTableSelect() && key.rowIndex < key.element.rows.length - 1) {
+                    targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex + 1].cells[0], 'right');
+                    if (!isNullOrUndefined(targetCell)) {
                         this.selectCells(isMultiple, targetCell);
                     }
                 }
-                else if (key.columnIndex === key.maxIndex - 1) {
-                    if (!this.isInverseTableSelect() && key.rowIndex < key.element.rows.length - 1) {
-                        targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex + 1].cells[0], 'right');
-                        if (!ej2_base_2.isNullOrUndefined(targetCell)) {
-                            this.selectCells(isMultiple, targetCell);
-                        }
-                    }
-                    else if (!isMultiple) {
-                        var rowIndex = this.isInverseTableSelect() ? key.rowIndex : 0;
-                        this.parent.changeDate(this.parent.activeView.getNextPreviousDate('next'), e);
-                        var tableEle = this.parent.getContentTable();
-                        this.selectCells(false, tableEle.rows[rowIndex].cells[0]);
-                    }
-                }
-            }
-            else if (target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
-                var curColIndex = target.cellIndex;
-                var allDayRow = this.parent.getAllDayRow();
-                var maxColIndex = allDayRow.cells.length;
-                if (curColIndex >= 0 && curColIndex < maxColIndex - 1) {
-                    this.selectCells(isMultiple, allDayRow.cells[curColIndex + 1]);
-                }
-                else if (curColIndex === maxColIndex - 1 && !isMultiple) {
+                else if (!isMultiple) {
+                    var rowIndex = this.isInverseTableSelect() ? key.rowIndex : 0;
                     this.parent.changeDate(this.parent.activeView.getNextPreviousDate('next'), e);
-                    var allDayRow_1 = this.parent.getAllDayRow();
-                    this.selectCells(false, allDayRow_1.cells[0]);
+                    var tableEle = this.parent.getContentTable();
+                    this.selectCells(false, tableEle.rows[rowIndex].cells[0]);
                 }
             }
-        };
-        KeyboardInteraction.prototype.processLeft = function (e, isMultiple) {
-            if (this.isCancelLeftRightAction(isMultiple)) {
+        }
+        else if (target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
+            var curColIndex = target.cellIndex;
+            var allDayRow = this.parent.getAllDayRow();
+            var maxColIndex = allDayRow.cells.length;
+            if (curColIndex >= 0 && curColIndex < maxColIndex - 1) {
+                this.selectCells(isMultiple, allDayRow.cells[curColIndex + 1]);
+            }
+            else if (curColIndex === maxColIndex - 1 && !isMultiple) {
+                this.parent.changeDate(this.parent.activeView.getNextPreviousDate('next'), e);
+                var allDayRow_1 = this.parent.getAllDayRow();
+                this.selectCells(false, allDayRow_1.cells[0]);
+            }
+        }
+    };
+    KeyboardInteraction.prototype.processLeft = function (e, isMultiple) {
+        if (this.isCancelLeftRightAction(isMultiple)) {
+            return;
+        }
+        var target = (e.target);
+        var selectedCells = this.parent.getSelectedElements();
+        var targetCell;
+        if (selectedCells.length > 0 && !target.classList.contains(cls.WORK_CELLS_CLASS) &&
+            !target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
+            target = selectedCells[selectedCells.length - 1];
+        }
+        var selectedElements = this.parent.eventBase.getSelectedAppointments();
+        if (selectedElements.length > 0) {
+            target = this.getWorkCellFromAppointmentElement(selectedElements[selectedElements.length - 1]);
+            this.parent.eventBase.removeSelectedAppointmentClass();
+            if (!target) {
                 return;
             }
-            var target = (e.target);
-            var selectedCells = this.parent.getSelectedElements();
-            var targetCell;
-            if (selectedCells.length > 0 && !target.classList.contains(cls.WORK_CELLS_CLASS) &&
-                !target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
-                target = selectedCells[selectedCells.length - 1];
-            }
-            var selectedElements = this.parent.eventBase.getSelectedAppointments();
-            if (selectedElements.length > 0) {
-                target = this.getWorkCellFromAppointmentElement(selectedElements[selectedElements.length - 1]);
-                this.parent.eventBase.removeSelectedAppointmentClass();
-                if (!target) {
-                    return;
+        }
+        if (target.classList.contains(cls.WORK_CELLS_CLASS)) {
+            var key = this.processLeftRight(target);
+            if (key.columnIndex > 0 && key.columnIndex < key.maxIndex) {
+                targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex].cells[target.cellIndex - 1], 'left');
+                if (!isNullOrUndefined(targetCell)) {
+                    this.selectCells(isMultiple, targetCell);
                 }
             }
-            if (target.classList.contains(cls.WORK_CELLS_CLASS)) {
-                var key = this.processLeftRight(target);
-                if (key.columnIndex > 0 && key.columnIndex < key.maxIndex) {
-                    targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex].cells[target.cellIndex - 1], 'left');
-                    if (!ej2_base_2.isNullOrUndefined(targetCell)) {
+            else if (key.columnIndex === 0) {
+                if (!this.isInverseTableSelect() && key.rowIndex > 0) {
+                    targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex - 1].cells[key.maxIndex - 1], 'left');
+                    if (!isNullOrUndefined(targetCell)) {
                         this.selectCells(isMultiple, targetCell);
                     }
                 }
-                else if (key.columnIndex === 0) {
-                    if (!this.isInverseTableSelect() && key.rowIndex > 0) {
-                        targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex - 1].cells[key.maxIndex - 1], 'left');
-                        if (!ej2_base_2.isNullOrUndefined(targetCell)) {
-                            this.selectCells(isMultiple, targetCell);
-                        }
-                    }
-                    else if (!isMultiple) {
-                        this.parent.changeDate(this.parent.activeView.getNextPreviousDate('previous'), e);
-                        var tableEle = this.parent.getContentTable();
-                        var rowIndex = this.isInverseTableSelect() ? key.rowIndex : tableEle.rows.length - 1;
-                        this.selectCells(false, tableEle.rows[rowIndex].cells[key.maxIndex - 1]);
-                    }
-                }
-            }
-            else if (target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
-                var curColIndex = target.cellIndex;
-                var allDayRow = this.parent.getAllDayRow();
-                var maxColIndex = allDayRow.cells.length;
-                if (curColIndex > 0 && curColIndex < maxColIndex) {
-                    this.selectCells(isMultiple, allDayRow.cells[curColIndex - 1]);
-                }
-                else if (curColIndex === 0 && !isMultiple) {
+                else if (!isMultiple) {
                     this.parent.changeDate(this.parent.activeView.getNextPreviousDate('previous'), e);
-                    var allDayRow_2 = this.parent.getAllDayRow();
-                    this.selectCells(false, allDayRow_2.cells[maxColIndex - 1]);
+                    var tableEle = this.parent.getContentTable();
+                    var rowIndex = this.isInverseTableSelect() ? key.rowIndex : tableEle.rows.length - 1;
+                    this.selectCells(false, tableEle.rows[rowIndex].cells[key.maxIndex - 1]);
                 }
             }
-        };
-        KeyboardInteraction.prototype.calculateNextPrevDate = function (currentCell, target, type) {
-            var initialId = this.initialTarget.getAttribute('data-group-index');
-            if (this.parent.activeViewOptions.group.resources.length > 0 && this.parent.currentView === 'Month') {
-                if (target.getAttribute('data-group-index') !== initialId) {
-                    var currentDate = new Date(parseInt(currentCell.getAttribute('data-date'), 10));
-                    var nextPrevDate = (type === 'right') ? new Date(currentDate.setDate(currentDate.getDate() + 1))
-                        : new Date(currentDate.setDate(currentDate.getDate() - 1));
-                    target = [].slice.call(this.parent.element.querySelectorAll('td[data-date="'
-                        + nextPrevDate.getTime().toString() + '"]' + '[data-group-index="' + initialId + '"]'))[0];
-                }
+        }
+        else if (target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
+            var curColIndex = target.cellIndex;
+            var allDayRow = this.parent.getAllDayRow();
+            var maxColIndex = allDayRow.cells.length;
+            if (curColIndex > 0 && curColIndex < maxColIndex) {
+                this.selectCells(isMultiple, allDayRow.cells[curColIndex - 1]);
             }
-            return target;
-        };
-        KeyboardInteraction.prototype.getFocusableElements = function (container) {
-            var queryString = 'a[href]:not([tabindex="-1"]),input:not([disabled]):not([tabindex="-1"]),' +
-                'textarea:not([disabled]):not([tabindex="-1"]),button:not([disabled]):not([tabindex="-1"]),' +
-                'select:not([disabled]):not([tabindex="-1"]),[tabindex]:not([tabindex="-1"]),[contentEditable=true]:not([tabindex="-1"])';
-            return [].slice.call(container.querySelectorAll(queryString));
-        };
-        KeyboardInteraction.prototype.processTabOnPopup = function (e, popupElement) {
-            var _this = this;
-            var focusableElements = this.getFocusableElements(popupElement);
-            focusableElements = focusableElements.filter(function (element) {
-                var footerEle = _this.parent.element.querySelector('.' + cls.POPUP_FOOTER_CLASS);
-                if (footerEle && footerEle.offsetParent) {
-                    return !(element.classList.contains(cls.EDIT_CLASS) || element.classList.contains(cls.DELETE_CLASS));
-                }
-                else {
-                    return !(element.classList.contains(cls.EDIT_EVENT_CLASS) || element.classList.contains(cls.DELETE_EVENT_CLASS));
-                }
-            });
-            var firstEle = focusableElements[0];
-            var lastEle = focusableElements[focusableElements.length - 1];
-            if (!ej2_base_2.isNullOrUndefined(lastEle) && document.activeElement === lastEle && !e.shiftKey) {
-                e.preventDefault();
-                firstEle.focus();
+            else if (curColIndex === 0 && !isMultiple) {
+                this.parent.changeDate(this.parent.activeView.getNextPreviousDate('previous'), e);
+                var allDayRow_2 = this.parent.getAllDayRow();
+                this.selectCells(false, allDayRow_2.cells[maxColIndex - 1]);
             }
-            if (!ej2_base_2.isNullOrUndefined(firstEle) && document.activeElement === firstEle && e.shiftKey) {
-                e.preventDefault();
-                lastEle.focus();
+        }
+    };
+    KeyboardInteraction.prototype.calculateNextPrevDate = function (currentCell, target, type) {
+        var initialId = this.initialTarget.getAttribute('data-group-index');
+        if (this.parent.activeViewOptions.group.resources.length > 0 && this.parent.currentView === 'Month') {
+            if (target.getAttribute('data-group-index') !== initialId) {
+                var currentDate = new Date(parseInt(currentCell.getAttribute('data-date'), 10));
+                var nextPrevDate = (type === 'right') ? new Date(currentDate.setDate(currentDate.getDate() + 1))
+                    : new Date(currentDate.setDate(currentDate.getDate() - 1));
+                target = [].slice.call(this.parent.element.querySelectorAll('td[data-date="'
+                    + nextPrevDate.getTime().toString() + '"]' + '[data-group-index="' + initialId + '"]'))[0];
             }
-        };
-        KeyboardInteraction.prototype.processTab = function (e, isReverse) {
-            var target = e.target;
-            var popupWrapper = ej2_base_1.closest(target, '.' + cls.POPUP_WRAPPER_CLASS + ',.' + cls.MORE_POPUP_WRAPPER_CLASS);
-            if (popupWrapper && popupWrapper.classList.contains(cls.POPUP_OPEN)) {
-                if (popupWrapper.classList.contains(cls.MORE_POPUP_WRAPPER_CLASS)) {
-                    this.parent.eventBase.removeSelectedAppointmentClass();
-                }
-                this.processTabOnPopup(e, popupWrapper);
-                return;
+        }
+        return target;
+    };
+    KeyboardInteraction.prototype.getFocusableElements = function (container) {
+        var queryString = 'a[href]:not([tabindex="-1"]),input:not([disabled]):not([tabindex="-1"]),' +
+            'textarea:not([disabled]):not([tabindex="-1"]),button:not([disabled]):not([tabindex="-1"]),' +
+            'select:not([disabled]):not([tabindex="-1"]),[tabindex]:not([tabindex="-1"]),[contentEditable=true]:not([tabindex="-1"])';
+        return [].slice.call(container.querySelectorAll(queryString));
+    };
+    KeyboardInteraction.prototype.processTabOnPopup = function (e, popupElement) {
+        var _this = this;
+        var focusableElements = this.getFocusableElements(popupElement);
+        focusableElements = focusableElements.filter(function (element) {
+            var footerEle = _this.parent.element.querySelector('.' + cls.POPUP_FOOTER_CLASS);
+            if (footerEle && footerEle.offsetParent) {
+                return !(element.classList.contains(cls.EDIT_CLASS) || element.classList.contains(cls.DELETE_CLASS));
             }
-            if (target.classList.contains(cls.ROOT)) {
+            else {
+                return !(element.classList.contains(cls.EDIT_EVENT_CLASS) || element.classList.contains(cls.DELETE_EVENT_CLASS));
+            }
+        });
+        var firstEle = focusableElements[0];
+        var lastEle = focusableElements[focusableElements.length - 1];
+        if (!isNullOrUndefined(lastEle) && document.activeElement === lastEle && !e.shiftKey) {
+            e.preventDefault();
+            firstEle.focus();
+        }
+        if (!isNullOrUndefined(firstEle) && document.activeElement === firstEle && e.shiftKey) {
+            e.preventDefault();
+            lastEle.focus();
+        }
+    };
+    KeyboardInteraction.prototype.processTab = function (e, isReverse) {
+        var target = e.target;
+        var popupWrapper = closest(target, '.' + cls.POPUP_WRAPPER_CLASS + ',.' + cls.MORE_POPUP_WRAPPER_CLASS);
+        if (popupWrapper && popupWrapper.classList.contains(cls.POPUP_OPEN)) {
+            if (popupWrapper.classList.contains(cls.MORE_POPUP_WRAPPER_CLASS)) {
                 this.parent.eventBase.removeSelectedAppointmentClass();
-                return;
             }
-            if (target.classList.contains(cls.APPOINTMENT_CLASS)) {
-                var appointments = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));
-                var selectedAppointments = this.parent.eventBase.getSelectedAppointments();
-                if (selectedAppointments.length > 0) {
-                    target = selectedAppointments[selectedAppointments.length - 1];
-                }
-                this.parent.eventBase.removeSelectedAppointmentClass();
-                if (!isReverse && target.getAttribute('data-guid') === appointments[appointments.length - 1].getAttribute('data-guid') ||
-                    isReverse && target.getAttribute('data-guid') === appointments[0].getAttribute('data-guid')) {
-                    return;
-                }
-                if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') {
-                    this.selectAppointment(isReverse, target);
-                    e.preventDefault();
-                }
+            this.processTabOnPopup(e, popupWrapper);
+            return;
+        }
+        if (target.classList.contains(cls.ROOT)) {
+            this.parent.eventBase.removeSelectedAppointmentClass();
+            return;
+        }
+        if (target.classList.contains(cls.APPOINTMENT_CLASS)) {
+            var appointments = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));
+            var selectedAppointments = this.parent.eventBase.getSelectedAppointments();
+            if (selectedAppointments.length > 0) {
+                target = selectedAppointments[selectedAppointments.length - 1];
+            }
+            this.parent.eventBase.removeSelectedAppointmentClass();
+            if (!isReverse && target.getAttribute('data-guid') === appointments[appointments.length - 1].getAttribute('data-guid') ||
+                isReverse && target.getAttribute('data-guid') === appointments[0].getAttribute('data-guid')) {
                 return;
             }
-            var selectedCells = this.parent.getSelectedElements();
-            if (selectedCells.length > 0 && !target.classList.contains(cls.APPOINTMENT_CLASS)) {
-                target = selectedCells[selectedCells.length - 1];
-                this.selectAppointmentElementFromWorkCell(isReverse, target);
+            if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') {
+                this.selectAppointment(isReverse, target);
                 e.preventDefault();
-                return;
             }
-        };
-        KeyboardInteraction.prototype.processDelete = function (e) {
-            if (document.activeElement.classList.contains(cls.APPOINTMENT_CLASS)) {
-                ej2_base_2.addClass([document.activeElement], cls.APPOINTMENT_BORDER);
-                this.parent.activeEventData = this.parent.eventBase.getSelectedEvents();
-                this.parent.quickPopup.deleteClick();
-            }
-        };
-        KeyboardInteraction.prototype.processEscape = function () {
-            this.parent.quickPopup.onClosePopup();
-            this.parent.quickPopup.morePopup.hide();
-            if (this.parent.headerModule) {
-                this.parent.headerModule.hideHeaderPopup();
-            }
-        };
-        KeyboardInteraction.prototype.getModuleName = function () {
-            return 'keyboard';
-        };
-        KeyboardInteraction.prototype.destroy = function () {
-            this.removeEventListener();
-            this.keyboardModule.destroy();
-        };
-        return KeyboardInteraction;
-    }());
-    exports.KeyboardInteraction = KeyboardInteraction;
-});
+            return;
+        }
+        var selectedCells = this.parent.getSelectedElements();
+        if (selectedCells.length > 0 && !target.classList.contains(cls.APPOINTMENT_CLASS)) {
+            target = selectedCells[selectedCells.length - 1];
+            this.selectAppointmentElementFromWorkCell(isReverse, target);
+            e.preventDefault();
+            return;
+        }
+    };
+    KeyboardInteraction.prototype.processDelete = function (e) {
+        if (document.activeElement.classList.contains(cls.APPOINTMENT_CLASS)) {
+            addClass([document.activeElement], cls.APPOINTMENT_BORDER);
+            this.parent.activeEventData = this.parent.eventBase.getSelectedEvents();
+            this.parent.quickPopup.deleteClick();
+        }
+    };
+    KeyboardInteraction.prototype.processEscape = function () {
+        this.parent.quickPopup.onClosePopup();
+        this.parent.quickPopup.morePopup.hide();
+        if (this.parent.headerModule) {
+            this.parent.headerModule.hideHeaderPopup();
+        }
+    };
+    /**
+     * Get module name.
+     */
+    KeyboardInteraction.prototype.getModuleName = function () {
+        return 'keyboard';
+    };
+    /**
+     * To destroy the keyboard module.
+     * @return {void}
+     * @private
+     */
+    KeyboardInteraction.prototype.destroy = function () {
+        this.removeEventListener();
+        this.keyboardModule.destroy();
+    };
+    return KeyboardInteraction;
+}());
+export { KeyboardInteraction };

src/schedule/actions/scroll.js

@@ -1,41 +0,71 @@
-define(["require", "exports", "@syncfusion/ej2-base", "../base/constant"], function (require, exports, ej2_base_1, constant_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var Scroll = (function () {
-        function Scroll(parent) {
-            this.parent = parent;
-            this.addEventListener();
-        }
-        Scroll.prototype.getModuleName = function () {
-            return 'scroll';
-        };
-        Scroll.prototype.setWidth = function () {
-            this.parent.element.style.width = ej2_base_1.formatUnit(this.parent.width);
-        };
-        Scroll.prototype.setHeight = function () {
-            this.parent.element.style.height = ej2_base_1.formatUnit(this.parent.height);
-        };
-        Scroll.prototype.addEventListener = function () {
-            this.parent.on(constant_1.contentReady, this.setDimensions, this);
-            this.parent.on(constant_1.uiUpdate, this.onPropertyChanged, this);
-        };
-        Scroll.prototype.removeEventListener = function () {
-            this.parent.off(constant_1.contentReady, this.setDimensions);
-            this.parent.off(constant_1.uiUpdate, this.onPropertyChanged);
-        };
-        Scroll.prototype.setDimensions = function () {
-            this.setWidth();
-            this.setHeight();
-            var data = { cssProperties: this.parent.getCssProperties(), module: this.getModuleName() };
-            this.parent.notify(constant_1.scrollUiUpdate, data);
-        };
-        Scroll.prototype.onPropertyChanged = function (e) {
-            this.setDimensions();
-        };
-        Scroll.prototype.destroy = function () {
-            this.removeEventListener();
-        };
-        return Scroll;
-    }());
-    exports.Scroll = Scroll;
-});
+import { formatUnit } from '@syncfusion/ej2-base';
+import { contentReady, uiUpdate, scrollUiUpdate } from '../base/constant';
+/**
+ * `Scroll` module
+ */
+var Scroll = /** @class */ (function () {
+    /**
+     * Constructor for the scrolling.
+     * @hidden
+     */
+    function Scroll(parent) {
+        this.parent = parent;
+        this.addEventListener();
+    }
+    /**
+     * For internal use only - Get the module name.
+     * @private
+     */
+    Scroll.prototype.getModuleName = function () {
+        return 'scroll';
+    };
+    /**
+     * @hidden
+     */
+    Scroll.prototype.setWidth = function () {
+        this.parent.element.style.width = formatUnit(this.parent.width);
+    };
+    /**
+     * @hidden
+     */
+    Scroll.prototype.setHeight = function () {
+        this.parent.element.style.height = formatUnit(this.parent.height);
+    };
+    /**
+     * @hidden
+     */
+    Scroll.prototype.addEventListener = function () {
+        this.parent.on(contentReady, this.setDimensions, this);
+        this.parent.on(uiUpdate, this.onPropertyChanged, this);
+    };
+    /**
+     * @hidden
+     */
+    Scroll.prototype.removeEventListener = function () {
+        this.parent.off(contentReady, this.setDimensions);
+        this.parent.off(uiUpdate, this.onPropertyChanged);
+    };
+    /**
+     * @hidden
+     */
+    Scroll.prototype.setDimensions = function () {
+        this.setWidth();
+        this.setHeight();
+        var data = { cssProperties: this.parent.getCssProperties(), module: this.getModuleName() };
+        this.parent.notify(scrollUiUpdate, data);
+    };
+    /**
+     * @hidden
+     */
+    Scroll.prototype.onPropertyChanged = function (e) {
+        this.setDimensions();
+    };
+    /**
+     * @hidden
+     */
+    Scroll.prototype.destroy = function () {
+        this.removeEventListener();
+    };
+    return Scroll;
+}());
+export { Scroll };

src/schedule/actions/touch.js

@@ -1,224 +0,230 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/constant", "../base/css-constant"], function (require, exports, ej2_base_1, ej2_base_2, events, cls) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var ScheduleTouch = (function () {
-        function ScheduleTouch(parent) {
-            this.parent = parent;
-            this.element = this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS);
-            this.touchObj = new ej2_base_1.Touch(this.element, {
-                scroll: this.scrollHandler.bind(this),
-                swipe: this.swipeHandler.bind(this),
-                tapHold: this.tapHoldHandler.bind(this),
-                swipeSettings: { swipeThresholdDistance: 1 }
-            });
-            ej2_base_1.EventHandler.add(this.element, 'transitionend', this.onTransitionEnd, this);
-            this.touchLeftDirection = this.parent.enableRtl ? 'Right' : 'Left';
-            this.touchRightDirection = this.parent.enableRtl ? 'Left' : 'Right';
+import { addClass, removeClass, Touch, remove, EventHandler, Browser } from '@syncfusion/ej2-base';
+import { closest, isNullOrUndefined } from '@syncfusion/ej2-base';
+import * as events from '../base/constant';
+import * as cls from '../base/css-constant';
+/**
+ * `touch` module is used to handle touch interactions.
+ */
+var ScheduleTouch = /** @class */ (function () {
+    function ScheduleTouch(parent) {
+        this.parent = parent;
+        this.element = this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS);
+        this.touchObj = new Touch(this.element, {
+            scroll: this.scrollHandler.bind(this),
+            swipe: this.swipeHandler.bind(this),
+            tapHold: this.tapHoldHandler.bind(this),
+            swipeSettings: { swipeThresholdDistance: 1 }
+        });
+        EventHandler.add(this.element, 'transitionend', this.onTransitionEnd, this);
+        this.touchLeftDirection = this.parent.enableRtl ? 'Right' : 'Left';
+        this.touchRightDirection = this.parent.enableRtl ? 'Left' : 'Right';
+    }
+    ScheduleTouch.prototype.scrollHandler = function (e) {
+        if (this.parent.currentView === 'Agenda' ||
+            (e.originalEvent && !isNullOrUndefined(closest(e.originalEvent.target, '.' + cls.APPOINTMENT_WRAP_CLASS)))) {
+            return;
         }
-        ScheduleTouch.prototype.scrollHandler = function (e) {
-            if (this.parent.currentView === 'Agenda' ||
-                (e.originalEvent && !ej2_base_2.isNullOrUndefined(ej2_base_2.closest(e.originalEvent.target, '.' + cls.APPOINTMENT_WRAP_CLASS)))) {
+        if (!this.timeStampStart) {
+            this.timeStampStart = Date.now();
+        }
+        if (this.element.classList.contains(cls.TRANSLATE_CLASS)) {
+            this.onTransitionEnd();
+        }
+        if (e.scrollDirection === 'Left' || e.scrollDirection === 'Right') {
+            var args = { requestType: 'dateNavigate', cancel: false, event: e.originalEvent };
+            this.parent.trigger(events.actionBegin, args);
+            if (args.cancel) {
                 return;
             }
-            if (!this.timeStampStart) {
-                this.timeStampStart = Date.now();
-            }
-            if (this.element.classList.contains(cls.TRANSLATE_CLASS)) {
-                this.onTransitionEnd();
-            }
-            if (e.scrollDirection === 'Left' || e.scrollDirection === 'Right') {
-                var args = { requestType: 'dateNavigate', cancel: false, event: e.originalEvent };
-                this.parent.trigger(events.actionBegin, args);
-                if (args.cancel) {
-                    return;
-                }
-                var scrollDiv = this.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
-                if (scrollDiv && scrollDiv.scrollWidth > scrollDiv.clientWidth) {
-                    return;
-                }
-                else {
-                    this.isScrollTriggered = true;
-                    e.originalEvent.preventDefault();
-                    e.originalEvent.stopPropagation();
-                }
-            }
-            if (e.scrollDirection === this.touchLeftDirection) {
-                if (!this.nextPanel) {
-                    this.renderPanel(cls.NEXT_PANEL_CLASS, 'next');
-                    this.nextPanel = {
-                        element: this.parent.activeView.getPanel(),
-                        selectedDate: new Date(this.parent.selectedDate.getTime())
-                    };
-                    this.setDimensions(this.nextPanel.element);
-                }
-                var x = this.parent.enableRtl ? e.distanceX : -e.distanceX;
-                this.element.style.transform = 'translatex(' + (this.getTranslateX(this.element) + x) + 'px)';
-            }
-            else if (e.scrollDirection === this.touchRightDirection) {
-                var prevWidth = 0;
-                if (!this.previousPanel) {
-                    this.renderPanel(cls.PREVIOUS_PANEL_CLASS, 'previous');
-                    this.previousPanel = {
-                        element: this.parent.activeView.getPanel(),
-                        selectedDate: new Date(this.parent.selectedDate.getTime())
-                    };
-                    this.setDimensions(this.previousPanel.element);
-                    prevWidth = this.previousPanel.element.offsetWidth;
-                }
-                var x = this.parent.enableRtl ? prevWidth - e.distanceX : -prevWidth + e.distanceX;
-                this.element.style.transform = 'translatex(' + (this.getTranslateX(this.element) + x) + 'px)';
-            }
-        };
-        ScheduleTouch.prototype.swipeHandler = function (e) {
-            if (!this.isScrollTriggered) {
+            var scrollDiv = this.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
+            if (scrollDiv && scrollDiv.scrollWidth > scrollDiv.clientWidth) {
                 return;
             }
-            this.isScrollTriggered = false;
-            if (e.swipeDirection === 'Left' || e.swipeDirection === 'Right') {
-                var time = Date.now() - this.timeStampStart;
-                var offsetDist = (e.distanceX * (ej2_base_1.Browser.isDevice ? 6 : 1.66));
-                if (offsetDist > time || (e.distanceX > (this.parent.element.offsetWidth / 2))) {
-                    this.swapPanels(e.swipeDirection);
-                    if (offsetDist > time && (e.distanceX > (this.parent.element.offsetWidth / 2))) {
-                        this.element.style.transitionDuration = ((offsetDist / time) / 10) + 's';
-                    }
-                    this.confirmSwipe(e.swipeDirection);
-                }
-                else {
-                    this.cancelSwipe();
-                }
-                var args = { requestType: 'dateNavigate', cancel: false, event: e.originalEvent };
-                this.parent.trigger(events.actionComplete, args);
-            }
             else {
-                this.cancelSwipe();
+                this.isScrollTriggered = true;
+                e.originalEvent.preventDefault();
+                e.originalEvent.stopPropagation();
             }
-            this.timeStampStart = null;
-        };
-        ScheduleTouch.prototype.tapHoldHandler = function (e) {
-            var target = ej2_base_2.closest(e.originalEvent.target, '.' + cls.APPOINTMENT_CLASS);
-            if (!ej2_base_2.isNullOrUndefined(target)) {
-                if (this.parent.isAdaptive) {
-                    var event_1 = e.originalEvent;
-                    this.parent.notify(events.tapHoldReady, { event: event_1 });
-                }
-                return;
+        }
+        if (e.scrollDirection === this.touchLeftDirection) {
+            if (!this.nextPanel) {
+                this.renderPanel(cls.NEXT_PANEL_CLASS, 'next');
+                this.nextPanel = {
+                    element: this.parent.activeView.getPanel(),
+                    selectedDate: new Date(this.parent.selectedDate.getTime())
+                };
+                this.setDimensions(this.nextPanel.element);
             }
-            target = ej2_base_2.closest(e.originalEvent.target, '.' + cls.WORK_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS + ',.'
-                + cls.HEADER_CELLS_CLASS);
-            if (!ej2_base_2.isNullOrUndefined(target)) {
-                this.parent.activeCellsData = this.parent.getCellDetails(target);
-                if (!this.parent.activeViewOptions.readonly) {
-                    this.parent.eventWindow.openEditor(this.parent.activeCellsData, 'Add');
-                }
-                return;
-            }
-        };
-        ScheduleTouch.prototype.renderPanel = function (clsName, nextPrevType) {
-            if (!this.currentPanel) {
-                this.currentPanel = {
+            var x = this.parent.enableRtl ? e.distanceX : -e.distanceX;
+            this.element.style.transform = 'translatex(' + (this.getTranslateX(this.element) + x) + 'px)';
+        }
+        else if (e.scrollDirection === this.touchRightDirection) {
+            var prevWidth = 0;
+            if (!this.previousPanel) {
+                this.renderPanel(cls.PREVIOUS_PANEL_CLASS, 'previous');
+                this.previousPanel = {
                     element: this.parent.activeView.getPanel(),
                     selectedDate: new Date(this.parent.selectedDate.getTime())
                 };
-                this.setDimensions(this.currentPanel.element);
+                this.setDimensions(this.previousPanel.element);
+                prevWidth = this.previousPanel.element.offsetWidth;
             }
-            else {
-                this.parent.setProperties({ selectedDate: this.currentPanel.selectedDate }, true);
+            var x = this.parent.enableRtl ? prevWidth - e.distanceX : -prevWidth + e.distanceX;
+            this.element.style.transform = 'translatex(' + (this.getTranslateX(this.element) + x) + 'px)';
+        }
+    };
+    ScheduleTouch.prototype.swipeHandler = function (e) {
+        if (!this.isScrollTriggered) {
+            return;
+        }
+        this.isScrollTriggered = false;
+        if (e.swipeDirection === 'Left' || e.swipeDirection === 'Right') {
+            var time = Date.now() - this.timeStampStart;
+            var offsetDist = (e.distanceX * (Browser.isDevice ? 6 : 1.66));
+            if (offsetDist > time || (e.distanceX > (this.parent.element.offsetWidth / 2))) {
+                this.swapPanels(e.swipeDirection);
+                if (offsetDist > time && (e.distanceX > (this.parent.element.offsetWidth / 2))) {
+                    this.element.style.transitionDuration = ((offsetDist / time) / 10) + 's';
+                }
+                this.confirmSwipe(e.swipeDirection);
             }
-            this.parent.setProperties({ selectedDate: this.parent.activeView.getNextPreviousDate(nextPrevType) }, true);
-            this.parent.activeView.getRenderDates();
-            this.parent.activeView.renderLayout(clsName);
-        };
-        ScheduleTouch.prototype.swapPanels = function (direction) {
-            if (direction === this.touchLeftDirection) {
-                var temp = this.nextPanel;
-                this.nextPanel = this.currentPanel;
-                this.currentPanel = temp;
-            }
             else {
-                var temp = this.previousPanel;
-                this.previousPanel = this.currentPanel;
-                this.currentPanel = temp;
-            }
-        };
-        ScheduleTouch.prototype.confirmSwipe = function (swipeDirection) {
-            var previousDate = swipeDirection === this.touchLeftDirection ? this.nextPanel.selectedDate : this.previousPanel.selectedDate;
-            var navArgs = {
-                action: 'date', cancel: false, previousDate: previousDate, currentDate: this.currentPanel.selectedDate
-            };
-            this.parent.trigger(events.navigating, navArgs);
-            if (navArgs.cancel) {
-                this.swapPanels(swipeDirection);
                 this.cancelSwipe();
-                return;
             }
-            this.parent.activeView.setPanel(this.currentPanel.element);
-            this.parent.setProperties({ selectedDate: this.currentPanel.selectedDate }, true);
-            var translateX;
-            if (this.parent.enableRtl) {
-                translateX = swipeDirection === this.touchLeftDirection ?
-                    (this.previousPanel ? this.previousPanel.element.offsetLeft : this.currentPanel.element.offsetWidth) : 0;
+            var args = { requestType: 'dateNavigate', cancel: false, event: e.originalEvent };
+            this.parent.trigger(events.actionComplete, args);
+        }
+        else {
+            this.cancelSwipe();
+        }
+        this.timeStampStart = null;
+    };
+    ScheduleTouch.prototype.tapHoldHandler = function (e) {
+        var target = closest(e.originalEvent.target, '.' + cls.APPOINTMENT_CLASS);
+        if (!isNullOrUndefined(target)) {
+            if (this.parent.isAdaptive) {
+                var event_1 = e.originalEvent;
+                this.parent.notify(events.tapHoldReady, { event: event_1 });
             }
-            else {
-                translateX = swipeDirection === this.touchLeftDirection ? -this.currentPanel.element.offsetLeft : 0;
+            return;
+        }
+        target = closest(e.originalEvent.target, '.' + cls.WORK_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS + ',.'
+            + cls.HEADER_CELLS_CLASS);
+        if (!isNullOrUndefined(target)) {
+            this.parent.activeCellsData = this.parent.getCellDetails(target);
+            if (!this.parent.activeViewOptions.readonly) {
+                this.parent.eventWindow.openEditor(this.parent.activeCellsData, 'Add');
             }
-            ej2_base_1.addClass([this.element], cls.TRANSLATE_CLASS);
-            this.element.style.transform = 'translatex(' + (translateX) + 'px)';
-            if (this.parent.headerModule) {
-                this.parent.headerModule.updateDateRange(this.parent.activeView.getDateRangeText());
-            }
-            this.parent.renderModule.refreshDataManager();
-        };
-        ScheduleTouch.prototype.cancelSwipe = function () {
-            this.parent.activeView.setPanel(this.currentPanel.element);
+            return;
+        }
+    };
+    ScheduleTouch.prototype.renderPanel = function (clsName, nextPrevType) {
+        if (!this.currentPanel) {
+            this.currentPanel = {
+                element: this.parent.activeView.getPanel(),
+                selectedDate: new Date(this.parent.selectedDate.getTime())
+            };
+            this.setDimensions(this.currentPanel.element);
+        }
+        else {
             this.parent.setProperties({ selectedDate: this.currentPanel.selectedDate }, true);
-            this.parent.activeView.getRenderDates();
-            this.parent.activeView.generateColumnLevels();
-            ej2_base_1.addClass([this.element], cls.TRANSLATE_CLASS);
-            var prevWidth = this.previousPanel ? this.previousPanel.element.offsetWidth : 0;
-            this.element.style.transform = 'translatex(' + (this.parent.enableRtl ? prevWidth : -this.currentPanel.element.offsetLeft) + 'px)';
+        }
+        this.parent.setProperties({ selectedDate: this.parent.activeView.getNextPreviousDate(nextPrevType) }, true);
+        this.parent.activeView.getRenderDates();
+        this.parent.activeView.renderLayout(clsName);
+    };
+    ScheduleTouch.prototype.swapPanels = function (direction) {
+        if (direction === this.touchLeftDirection) {
+            var temp = this.nextPanel;
+            this.nextPanel = this.currentPanel;
+            this.currentPanel = temp;
+        }
+        else {
+            var temp = this.previousPanel;
+            this.previousPanel = this.currentPanel;
+            this.currentPanel = temp;
+        }
+    };
+    ScheduleTouch.prototype.confirmSwipe = function (swipeDirection) {
+        var previousDate = swipeDirection === this.touchLeftDirection ? this.nextPanel.selectedDate : this.previousPanel.selectedDate;
+        var navArgs = {
+            action: 'date', cancel: false, previousDate: previousDate, currentDate: this.currentPanel.selectedDate
         };
-        ScheduleTouch.prototype.onTransitionEnd = function () {
-            ej2_base_1.removeClass([this.element], cls.TRANSLATE_CLASS);
-            this.element.style.transitionDuration = '';
-            this.element.style.transform = '';
-            if (this.previousPanel) {
-                ej2_base_1.remove(this.previousPanel.element);
-                this.previousPanel = null;
-                ej2_base_1.removeClass([this.currentPanel.element], cls.PREVIOUS_PANEL_CLASS);
-                ej2_base_1.addClass([this.currentPanel.element], cls.CURRENT_PANEL_CLASS);
-            }
-            if (this.nextPanel) {
-                ej2_base_1.remove(this.nextPanel.element);
-                this.nextPanel = null;
-                ej2_base_1.removeClass([this.currentPanel.element], cls.NEXT_PANEL_CLASS);
-                ej2_base_1.addClass([this.currentPanel.element], cls.CURRENT_PANEL_CLASS);
-            }
-            this.currentPanel = null;
-            this.parent.activeView.getPanel().style.width = '';
-        };
-        ScheduleTouch.prototype.getTranslateX = function (element) {
-            var style = window.getComputedStyle(element);
-            return new WebKitCSSMatrix(style.webkitTransform).m41;
-        };
-        ScheduleTouch.prototype.setDimensions = function (element) {
-            element.style.width = (this.parent.element.clientWidth) + 'px';
-        };
-        ScheduleTouch.prototype.resetValues = function () {
-            this.currentPanel = null;
+        this.parent.trigger(events.navigating, navArgs);
+        if (navArgs.cancel) {
+            this.swapPanels(swipeDirection);
+            this.cancelSwipe();
+            return;
+        }
+        this.parent.activeView.setPanel(this.currentPanel.element);
+        this.parent.setProperties({ selectedDate: this.currentPanel.selectedDate }, true);
+        var translateX;
+        if (this.parent.enableRtl) {
+            translateX = swipeDirection === this.touchLeftDirection ?
+                (this.previousPanel ? this.previousPanel.element.offsetLeft : this.currentPanel.element.offsetWidth) : 0;
+        }
+        else {
+            translateX = swipeDirection === this.touchLeftDirection ? -this.currentPanel.element.offsetLeft : 0;
+        }
+        addClass([this.element], cls.TRANSLATE_CLASS);
+        this.element.style.transform = 'translatex(' + (translateX) + 'px)';
+        if (this.parent.headerModule) {
+            this.parent.headerModule.updateDateRange(this.parent.activeView.getDateRangeText());
+        }
+        this.parent.renderModule.refreshDataManager();
+    };
+    ScheduleTouch.prototype.cancelSwipe = function () {
+        this.parent.activeView.setPanel(this.currentPanel.element);
+        this.parent.setProperties({ selectedDate: this.currentPanel.selectedDate }, true);
+        this.parent.activeView.getRenderDates();
+        this.parent.activeView.generateColumnLevels();
+        addClass([this.element], cls.TRANSLATE_CLASS);
+        var prevWidth = this.previousPanel ? this.previousPanel.element.offsetWidth : 0;
+        this.element.style.transform = 'translatex(' + (this.parent.enableRtl ? prevWidth : -this.currentPanel.element.offsetLeft) + 'px)';
+    };
+    ScheduleTouch.prototype.onTransitionEnd = function () {
+        removeClass([this.element], cls.TRANSLATE_CLASS);
+        this.element.style.transitionDuration = '';
+        this.element.style.transform = '';
+        if (this.previousPanel) {
+            remove(this.previousPanel.element);
             this.previousPanel = null;
+            removeClass([this.currentPanel.element], cls.PREVIOUS_PANEL_CLASS);
+            addClass([this.currentPanel.element], cls.CURRENT_PANEL_CLASS);
+        }
+        if (this.nextPanel) {
+            remove(this.nextPanel.element);
             this.nextPanel = null;
-            this.timeStampStart = null;
-            this.element.style.transform = '';
-            this.element.innerHTML = '';
-            ej2_base_1.removeClass([this.element], cls.TRANSLATE_CLASS);
-        };
-        ScheduleTouch.prototype.destroy = function () {
-            this.touchObj.destroy();
-            ej2_base_1.EventHandler.remove(this.element, 'transitionend', this.onTransitionEnd);
-            this.resetValues();
-        };
-        return ScheduleTouch;
-    }());
-    exports.ScheduleTouch = ScheduleTouch;
-});
+            removeClass([this.currentPanel.element], cls.NEXT_PANEL_CLASS);
+            addClass([this.currentPanel.element], cls.CURRENT_PANEL_CLASS);
+        }
+        this.currentPanel = null;
+        this.parent.activeView.getPanel().style.width = '';
+    };
+    ScheduleTouch.prototype.getTranslateX = function (element) {
+        var style = window.getComputedStyle(element);
+        return new WebKitCSSMatrix(style.webkitTransform).m41;
+    };
+    ScheduleTouch.prototype.setDimensions = function (element) {
+        element.style.width = (this.parent.element.clientWidth) + 'px';
+    };
+    ScheduleTouch.prototype.resetValues = function () {
+        this.currentPanel = null;
+        this.previousPanel = null;
+        this.nextPanel = null;
+        this.timeStampStart = null;
+        this.element.style.transform = '';
+        this.element.innerHTML = '';
+        removeClass([this.element], cls.TRANSLATE_CLASS);
+    };
+    /**
+     * @hidden
+     */
+    ScheduleTouch.prototype.destroy = function () {
+        this.touchObj.destroy();
+        EventHandler.remove(this.element, 'transitionend', this.onTransitionEnd);
+        this.resetValues();
+    };
+    return ScheduleTouch;
+}());
+export { ScheduleTouch };

src/schedule/actions/work-cells.js

@@ -1,61 +0,63 @@
-define(["require", "exports", "@syncfusion/ej2-base", "../base/constant", "../base/css-constant"], function (require, exports, ej2_base_1, event, cls) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var WorkCellInteraction = (function () {
-        function WorkCellInteraction(parent) {
-            this.parent = parent;
+import { extend, closest, isNullOrUndefined } from '@syncfusion/ej2-base';
+import * as event from '../base/constant';
+import * as cls from '../base/css-constant';
+/**
+ * Work cell interactions
+ */
+var WorkCellInteraction = /** @class */ (function () {
+    function WorkCellInteraction(parent) {
+        this.parent = parent;
+    }
+    WorkCellInteraction.prototype.cellMouseDown = function (e) {
+        this.parent.notify(event.cellMouseDown, { event: e });
+    };
+    WorkCellInteraction.prototype.cellClick = function (e) {
+        if (closest(e.target, '.' + cls.APPOINTMENT_CLASS)) {
+            return;
         }
-        WorkCellInteraction.prototype.cellMouseDown = function (e) {
-            this.parent.notify(event.cellMouseDown, { event: e });
-        };
-        WorkCellInteraction.prototype.cellClick = function (e) {
-            if (ej2_base_1.closest(e.target, '.' + cls.APPOINTMENT_CLASS)) {
+        var navigateEle = closest(e.target, '.' + cls.NAVIGATE_CLASS);
+        if (isNullOrUndefined(navigateEle) || isNullOrUndefined(this.parent.viewOptions.day) || (this.parent.currentView === 'Day')) {
+            if (this.parent.activeViewOptions.readonly) {
+                this.parent.quickPopup.quickPopupHide();
                 return;
             }
-            var navigateEle = ej2_base_1.closest(e.target, '.' + cls.NAVIGATE_CLASS);
-            if (ej2_base_1.isNullOrUndefined(navigateEle) || ej2_base_1.isNullOrUndefined(this.parent.viewOptions.day) || (this.parent.currentView === 'Day')) {
-                if (this.parent.activeViewOptions.readonly) {
-                    this.parent.quickPopup.quickPopupHide();
-                    return;
-                }
-                var target = e.currentTarget;
-                var isWorkCell = target.classList.contains(cls.WORK_CELLS_CLASS) || target.classList.contains(cls.ALLDAY_CELLS_CLASS);
-                if (isWorkCell && e.shiftKey && e.which === 1 && this.parent.keyboardInteractionModule) {
-                    this.parent.keyboardInteractionModule.onMouseSelection(e);
-                    return;
-                }
-                this.parent.activeCellsData = this.parent.getCellDetails(target);
-                var args = ej2_base_1.extend(this.parent.activeCellsData, { cancel: false, event: e, name: 'cellClick' });
-                this.parent.trigger(event.cellClick, args);
-                if (args.cancel) {
-                    return;
-                }
-                if (isWorkCell) {
-                    this.parent.selectCell(target);
-                }
-                this.parent.notify(event.cellClick, args);
-            }
-            else {
-                var date = this.parent.getDateFromElement(e.currentTarget);
-                if (!ej2_base_1.isNullOrUndefined(date) && !this.parent.isAdaptive) {
-                    this.parent.setProperties({ selectedDate: date }, true);
-                    this.parent.changeView('Day');
-                }
-            }
-        };
-        WorkCellInteraction.prototype.cellDblClick = function (e) {
-            var target = ej2_base_1.closest(e.target, '.' + cls.APPOINTMENT_CLASS);
-            if (!ej2_base_1.isNullOrUndefined(target) || this.parent.activeViewOptions.readonly) {
+            var target = e.currentTarget;
+            var isWorkCell = target.classList.contains(cls.WORK_CELLS_CLASS) || target.classList.contains(cls.ALLDAY_CELLS_CLASS);
+            if (isWorkCell && e.shiftKey && e.which === 1 && this.parent.keyboardInteractionModule) {
+                this.parent.keyboardInteractionModule.onMouseSelection(e);
                 return;
             }
-            var args = ej2_base_1.extend(this.parent.activeCellsData, { cancel: false, event: e, name: 'cellDoubleClick' });
-            this.parent.trigger(event.cellDoubleClick, args);
+            this.parent.activeCellsData = this.parent.getCellDetails(target);
+            var args = extend(this.parent.activeCellsData, { cancel: false, event: e, name: 'cellClick' });
+            this.parent.trigger(event.cellClick, args);
             if (args.cancel) {
                 return;
             }
-            this.parent.eventWindow.openEditor(this.parent.activeCellsData, 'Add');
-        };
-        return WorkCellInteraction;
-    }());
-    exports.WorkCellInteraction = WorkCellInteraction;
-});
+            if (isWorkCell) {
+                this.parent.selectCell(target);
+            }
+            this.parent.notify(event.cellClick, args);
+        }
+        else {
+            var date = this.parent.getDateFromElement(e.currentTarget);
+            if (!isNullOrUndefined(date) && !this.parent.isAdaptive) {
+                this.parent.setProperties({ selectedDate: date }, true);
+                this.parent.changeView('Day');
+            }
+        }
+    };
+    WorkCellInteraction.prototype.cellDblClick = function (e) {
+        var target = closest(e.target, '.' + cls.APPOINTMENT_CLASS);
+        if (!isNullOrUndefined(target) || this.parent.activeViewOptions.readonly) {
+            return;
+        }
+        var args = extend(this.parent.activeCellsData, { cancel: false, event: e, name: 'cellDoubleClick' });
+        this.parent.trigger(event.cellDoubleClick, args);
+        if (args.cancel) {
+            return;
+        }
+        this.parent.eventWindow.openEditor(this.parent.activeCellsData, 'Add');
+    };
+    return WorkCellInteraction;
+}());
+export { WorkCellInteraction };

src/schedule/base/constant.js

@@ -1,26 +0,50 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.cellClick = 'cellClick';
-    exports.cellDoubleClick = 'cellDoubleClick';
-    exports.actionBegin = 'actionBegin';
-    exports.actionComplete = 'actionComplete';
-    exports.actionFailure = 'actionFailure';
-    exports.navigating = 'navigating';
-    exports.renderCell = 'renderCell';
-    exports.eventClick = 'eventClick';
-    exports.eventRendered = 'eventRendered';
-    exports.dataBinding = 'dataBinding';
-    exports.dataBound = 'dataBound';
-    exports.popupOpen = 'popupOpen';
-    exports.initialLoad = 'initial-load';
-    exports.initialEnd = 'initial-end';
-    exports.dataReady = 'data-ready';
-    exports.contentReady = 'content-ready';
-    exports.scroll = 'scroll';
-    exports.scrollUiUpdate = 'scroll-ui-update';
-    exports.uiUpdate = 'ui-update';
-    exports.documentClick = 'document-click';
-    exports.cellMouseDown = 'cell-mouse-down';
-    exports.tapHoldReady = 'tap-hold-ready';
-});
+/**
+ * Constants
+ */
+/** @hidden */
+export var cellClick = 'cellClick';
+/** @hidden */
+export var cellDoubleClick = 'cellDoubleClick';
+/** @hidden */
+export var actionBegin = 'actionBegin';
+/** @hidden */
+export var actionComplete = 'actionComplete';
+/** @hidden */
+export var actionFailure = 'actionFailure';
+/** @hidden */
+export var navigating = 'navigating';
+/** @hidden */
+export var renderCell = 'renderCell';
+/** @hidden */
+export var eventClick = 'eventClick';
+/** @hidden */
+export var eventRendered = 'eventRendered';
+/** @hidden */
+export var dataBinding = 'dataBinding';
+/** @hidden */
+export var dataBound = 'dataBound';
+/** @hidden */
+export var popupOpen = 'popupOpen';
+/**
+ * Specifies schedule internal events
+ */
+/** @hidden */
+export var initialLoad = 'initial-load';
+/** @hidden */
+export var initialEnd = 'initial-end';
+/** @hidden */
+export var dataReady = 'data-ready';
+/** @hidden */
+export var contentReady = 'content-ready';
+/** @hidden */
+export var scroll = 'scroll';
+/** @hidden */
+export var scrollUiUpdate = 'scroll-ui-update';
+/** @hidden */
+export var uiUpdate = 'ui-update';
+/** @hidden */
+export var documentClick = 'document-click';
+/** @hidden */
+export var cellMouseDown = 'cell-mouse-down';
+/** @hidden */
+export var tapHoldReady = 'tap-hold-ready';

src/schedule/base/css-constant.js

@@ -1,181 +0,357 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.ROOT = 'e-schedule';
-    exports.RTL = 'e-rtl';
-    exports.DEVICE_CLASS = 'e-device';
-    exports.ICON = 'e-icons';
-    exports.ENABLE_CLASS = 'e-enable';
-    exports.DISABLE_CLASS = 'e-disable';
-    exports.TABLE_CONTAINER_CLASS = 'e-table-container';
-    exports.SCHEDULE_TABLE_CLASS = 'e-schedule-table';
-    exports.ALLDAY_CELLS_CLASS = 'e-all-day-cells';
-    exports.HEADER_POPUP_CLASS = 'e-header-popup';
-    exports.HEADER_CALENDAR_CLASS = 'e-header-calendar';
-    exports.ALLDAY_ROW_CLASS = 'e-all-day-row';
-    exports.CONTENT_TABLE_CLASS = 'e-content-table';
-    exports.WORK_CELLS_CLASS = 'e-work-cells';
-    exports.WORK_HOURS_CLASS = 'e-work-hours';
-    exports.POPUP_OPEN = 'e-popup-open';
-    exports.DATE_HEADER_WRAP_CLASS = 'e-date-header-wrap';
-    exports.DATE_HEADER_CONTAINER_CLASS = 'e-date-header-container';
-    exports.HEADER_CELLS_CLASS = 'e-header-cells';
-    exports.WORKDAY_CLASS = 'e-work-days';
-    exports.OTHERMONTH_CLASS = 'e-other-month';
-    exports.CURRENT_DAY_CLASS = 'e-current-day';
-    exports.CURRENTDATE_CLASS = 'e-current-date';
-    exports.CURRENT_PANEL_CLASS = 'e-current-panel';
-    exports.PREVIOUS_PANEL_CLASS = 'e-previous-panel';
-    exports.NEXT_PANEL_CLASS = 'e-next-panel';
-    exports.TRANSLATE_CLASS = 'e-translate';
-    exports.LEFT_INDENT_CLASS = 'e-left-indent';
-    exports.LEFT_INDENT_WRAP_CLASS = 'e-left-indent-wrap';
-    exports.TIME_CELLS_WRAP_CLASS = 'e-time-cells-wrap';
-    exports.TIME_CELLS_CLASS = 'e-time-cells';
-    exports.ALTERNATE_CELLS_CLASS = 'e-alternate-cells';
-    exports.CURRENT_TIME_CLASS = 'e-current-time';
-    exports.CURRENT_TIMELINE_CLASS = 'e-current-timeline';
-    exports.PREVIOUS_TIMELINE_CLASS = 'e-previous-timeline';
-    exports.HIDE_CHILDS_CLASS = 'e-hide-childs';
-    exports.SCROLL_CONTAINER_CLASS = 'e-scroll-container';
-    exports.WRAPPER_CLASS = 'e-wrapper';
-    exports.TIMELINE_WRAPPER_CLASS = 'e-timeline-wrapper';
-    exports.APPOINTMENT_WRAPPER_CLASS = 'e-appointment-wrapper';
-    exports.DAY_WRAPPER_CLASS = 'e-day-wrapper';
-    exports.TOOLBAR_CONTAINER = 'e-schedule-toolbar-container';
-    exports.RESOURCE_TOOLBAR_CONTAINER = 'e-schedule-resource-toolbar-container';
-    exports.HEADER_TOOLBAR = 'e-schedule-toolbar';
-    exports.RESOURCE_HEADER_TOOLBAR = 'e-schedule-resource-toolbar';
-    exports.SELECTED_CELL_CLASS = 'e-selected-cell';
-    exports.APPOINTMENT_WRAP_CLASS = 'e-appointment-wrap';
-    exports.WRAPPER_CONTAINER_CLASS = 'e-wrapper-container';
-    exports.APPOINTMENT_CONTAINER_CLASS = 'e-appointment-container';
-    exports.APPOINTMENT_CLASS = 'e-appointment';
-    exports.APPOINTMENT_BORDER = 'e-appointment-border';
-    exports.APPOINTMENT_DETAILS = 'e-appointment-details';
-    exports.SUBJECT_WRAP = 'e-subject-wrap';
-    exports.RESOURCE_NAME = 'e-resource-name';
-    exports.APPOINTMENT_TIME = 'e-time';
-    exports.TABLE_WRAP_CLASS = 'e-table-wrap';
-    exports.OUTER_TABLE_CLASS = 'e-outer-table';
-    exports.CONTENT_WRAP_CLASS = 'e-content-wrap';
-    exports.AGENDA_CELLS_CLASS = 'e-agenda-cells';
-    exports.AGENDA_CURRENT_DAY_CLASS = 'e-current-day';
-    exports.AGENDA_SELECTED_CELL = 'e-active-appointment-agenda';
-    exports.AGENDA_MONTH_HEADER_CLASS = 'e-month-header';
-    exports.AGENDA_HEADER_CLASS = 'e-day-date-header';
-    exports.AGENDA_RESOURCE_CLASS = 'e-resource-column';
-    exports.AGENDA_DATE_CLASS = 'e-date-column';
-    exports.NAVIGATE_CLASS = 'e-navigate';
-    exports.DATE_HEADER_CLASS = 'e-date-header';
-    exports.AGENDA_DAY_BORDER_CLASS = 'e-day-border';
-    exports.DATE_BORDER_CLASS = 'e-date-border';
-    exports.AGENDA_DAY_PADDING_CLASS = 'e-day-padding';
-    exports.DATE_TIME_CLASS = 'e-date-time';
-    exports.DATE_TIME_WRAPPER_CLASS = 'e-date-time-wrapper';
-    exports.AGENDA_EMPTY_EVENT_CLASS = 'e-empty-event';
-    exports.AGENDA_NO_EVENT_CLASS = 'e-no-event';
-    exports.APPOINTMENT_INDICATOR_CLASS = 'e-appointment-indicator';
-    exports.EVENT_INDICATOR_CLASS = 'e-indicator';
-    exports.EVENT_ICON_UP_CLASS = 'e-up-icon';
-    exports.EVENT_ICON_DOWN_CLASS = 'e-down-icon';
-    exports.EVENT_ICON_LEFT_CLASS = 'e-left-icon';
-    exports.EVENT_ICON_RIGHT_CLASS = 'e-right-icon';
-    exports.EVENT_RECURRENCE_ICON_CLASS = 'e-recurrence-icon';
-    exports.EVENT_RECURRENCE_EDIT_ICON_CLASS = 'e-recurrence-edit-icon';
-    exports.HEADER_ROW_CLASS = 'e-header-row';
-    exports.ALLDAY_APPOINTMENT_WRAPPER_CLASS = 'e-all-day-appointment-wrapper';
-    exports.ALLDAY_APPOINTMENT_CLASS = 'e-all-day-appointment';
-    exports.EVENT_COUNT_CLASS = 'e-appointment-hide';
-    exports.ROW_COUNT_WRAPPER_CLASS = 'e-row-count-wrapper';
-    exports.ALLDAY_APPOINTMENT_SECTION_CLASS = 'e-all-day-appointment-section';
-    exports.APPOINTMENT_ROW_EXPAND_CLASS = 'e-appointment-expand';
-    exports.APPOINTMENT_ROW_COLLAPSE_CLASS = 'e-appointment-collapse';
-    exports.MORE_INDICATOR_CLASS = 'e-more-indicator';
-    exports.CELL_POPUP_CLASS = 'e-cell-popup';
-    exports.EVENT_POPUP_CLASS = 'e-event-popup';
-    exports.MULTIPLE_EVENT_POPUP_CLASS = 'e-multiple-event-popup';
-    exports.POPUP_HEADER_CLASS = 'e-popup-header';
-    exports.POPUP_HEADER_ICON_WRAPPER = 'e-header-icon-wrapper';
-    exports.POPUP_CONTENT_CLASS = 'e-popup-content';
-    exports.POPUP_FOOTER_CLASS = 'e-popup-footer';
-    exports.DATE_TIME_DETAILS_CLASS = 'e-date-time-details';
-    exports.RECURRENCE_SUMMARY_CLASS = 'e-recurrence-summary';
-    exports.QUICK_POPUP_EVENT_DETAILS_CLASS = 'e-event-details';
-    exports.EVENT_CREATE_CLASS = 'e-event-create';
-    exports.EDIT_EVENT_CLASS = 'e-event-edit';
-    exports.DELETE_EVENT_CLASS = 'e-event-delete';
-    exports.TEXT_ELLIPSIS = 'e-text-ellipsis';
-    exports.MORE_POPUP_WRAPPER_CLASS = 'e-more-popup-wrapper';
-    exports.MORE_EVENT_POPUP_CLASS = 'e-more-event-popup';
-    exports.MORE_EVENT_HEADER_CLASS = 'e-more-event-header';
-    exports.MORE_EVENT_DATE_HEADER_CLASS = 'e-more-event-date-header';
-    exports.MORE_EVENT_HEADER_DAY_CLASS = 'e-header-day';
-    exports.MORE_EVENT_HEADER_DATE_CLASS = 'e-header-date';
-    exports.MORE_EVENT_CLOSE_CLASS = 'e-more-event-close';
-    exports.MORE_EVENT_CONTENT_CLASS = 'e-more-event-content';
-    exports.MORE_EVENT_WRAPPER_CLASS = 'e-more-appointment-wrapper';
-    exports.QUICK_DIALOG_CLASS = 'e-quick-dialog';
-    exports.QUICK_DIALOG_EDIT_EVENT_CLASS = 'e-quick-dialog-edit-event';
-    exports.QUICK_DIALOG_EDIT_SERIES_CLASS = 'e-quick-dialog-edit-series';
-    exports.QUICK_DIALOG_DELETE_CLASS = 'e-quick-dialog-delete';
-    exports.QUICK_DIALOG_CANCEL_CLASS = 'e-quick-dialog-cancel';
-    exports.QUICK_DIALOG_ALERT_BTN_CLASS = 'e-quick-dialog-alert-btn';
-    exports.EVENT_WINDOW_DIALOG_CLASS = 'e-schedule-dialog';
-    exports.FORM_CONTAINER_CLASS = 'e-form-container';
-    exports.FORM_CLASS = 'e-schedule-form';
-    exports.EVENT_WINDOW_ALLDAY_TZ_DIV_CLASS = 'e-all-day-time-zone-row';
-    exports.EVENT_WINDOW_ALL_DAY_CLASS = 'e-all-day';
-    exports.TIME_ZONE_CLASS = 'e-time-zone';
-    exports.TIME_ZONE_ICON_CLASS = 'e-time-zone-icon';
-    exports.TIME_ZONE_DETAILS_CLASS = 'e-time-zone-details';
-    exports.EVENT_WINDOW_REPEAT_DIV_CLASS = 'e-repeat-parent-row';
-    exports.EVENT_WINDOW_REPEAT_CLASS = 'e-repeat';
-    exports.EVENT_WINDOW_TITLE_LOCATION_DIV_CLASS = 'e-title-location-row';
-    exports.SUBJECT_CLASS = 'e-subject';
-    exports.LOCATION_CLASS = 'e-location';
-    exports.LOCATION_ICON_CLASS = 'e-location-icon';
-    exports.LOCATION_DETAILS_CLASS = 'e-location-details';
-    exports.EVENT_WINDOW_START_END_DIV_CLASS = 'e-start-end-row';
-    exports.EVENT_WINDOW_START_CLASS = 'e-start';
-    exports.EVENT_WINDOW_END_CLASS = 'e-end';
-    exports.EVENT_WINDOW_RESOURCES_DIV_CLASS = 'e-resources-row';
-    exports.DESCRIPTION_CLASS = 'e-description';
-    exports.DESCRIPTION_ICON_CLASS = 'e-description-icon';
-    exports.DESCRIPTION_DETAILS_CLASS = 'e-description-details';
-    exports.EVENT_WINDOW_TIME_ZONE_DIV_CLASS = 'e-time-zone-row';
-    exports.EVENT_WINDOW_START_TZ_CLASS = 'e-start-time-zone';
-    exports.EVENT_WINDOW_END_TZ_CLASS = 'e-end-time-zone';
-    exports.EVENT_WINDOW_BACK_ICON_CLASS = 'e-back-icon';
-    exports.EVENT_WINDOW_SAVE_ICON_CLASS = 'e-save-icon';
-    exports.EVENT_WINDOW_DELETE_BUTTON_CLASS = 'e-event-delete';
-    exports.EVENT_WINDOW_CANCEL_BUTTON_CLASS = 'e-event-cancel';
-    exports.EVENT_WINDOW_SAVE_BUTTON_CLASS = 'e-event-save';
-    exports.EVENT_WINDOW_DIALOG_PARENT_CLASS = 'e-dialog-parent';
-    exports.EVENT_WINDOW_TITLE_TEXT_CLASS = 'e-title-text';
-    exports.EVENT_WINDOW_ICON_DISABLE_CLASS = 'e-icon-disable';
-    exports.EDIT_CLASS = 'e-edit';
-    exports.EDIT_ICON_CLASS = 'e-edit-icon';
-    exports.DELETE_CLASS = 'e-delete';
-    exports.DELETE_ICON_CLASS = 'e-delete-icon';
-    exports.CLOSE_CLASS = 'e-close';
-    exports.CLOSE_ICON_CLASS = 'e-close-icon';
-    exports.ERROR_VALIDATION_CLASS = 'e-schedule-error';
-    exports.EVENT_TOOLTIP_ROOT_CLASS = 'e-schedule-event-tooltip';
-    exports.ALLDAY_ROW_ANIMATE_CLASS = 'e-animate';
-    exports.TIMESCALE_DISABLE = 'e-timescale-disable';
-    exports.DISABLE_DATE = 'e-disable-date';
-    exports.HIDDEN_CLASS = 'e-hidden';
-    exports.POPUP_WRAPPER_CLASS = 'e-quick-popup-wrapper';
-    exports.POPUP_TABLE_CLASS = 'e-popup-table';
-    exports.RESOURCE_MENU = 'e-resource-menu';
-    exports.RESOURCE_MENU_ICON = 'e-icon-menu';
-    exports.RESOURCE_LEVEL_TITLE = 'e-resource-level-title';
-    exports.RESOURCE_TREE = 'e-resource-tree';
-    exports.RESOURCE_TREE_POPUP_OVERLAY = 'e-resource-tree-popup-overlay';
-    exports.RESOURCE_TREE_POPUP = 'e-resource-tree-popup';
-    exports.RESOURCE_CLASS = 'e-resource';
-    exports.RESOURCE_ICON_CLASS = 'e-resource-icon';
-    exports.RESOURCE_DETAILS_CLASS = 'e-resource-details';
-    exports.DATE_TIME_ICON_CLASS = 'e-date-time-icon';
-});
+/**
+ * CSS Constants
+ */
+/** @hidden */
+export var ROOT = 'e-schedule';
+/** @hidden */
+export var RTL = 'e-rtl';
+/** @hidden */
+export var DEVICE_CLASS = 'e-device';
+/** @hidden */
+export var ICON = 'e-icons';
+/** @hidden */
+export var ENABLE_CLASS = 'e-enable';
+/** @hidden */
+export var DISABLE_CLASS = 'e-disable';
+/** @hidden */
+export var TABLE_CONTAINER_CLASS = 'e-table-container';
+/** @hidden */
+export var SCHEDULE_TABLE_CLASS = 'e-schedule-table';
+/** @hidden */
+export var ALLDAY_CELLS_CLASS = 'e-all-day-cells';
+/** @hidden */
+export var HEADER_POPUP_CLASS = 'e-header-popup';
+/** @hidden */
+export var HEADER_CALENDAR_CLASS = 'e-header-calendar';
+/** @hidden */
+export var ALLDAY_ROW_CLASS = 'e-all-day-row';
+/** @hidden */
+export var CONTENT_TABLE_CLASS = 'e-content-table';
+/** @hidden */
+export var WORK_CELLS_CLASS = 'e-work-cells';
+/** @hidden */
+export var WORK_HOURS_CLASS = 'e-work-hours';
+/** @hidden */
+export var POPUP_OPEN = 'e-popup-open';
+/** @hidden */
+export var DATE_HEADER_WRAP_CLASS = 'e-date-header-wrap';
+/** @hidden */
+export var DATE_HEADER_CONTAINER_CLASS = 'e-date-header-container';
+/** @hidden */
+export var HEADER_CELLS_CLASS = 'e-header-cells';
+/** @hidden */
+export var WORKDAY_CLASS = 'e-work-days';
+/** @hidden */
+export var OTHERMONTH_CLASS = 'e-other-month';
+/** @hidden */
+export var CURRENT_DAY_CLASS = 'e-current-day';
+/** @hidden */
+export var CURRENTDATE_CLASS = 'e-current-date';
+/** @hidden */
+export var CURRENT_PANEL_CLASS = 'e-current-panel';
+/** @hidden */
+export var PREVIOUS_PANEL_CLASS = 'e-previous-panel';
+/** @hidden */
+export var NEXT_PANEL_CLASS = 'e-next-panel';
+/** @hidden */
+export var TRANSLATE_CLASS = 'e-translate';
+/** @hidden */
+export var LEFT_INDENT_CLASS = 'e-left-indent';
+/** @hidden */
+export var LEFT_INDENT_WRAP_CLASS = 'e-left-indent-wrap';
+/** @hidden */
+export var TIME_CELLS_WRAP_CLASS = 'e-time-cells-wrap';
+/** @hidden */
+export var TIME_CELLS_CLASS = 'e-time-cells';
+/** @hidden */
+export var ALTERNATE_CELLS_CLASS = 'e-alternate-cells';
+/** @hidden */
+export var CURRENT_TIME_CLASS = 'e-current-time';
+/** @hidden */
+export var CURRENT_TIMELINE_CLASS = 'e-current-timeline';
+/** @hidden */
+export var PREVIOUS_TIMELINE_CLASS = 'e-previous-timeline';
+/** @hidden */
+export var HIDE_CHILDS_CLASS = 'e-hide-childs';
+/** @hidden */
+export var SCROLL_CONTAINER_CLASS = 'e-scroll-container';
+/** @hidden */
+export var WRAPPER_CLASS = 'e-wrapper';
+/** @hidden */
+export var TIMELINE_WRAPPER_CLASS = 'e-timeline-wrapper';
+/** @hidden */
+export var APPOINTMENT_WRAPPER_CLASS = 'e-appointment-wrapper';
+/** @hidden */
+export var DAY_WRAPPER_CLASS = 'e-day-wrapper';
+/** @hidden */
+export var TOOLBAR_CONTAINER = 'e-schedule-toolbar-container';
+/** @hidden */
+export var RESOURCE_TOOLBAR_CONTAINER = 'e-schedule-resource-toolbar-container';
+/** @hidden */
+export var HEADER_TOOLBAR = 'e-schedule-toolbar';
+/** @hidden */
+export var RESOURCE_HEADER_TOOLBAR = 'e-schedule-resource-toolbar';
+/** @hidden */
+export var SELECTED_CELL_CLASS = 'e-selected-cell';
+/** @hidden */
+export var APPOINTMENT_WRAP_CLASS = 'e-appointment-wrap';
+/** @hidden */
+export var WRAPPER_CONTAINER_CLASS = 'e-wrapper-container';
+/** @hidden */
+export var APPOINTMENT_CONTAINER_CLASS = 'e-appointment-container';
+/** @hidden */
+export var APPOINTMENT_CLASS = 'e-appointment';
+/** @hidden */
+export var APPOINTMENT_BORDER = 'e-appointment-border';
+/** @hidden */
+export var APPOINTMENT_DETAILS = 'e-appointment-details';
+/** @hidden */
+export var SUBJECT_WRAP = 'e-subject-wrap';
+/** @hidden */
+export var RESOURCE_NAME = 'e-resource-name';
+/** @hidden */
+export var APPOINTMENT_TIME = 'e-time';
+/** @hidden */
+export var TABLE_WRAP_CLASS = 'e-table-wrap';
+/** @hidden */
+export var OUTER_TABLE_CLASS = 'e-outer-table';
+/** @hidden */
+export var CONTENT_WRAP_CLASS = 'e-content-wrap';
+/** @hidden */
+export var AGENDA_CELLS_CLASS = 'e-agenda-cells';
+/** @hidden */
+export var AGENDA_CURRENT_DAY_CLASS = 'e-current-day';
+/** @hidden */
+export var AGENDA_SELECTED_CELL = 'e-active-appointment-agenda';
+/** @hidden */
+export var AGENDA_MONTH_HEADER_CLASS = 'e-month-header';
+/** @hidden */
+export var AGENDA_HEADER_CLASS = 'e-day-date-header';
+/** @hidden */
+export var AGENDA_RESOURCE_CLASS = 'e-resource-column';
+/** @hidden */
+export var AGENDA_DATE_CLASS = 'e-date-column';
+/** @hidden */
+export var NAVIGATE_CLASS = 'e-navigate';
+/** @hidden */
+export var DATE_HEADER_CLASS = 'e-date-header';
+/** @hidden */
+export var AGENDA_DAY_BORDER_CLASS = 'e-day-border';
+/** @hidden */
+export var DATE_BORDER_CLASS = 'e-date-border';
+/** @hidden */
+export var AGENDA_DAY_PADDING_CLASS = 'e-day-padding';
+/** @hidden */
+export var DATE_TIME_CLASS = 'e-date-time';
+/** @hidden */
+export var DATE_TIME_WRAPPER_CLASS = 'e-date-time-wrapper';
+/** @hidden */
+export var AGENDA_EMPTY_EVENT_CLASS = 'e-empty-event';
+/** @hidden */
+export var AGENDA_NO_EVENT_CLASS = 'e-no-event';
+/** @hidden */
+export var APPOINTMENT_INDICATOR_CLASS = 'e-appointment-indicator';
+/** @hidden */
+export var EVENT_INDICATOR_CLASS = 'e-indicator';
+/** @hidden */
+export var EVENT_ICON_UP_CLASS = 'e-up-icon';
+/** @hidden */
+export var EVENT_ICON_DOWN_CLASS = 'e-down-icon';
+/** @hidden */
+export var EVENT_ICON_LEFT_CLASS = 'e-left-icon';
+/** @hidden */
+export var EVENT_ICON_RIGHT_CLASS = 'e-right-icon';
+/** @hidden */
+export var EVENT_RECURRENCE_ICON_CLASS = 'e-recurrence-icon';
+/** @hidden */
+export var EVENT_RECURRENCE_EDIT_ICON_CLASS = 'e-recurrence-edit-icon';
+/** @hidden */
+export var HEADER_ROW_CLASS = 'e-header-row';
+/** @hidden */
+export var ALLDAY_APPOINTMENT_WRAPPER_CLASS = 'e-all-day-appointment-wrapper';
+/** @hidden */
+export var ALLDAY_APPOINTMENT_CLASS = 'e-all-day-appointment';
+/** @hidden */
+export var EVENT_COUNT_CLASS = 'e-appointment-hide';
+/** @hidden */
+export var ROW_COUNT_WRAPPER_CLASS = 'e-row-count-wrapper';
+/** @hidden */
+export var ALLDAY_APPOINTMENT_SECTION_CLASS = 'e-all-day-appointment-section';
+/** @hidden */
+export var APPOINTMENT_ROW_EXPAND_CLASS = 'e-appointment-expand';
+/** @hidden */
+export var APPOINTMENT_ROW_COLLAPSE_CLASS = 'e-appointment-collapse';
+/** @hidden */
+export var MORE_INDICATOR_CLASS = 'e-more-indicator';
+/** @hidden */
+export var CELL_POPUP_CLASS = 'e-cell-popup';
+/** @hidden */
+export var EVENT_POPUP_CLASS = 'e-event-popup';
+/** @hidden */
+export var MULTIPLE_EVENT_POPUP_CLASS = 'e-multiple-event-popup';
+/** @hidden */
+export var POPUP_HEADER_CLASS = 'e-popup-header';
+/** @hidden */
+export var POPUP_HEADER_ICON_WRAPPER = 'e-header-icon-wrapper';
+/** @hidden */
+export var POPUP_CONTENT_CLASS = 'e-popup-content';
+/** @hidden */
+export var POPUP_FOOTER_CLASS = 'e-popup-footer';
+/** @hidden */
+export var DATE_TIME_DETAILS_CLASS = 'e-date-time-details';
+/** @hidden */
+export var RECURRENCE_SUMMARY_CLASS = 'e-recurrence-summary';
+/** @hidden */
+export var QUICK_POPUP_EVENT_DETAILS_CLASS = 'e-event-details';
+/** @hidden */
+export var EVENT_CREATE_CLASS = 'e-event-create';
+/** @hidden */
+export var EDIT_EVENT_CLASS = 'e-event-edit';
+/** @hidden */
+export var DELETE_EVENT_CLASS = 'e-event-delete';
+/** @hidden */
+export var TEXT_ELLIPSIS = 'e-text-ellipsis';
+/** @hidden */
+export var MORE_POPUP_WRAPPER_CLASS = 'e-more-popup-wrapper';
+/** @hidden */
+export var MORE_EVENT_POPUP_CLASS = 'e-more-event-popup';
+/** @hidden */
+export var MORE_EVENT_HEADER_CLASS = 'e-more-event-header';
+/** @hidden */
+export var MORE_EVENT_DATE_HEADER_CLASS = 'e-more-event-date-header';
+/** @hidden */
+export var MORE_EVENT_HEADER_DAY_CLASS = 'e-header-day';
+/** @hidden */
+export var MORE_EVENT_HEADER_DATE_CLASS = 'e-header-date';
+/** @hidden */
+export var MORE_EVENT_CLOSE_CLASS = 'e-more-event-close';
+/** @hidden */
+export var MORE_EVENT_CONTENT_CLASS = 'e-more-event-content';
+/** @hidden */
+export var MORE_EVENT_WRAPPER_CLASS = 'e-more-appointment-wrapper';
+/** @hidden */
+export var QUICK_DIALOG_CLASS = 'e-quick-dialog';
+/** @hidden */
+export var QUICK_DIALOG_EDIT_EVENT_CLASS = 'e-quick-dialog-edit-event';
+/** @hidden */
+export var QUICK_DIALOG_EDIT_SERIES_CLASS = 'e-quick-dialog-edit-series';
+/** @hidden */
+export var QUICK_DIALOG_DELETE_CLASS = 'e-quick-dialog-delete';
+/** @hidden */
+export var QUICK_DIALOG_CANCEL_CLASS = 'e-quick-dialog-cancel';
+/** @hidden */
+export var QUICK_DIALOG_ALERT_BTN_CLASS = 'e-quick-dialog-alert-btn';
+/** @hidden */
+export var EVENT_WINDOW_DIALOG_CLASS = 'e-schedule-dialog';
+/** @hidden */
+export var FORM_CONTAINER_CLASS = 'e-form-container';
+/** @hidden */
+export var FORM_CLASS = 'e-schedule-form';
+/** @hidden */
+export var EVENT_WINDOW_ALLDAY_TZ_DIV_CLASS = 'e-all-day-time-zone-row';
+/** @hidden */
+export var EVENT_WINDOW_ALL_DAY_CLASS = 'e-all-day';
+/** @hidden */
+export var TIME_ZONE_CLASS = 'e-time-zone';
+/** @hidden */
+export var TIME_ZONE_ICON_CLASS = 'e-time-zone-icon';
+/** @hidden */
+export var TIME_ZONE_DETAILS_CLASS = 'e-time-zone-details';
+/** @hidden */
+export var EVENT_WINDOW_REPEAT_DIV_CLASS = 'e-repeat-parent-row';
+/** @hidden */
+export var EVENT_WINDOW_REPEAT_CLASS = 'e-repeat';
+/** @hidden */
+export var EVENT_WINDOW_TITLE_LOCATION_DIV_CLASS = 'e-title-location-row';
+/** @hidden */
+export var SUBJECT_CLASS = 'e-subject';
+/** @hidden */
+export var LOCATION_CLASS = 'e-location';
+/** @hidden */
+export var LOCATION_ICON_CLASS = 'e-location-icon';
+/** @hidden */
+export var LOCATION_DETAILS_CLASS = 'e-location-details';
+/** @hidden */
+export var EVENT_WINDOW_START_END_DIV_CLASS = 'e-start-end-row';
+/** @hidden */
+export var EVENT_WINDOW_START_CLASS = 'e-start';
+/** @hidden */
+export var EVENT_WINDOW_END_CLASS = 'e-end';
+/** @hidden */
+export var EVENT_WINDOW_RESOURCES_DIV_CLASS = 'e-resources-row';
+/** @hidden */
+export var DESCRIPTION_CLASS = 'e-description';
+/** @hidden */
+export var DESCRIPTION_ICON_CLASS = 'e-description-icon';
+/** @hidden */
+export var DESCRIPTION_DETAILS_CLASS = 'e-description-details';
+/** @hidden */
+export var EVENT_WINDOW_TIME_ZONE_DIV_CLASS = 'e-time-zone-row';
+/** @hidden */
+export var EVENT_WINDOW_START_TZ_CLASS = 'e-start-time-zone';
+/** @hidden */
+export var EVENT_WINDOW_END_TZ_CLASS = 'e-end-time-zone';
+/** @hidden */
+export var EVENT_WINDOW_BACK_ICON_CLASS = 'e-back-icon';
+/** @hidden */
+export var EVENT_WINDOW_SAVE_ICON_CLASS = 'e-save-icon';
+/** @hidden */
+export var EVENT_WINDOW_DELETE_BUTTON_CLASS = 'e-event-delete';
+/** @hidden */
+export var EVENT_WINDOW_CANCEL_BUTTON_CLASS = 'e-event-cancel';
+/** @hidden */
+export var EVENT_WINDOW_SAVE_BUTTON_CLASS = 'e-event-save';
+/** @hidden */
+export var EVENT_WINDOW_DIALOG_PARENT_CLASS = 'e-dialog-parent';
+/** @hidden */
+export var EVENT_WINDOW_TITLE_TEXT_CLASS = 'e-title-text';
+/** @hidden */
+export var EVENT_WINDOW_ICON_DISABLE_CLASS = 'e-icon-disable';
+/** @hidden */
+export var EDIT_CLASS = 'e-edit';
+/** @hidden */
+export var EDIT_ICON_CLASS = 'e-edit-icon';
+/** @hidden */
+export var DELETE_CLASS = 'e-delete';
+/** @hidden */
+export var DELETE_ICON_CLASS = 'e-delete-icon';
+/** @hidden */
+export var CLOSE_CLASS = 'e-close';
+/** @hidden */
+export var CLOSE_ICON_CLASS = 'e-close-icon';
+/** @hidden */
+export var ERROR_VALIDATION_CLASS = 'e-schedule-error';
+/** @hidden */
+export var EVENT_TOOLTIP_ROOT_CLASS = 'e-schedule-event-tooltip';
+/** @hidden */
+export var ALLDAY_ROW_ANIMATE_CLASS = 'e-animate';
+/** @hidden */
+export var TIMESCALE_DISABLE = 'e-timescale-disable';
+/** @hidden */
+export var DISABLE_DATE = 'e-disable-date';
+/** @hidden */
+export var HIDDEN_CLASS = 'e-hidden';
+/** @hidden */
+export var POPUP_WRAPPER_CLASS = 'e-quick-popup-wrapper';
+/** @hidden */
+export var POPUP_TABLE_CLASS = 'e-popup-table';
+/** @hidden */
+export var RESOURCE_MENU = 'e-resource-menu';
+/** @hidden */
+export var RESOURCE_MENU_ICON = 'e-icon-menu';
+/** @hidden */
+export var RESOURCE_LEVEL_TITLE = 'e-resource-level-title';
+/** @hidden */
+export var RESOURCE_TREE = 'e-resource-tree';
+/** @hidden */
+export var RESOURCE_TREE_POPUP_OVERLAY = 'e-resource-tree-popup-overlay';
+/** @hidden */
+export var RESOURCE_TREE_POPUP = 'e-resource-tree-popup';
+/** @hidden */
+export var RESOURCE_CLASS = 'e-resource';
+/** @hidden */
+export var RESOURCE_ICON_CLASS = 'e-resource-icon';
+/** @hidden */
+export var RESOURCE_DETAILS_CLASS = 'e-resource-details';
+/** @hidden */
+export var DATE_TIME_ICON_CLASS = 'e-date-time-icon';

src/schedule/base/interface.js

@@ -1,4 +0,1 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-});
+

src/schedule/base/resource.js

@@ -1,485 +0,490 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "@syncfusion/ej2-navigations", "@syncfusion/ej2-popups", "../actions/data", "../base/css-constant", "../base/constant", "../base/util"], function (require, exports, ej2_base_1, ej2_data_1, ej2_navigations_1, ej2_popups_1, data_1, cls, events, util) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var ResourceBase = (function () {
-        function ResourceBase(parent) {
-            this.resourceCollection = [];
-            this.parent = parent;
+import { extend, isNullOrUndefined, createElement, EventHandler, addClass, removeClass, remove, closest } from '@syncfusion/ej2-base';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+import { TreeView } from '@syncfusion/ej2-navigations';
+import { Popup } from '@syncfusion/ej2-popups';
+import { Data } from '../actions/data';
+import * as cls from '../base/css-constant';
+import * as events from '../base/constant';
+import * as util from '../base/util';
+var ResourceBase = /** @class */ (function () {
+    function ResourceBase(parent) {
+        this.resourceCollection = [];
+        this.parent = parent;
+    }
+    ResourceBase.prototype.renderResourceHeader = function () {
+        var resourceWrapper = createElement('div', { className: cls.RESOURCE_TOOLBAR_CONTAINER });
+        resourceWrapper.innerHTML = '<div class="' + cls.RESOURCE_HEADER_TOOLBAR + '"><div class="' + cls.RESOURCE_MENU + '">' +
+            '<div class="e-icons ' + cls.RESOURCE_MENU_ICON + '"></div></div><div class="' + cls.RESOURCE_LEVEL_TITLE + '"></div></div>';
+        if (this.parent.currentView === 'MonthAgenda') {
+            var target = this.parent.activeView.getPanel().querySelector('.' + cls.CONTENT_WRAP_CLASS);
+            target.insertBefore(resourceWrapper, target.children[1]);
         }
-        ResourceBase.prototype.renderResourceHeader = function () {
-            var resourceWrapper = ej2_base_1.createElement('div', { className: cls.RESOURCE_TOOLBAR_CONTAINER });
-            resourceWrapper.innerHTML = '<div class="' + cls.RESOURCE_HEADER_TOOLBAR + '"><div class="' + cls.RESOURCE_MENU + '">' +
-                '<div class="e-icons ' + cls.RESOURCE_MENU_ICON + '"></div></div><div class="' + cls.RESOURCE_LEVEL_TITLE + '"></div></div>';
-            if (this.parent.currentView === 'MonthAgenda') {
-                var target = this.parent.activeView.getPanel().querySelector('.' + cls.CONTENT_WRAP_CLASS);
-                target.insertBefore(resourceWrapper, target.children[1]);
-            }
-            else {
-                this.parent.element.insertBefore(resourceWrapper, this.parent.element.children[2]);
-            }
-            this.renderResourceHeaderText();
-            ej2_base_1.EventHandler.add(resourceWrapper.querySelector('.' + cls.RESOURCE_MENU_ICON), 'click', this.menuClick, this);
-        };
-        ResourceBase.prototype.renderResourceTree = function () {
-            this.popupOverlay = ej2_base_1.createElement('div', { className: cls.RESOURCE_TREE_POPUP_OVERLAY });
-            var treeWrapper = ej2_base_1.createElement('div', { className: cls.RESOURCE_TREE_POPUP + ' e-popup-close' });
-            if (this.parent.currentView === 'MonthAgenda') {
-                var target = this.parent.activeView.getPanel().querySelector('.' + cls.WRAPPER_CONTAINER_CLASS);
-                target.insertBefore(treeWrapper, target.children[0]);
-                target.appendChild(this.popupOverlay);
-            }
-            else {
-                this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS).appendChild(treeWrapper);
-                this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS).appendChild(this.popupOverlay);
-            }
-            var resourceTree = ej2_base_1.createElement('div', { className: cls.RESOURCE_TREE });
-            treeWrapper.appendChild(resourceTree);
-            this.treeViewObj = new ej2_navigations_1.TreeView({
-                cssClass: this.parent.cssClass,
-                enableRtl: this.parent.enableRtl,
-                fields: {
-                    dataSource: this.generateTreeData(),
-                    id: 'resourceId',
-                    text: 'resourceName',
-                    child: 'resourceChild'
-                },
-                nodeTemplate: this.parent.resourceHeaderTemplate,
-                nodeClicked: this.resourceClick.bind(this)
-            });
-            this.treeViewObj.appendTo(resourceTree);
-            this.treeViewObj.expandAll();
-            this.treePopup = new ej2_popups_1.Popup(treeWrapper, {
-                targetType: 'relative',
-                content: this.treeViewObj.element,
-                enableRtl: this.parent.enableRtl,
-                hideAnimation: { name: 'SlideLeftOut', duration: 500 },
-                showAnimation: { name: 'SlideLeftIn', duration: 500 },
-                viewPortElement: this.parent.element.querySelector('.' + (this.parent.currentView === 'MonthAgenda' ?
-                    cls.WRAPPER_CONTAINER_CLASS : cls.TABLE_CONTAINER_CLASS))
-            });
-            this.parent.on(events.documentClick, this.documentClick, this);
-        };
-        ResourceBase.prototype.generateTreeData = function () {
-            var _this = this;
-            var treeCollection = [];
-            this.resourceTreeLevel.forEach(function (resTree, index) {
-                var treeHandler = function (treeLevel, index, levelId) {
-                    var resource = _this.resourceCollection[index];
-                    var treeArgs = {
-                        resourceId: levelId,
-                        resourceName: treeLevel.resourceData[resource.textField]
-                    };
-                    if (treeLevel.child.length > 0) {
-                        treeArgs.resourceChild = [];
-                    }
-                    var count = 1;
-                    for (var _i = 0, _a = treeLevel.child; _i < _a.length; _i++) {
-                        var tree = _a[_i];
-                        treeArgs.resourceChild.push(treeHandler(tree, index + 1, levelId + '-' + count));
-                        count += 1;
-                    }
-                    return treeArgs;
+        else {
+            this.parent.element.insertBefore(resourceWrapper, this.parent.element.children[2]);
+        }
+        this.renderResourceHeaderText();
+        EventHandler.add(resourceWrapper.querySelector('.' + cls.RESOURCE_MENU_ICON), 'click', this.menuClick, this);
+    };
+    ResourceBase.prototype.renderResourceTree = function () {
+        this.popupOverlay = createElement('div', { className: cls.RESOURCE_TREE_POPUP_OVERLAY });
+        var treeWrapper = createElement('div', { className: cls.RESOURCE_TREE_POPUP + ' e-popup-close' });
+        if (this.parent.currentView === 'MonthAgenda') {
+            var target = this.parent.activeView.getPanel().querySelector('.' + cls.WRAPPER_CONTAINER_CLASS);
+            target.insertBefore(treeWrapper, target.children[0]);
+            target.appendChild(this.popupOverlay);
+        }
+        else {
+            this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS).appendChild(treeWrapper);
+            this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS).appendChild(this.popupOverlay);
+        }
+        var resourceTree = createElement('div', { className: cls.RESOURCE_TREE });
+        treeWrapper.appendChild(resourceTree);
+        this.treeViewObj = new TreeView({
+            cssClass: this.parent.cssClass,
+            enableRtl: this.parent.enableRtl,
+            fields: {
+                dataSource: this.generateTreeData(),
+                id: 'resourceId',
+                text: 'resourceName',
+                child: 'resourceChild'
+            },
+            nodeTemplate: this.parent.resourceHeaderTemplate,
+            nodeClicked: this.resourceClick.bind(this)
+        });
+        this.treeViewObj.appendTo(resourceTree);
+        this.treeViewObj.expandAll();
+        this.treePopup = new Popup(treeWrapper, {
+            targetType: 'relative',
+            content: this.treeViewObj.element,
+            enableRtl: this.parent.enableRtl,
+            hideAnimation: { name: 'SlideLeftOut', duration: 500 },
+            showAnimation: { name: 'SlideLeftIn', duration: 500 },
+            viewPortElement: this.parent.element.querySelector('.' + (this.parent.currentView === 'MonthAgenda' ?
+                cls.WRAPPER_CONTAINER_CLASS : cls.TABLE_CONTAINER_CLASS))
+        });
+        this.parent.on(events.documentClick, this.documentClick, this);
+    };
+    ResourceBase.prototype.generateTreeData = function () {
+        var _this = this;
+        var treeCollection = [];
+        this.resourceTreeLevel.forEach(function (resTree, index) {
+            var treeHandler = function (treeLevel, index, levelId) {
+                var resource = _this.resourceCollection[index];
+                var treeArgs = {
+                    resourceId: levelId,
+                    resourceName: treeLevel.resourceData[resource.textField]
                 };
-                treeCollection.push(treeHandler(resTree, 0, (index + 1).toString()));
+                if (treeLevel.child.length > 0) {
+                    treeArgs.resourceChild = [];
+                }
+                var count = 1;
+                for (var _i = 0, _a = treeLevel.child; _i < _a.length; _i++) {
+                    var tree = _a[_i];
+                    treeArgs.resourceChild.push(treeHandler(tree, index + 1, levelId + '-' + count));
+                    count += 1;
+                }
+                return treeArgs;
+            };
+            treeCollection.push(treeHandler(resTree, 0, (index + 1).toString()));
+        });
+        return treeCollection;
+    };
+    ResourceBase.prototype.renderResourceHeaderText = function () {
+        var _this = this;
+        var resource = this.lastResourceLevel[this.parent.uiStateValues.groupIndex];
+        var headerCollection = [];
+        resource.groupOrder.forEach(function (level, index) {
+            var resourceLevel = _this.resourceCollection[index];
+            var resourceText = resourceLevel.dataSource.filter(function (resData) {
+                return resData[resourceLevel.idField] === level;
             });
-            return treeCollection;
-        };
-        ResourceBase.prototype.renderResourceHeaderText = function () {
-            var _this = this;
-            var resource = this.lastResourceLevel[this.parent.uiStateValues.groupIndex];
-            var headerCollection = [];
-            resource.groupOrder.forEach(function (level, index) {
-                var resourceLevel = _this.resourceCollection[index];
-                var resourceText = resourceLevel.dataSource.filter(function (resData) {
-                    return resData[resourceLevel.idField] === level;
-                });
-                var resourceName = ej2_base_1.createElement('div', {
-                    className: cls.RESOURCE_NAME,
-                    innerHTML: resourceText[0][resourceLevel.textField]
-                });
-                headerCollection.push(resourceName);
-                var levelIcon = ej2_base_1.createElement('div', { className: 'e-icons e-icon-next' });
-                headerCollection.push(levelIcon);
+            var resourceName = createElement('div', {
+                className: cls.RESOURCE_NAME,
+                innerHTML: resourceText[0][resourceLevel.textField]
             });
-            headerCollection.pop();
-            var target = (this.parent.currentView === 'MonthAgenda') ? this.parent.activeView.getPanel() : this.parent.element;
-            var headerWrapper = target.querySelector('.' + cls.RESOURCE_LEVEL_TITLE);
-            headerWrapper.innerHTML = '';
-            headerCollection.forEach(function (element) { return headerWrapper.appendChild(element); });
-            if (this.lastResourceLevel.length === 1) {
-                ej2_base_1.addClass([this.parent.element.querySelector('.' + cls.RESOURCE_MENU)], cls.DISABLE_CLASS);
-            }
-        };
-        ResourceBase.prototype.menuClick = function (event) {
-            if (this.parent.element.querySelector('.' + cls.RESOURCE_TREE_POPUP).classList.contains('e-popup-open')) {
-                this.treePopup.hide();
-                ej2_base_1.removeClass([this.popupOverlay], 'e-enable');
-            }
-            else {
-                var treeNodes = this.treeViewObj.element.querySelectorAll('.e-list-item:not(.e-has-child)');
-                ej2_base_1.removeClass(treeNodes, 'e-active');
-                ej2_base_1.addClass([treeNodes[this.parent.uiStateValues.groupIndex]], 'e-active');
-                this.treePopup.show();
-                ej2_base_1.addClass([this.popupOverlay], 'e-enable');
-            }
-        };
-        ResourceBase.prototype.resourceClick = function (event) {
-            if (!event.node.classList.contains('e-has-child')) {
-                this.treePopup.hide();
-                var treeNodes = [].slice.call(this.treeViewObj.element.querySelectorAll('.e-list-item:not(.e-has-child)'));
-                this.parent.uiStateValues.groupIndex = treeNodes.indexOf(event.node);
-                this.parent.renderModule.render(this.parent.currentView, false);
-                var processed = this.parent.eventBase.processData(this.parent.eventsData);
-                this.parent.notify(events.dataReady, { processedData: processed });
-            }
-            event.event.preventDefault();
-        };
-        ResourceBase.prototype.documentClick = function (args) {
-            if (ej2_base_1.closest(args.event.target, '.' + cls.RESOURCE_TREE_POPUP)) {
-                return;
-            }
-            var treeWrapper = this.parent.element.querySelector('.' + cls.RESOURCE_TREE_POPUP);
-            if (treeWrapper && treeWrapper.classList.contains('e-popup-open')) {
-                this.treePopup.hide();
-                ej2_base_1.removeClass([this.popupOverlay], 'e-enable');
-            }
-        };
-        ResourceBase.prototype.bindResourcesData = function (isSetModel) {
-            var _this = this;
-            this.parent.showSpinner();
-            var promises = [];
-            for (var i = 0; i < this.parent.resources.length; i++) {
-                var dataModule = new data_1.Data(this.parent.resources[i].dataSource, this.parent.resources[i].query);
-                promises.push(dataModule.getData(dataModule.generateQuery()));
-            }
-            Promise.all(promises).then(function (e) { return _this.dataManagerSuccess(e, isSetModel); })
-                .catch(function (e) { return _this.dataManagerFailure(e); });
-        };
-        ResourceBase.prototype.dataManagerSuccess = function (e, isSetModel) {
-            if (this.parent.isDestroyed) {
-                return;
-            }
-            for (var i = 0, length_1 = e.length; i < length_1; i++) {
-                this.parent.resources[i].dataSource = e[i].result;
-            }
-            this.parent.setProperties({ resources: this.parent.resources }, true);
-            this.parent.renderElements(isSetModel);
-            if (isSetModel) {
-                this.parent.eventWindow.refreshResourceDataSource();
-            }
-        };
-        ResourceBase.prototype.setResourceCollection = function () {
-            var requiredResources = [];
-            this.resourceCollection = [];
-            this.colorIndex = null;
-            if (this.parent.activeViewOptions.group.resources.length > 0) {
-                for (var _i = 0, _a = this.parent.activeViewOptions.group.resources; _i < _a.length; _i++) {
-                    var resource = _a[_i];
-                    var index_1 = util.findIndexInData(this.parent.resources, 'name', resource);
-                    if (index_1 >= 0) {
-                        requiredResources.push(this.parent.resources[index_1]);
-                    }
+            headerCollection.push(resourceName);
+            var levelIcon = createElement('div', { className: 'e-icons e-icon-next' });
+            headerCollection.push(levelIcon);
+        });
+        headerCollection.pop();
+        var target = (this.parent.currentView === 'MonthAgenda') ? this.parent.activeView.getPanel() : this.parent.element;
+        var headerWrapper = target.querySelector('.' + cls.RESOURCE_LEVEL_TITLE);
+        headerWrapper.innerHTML = '';
+        headerCollection.forEach(function (element) { return headerWrapper.appendChild(element); });
+        if (this.lastResourceLevel.length === 1) {
+            addClass([this.parent.element.querySelector('.' + cls.RESOURCE_MENU)], cls.DISABLE_CLASS);
+        }
+    };
+    ResourceBase.prototype.menuClick = function (event) {
+        if (this.parent.element.querySelector('.' + cls.RESOURCE_TREE_POPUP).classList.contains('e-popup-open')) {
+            this.treePopup.hide();
+            removeClass([this.popupOverlay], 'e-enable');
+        }
+        else {
+            var treeNodes = this.treeViewObj.element.querySelectorAll('.e-list-item:not(.e-has-child)');
+            removeClass(treeNodes, 'e-active');
+            addClass([treeNodes[this.parent.uiStateValues.groupIndex]], 'e-active');
+            this.treePopup.show();
+            addClass([this.popupOverlay], 'e-enable');
+        }
+    };
+    ResourceBase.prototype.resourceClick = function (event) {
+        if (!event.node.classList.contains('e-has-child')) {
+            this.treePopup.hide();
+            var treeNodes = [].slice.call(this.treeViewObj.element.querySelectorAll('.e-list-item:not(.e-has-child)'));
+            this.parent.uiStateValues.groupIndex = treeNodes.indexOf(event.node);
+            this.parent.renderModule.render(this.parent.currentView, false);
+            var processed = this.parent.eventBase.processData(this.parent.eventsData);
+            this.parent.notify(events.dataReady, { processedData: processed });
+        }
+        event.event.preventDefault();
+    };
+    ResourceBase.prototype.documentClick = function (args) {
+        if (closest(args.event.target, '.' + cls.RESOURCE_TREE_POPUP)) {
+            return;
+        }
+        var treeWrapper = this.parent.element.querySelector('.' + cls.RESOURCE_TREE_POPUP);
+        if (treeWrapper && treeWrapper.classList.contains('e-popup-open')) {
+            this.treePopup.hide();
+            removeClass([this.popupOverlay], 'e-enable');
+        }
+    };
+    ResourceBase.prototype.bindResourcesData = function (isSetModel) {
+        var _this = this;
+        this.parent.showSpinner();
+        var promises = [];
+        for (var i = 0; i < this.parent.resources.length; i++) {
+            var dataModule = new Data(this.parent.resources[i].dataSource, this.parent.resources[i].query);
+            promises.push(dataModule.getData(dataModule.generateQuery()));
+        }
+        Promise.all(promises).then(function (e) { return _this.dataManagerSuccess(e, isSetModel); })
+            .catch(function (e) { return _this.dataManagerFailure(e); });
+    };
+    ResourceBase.prototype.dataManagerSuccess = function (e, isSetModel) {
+        if (this.parent.isDestroyed) {
+            return;
+        }
+        for (var i = 0, length_1 = e.length; i < length_1; i++) {
+            this.parent.resources[i].dataSource = e[i].result;
+        }
+        this.parent.setProperties({ resources: this.parent.resources }, true);
+        this.parent.renderElements(isSetModel);
+        if (isSetModel) {
+            this.parent.eventWindow.refreshResourceDataSource();
+        }
+    };
+    ResourceBase.prototype.setResourceCollection = function () {
+        var requiredResources = [];
+        this.resourceCollection = [];
+        this.colorIndex = null;
+        if (this.parent.activeViewOptions.group.resources.length > 0) {
+            for (var _i = 0, _a = this.parent.activeViewOptions.group.resources; _i < _a.length; _i++) {
+                var resource = _a[_i];
+                var index_1 = util.findIndexInData(this.parent.resources, 'name', resource);
+                if (index_1 >= 0) {
+                    requiredResources.push(this.parent.resources[index_1]);
                 }
             }
-            else if (this.parent.resources.length > 0) {
-                requiredResources = this.parent.resources;
+        }
+        else if (this.parent.resources.length > 0) {
+            requiredResources = this.parent.resources;
+        }
+        var index = 0;
+        for (var _b = 0, requiredResources_1 = requiredResources; _b < requiredResources_1.length; _b++) {
+            var resource = requiredResources_1[_b];
+            var resources = {
+                field: resource.field,
+                title: resource.title,
+                name: resource.name,
+                allowMultiple: resource.allowMultiple,
+                dataSource: resource.dataSource,
+                idField: resource.idField,
+                textField: resource.textField,
+                groupIDField: resource.groupIDField,
+                colorField: resource.colorField,
+                startHourField: resource.startHourField,
+                endHourField: resource.endHourField,
+                workDaysField: resource.workDaysField,
+                cssClassField: resource.cssClassField
+            };
+            if (resource.name === this.parent.eventSettings.resourceColorField) {
+                this.colorIndex = index;
             }
-            var index = 0;
-            for (var _b = 0, requiredResources_1 = requiredResources; _b < requiredResources_1.length; _b++) {
-                var resource = requiredResources_1[_b];
-                var resources = {
-                    field: resource.field,
-                    title: resource.title,
-                    name: resource.name,
-                    allowMultiple: resource.allowMultiple,
-                    dataSource: resource.dataSource,
-                    idField: resource.idField,
-                    textField: resource.textField,
-                    groupIDField: resource.groupIDField,
-                    colorField: resource.colorField,
-                    startHourField: resource.startHourField,
-                    endHourField: resource.endHourField,
-                    workDaysField: resource.workDaysField,
-                    cssClassField: resource.cssClassField
-                };
-                if (resource.name === this.parent.eventSettings.resourceColorField) {
-                    this.colorIndex = index;
+            index++;
+            this.resourceCollection.push(resources);
+        }
+        if (isNullOrUndefined(this.colorIndex)) {
+            this.colorIndex = this.resourceCollection.length - 1;
+        }
+        if (this.parent.uiStateValues.isGroupAdaptive &&
+            isNullOrUndefined(this.resourceCollection.slice(-1)[0].dataSource[this.parent.uiStateValues.groupIndex])) {
+            this.parent.uiStateValues.groupIndex = 0;
+        }
+    };
+    ResourceBase.prototype.generateResourceLevels = function (innerDates) {
+        var _this = this;
+        var resources = this.resourceCollection;
+        var resTreeGroup = [];
+        var lastColumnDates = [];
+        var group = function (resources, index, prevResource, prevResourceData, prevOrder) {
+            var resTree = [];
+            var resource = resources[0];
+            if (resource) {
+                var data = void 0;
+                if (prevResourceData && _this.parent.activeViewOptions.group.byGroupID) {
+                    var id = prevResourceData[prevResource.idField];
+                    data = new DataManager(resource.dataSource).executeLocal(new Query().where(resource.groupIDField, 'equal', id));
                 }
-                index++;
-                this.resourceCollection.push(resources);
-            }
-            if (ej2_base_1.isNullOrUndefined(this.colorIndex)) {
-                this.colorIndex = this.resourceCollection.length - 1;
-            }
-            if (this.parent.uiStateValues.isGroupAdaptive &&
-                ej2_base_1.isNullOrUndefined(this.resourceCollection.slice(-1)[0].dataSource[this.parent.uiStateValues.groupIndex])) {
-                this.parent.uiStateValues.groupIndex = 0;
-            }
-        };
-        ResourceBase.prototype.generateResourceLevels = function (innerDates) {
-            var _this = this;
-            var resources = this.resourceCollection;
-            var resTreeGroup = [];
-            var lastColumnDates = [];
-            var group = function (resources, index, prevResource, prevResourceData, prevOrder) {
-                var resTree = [];
-                var resource = resources[0];
-                if (resource) {
-                    var data = void 0;
-                    if (prevResourceData && _this.parent.activeViewOptions.group.byGroupID) {
-                        var id = prevResourceData[prevResource.idField];
-                        data = new ej2_data_1.DataManager(resource.dataSource).executeLocal(new ej2_data_1.Query().where(resource.groupIDField, 'equal', id));
+                else {
+                    data = resource.dataSource;
+                }
+                for (var i = 0; i < data.length; i++) {
+                    var groupOrder = [];
+                    if (prevOrder && prevOrder.length > 0) {
+                        groupOrder = groupOrder.concat(prevOrder);
                     }
-                    else {
-                        data = resource.dataSource;
+                    groupOrder.push(data[i][resource.idField]);
+                    var items = group(resources.slice(1), index + 1, resource, data[i], groupOrder);
+                    // Here validate child item empty top level resource only
+                    if (index === 0 && items.length === 0 && _this.resourceCollection.length > 1) {
+                        continue;
                     }
-                    for (var i = 0; i < data.length; i++) {
-                        var groupOrder = [];
-                        if (prevOrder && prevOrder.length > 0) {
-                            groupOrder = groupOrder.concat(prevOrder);
+                    var dateCol = [];
+                    var renderDates = _this.parent.activeView.renderDates;
+                    var resWorkDays = void 0;
+                    if (!_this.parent.activeViewOptions.group.byDate && index + 1 === _this.resourceCollection.length) {
+                        var workDays = data[i][resource.workDaysField];
+                        var resStartHour = data[i][resource.startHourField];
+                        var resEndHour = data[i][resource.endHourField];
+                        if (workDays && workDays.length > 0) {
+                            renderDates = _this.parent.activeView.getRenderDates(workDays);
+                            resWorkDays = workDays;
+                            dateCol = _this.parent.activeView.getDateSlots(renderDates, workDays);
                         }
-                        groupOrder.push(data[i][resource.idField]);
-                        var items = group(resources.slice(1), index + 1, resource, data[i], groupOrder);
-                        if (index === 0 && items.length === 0 && _this.resourceCollection.length > 1) {
-                            continue;
+                        else {
+                            resWorkDays = _this.parent.activeViewOptions.workDays;
+                            dateCol = innerDates;
                         }
-                        var dateCol = [];
-                        var renderDates = _this.parent.activeView.renderDates;
-                        var resWorkDays = void 0;
-                        if (!_this.parent.activeViewOptions.group.byDate && index + 1 === _this.resourceCollection.length) {
-                            var workDays = data[i][resource.workDaysField];
-                            var resStartHour = data[i][resource.startHourField];
-                            var resEndHour = data[i][resource.endHourField];
-                            if (workDays && workDays.length > 0) {
-                                renderDates = _this.parent.activeView.getRenderDates(workDays);
-                                resWorkDays = workDays;
-                                dateCol = _this.parent.activeView.getDateSlots(renderDates, workDays);
-                            }
-                            else {
-                                resWorkDays = _this.parent.activeViewOptions.workDays;
-                                dateCol = innerDates;
-                            }
-                            var dateSlots = _this.generateCustomHours(dateCol, resStartHour, resEndHour, groupOrder);
-                            lastColumnDates = lastColumnDates.concat(dateSlots);
-                        }
-                        var resCssClass = data[i][resource.cssClassField];
-                        var slotData = {
-                            type: 'resourceHeader', className: ['e-resource-cells'],
-                            resourceLevelIndex: index, groupOrder: groupOrder,
-                            resource: resource, resourceData: data[i],
-                            colSpan: _this.parent.activeViewOptions.group.byDate ? 1 : dateCol.length,
-                            renderDates: renderDates, workDays: resWorkDays, cssClass: resCssClass,
-                            child: items
-                        };
-                        resTree.push(slotData);
+                        var dateSlots = _this.generateCustomHours(dateCol, resStartHour, resEndHour, groupOrder);
+                        lastColumnDates = lastColumnDates.concat(dateSlots);
                     }
-                    if (!resTreeGroup[index]) {
-                        resTreeGroup[index] = [];
-                    }
-                    resTreeGroup[index].push(resTree);
-                    return resTree;
+                    var resCssClass = data[i][resource.cssClassField];
+                    var slotData = {
+                        type: 'resourceHeader', className: ['e-resource-cells'],
+                        resourceLevelIndex: index, groupOrder: groupOrder,
+                        resource: resource, resourceData: data[i],
+                        colSpan: _this.parent.activeViewOptions.group.byDate ? 1 : dateCol.length,
+                        renderDates: renderDates, workDays: resWorkDays, cssClass: resCssClass,
+                        child: items
+                    };
+                    resTree.push(slotData);
                 }
-                return [];
-            };
-            this.resourceTreeLevel = group(resources, 0);
-            return this.generateHeaderLevels(resTreeGroup, lastColumnDates, innerDates);
-        };
-        ResourceBase.prototype.generateCustomHours = function (renderDates, startHour, endHour, groupOrder) {
-            var dateSlots = ej2_base_1.extend([], renderDates, null, true);
-            for (var _i = 0, dateSlots_1 = dateSlots; _i < dateSlots_1.length; _i++) {
-                var dateSlot = dateSlots_1[_i];
-                if (startHour) {
-                    dateSlot.startHour = this.parent.globalize.parseDate(startHour, { skeleton: 'Hm' });
+                if (!resTreeGroup[index]) {
+                    resTreeGroup[index] = [];
                 }
-                if (endHour) {
-                    dateSlot.endHour = this.parent.globalize.parseDate(endHour, { skeleton: 'Hm' });
-                }
-                if (groupOrder) {
-                    dateSlot.groupOrder = groupOrder;
-                }
+                resTreeGroup[index].push(resTree);
+                return resTree;
             }
-            return dateSlots;
+            return [];
         };
-        ResourceBase.prototype.generateHeaderLevels = function (resTreeGroup, lastColumnDates, headerDates) {
-            var headerLevels = [];
-            for (var i = resTreeGroup.length - 1; i >= 0; i--) {
-                var temp = 0;
-                for (var _i = 0, _a = resTreeGroup[i]; _i < _a.length; _i++) {
-                    var currentLevelChilds = _a[_i];
-                    for (var _b = 0, currentLevelChilds_1 = currentLevelChilds; _b < currentLevelChilds_1.length; _b++) {
-                        var currentLevelChild = currentLevelChilds_1[_b];
-                        if (resTreeGroup[i + 1]) {
-                            var nextLevelChilds = resTreeGroup[i + 1][temp];
-                            var colSpan = 0;
-                            for (var _c = 0, nextLevelChilds_1 = nextLevelChilds; _c < nextLevelChilds_1.length; _c++) {
-                                var nextLevelChild = nextLevelChilds_1[_c];
-                                if (!this.parent.activeViewOptions.group.byGroupID || (this.parent.activeViewOptions.group.byGroupID &&
-                                    nextLevelChild.resourceData[nextLevelChild.resource.groupIDField] ===
-                                        currentLevelChild.resourceData[currentLevelChild.resource.idField])) {
-                                    colSpan += nextLevelChild.colSpan;
-                                }
+        this.resourceTreeLevel = group(resources, 0);
+        return this.generateHeaderLevels(resTreeGroup, lastColumnDates, innerDates);
+    };
+    ResourceBase.prototype.generateCustomHours = function (renderDates, startHour, endHour, groupOrder) {
+        var dateSlots = extend([], renderDates, null, true);
+        for (var _i = 0, dateSlots_1 = dateSlots; _i < dateSlots_1.length; _i++) {
+            var dateSlot = dateSlots_1[_i];
+            if (startHour) {
+                dateSlot.startHour = this.parent.globalize.parseDate(startHour, { skeleton: 'Hm' });
+            }
+            if (endHour) {
+                dateSlot.endHour = this.parent.globalize.parseDate(endHour, { skeleton: 'Hm' });
+            }
+            if (groupOrder) {
+                dateSlot.groupOrder = groupOrder;
+            }
+        }
+        return dateSlots;
+    };
+    ResourceBase.prototype.generateHeaderLevels = function (resTreeGroup, lastColumnDates, headerDates) {
+        var headerLevels = [];
+        for (var i = resTreeGroup.length - 1; i >= 0; i--) {
+            var temp = 0;
+            for (var _i = 0, _a = resTreeGroup[i]; _i < _a.length; _i++) {
+                var currentLevelChilds = _a[_i];
+                for (var _b = 0, currentLevelChilds_1 = currentLevelChilds; _b < currentLevelChilds_1.length; _b++) {
+                    var currentLevelChild = currentLevelChilds_1[_b];
+                    if (resTreeGroup[i + 1]) {
+                        var nextLevelChilds = resTreeGroup[i + 1][temp];
+                        var colSpan = 0;
+                        for (var _c = 0, nextLevelChilds_1 = nextLevelChilds; _c < nextLevelChilds_1.length; _c++) {
+                            var nextLevelChild = nextLevelChilds_1[_c];
+                            if (!this.parent.activeViewOptions.group.byGroupID || (this.parent.activeViewOptions.group.byGroupID &&
+                                nextLevelChild.resourceData[nextLevelChild.resource.groupIDField] ===
+                                    currentLevelChild.resourceData[currentLevelChild.resource.idField])) {
+                                colSpan += nextLevelChild.colSpan;
                             }
-                            currentLevelChild.colSpan = colSpan;
                         }
-                        currentLevelChild.groupIndex = temp;
-                        temp++;
-                        headerLevels[currentLevelChild.resourceLevelIndex] = headerLevels[currentLevelChild.resourceLevelIndex] || [];
-                        headerLevels[currentLevelChild.resourceLevelIndex].push(currentLevelChild);
+                        currentLevelChild.colSpan = colSpan;
                     }
+                    currentLevelChild.groupIndex = temp;
+                    temp++;
+                    headerLevels[currentLevelChild.resourceLevelIndex] = headerLevels[currentLevelChild.resourceLevelIndex] || [];
+                    headerLevels[currentLevelChild.resourceLevelIndex].push(currentLevelChild);
                 }
             }
-            this.lastResourceLevel = headerLevels.slice(-1)[0];
-            if (!this.parent.activeViewOptions.group.byDate) {
-                var index = 0;
-                for (var _d = 0, _e = this.lastResourceLevel; _d < _e.length; _d++) {
-                    var lastLevelResource = _e[_d];
-                    for (var i = 0; i < lastLevelResource.colSpan; i++) {
-                        lastColumnDates[index].groupIndex = lastLevelResource.groupIndex;
-                        index++;
-                    }
+        }
+        this.lastResourceLevel = headerLevels.slice(-1)[0];
+        if (!this.parent.activeViewOptions.group.byDate) {
+            var index = 0;
+            for (var _d = 0, _e = this.lastResourceLevel; _d < _e.length; _d++) {
+                var lastLevelResource = _e[_d];
+                for (var i = 0; i < lastLevelResource.colSpan; i++) {
+                    lastColumnDates[index].groupIndex = lastLevelResource.groupIndex;
+                    index++;
                 }
-                headerLevels.push(lastColumnDates);
-                return headerLevels;
             }
-            var dateHeaderLevels = [];
-            var levels = ej2_base_1.extend([], headerLevels, null, true);
-            var dateColSpan = 0;
-            for (var _f = 0, _g = levels[0]; _f < _g.length; _f++) {
-                var firstRowTd = _g[_f];
-                dateColSpan += firstRowTd.colSpan;
-            }
-            var datesColumn = [];
-            for (var _h = 0, headerDates_1 = headerDates; _h < headerDates_1.length; _h++) {
-                var headerDate = headerDates_1[_h];
-                headerDate.colSpan = dateColSpan;
-                datesColumn.push(headerDate);
-                var resGroup = ej2_base_1.extend([], levels, null, true);
-                for (var k = 0, length_2 = resGroup.length; k < length_2; k++) {
-                    if (k === resGroup.length - 1) {
-                        for (var _j = 0, _k = resGroup[k]; _j < _k.length; _j++) {
-                            var resTd = _k[_j];
-                            resTd.date = headerDate.date;
-                            resTd.workDays = headerDate.workDays;
-                            resTd.startHour = headerDate.startHour;
-                            resTd.endHour = headerDate.endHour;
-                        }
+            headerLevels.push(lastColumnDates);
+            return headerLevels;
+        }
+        var dateHeaderLevels = [];
+        var levels = extend([], headerLevels, null, true);
+        var dateColSpan = 0;
+        for (var _f = 0, _g = levels[0]; _f < _g.length; _f++) {
+            var firstRowTd = _g[_f];
+            dateColSpan += firstRowTd.colSpan;
+        }
+        var datesColumn = [];
+        for (var _h = 0, headerDates_1 = headerDates; _h < headerDates_1.length; _h++) {
+            var headerDate = headerDates_1[_h];
+            headerDate.colSpan = dateColSpan;
+            datesColumn.push(headerDate);
+            var resGroup = extend([], levels, null, true);
+            for (var k = 0, length_2 = resGroup.length; k < length_2; k++) {
+                if (k === resGroup.length - 1) {
+                    for (var _j = 0, _k = resGroup[k]; _j < _k.length; _j++) {
+                        var resTd = _k[_j];
+                        resTd.date = headerDate.date;
+                        resTd.workDays = headerDate.workDays;
+                        resTd.startHour = headerDate.startHour;
+                        resTd.endHour = headerDate.endHour;
                     }
-                    if (!dateHeaderLevels[k]) {
-                        dateHeaderLevels[k] = [];
-                    }
-                    dateHeaderLevels[k] = dateHeaderLevels[k].concat(resGroup[k]);
                 }
-            }
-            dateHeaderLevels.unshift(datesColumn);
-            return dateHeaderLevels;
-        };
-        ResourceBase.prototype.setResourceValues = function (eventObj, isCrud) {
-            var _this = this;
-            var setValues = function (index, field, value) {
-                if (_this.resourceCollection[index].allowMultiple && (!isCrud || isCrud && _this.parent.activeViewOptions.group.allowGroupEdit)) {
-                    eventObj[field] = [value];
+                if (!dateHeaderLevels[k]) {
+                    dateHeaderLevels[k] = [];
                 }
-                else {
-                    eventObj[field] = value;
-                }
-            };
-            var groupIndex = this.parent.uiStateValues.isGroupAdaptive ? this.parent.uiStateValues.groupIndex :
-                this.parent.activeCellsData.groupIndex;
-            if (this.parent.activeViewOptions.group.resources.length > 0 && !ej2_base_1.isNullOrUndefined(groupIndex)) {
-                var groupOrder = this.lastResourceLevel[groupIndex].groupOrder;
-                for (var index = 0; index < this.resourceCollection.length; index++) {
-                    setValues(index, this.resourceCollection[index].field, groupOrder[index]);
-                }
+                dateHeaderLevels[k] = dateHeaderLevels[k].concat(resGroup[k]);
             }
-            else if (this.parent.resources.length > 0) {
-                for (var index = 0; index < this.resourceCollection.length; index++) {
-                    var data = this.resourceCollection[index].dataSource[0];
-                    setValues(index, this.resourceCollection[index].field, data[this.resourceCollection[index].idField]);
-                }
+        }
+        dateHeaderLevels.unshift(datesColumn);
+        return dateHeaderLevels;
+    };
+    ResourceBase.prototype.setResourceValues = function (eventObj, isCrud) {
+        var _this = this;
+        var setValues = function (index, field, value) {
+            if (_this.resourceCollection[index].allowMultiple && (!isCrud || isCrud && _this.parent.activeViewOptions.group.allowGroupEdit)) {
+                eventObj[field] = [value];
             }
-        };
-        ResourceBase.prototype.getResourceColor = function (eventObj, groupOrder) {
-            var resource = this.resourceCollection[this.colorIndex];
-            if (ej2_base_1.isNullOrUndefined(groupOrder) && this.parent.activeViewOptions.group.allowGroupEdit && resource.allowMultiple) {
-                return undefined;
+            else {
+                eventObj[field] = value;
             }
-            var id = ej2_base_1.isNullOrUndefined(groupOrder) ? eventObj[resource.field] : groupOrder[this.colorIndex];
-            var data = this.filterData(resource.dataSource, resource.idField, 'equal', id);
-            if (data.length > 0) {
-                return data[0][resource.colorField];
-            }
-            return undefined;
         };
-        ResourceBase.prototype.getCssClass = function (eventObj) {
-            var resource = this.resourceCollection.slice(-1)[0];
-            if (this.parent.activeViewOptions.group.allowGroupEdit && resource.allowMultiple) {
-                return undefined;
+        var groupIndex = this.parent.uiStateValues.isGroupAdaptive ? this.parent.uiStateValues.groupIndex :
+            this.parent.activeCellsData.groupIndex;
+        if (this.parent.activeViewOptions.group.resources.length > 0 && !isNullOrUndefined(groupIndex)) {
+            var groupOrder = this.lastResourceLevel[groupIndex].groupOrder;
+            for (var index = 0; index < this.resourceCollection.length; index++) {
+                setValues(index, this.resourceCollection[index].field, groupOrder[index]);
             }
-            var data = this.filterData(resource.dataSource, resource.idField, 'equal', eventObj[resource.field]);
-            if (data.length > 0) {
-                return data[0][resource.cssClassField];
+        }
+        else if (this.parent.resources.length > 0) {
+            for (var index = 0; index < this.resourceCollection.length; index++) {
+                var data = this.resourceCollection[index].dataSource[0];
+                setValues(index, this.resourceCollection[index].field, data[this.resourceCollection[index].idField]);
             }
+        }
+    };
+    ResourceBase.prototype.getResourceColor = function (eventObj, groupOrder) {
+        var resource = this.resourceCollection[this.colorIndex];
+        if (isNullOrUndefined(groupOrder) && this.parent.activeViewOptions.group.allowGroupEdit && resource.allowMultiple) {
             return undefined;
-        };
-        ResourceBase.prototype.filterData = function (dataSource, field, operator, value) {
-            return new ej2_data_1.DataManager(dataSource).executeLocal(new ej2_data_1.Query().where(field, operator, value));
-        };
-        ResourceBase.prototype.dataManagerFailure = function (e) {
-            if (this.parent.isDestroyed) {
-                return;
+        }
+        var id = isNullOrUndefined(groupOrder) ? eventObj[resource.field] : groupOrder[this.colorIndex];
+        var data = this.filterData(resource.dataSource, resource.idField, 'equal', id);
+        if (data.length > 0) {
+            return data[0][resource.colorField];
+        }
+        return undefined;
+    };
+    ResourceBase.prototype.getCssClass = function (eventObj) {
+        var resource = this.resourceCollection.slice(-1)[0];
+        if (this.parent.activeViewOptions.group.allowGroupEdit && resource.allowMultiple) {
+            return undefined;
+        }
+        var data = this.filterData(resource.dataSource, resource.idField, 'equal', eventObj[resource.field]);
+        if (data.length > 0) {
+            return data[0][resource.cssClassField];
+        }
+        return undefined;
+    };
+    ResourceBase.prototype.filterData = function (dataSource, field, operator, value) {
+        return new DataManager(dataSource).executeLocal(new Query().where(field, operator, value));
+    };
+    ResourceBase.prototype.dataManagerFailure = function (e) {
+        if (this.parent.isDestroyed) {
+            return;
+        }
+        this.parent.trigger(events.actionFailure, { error: e });
+        this.parent.hideSpinner();
+    };
+    ResourceBase.prototype.addResource = function (resources, name, index) {
+        for (var i = 0, length_3 = this.parent.resources.length; i < length_3; i++) {
+            var resource = this.parent.resources[i];
+            if (resource.name === name) {
+                resource.dataSource.splice(index, 0, resources);
+                break;
             }
-            this.parent.trigger(events.actionFailure, { error: e });
-            this.parent.hideSpinner();
-        };
-        ResourceBase.prototype.addResource = function (resources, name, index) {
-            for (var i = 0, length_3 = this.parent.resources.length; i < length_3; i++) {
-                var resource = this.parent.resources[i];
-                if (resource.name === name) {
-                    resource.dataSource.splice(index, 0, resources);
-                    break;
-                }
+        }
+        this.bindResourcesData(true);
+    };
+    ResourceBase.prototype.removeResource = function (resourceId, name) {
+        var _this = this;
+        var _loop_1 = function (i, length_4) {
+            var resource = this_1.parent.resources[i];
+            if (resource.name === name) {
+                resource.dataSource.forEach(function (data, index) {
+                    if (data[resource.idField] === resourceId) {
+                        _this.parent.resources[i].dataSource.splice(index, 1);
+                    }
+                });
+                return "break";
             }
-            this.bindResourcesData(true);
         };
-        ResourceBase.prototype.removeResource = function (resourceId, name) {
-            var _this = this;
-            var _loop_1 = function (i, length_4) {
-                var resource = this_1.parent.resources[i];
-                if (resource.name === name) {
-                    resource.dataSource.forEach(function (data, index) {
-                        if (data[resource.idField] === resourceId) {
-                            _this.parent.resources[i].dataSource.splice(index, 1);
-                        }
-                    });
-                    return "break";
-                }
-            };
-            var this_1 = this;
-            for (var i = 0, length_4 = this.parent.resources.length; i < length_4; i++) {
-                var state_1 = _loop_1(i, length_4);
-                if (state_1 === "break")
-                    break;
-            }
-            this.bindResourcesData(true);
-        };
-        ResourceBase.prototype.destroy = function () {
-            this.parent.off(events.documentClick, this.documentClick);
-            if (this.treeViewObj) {
-                this.treeViewObj.destroy();
-                this.treeViewObj = null;
-            }
-            if (this.treePopup) {
-                this.treePopup.destroy();
-                this.treePopup = null;
-                ej2_base_1.remove(this.parent.element.querySelector('.' + cls.RESOURCE_TREE_POPUP));
-                ej2_base_1.remove(this.parent.element.querySelector('.' + cls.RESOURCE_TREE_POPUP_OVERLAY));
-            }
-            var resToolBarEle = this.parent.element.querySelector('.' + cls.RESOURCE_TOOLBAR_CONTAINER);
-            if (resToolBarEle) {
-                ej2_base_1.remove(resToolBarEle);
-            }
-        };
-        return ResourceBase;
-    }());
-    exports.ResourceBase = ResourceBase;
-});
+        var this_1 = this;
+        for (var i = 0, length_4 = this.parent.resources.length; i < length_4; i++) {
+            var state_1 = _loop_1(i, length_4);
+            if (state_1 === "break")
+                break;
+        }
+        this.bindResourcesData(true);
+    };
+    ResourceBase.prototype.destroy = function () {
+        this.parent.off(events.documentClick, this.documentClick);
+        if (this.treeViewObj) {
+            this.treeViewObj.destroy();
+            this.treeViewObj = null;
+        }
+        if (this.treePopup) {
+            this.treePopup.destroy();
+            this.treePopup = null;
+            remove(this.parent.element.querySelector('.' + cls.RESOURCE_TREE_POPUP));
+            remove(this.parent.element.querySelector('.' + cls.RESOURCE_TREE_POPUP_OVERLAY));
+        }
+        var resToolBarEle = this.parent.element.querySelector('.' + cls.RESOURCE_TOOLBAR_CONTAINER);
+        if (resToolBarEle) {
+            remove(resToolBarEle);
+        }
+    };
+    return ResourceBase;
+}());
+export { ResourceBase };

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

@@ -1,2 +0,2 @@
-import { Component, ModuleDeclaration, Property, Event, Animation, Collection } 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 { removeClass, addClass, createElement, classList } 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 } from '../base/type';import { EventBase } from '../event-renderer/event-base';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 { Agenda } from '../renderer/agenda';import { MonthAgenda } from '../renderer/month-agenda';import { WorkHours } from '../models/work-hours';import { TimeScale } from '../models/time-scale';import { Crud } from '../actions/crud';import { WorkHoursModel, ViewsModel, EventSettingsModel, GroupModel, ResourcesModel, TimeScaleModel } from '../models/models';import { EventSettings } from '../models/event-settings';import { Group } from '../models/group';import { Resources } from '../models/resources';import { IRenderer, ActionEventArgs, NavigatingEventArgs, CellClickEventArgs, RenderCellEventArgs, ScrollCss } from '../base/interface';import { EventFieldsMapping, EventClickArgs, EventRenderedArgs, PopupOpenEventArgs, UIStateArgs } from '../base/interface';import { TdData, ResourceDetails } from '../base/interface';import { ResourceBase } from '../base/resource';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 } 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 { removeClass, addClass, classList } 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 } from '../base/type';import { EventBase } from '../event-renderer/event-base';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 { Agenda } from '../renderer/agenda';import { MonthAgenda } from '../renderer/month-agenda';import { WorkHours } from '../models/work-hours';import { TimeScale } from '../models/time-scale';import { Crud } from '../actions/crud';import { WorkHoursModel, ViewsModel, EventSettingsModel, GroupModel, ResourcesModel, TimeScaleModel } from '../models/models';import { EventSettings } from '../models/event-settings';import { Group } from '../models/group';import { Resources } from '../models/resources';import { IRenderer, ActionEventArgs, NavigatingEventArgs, CellClickEventArgs, RenderCellEventArgs, ScrollCss } from '../base/interface';import { EventFieldsMapping, EventClickArgs, EventRenderedArgs, PopupOpenEventArgs, UIStateArgs } from '../base/interface';import { TdData, ResourceDetails } from '../base/interface';import { ResourceBase } from '../base/resource';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';
@@ -3,0 +3,0 @@

src/schedule/base/schedule.js

@@ -17,1013 +17,1221 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-popups", "../renderer/header-renderer", "../actions/scroll", "../actions/touch", "../actions/keyboard", "../actions/data", "../event-renderer/event-base", "../popups/quick-popups", "../popups/event-tooltip", "../popups/event-window", "../renderer/renderer", "../models/work-hours", "../models/time-scale", "../actions/crud", "../models/event-settings", "../models/group", "../models/resources", "../base/resource", "../base/constant", "../base/css-constant", "../base/util"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_base_4, ej2_popups_1, header_renderer_1, scroll_1, touch_1, keyboard_1, data_1, event_base_1, quick_popups_1, event_tooltip_1, event_window_1, renderer_1, work_hours_1, time_scale_1, crud_1, event_settings_1, group_1, resources_1, resource_1, events, cls, util) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var Schedule = (function (_super) {
-        __extends(Schedule, _super);
-        function Schedule(options, element) {
-            return _super.call(this, options, element) || this;
+import { Component, Property, Event, Animation, Collection } 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 { removeClass, addClass, classList } 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 { EventBase } from '../event-renderer/event-base';
+import { QuickPopups } from '../popups/quick-popups';
+import { EventTooltip } from '../popups/event-tooltip';
+import { EventWindow } from '../popups/event-window';
+import { Render } from '../renderer/renderer';
+import { WorkHours } from '../models/work-hours';
+import { TimeScale } from '../models/time-scale';
+import { Crud } from '../actions/crud';
+import { EventSettings } from '../models/event-settings';
+import { Group } from '../models/group';
+import { Resources } from '../models/resources';
+import { ResourceBase } from '../base/resource';
+import * as events from '../base/constant';
+import * as cls from '../base/css-constant';
+import * as util from '../base/util';
+/**
+ * Represents the Schedule component that displays a list of events scheduled against specific date and timings,
+ * thus helping us to plan and manage it properly.
+ * ```html
+ * <div id="schedule"></div>
+ * ```
+ * ```typescript
+ * <script>
+ *   var scheduleObj = new Schedule();
+ *   scheduleObj.appendTo("#schedule");
+ * </script>
+ * ```
+ */
+var Schedule = /** @class */ (function (_super) {
+    __extends(Schedule, _super);
+    /**
+     * Constructor for creating the Schedule widget
+     * @hidden
+     */
+    function Schedule(options, element) {
+        return _super.call(this, options, element) || this;
+    }
+    /**
+     * Core method that initializes the control rendering.
+     * @private
+     */
+    Schedule.prototype.render = function () {
+        var addClasses = [];
+        var removeClasses = [];
+        addClasses.push(cls.ROOT);
+        if (this.enableRtl) {
+            addClasses.push(cls.RTL);
         }
-        Schedule.prototype.render = function () {
-            var addClasses = [];
-            var removeClasses = [];
-            addClasses.push(cls.ROOT);
-            if (this.enableRtl) {
-                addClasses.push(cls.RTL);
-            }
-            else {
-                removeClasses.push(cls.RTL);
-            }
-            if (this.isAdaptive) {
-                addClasses.push(cls.DEVICE_CLASS);
-            }
-            else {
-                removeClasses.push(cls.DEVICE_CLASS);
-            }
-            if (this.cssClass) {
-                addClasses.push(this.cssClass);
-            }
-            ej2_base_4.classList(this.element, addClasses, removeClasses);
-            this.validateDate();
-            this.eventTooltipTemplateFn = this.templateParser(this.eventSettings.tooltipTemplate);
-            this.editorTemplateFn = this.templateParser(this.editorTemplate);
-            ej2_popups_1.createSpinner({ target: this.element });
-            this.scrollModule = new scroll_1.Scroll(this);
-            this.scrollModule.setWidth();
-            this.scrollModule.setHeight();
-            this.renderModule = new renderer_1.Render(this);
-            this.eventBase = new event_base_1.EventBase(this);
-            this.initializeDataModule();
-            this.initializeResources();
-        };
-        Schedule.prototype.initializeResources = function (isSetModel) {
-            if (isSetModel === void 0) { isSetModel = false; }
-            if (this.resources.length > 0) {
-                this.resourceBase = new resource_1.ResourceBase(this);
-                this.resourceBase.bindResourcesData(isSetModel);
-            }
-            else {
-                this.resourceBase = null;
-                this.renderElements(isSetModel);
-            }
-        };
-        Schedule.prototype.renderElements = function (isLayoutOnly) {
-            if (isLayoutOnly) {
-                this.initializeView(this.currentView);
-                return;
-            }
-            if (this.showHeaderBar) {
-                this.headerModule = new header_renderer_1.HeaderRenderer(this);
-            }
-            this.element.appendChild(ej2_base_4.createElement('div', { className: cls.TABLE_CONTAINER_CLASS }));
-            if (ej2_base_2.Browser.isDevice || ej2_base_2.Browser.isTouch) {
-                this.scheduleTouchModule = new touch_1.ScheduleTouch(this);
-            }
+        else {
+            removeClasses.push(cls.RTL);
+        }
+        if (this.isAdaptive) {
+            addClasses.push(cls.DEVICE_CLASS);
+        }
+        else {
+            removeClasses.push(cls.DEVICE_CLASS);
+        }
+        if (this.cssClass) {
+            addClasses.push(this.cssClass);
+        }
+        classList(this.element, addClasses, removeClasses);
+        this.validateDate();
+        this.eventTooltipTemplateFn = this.templateParser(this.eventSettings.tooltipTemplate);
+        this.editorTemplateFn = this.templateParser(this.editorTemplate);
+        createSpinner({ target: this.element });
+        this.scrollModule = new Scroll(this);
+        this.scrollModule.setWidth();
+        this.scrollModule.setHeight();
+        this.renderModule = new Render(this);
+        this.eventBase = new EventBase(this);
+        this.initializeDataModule();
+        this.initializeResources();
+    };
+    Schedule.prototype.initializeResources = function (isSetModel) {
+        if (isSetModel === void 0) { isSetModel = false; }
+        if (this.resources.length > 0) {
+            this.resourceBase = new ResourceBase(this);
+            this.resourceBase.bindResourcesData(isSetModel);
+        }
+        else {
+            this.resourceBase = null;
+            this.renderElements(isSetModel);
+        }
+    };
+    Schedule.prototype.renderElements = function (isLayoutOnly) {
+        if (isLayoutOnly) {
             this.initializeView(this.currentView);
-            this.initializePopups();
-            this.wireEvents();
-        };
-        Schedule.prototype.validateDate = function () {
-            this.setProperties({ selectedDate: new Date('' + this.selectedDate) }, true);
-        };
-        Schedule.prototype.getViewIndex = function (viewName) {
-            for (var item = 0; item < this.viewCollections.length; item++) {
-                var checkIndex = this.viewCollections[item].option;
-                if (checkIndex === viewName) {
-                    return item;
-                }
+            return;
+        }
+        if (this.showHeaderBar) {
+            this.headerModule = new HeaderRenderer(this);
+        }
+        this.element.appendChild(this.createElement('div', { className: cls.TABLE_CONTAINER_CLASS }));
+        if (Browser.isDevice || Browser.isTouch) {
+            this.scheduleTouchModule = new ScheduleTouch(this);
+        }
+        this.initializeView(this.currentView);
+        this.initializePopups();
+        this.wireEvents();
+    };
+    Schedule.prototype.validateDate = function () {
+        // persist the selected date value
+        this.setProperties({ selectedDate: new Date('' + this.selectedDate) }, true);
+    };
+    Schedule.prototype.getViewIndex = function (viewName) {
+        for (var item = 0; item < this.viewCollections.length; item++) {
+            var checkIndex = this.viewCollections[item].option;
+            if (checkIndex === viewName) {
+                return item;
             }
-            return -1;
-        };
-        Schedule.prototype.setViewOptions = function (isModuleLoad) {
-            if (isModuleLoad === void 0) { isModuleLoad = false; }
-            this.viewOptions = {};
-            this.viewCollections = [];
-            var viewName;
-            var selectedView;
-            var count = 0;
-            this.viewIndex = -1;
-            for (var _i = 0, _a = this.views; _i < _a.length; _i++) {
-                var view = _a[_i];
-                var isOptions = (typeof view === 'string') ? false : true;
-                if (typeof view === 'string') {
-                    viewName = view;
-                    if (this.currentView === viewName) {
-                        selectedView = viewName;
-                        this.viewIndex = count;
-                    }
+        }
+        return -1;
+    };
+    Schedule.prototype.setViewOptions = function (isModuleLoad) {
+        if (isModuleLoad === void 0) { isModuleLoad = false; }
+        this.viewOptions = {};
+        this.viewCollections = [];
+        var viewName;
+        var selectedView;
+        var count = 0;
+        this.viewIndex = -1;
+        for (var _i = 0, _a = this.views; _i < _a.length; _i++) {
+            var view = _a[_i];
+            var isOptions = (typeof view === 'string') ? false : true;
+            if (typeof view === 'string') {
+                viewName = view;
+                if (this.currentView === viewName) {
+                    selectedView = viewName;
+                    this.viewIndex = count;
                 }
-                else {
-                    viewName = view.option;
-                    if (view.isSelected) {
-                        selectedView = viewName;
-                        this.viewIndex = count;
-                    }
-                }
-                var obj = ej2_base_3.extend({ option: viewName }, isOptions ? view : {});
-                var fieldViewName = viewName.charAt(0).toLowerCase() + viewName.slice(1);
-                this.viewCollections.push(obj);
-                if (ej2_base_3.isNullOrUndefined(this.viewOptions[fieldViewName])) {
-                    this.viewOptions[fieldViewName] = [obj];
-                }
-                else {
-                    this.viewOptions[fieldViewName].push(obj);
-                }
-                count++;
             }
-            if (!isModuleLoad && selectedView) {
-                this.setProperties({ currentView: selectedView }, true);
-            }
-            if (this.viewIndex === -1) {
-                var currentIndex = this.getViewIndex(this.currentView);
-                this.viewIndex = (currentIndex === -1) ? 0 : currentIndex;
-            }
-        };
-        Schedule.prototype.getActiveViewOptions = function () {
-            var timeScale = {
-                enable: this.timeScale.enable,
-                interval: this.timeScale.interval,
-                slotCount: this.timeScale.slotCount,
-                majorSlotTemplate: this.timeScale.majorSlotTemplate,
-                minorSlotTemplate: this.timeScale.minorSlotTemplate
-            };
-            var group = {
-                byDate: this.group.byDate,
-                byGroupID: this.group.byGroupID,
-                allowGroupEdit: this.group.allowGroupEdit,
-                resources: this.group.resources,
-                enableCompactView: this.group.enableCompactView
-            };
-            var scheduleOptions = {
-                dateFormat: this.dateFormat,
-                endHour: this.endHour,
-                isSelected: false,
-                option: null,
-                readonly: this.readonly,
-                startHour: this.startHour,
-                allowVirtualScrolling: true,
-                cellTemplate: this.cellTemplate,
-                eventTemplate: this.eventSettings.template,
-                dateHeaderTemplate: this.dateHeaderTemplate,
-                resourceHeaderTemplate: this.resourceHeaderTemplate,
-                workDays: this.workDays,
-                showWeekend: this.showWeekend,
-                displayName: null,
-                interval: 1,
-                timeScale: timeScale,
-                group: group
-            };
-            return ej2_base_3.extend(scheduleOptions, this.viewCollections[this.viewIndex], undefined, true);
-        };
-        Schedule.prototype.initializeDataModule = function () {
-            this.eventFields = {
-                id: this.eventSettings.fields.id,
-                subject: this.eventSettings.fields.subject.name,
-                startTime: this.eventSettings.fields.startTime.name,
-                endTime: this.eventSettings.fields.endTime.name,
-                startTimezone: this.eventSettings.fields.startTimezone.name,
-                endTimezone: this.eventSettings.fields.endTimezone.name,
-                location: this.eventSettings.fields.location.name,
-                description: this.eventSettings.fields.description.name,
-                isAllDay: this.eventSettings.fields.isAllDay.name,
-                recurrenceID: this.eventSettings.fields.recurrenceID.name,
-                recurrenceRule: this.eventSettings.fields.recurrenceRule.name,
-                recurrenceException: this.eventSettings.fields.recurrenceException.name
-            };
-            this.editorTitles = {
-                subject: this.eventSettings.fields.subject.title || this.localeObj.getConstant('title'),
-                startTime: this.eventSettings.fields.startTime.title || this.localeObj.getConstant('start'),
-                endTime: this.eventSettings.fields.endTime.title || this.localeObj.getConstant('end'),
-                isAllDay: this.eventSettings.fields.isAllDay.title || this.localeObj.getConstant('allDay'),
-                startTimezone: this.eventSettings.fields.startTimezone.title || this.localeObj.getConstant('startTimezone'),
-                endTimezone: this.eventSettings.fields.endTimezone.title || this.localeObj.getConstant('endTimezone'),
-                location: this.eventSettings.fields.location.title || this.localeObj.getConstant('location'),
-                description: this.eventSettings.fields.description.title || this.localeObj.getConstant('description'),
-                recurrenceRule: this.eventSettings.fields.recurrenceRule.title || this.localeObj.getConstant('repeat')
-            };
-            this.dataModule = new data_1.Data(this.eventSettings.dataSource, this.eventSettings.query);
-            this.crudModule = new crud_1.Crud(this);
-        };
-        Schedule.prototype.initializeView = function (viewName) {
-            this.showSpinner();
-            this.activeViewOptions = this.getActiveViewOptions();
-            if (this.resourceBase) {
-                this.resourceBase.setResourceCollection();
-            }
-            this.initializeTemplates();
-            this.renderModule.render(viewName);
-        };
-        Schedule.prototype.initializeTemplates = function () {
-            this.cellTemplateFn = this.templateParser(this.activeViewOptions.cellTemplate);
-            this.dateHeaderTemplateFn = this.templateParser(this.activeViewOptions.dateHeaderTemplate);
-            this.majorSlotTemplateFn = this.templateParser(this.activeViewOptions.timeScale.majorSlotTemplate);
-            this.minorSlotTemplateFn = this.templateParser(this.activeViewOptions.timeScale.minorSlotTemplate);
-            this.appointmentTemplateFn = this.templateParser(this.activeViewOptions.eventTemplate);
-            this.resourceHeaderTemplateFn = this.templateParser(this.activeViewOptions.resourceHeaderTemplate);
-        };
-        Schedule.prototype.initializePopups = function () {
-            if (this.eventSettings.enableTooltip) {
-                this.eventTooltip = new event_tooltip_1.EventTooltip(this);
-            }
-            this.eventWindow = new event_window_1.EventWindow(this);
-            this.quickPopup = new quick_popups_1.QuickPopups(this);
-        };
-        Schedule.prototype.getDayNames = function (type) {
-            var culShortNames = [];
-            var cldrObj;
-            if (this.locale === 'en' || this.locale === 'en-US') {
-                cldrObj = (ej2_base_3.getValue('days.stand-alone.' + type, ej2_base_2.getDefaultDateObject()));
-            }
             else {
-                cldrObj = (ej2_base_3.getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.days.format.' + type, ej2_base_2.cldrData));
+                viewName = view.option;
+                if (view.isSelected) {
+                    selectedView = viewName;
+                    this.viewIndex = count;
+                }
             }
-            for (var _i = 0, _a = Object.keys(cldrObj); _i < _a.length; _i++) {
-                var obj = _a[_i];
-                culShortNames.push(ej2_base_3.getValue(obj, cldrObj));
+            var obj = extend({ option: viewName }, isOptions ? view : {});
+            var fieldViewName = viewName.charAt(0).toLowerCase() + viewName.slice(1);
+            this.viewCollections.push(obj);
+            if (isNullOrUndefined(this.viewOptions[fieldViewName])) {
+                this.viewOptions[fieldViewName] = [obj];
             }
-            return culShortNames;
-        };
-        Schedule.prototype.setCldrTimeFormat = function () {
-            if (this.locale === 'en' || this.locale === 'en-US') {
-                this.timeFormat = (ej2_base_3.getValue('timeFormats.short', ej2_base_2.getDefaultDateObject()));
-            }
             else {
-                this.timeFormat = (ej2_base_3.getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.short', ej2_base_2.cldrData));
+                this.viewOptions[fieldViewName].push(obj);
             }
+            count++;
+        }
+        if (!isModuleLoad && selectedView) {
+            this.setProperties({ currentView: selectedView }, true);
+        }
+        if (this.viewIndex === -1) {
+            var currentIndex = this.getViewIndex(this.currentView);
+            this.viewIndex = (currentIndex === -1) ? 0 : currentIndex;
+        }
+    };
+    Schedule.prototype.getActiveViewOptions = function () {
+        var timeScale = {
+            enable: this.timeScale.enable,
+            interval: this.timeScale.interval,
+            slotCount: this.timeScale.slotCount,
+            majorSlotTemplate: this.timeScale.majorSlotTemplate,
+            minorSlotTemplate: this.timeScale.minorSlotTemplate
         };
-        Schedule.prototype.getTimeString = function (date) {
-            return this.globalize.formatDate(date, { format: this.timeFormat, type: 'time' });
+        var group = {
+            byDate: this.group.byDate,
+            byGroupID: this.group.byGroupID,
+            allowGroupEdit: this.group.allowGroupEdit,
+            resources: this.group.resources,
+            enableCompactView: this.group.enableCompactView
         };
-        Schedule.prototype.changeView = function (view, event, muteOnChange, index) {
-            if (ej2_base_3.isNullOrUndefined(index)) {
-                index = this.getViewIndex(view);
-            }
-            if (!muteOnChange && index === this.viewIndex || index < 0) {
-                return;
-            }
-            this.viewIndex = index;
-            var args = { requestType: 'viewNavigate', cancel: false, event: event };
-            this.trigger(events.actionBegin, args);
-            if (args.cancel) {
-                return;
-            }
-            var navArgs = { action: 'view', cancel: false, previousView: this.currentView, currentView: view };
-            this.trigger(events.navigating, navArgs);
-            if (navArgs.cancel) {
-                return;
-            }
-            this.setProperties({ currentView: view }, true);
-            if (this.headerModule) {
-                this.headerModule.updateActiveView();
-                this.headerModule.setCalendarView();
-            }
-            this.initializeView(this.currentView);
-            this.animateLayout();
-            args = { requestType: 'viewNavigate', cancel: false, event: event };
-            this.trigger(events.actionComplete, args);
+        var scheduleOptions = {
+            dateFormat: this.dateFormat,
+            endHour: this.endHour,
+            isSelected: false,
+            option: null,
+            readonly: this.readonly,
+            startHour: this.startHour,
+            allowVirtualScrolling: true,
+            cellTemplate: this.cellTemplate,
+            eventTemplate: this.eventSettings.template,
+            dateHeaderTemplate: this.dateHeaderTemplate,
+            resourceHeaderTemplate: this.resourceHeaderTemplate,
+            workDays: this.workDays,
+            showWeekend: this.showWeekend,
+            displayName: null,
+            interval: 1,
+            timeScale: timeScale,
+            group: group
         };
-        Schedule.prototype.changeDate = function (selectedDate, event) {
-            var args = { requestType: 'dateNavigate', cancel: false, event: event };
-            this.trigger(events.actionBegin, args);
-            if (args.cancel) {
-                return;
-            }
-            var navArgs = { action: 'date', cancel: false, previousDate: this.selectedDate, currentDate: selectedDate };
-            this.trigger(events.navigating, navArgs);
-            if (navArgs.cancel) {
-                return;
-            }
-            this.setProperties({ selectedDate: selectedDate }, true);
-            if (this.headerModule) {
-                this.headerModule.setCalendarDate(selectedDate);
-            }
-            this.initializeView(this.currentView);
-            this.animateLayout();
-            args = { requestType: 'dateNavigate', cancel: false, event: event };
-            this.trigger(events.actionComplete, args);
+        return extend(scheduleOptions, this.viewCollections[this.viewIndex], undefined, true);
+    };
+    Schedule.prototype.initializeDataModule = function () {
+        this.eventFields = {
+            id: this.eventSettings.fields.id,
+            subject: this.eventSettings.fields.subject.name,
+            startTime: this.eventSettings.fields.startTime.name,
+            endTime: this.eventSettings.fields.endTime.name,
+            startTimezone: this.eventSettings.fields.startTimezone.name,
+            endTimezone: this.eventSettings.fields.endTimezone.name,
+            location: this.eventSettings.fields.location.name,
+            description: this.eventSettings.fields.description.name,
+            isAllDay: this.eventSettings.fields.isAllDay.name,
+            recurrenceID: this.eventSettings.fields.recurrenceID.name,
+            recurrenceRule: this.eventSettings.fields.recurrenceRule.name,
+            recurrenceException: this.eventSettings.fields.recurrenceException.name
         };
-        Schedule.prototype.isSelectedDate = function (date) {
-            return date.setHours(0, 0, 0, 0) === new Date('' + this.selectedDate).setHours(0, 0, 0, 0);
+        this.editorTitles = {
+            subject: this.eventSettings.fields.subject.title || this.localeObj.getConstant('title'),
+            startTime: this.eventSettings.fields.startTime.title || this.localeObj.getConstant('start'),
+            endTime: this.eventSettings.fields.endTime.title || this.localeObj.getConstant('end'),
+            isAllDay: this.eventSettings.fields.isAllDay.title || this.localeObj.getConstant('allDay'),
+            startTimezone: this.eventSettings.fields.startTimezone.title || this.localeObj.getConstant('startTimezone'),
+            endTimezone: this.eventSettings.fields.endTimezone.title || this.localeObj.getConstant('endTimezone'),
+            location: this.eventSettings.fields.location.title || this.localeObj.getConstant('location'),
+            description: this.eventSettings.fields.description.title || this.localeObj.getConstant('description'),
+            recurrenceRule: this.eventSettings.fields.recurrenceRule.title || this.localeObj.getConstant('repeat')
         };
-        Schedule.prototype.animateLayout = function () {
-            new ej2_base_1.Animation({ duration: 600, name: 'FadeIn', timingFunction: 'easeIn' }).animate(this.activeView.element);
+        this.dataModule = new Data(this.eventSettings.dataSource, this.eventSettings.query);
+        this.crudModule = new Crud(this);
+    };
+    Schedule.prototype.initializeView = function (viewName) {
+        this.showSpinner();
+        this.activeViewOptions = this.getActiveViewOptions();
+        if (this.resourceBase) {
+            this.resourceBase.setResourceCollection();
+        }
+        this.initializeTemplates();
+        this.renderModule.render(viewName);
+    };
+    Schedule.prototype.initializeTemplates = function () {
+        this.cellTemplateFn = this.templateParser(this.activeViewOptions.cellTemplate);
+        this.dateHeaderTemplateFn = this.templateParser(this.activeViewOptions.dateHeaderTemplate);
+        this.majorSlotTemplateFn = this.templateParser(this.activeViewOptions.timeScale.majorSlotTemplate);
+        this.minorSlotTemplateFn = this.templateParser(this.activeViewOptions.timeScale.minorSlotTemplate);
+        this.appointmentTemplateFn = this.templateParser(this.activeViewOptions.eventTemplate);
+        this.resourceHeaderTemplateFn = this.templateParser(this.activeViewOptions.resourceHeaderTemplate);
+    };
+    Schedule.prototype.initializePopups = function () {
+        if (this.eventSettings.enableTooltip) {
+            this.eventTooltip = new EventTooltip(this);
+        }
+        this.eventWindow = new EventWindow(this);
+        this.quickPopup = new QuickPopups(this);
+    };
+    Schedule.prototype.getDayNames = function (type) {
+        var culShortNames = [];
+        var cldrObj;
+        if (this.locale === 'en' || this.locale === 'en-US') {
+            cldrObj = (getValue('days.stand-alone.' + type, getDefaultDateObject()));
+        }
+        else {
+            cldrObj = (getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.days.format.' + type, cldrData));
+        }
+        for (var _i = 0, _a = Object.keys(cldrObj); _i < _a.length; _i++) {
+            var obj = _a[_i];
+            culShortNames.push(getValue(obj, cldrObj));
+        }
+        return culShortNames;
+    };
+    Schedule.prototype.setCldrTimeFormat = function () {
+        if (this.locale === 'en' || this.locale === 'en-US') {
+            this.timeFormat = (getValue('timeFormats.short', getDefaultDateObject()));
+        }
+        else {
+            this.timeFormat = (getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.short', cldrData));
+        }
+    };
+    Schedule.prototype.getTimeString = function (date) {
+        return this.globalize.formatDate(date, { format: this.timeFormat, type: 'time' });
+    };
+    Schedule.prototype.changeView = function (view, event, muteOnChange, index) {
+        if (isNullOrUndefined(index)) {
+            index = this.getViewIndex(view);
+        }
+        if (!muteOnChange && index === this.viewIndex || index < 0) {
+            return;
+        }
+        this.viewIndex = index;
+        var args = { requestType: 'viewNavigate', cancel: false, event: event };
+        this.trigger(events.actionBegin, args);
+        if (args.cancel) {
+            return;
+        }
+        var navArgs = { action: 'view', cancel: false, previousView: this.currentView, currentView: view };
+        this.trigger(events.navigating, navArgs);
+        if (navArgs.cancel) {
+            return;
+        }
+        this.setProperties({ currentView: view }, true);
+        if (this.headerModule) {
+            this.headerModule.updateActiveView();
+            this.headerModule.setCalendarView();
+        }
+        this.initializeView(this.currentView);
+        this.animateLayout();
+        args = { requestType: 'viewNavigate', cancel: false, event: event };
+        this.trigger(events.actionComplete, args);
+    };
+    Schedule.prototype.changeDate = function (selectedDate, event) {
+        var args = { requestType: 'dateNavigate', cancel: false, event: event };
+        this.trigger(events.actionBegin, args);
+        if (args.cancel) {
+            return;
+        }
+        var navArgs = { action: 'date', cancel: false, previousDate: this.selectedDate, currentDate: selectedDate };
+        this.trigger(events.navigating, navArgs);
+        if (navArgs.cancel) {
+            return;
+        }
+        this.setProperties({ selectedDate: selectedDate }, true);
+        if (this.headerModule) {
+            this.headerModule.setCalendarDate(selectedDate);
+        }
+        this.initializeView(this.currentView);
+        this.animateLayout();
+        args = { requestType: 'dateNavigate', cancel: false, event: event };
+        this.trigger(events.actionComplete, args);
+    };
+    Schedule.prototype.isSelectedDate = function (date) {
+        return date.setHours(0, 0, 0, 0) === new Date('' + this.selectedDate).setHours(0, 0, 0, 0);
+    };
+    Schedule.prototype.animateLayout = function () {
+        new Animation({ duration: 600, name: 'FadeIn', timingFunction: 'easeIn' }).animate(this.activeView.element);
+    };
+    /**
+     * To provide the array of modules needed for control rendering
+     * @return {ModuleDeclaration[]}
+     * @hidden
+     */
+    Schedule.prototype.requiredModules = function () {
+        var modules = [];
+        this.setViewOptions(true);
+        for (var _i = 0, _a = Object.keys(this.viewOptions); _i < _a.length; _i++) {
+            var view = _a[_i];
+            modules.push({
+                member: view,
+                args: [this]
+            });
+        }
+        return modules;
+    };
+    /**
+     * Initializes the values of private members.
+     * @private
+     */
+    Schedule.prototype.preRender = function () {
+        this.isAdaptive = Browser.isDevice;
+        this.globalize = new Internationalization(this.locale);
+        this.uiStateValues = { expand: false, isInitial: true, left: 0, top: 0, isGroupAdaptive: false, groupIndex: 0 };
+        this.activeCellsData = { startTime: new Date(), endTime: new Date(), isAllDay: false };
+        this.activeEventData = { event: undefined, element: undefined };
+        this.defaultLocale = {
+            day: 'Day',
+            week: 'Week',
+            workWeek: 'Work Week',
+            month: 'Month',
+            agenda: 'Agenda',
+            weekAgenda: 'Week Agenda',
+            workWeekAgenda: 'Work Week Agenda',
+            monthAgenda: 'Month Agenda',
+            today: 'Today',
+            noEvents: 'No events',
+            emptyContainer: 'There are no events scheduled on this day.',
+            allDay: 'All day',
+            start: 'Start',
+            end: 'End',
+            more: 'more',
+            close: 'Close',
+            cancel: 'Cancel',
+            noTitle: '(No Title)',
+            delete: 'Delete',
+            deleteEvent: 'Delete Event',
+            deleteMultipleEvent: 'Delete Multiple Events',
+            selectedItems: 'Items selected',
+            deleteSeries: 'Delete Series',
+            edit: 'Edit',
+            editSeries: 'Edit Series',
+            editEvent: 'Edit Event',
+            createEvent: 'Create',
+            subject: 'Subject',
+            addTitle: 'Add title',
+            moreDetails: 'More Details',
+            save: 'Save',
+            editContent: 'Do you want to edit only this event or entire series?',
+            deleteRecurrenceContent: 'Do you want to delete only this event or entire series?',
+            deleteContent: 'Are you sure you want to delete this event?',
+            deleteMultipleContent: 'Are you sure you want to delete the selected events?',
+            newEvent: 'New Event',
+            title: 'Title',
+            location: 'Location',
+            description: 'Description',
+            timezone: 'Timezone',
+            startTimezone: 'Start Timezone',
+            endTimezone: 'End Timezone',
+            repeat: 'Repeat',
+            saveButton: 'Save',
+            cancelButton: 'Cancel',
+            deleteButton: 'Delete',
+            recurrence: 'Recurrence',
+            wrongPattern: 'The recurrence pattern is not valid.',
+            seriesChangeAlert: 'The changes made to specific instances of this series will be cancelled ' +
+                'and those events will match the series again.',
+            createError: 'The duration of the event must be shorter than how frequently it occurs. ' +
+                'Shorten the duration, or change the recurrence pattern in the recurrence event editor.',
+            recurrenceDateValidation: 'Some months have fewer than the selected date. For these months, ' +
+                'the occurrence will fall on the last date of the month.',
+            sameDayAlert: 'Two occurrences of the same event cannot occur on the same day.',
+            editRecurrence: 'Edit Recurrence',
+            repeats: 'Repeats',
+            alert: 'Alert',
+            startEndError: 'The selected end date occurs before the start date.',
+            invalidDateError: 'The entered date value is invalid.',
+            ok: 'Ok',
+            occurrence: 'Occurrence',
+            series: 'Series',
+            previous: 'Previous',
+            next: 'Next'
         };
-        Schedule.prototype.requiredModules = function () {
-            var modules = [];
-            this.setViewOptions(true);
-            for (var _i = 0, _a = Object.keys(this.viewOptions); _i < _a.length; _i++) {
-                var view = _a[_i];
-                modules.push({
-                    member: view,
-                    args: [this]
-                });
-            }
-            return modules;
+        this.localeObj = new L10n(this.getModuleName(), this.defaultLocale, this.locale);
+        this.setCldrTimeFormat();
+        this.eventsData = [];
+        this.eventsProcessed = [];
+        this.currentAction = null;
+        this.selectedElements = [];
+        this.setViewOptions();
+    };
+    /**
+     * Binding events to the Schedule element.
+     * @hidden
+     */
+    Schedule.prototype.wireEvents = function () {
+        var resize = 'onorientationchange' in window ? 'orientationchange' : 'resize';
+        EventHandler.add(window, resize, this.onScheduleResize, this);
+        EventHandler.add(document, Browser.touchStartEvent, this.onDocumentClick, this);
+        if (this.allowKeyboardInteraction) {
+            this.keyboardInteractionModule = new KeyboardInteraction(this);
+        }
+    };
+    Schedule.prototype.removeSelectedClass = function () {
+        var selectedCells = this.getSelectedElements();
+        for (var _i = 0, selectedCells_1 = selectedCells; _i < selectedCells_1.length; _i++) {
+            var cell = selectedCells_1[_i];
+            cell.setAttribute('aria-selected', 'false');
+            cell.removeAttribute('tabindex');
+        }
+        removeClass(selectedCells, cls.SELECTED_CELL_CLASS);
+    };
+    Schedule.prototype.addSelectedClass = function (cells, focusCell) {
+        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);
+        focusCell.setAttribute('tabindex', '0');
+        focusCell.focus();
+    };
+    Schedule.prototype.selectCell = function (element) {
+        this.removeSelectedClass();
+        this.addSelectedClass([element], element);
+    };
+    Schedule.prototype.getSelectedElements = function () {
+        return [].slice.call(this.element.querySelectorAll('.' + cls.SELECTED_CELL_CLASS));
+    };
+    Schedule.prototype.getAllDayRow = function () {
+        return this.element.querySelector('.' + cls.ALLDAY_ROW_CLASS);
+    };
+    Schedule.prototype.getContentTable = function () {
+        return this.element.querySelector('.' + cls.CONTENT_TABLE_CLASS + ' tbody');
+    };
+    Schedule.prototype.getWorkCellElements = function () {
+        return [].slice.call(this.element.querySelectorAll('.' + cls.WORK_CELLS_CLASS));
+    };
+    Schedule.prototype.getIndexOfDate = function (collection, date) {
+        return collection.map(Number).indexOf(+date);
+    };
+    Schedule.prototype.isAllDayCell = function (td) {
+        if (this.currentView === 'Month' || td.classList.contains(cls.ALLDAY_CELLS_CLASS) || td.classList.contains(cls.HEADER_CELLS_CLASS)
+            || !this.activeViewOptions.timeScale.enable) {
+            return true;
+        }
+        return false;
+    };
+    Schedule.prototype.getDateFromElement = function (td) {
+        if (!isNullOrUndefined(td.getAttribute('data-date'))) {
+            var dateInMS = parseInt(td.getAttribute('data-date'), 10);
+            return new Date(dateInMS);
+        }
+        return undefined;
+    };
+    Schedule.prototype.getCellTemplate = function () {
+        return this.cellTemplateFn;
+    };
+    Schedule.prototype.getDateHeaderTemplate = function () {
+        return this.dateHeaderTemplateFn;
+    };
+    Schedule.prototype.getMajorSlotTemplate = function () {
+        return this.majorSlotTemplateFn;
+    };
+    Schedule.prototype.getMinorSlotTemplate = function () {
+        return this.minorSlotTemplateFn;
+    };
+    Schedule.prototype.getAppointmentTemplate = function () {
+        return this.appointmentTemplateFn;
+    };
+    Schedule.prototype.getEventTooltipTemplate = function () {
+        return this.eventTooltipTemplateFn;
+    };
+    Schedule.prototype.getEditorTemplate = function () {
+        return this.editorTemplateFn;
+    };
+    Schedule.prototype.getResourceHeaderTemplate = function () {
+        return this.resourceHeaderTemplateFn;
+    };
+    Schedule.prototype.getCssProperties = function () {
+        var cssProps = {
+            border: this.enableRtl ? 'borderLeftWidth' : 'borderRightWidth',
+            padding: this.enableRtl ? 'paddingLeft' : 'paddingRight'
         };
-        Schedule.prototype.preRender = function () {
-            this.isAdaptive = ej2_base_2.Browser.isDevice;
-            this.globalize = new ej2_base_2.Internationalization(this.locale);
-            this.uiStateValues = { expand: false, isInitial: true, left: 0, top: 0, isGroupAdaptive: false, groupIndex: 0 };
-            this.activeCellsData = { startTime: new Date(), endTime: new Date(), isAllDay: false };
-            this.activeEventData = { event: undefined, element: undefined };
-            this.defaultLocale = {
-                day: 'Day',
-                week: 'Week',
-                workWeek: 'Work Week',
-                month: 'Month',
-                agenda: 'Agenda',
-                weekAgenda: 'Week Agenda',
-                workWeekAgenda: 'Work Week Agenda',
-                monthAgenda: 'Month Agenda',
-                today: 'Today',
-                noEvents: 'No events',
-                emptyContainer: 'There are no events scheduled on this day.',
-                allDay: 'All day',
-                start: 'Start',
-                end: 'End',
-                more: 'more',
-                close: 'Close',
-                cancel: 'Cancel',
-                noTitle: '(No Title)',
-                delete: 'Delete',
-                deleteEvent: 'Delete Event',
-                deleteMultipleEvent: 'Delete Multiple Events',
-                selectedItems: 'Items selected',
-                deleteSeries: 'Delete Series',
-                edit: 'Edit',
-                editSeries: 'Edit Series',
-                editEvent: 'Edit Event',
-                createEvent: 'Create',
-                subject: 'Subject',
-                addTitle: 'Add title',
-                moreDetails: 'More Details',
-                save: 'Save',
-                editContent: 'Do you want to edit only this event or entire series?',
-                deleteRecurrenceContent: 'Do you want to delete only this event or entire series?',
-                deleteContent: 'Are you sure you want to delete this event?',
-                deleteMultipleContent: 'Are you sure you want to delete the selected events?',
-                newEvent: 'New Event',
-                title: 'Title',
-                location: 'Location',
-                description: 'Description',
-                timezone: 'Timezone',
-                startTimezone: 'Start Timezone',
-                endTimezone: 'End Timezone',
-                repeat: 'Repeat',
-                saveButton: 'Save',
-                cancelButton: 'Cancel',
-                deleteButton: 'Delete',
-                recurrence: 'Recurrence',
-                wrongPattern: 'The recurrence pattern is not valid.',
-                seriesChangeAlert: 'The changes made to specific instances of this series will be cancelled ' +
-                    'and those events will match the series again.',
-                createError: 'The duration of the event must be shorter than how frequently it occurs. ' +
-                    'Shorten the duration, or change the recurrence pattern in the recurrence event editor.',
-                recurrenceDateValidation: 'Some months have fewer than the selected date. For these months, ' +
-                    'the occurrence will fall on the last date of the month.',
-                sameDayAlert: 'Two occurrences of the same event cannot occur on the same day.',
-                editRecurrence: 'Edit Recurrence',
-                repeats: 'Repeats',
-                alert: 'Alert',
-                startEndError: 'The selected end date occurs before the start date.',
-                invalidDateError: 'The entered date value is invalid.',
-                ok: 'Ok',
-                occurrence: 'Occurrence',
-                series: 'Series',
-                previous: 'Previous',
-                next: 'Next'
-            };
-            this.localeObj = new ej2_base_2.L10n(this.getModuleName(), this.defaultLocale, this.locale);
-            this.setCldrTimeFormat();
-            this.eventsData = [];
-            this.eventsProcessed = [];
-            this.currentAction = null;
-            this.selectedElements = [];
-            this.setViewOptions();
-        };
-        Schedule.prototype.wireEvents = function () {
-            var resize = 'onorientationchange' in window ? 'orientationchange' : 'resize';
-            ej2_base_2.EventHandler.add(window, resize, this.onScheduleResize, this);
-            ej2_base_2.EventHandler.add(document, ej2_base_2.Browser.touchStartEvent, this.onDocumentClick, this);
-            if (this.allowKeyboardInteraction) {
-                this.keyboardInteractionModule = new keyboard_1.KeyboardInteraction(this);
-            }
-        };
-        Schedule.prototype.removeSelectedClass = function () {
-            var selectedCells = this.getSelectedElements();
-            for (var _i = 0, selectedCells_1 = selectedCells; _i < selectedCells_1.length; _i++) {
-                var cell = selectedCells_1[_i];
-                cell.setAttribute('aria-selected', 'false');
-                cell.removeAttribute('tabindex');
-            }
-            ej2_base_4.removeClass(selectedCells, cls.SELECTED_CELL_CLASS);
-        };
-        Schedule.prototype.addSelectedClass = function (cells, focusCell) {
-            for (var _i = 0, cells_1 = cells; _i < cells_1.length; _i++) {
-                var cell = cells_1[_i];
-                cell.setAttribute('aria-selected', 'true');
-            }
-            ej2_base_4.addClass(cells, cls.SELECTED_CELL_CLASS);
-            focusCell.setAttribute('tabindex', '0');
-            focusCell.focus();
-        };
-        Schedule.prototype.selectCell = function (element) {
-            this.removeSelectedClass();
-            this.addSelectedClass([element], element);
-        };
-        Schedule.prototype.getSelectedElements = function () {
-            return [].slice.call(this.element.querySelectorAll('.' + cls.SELECTED_CELL_CLASS));
-        };
-        Schedule.prototype.getAllDayRow = function () {
-            return this.element.querySelector('.' + cls.ALLDAY_ROW_CLASS);
-        };
-        Schedule.prototype.getContentTable = function () {
-            return this.element.querySelector('.' + cls.CONTENT_TABLE_CLASS + ' tbody');
-        };
-        Schedule.prototype.getWorkCellElements = function () {
-            return [].slice.call(this.element.querySelectorAll('.' + cls.WORK_CELLS_CLASS));
-        };
-        Schedule.prototype.getIndexOfDate = function (collection, date) {
-            return collection.map(Number).indexOf(+date);
-        };
-        Schedule.prototype.isAllDayCell = function (td) {
-            if (this.currentView === 'Month' || td.classList.contains(cls.ALLDAY_CELLS_CLASS) || td.classList.contains(cls.HEADER_CELLS_CLASS)
-                || !this.activeViewOptions.timeScale.enable) {
-                return true;
-            }
-            return false;
-        };
-        Schedule.prototype.getDateFromElement = function (td) {
-            if (!ej2_base_3.isNullOrUndefined(td.getAttribute('data-date'))) {
-                var dateInMS = parseInt(td.getAttribute('data-date'), 10);
-                return new Date(dateInMS);
-            }
-            return undefined;
-        };
-        Schedule.prototype.getCellTemplate = function () {
-            return this.cellTemplateFn;
-        };
-        Schedule.prototype.getDateHeaderTemplate = function () {
-            return this.dateHeaderTemplateFn;
-        };
-        Schedule.prototype.getMajorSlotTemplate = function () {
-            return this.majorSlotTemplateFn;
-        };
-        Schedule.prototype.getMinorSlotTemplate = function () {
-            return this.minorSlotTemplateFn;
-        };
-        Schedule.prototype.getAppointmentTemplate = function () {
-            return this.appointmentTemplateFn;
-        };
-        Schedule.prototype.getEventTooltipTemplate = function () {
-            return this.eventTooltipTemplateFn;
-        };
-        Schedule.prototype.getEditorTemplate = function () {
-            return this.editorTemplateFn;
-        };
-        Schedule.prototype.getResourceHeaderTemplate = function () {
-            return this.resourceHeaderTemplateFn;
-        };
-        Schedule.prototype.getCssProperties = function () {
-            var cssProps = {
-                border: this.enableRtl ? 'borderLeftWidth' : 'borderRightWidth',
-                padding: this.enableRtl ? 'paddingLeft' : 'paddingRight'
-            };
-            return cssProps;
-        };
-        Schedule.prototype.onDocumentClick = function (args) {
-            this.notify(events.documentClick, { event: args });
-        };
-        Schedule.prototype.onScheduleResize = function () {
-            if (this.quickPopup) {
-                this.quickPopup.onClosePopup();
-            }
-            if (this.currentView === 'Month') {
-                this.notify(events.dataReady, {});
-            }
-        };
-        Schedule.prototype.templateParser = function (template) {
-            if (template) {
-                try {
-                    if (document.querySelectorAll(template).length) {
-                        return ej2_base_3.compile(document.querySelector(template).innerHTML.trim());
-                    }
+        return cssProps;
+    };
+    Schedule.prototype.onDocumentClick = function (args) {
+        this.notify(events.documentClick, { event: args });
+    };
+    Schedule.prototype.onScheduleResize = function () {
+        if (this.quickPopup) {
+            this.quickPopup.onClosePopup();
+        }
+        if (this.currentView === 'Month') {
+            this.notify(events.dataReady, {});
+        }
+    };
+    Schedule.prototype.templateParser = function (template) {
+        if (template) {
+            try {
+                if (document.querySelectorAll(template).length) {
+                    return compile(document.querySelector(template).innerHTML.trim());
                 }
-                catch (error) {
-                    return ej2_base_3.compile(template);
-                }
             }
-            return undefined;
-        };
-        Schedule.prototype.unwireEvents = function () {
-            var resize = 'onorientationchange' in window ? 'orientationchange' : 'resize';
-            ej2_base_2.EventHandler.remove(window, resize, this.onScheduleResize);
-            ej2_base_2.EventHandler.remove(document, ej2_base_2.Browser.touchStartEvent, this.onDocumentClick);
-            if (this.keyboardInteractionModule) {
-                this.keyboardInteractionModule.destroy();
+            catch (error) {
+                return compile(template);
             }
-        };
-        Schedule.prototype.getModuleName = function () {
-            return 'schedule';
-        };
-        Schedule.prototype.getPersistData = function () {
-            return this.addOnPersist(['currentView', 'selectedDate']);
-        };
-        Schedule.prototype.onPropertyChanged = function (newProp, oldProp) {
-            var requireRefresh = false;
-            for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
-                var prop = _a[_i];
-                switch (prop) {
-                    case 'width':
-                    case 'height':
-                        this.notify(events.uiUpdate, { module: 'scroll', properties: { width: newProp.width, height: newProp.height } });
-                        break;
-                    case 'views':
-                        this.setViewOptions();
-                        if (this.headerModule) {
-                            this.headerModule.updateItems();
-                        }
-                        this.changeView(this.currentView, null, true);
-                        break;
-                    case 'currentView':
-                        this.changeView(newProp.currentView, null, true);
-                        break;
-                    case 'selectedDate':
-                        this.changeDate(newProp.selectedDate);
-                        break;
-                    case 'dateFormat':
-                        this.activeViewOptions = this.getActiveViewOptions();
-                        if (this.headerModule) {
-                            this.headerModule.updateDateRange(this.activeView.getDateRangeText());
-                        }
-                        break;
-                    case 'showHeaderBar':
-                        if (this.headerModule) {
-                            this.headerModule.destroy();
-                            this.headerModule = null;
-                        }
-                        if (newProp.showHeaderBar) {
-                            this.headerModule = new header_renderer_1.HeaderRenderer(this);
-                            this.headerModule.updateDateRange(this.activeView.getDateRangeText());
-                        }
-                        this.notify(events.scrollUiUpdate, { cssProperties: this.getCssProperties() });
-                        break;
-                    case 'showWeekend':
-                    case 'workDays':
-                    case 'startHour':
-                    case 'endHour':
-                    case 'workHours':
-                    case 'readonly':
-                        requireRefresh = true;
-                        break;
-                    case 'locale':
-                        this.setCldrTimeFormat();
-                        this.refresh();
-                        break;
-                    case 'firstDayOfWeek':
-                        if (this.headerModule) {
-                            this.headerModule.setDayOfWeek(newProp.firstDayOfWeek);
-                        }
-                        requireRefresh = true;
-                        break;
-                    case 'showTimeIndicator':
-                        if (this.activeViewOptions.timeScale.enable) {
-                            this.activeView.highlightCurrentTime();
-                        }
-                        break;
-                    case 'cellTemplate':
-                        this.activeViewOptions.cellTemplate = newProp.cellTemplate;
-                        this.cellTemplateFn = this.templateParser(this.activeViewOptions.cellTemplate);
-                        requireRefresh = true;
-                        break;
-                    case 'dateHeaderTemplate':
-                        this.activeViewOptions.dateHeaderTemplate = newProp.dateHeaderTemplate;
-                        this.dateHeaderTemplateFn = this.templateParser(this.activeViewOptions.dateHeaderTemplate);
-                        requireRefresh = true;
-                        break;
-                    case 'timezone':
-                        this.eventBase.timezonePropertyChange(oldProp.timezone);
-                        break;
-                    case 'enableRtl':
-                        if (this.headerModule) {
-                            this.headerModule.setRtl(this.enableRtl);
-                        }
-                        if (this.enableRtl) {
-                            ej2_base_4.addClass([this.element], cls.RTL);
-                        }
-                        else {
-                            ej2_base_4.removeClass([this.element], cls.RTL);
-                        }
-                        requireRefresh = true;
-                        break;
-                    default:
-                        this.extendedPropertyChange(prop, newProp, oldProp);
-                        break;
-                }
-            }
-            if (requireRefresh) {
-                this.initializeView(this.currentView);
-            }
-        };
-        Schedule.prototype.extendedPropertyChange = function (prop, newProp, oldProp) {
+        }
+        return undefined;
+    };
+    /**
+     * Unbinding events from the element on widget destroy.
+     * @hidden
+     */
+    Schedule.prototype.unwireEvents = function () {
+        var resize = 'onorientationchange' in window ? 'orientationchange' : 'resize';
+        EventHandler.remove(window, resize, this.onScheduleResize);
+        EventHandler.remove(document, Browser.touchStartEvent, this.onDocumentClick);
+        if (this.keyboardInteractionModule) {
+            this.keyboardInteractionModule.destroy();
+        }
+    };
+    /**
+     * Core method to return the component name.
+     * @private
+     */
+    Schedule.prototype.getModuleName = function () {
+        return 'schedule';
+    };
+    /**
+     * Returns the properties to be maintained in the persisted state.
+     * @private
+     */
+    Schedule.prototype.getPersistData = function () {
+        return this.addOnPersist(['currentView', 'selectedDate']);
+    };
+    /**
+     * Called internally, if any of the property value changed.
+     * @private
+     */
+    Schedule.prototype.onPropertyChanged = function (newProp, oldProp) {
+        var requireRefresh = false;
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
             switch (prop) {
-                case 'cssClass':
-                    if (oldProp.cssClass) {
-                        ej2_base_4.removeClass([this.element], oldProp.cssClass);
+                case 'width':
+                case 'height':
+                    this.notify(events.uiUpdate, { module: 'scroll', properties: { width: newProp.width, height: newProp.height } });
+                    break;
+                case 'views':
+                    this.setViewOptions();
+                    if (this.headerModule) {
+                        this.headerModule.updateItems();
                     }
-                    if (newProp.cssClass) {
-                        ej2_base_4.addClass([this.element], newProp.cssClass);
-                    }
-                    break;
-                case 'hideEmptyAgendaDays':
-                case 'agendaDaysCount':
-                    this.activeViewOptions = this.getActiveViewOptions();
                     this.changeView(this.currentView, null, true);
                     break;
-                case 'eventSettings':
-                    this.onEventSettingsPropertyChanged(newProp.eventSettings, oldProp.eventSettings);
+                case 'currentView':
+                    this.changeView(newProp.currentView, null, true);
                     break;
-                case 'allowKeyboardInteraction':
-                    if (this.keyboardInteractionModule) {
-                        this.keyboardInteractionModule.destroy();
-                        this.keyboardInteractionModule = null;
+                case 'selectedDate':
+                    this.changeDate(newProp.selectedDate);
+                    break;
+                case 'dateFormat':
+                    this.activeViewOptions = this.getActiveViewOptions();
+                    if (this.headerModule) {
+                        this.headerModule.updateDateRange(this.activeView.getDateRangeText());
                     }
-                    if (newProp.allowKeyboardInteraction) {
-                        this.keyboardInteractionModule = new keyboard_1.KeyboardInteraction(this);
+                    break;
+                case 'showHeaderBar':
+                    if (this.headerModule) {
+                        this.headerModule.destroy();
+                        this.headerModule = null;
                     }
+                    if (newProp.showHeaderBar) {
+                        this.headerModule = new HeaderRenderer(this);
+                        this.headerModule.updateDateRange(this.activeView.getDateRangeText());
+                    }
+                    this.notify(events.scrollUiUpdate, { cssProperties: this.getCssProperties() });
                     break;
-                case 'editorTemplate':
-                    if (!ej2_base_3.isNullOrUndefined(this.editorTemplate)) {
-                        this.editorTemplateFn = this.templateParser(this.editorTemplate);
+                case 'showWeekend':
+                case 'workDays':
+                case 'startHour':
+                case 'endHour':
+                case 'workHours':
+                case 'readonly':
+                    requireRefresh = true;
+                    break;
+                case 'locale':
+                    this.setCldrTimeFormat();
+                    this.refresh();
+                    break;
+                case 'firstDayOfWeek':
+                    if (this.headerModule) {
+                        this.headerModule.setDayOfWeek(newProp.firstDayOfWeek);
                     }
-                    this.eventWindow.setDialogContent();
+                    requireRefresh = true;
                     break;
-                case 'group':
-                    this.initializeView(this.currentView);
+                case 'showTimeIndicator':
+                    if (this.activeViewOptions.timeScale.enable) {
+                        this.activeView.highlightCurrentTime();
+                    }
                     break;
-                case 'resources':
-                    this.initializeResources(true);
+                case 'cellTemplate':
+                    this.activeViewOptions.cellTemplate = newProp.cellTemplate;
+                    this.cellTemplateFn = this.templateParser(this.activeViewOptions.cellTemplate);
+                    requireRefresh = true;
                     break;
-                case 'timeScale':
-                    this.activeViewOptions.timeScale.interval = newProp.timeScale.interval || this.activeViewOptions.timeScale.interval;
-                    this.activeViewOptions.timeScale.slotCount = newProp.timeScale.slotCount || this.activeViewOptions.timeScale.slotCount;
-                    this.eventWindow.refreshDateTimePicker();
-                    this.initializeView(this.currentView);
+                case 'dateHeaderTemplate':
+                    this.activeViewOptions.dateHeaderTemplate = newProp.dateHeaderTemplate;
+                    this.dateHeaderTemplateFn = this.templateParser(this.activeViewOptions.dateHeaderTemplate);
+                    requireRefresh = true;
                     break;
+                case 'timezone':
+                    this.eventBase.timezonePropertyChange(oldProp.timezone);
+                    break;
+                case 'enableRtl':
+                    if (this.headerModule) {
+                        this.headerModule.setRtl(this.enableRtl);
+                    }
+                    if (this.enableRtl) {
+                        addClass([this.element], cls.RTL);
+                    }
+                    else {
+                        removeClass([this.element], cls.RTL);
+                    }
+                    requireRefresh = true;
+                    break;
+                default:
+                    this.extendedPropertyChange(prop, newProp, oldProp);
+                    break;
             }
-        };
-        Schedule.prototype.onEventSettingsPropertyChanged = function (newProp, oldProp) {
-            var requireRefresh = false;
-            for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
-                var prop = _a[_i];
-                switch (prop) {
-                    case 'dataSource':
-                    case 'query':
-                    case 'fields':
-                        this.initializeDataModule();
-                        requireRefresh = true;
-                        break;
-                    case 'template':
-                        this.activeViewOptions.eventTemplate = newProp.template;
-                        this.appointmentTemplateFn = this.templateParser(this.activeViewOptions.eventTemplate);
-                        requireRefresh = true;
-                        break;
-                    case 'enableTooltip':
-                        if (this.eventTooltip) {
-                            this.eventTooltip.destroy();
-                            this.eventTooltip = null;
-                        }
-                        if (newProp.enableTooltip) {
-                            this.eventTooltip = new event_tooltip_1.EventTooltip(this);
-                        }
-                        break;
-                    case 'tooltipTemplate':
-                        this.eventTooltipTemplateFn = this.templateParser(this.eventSettings.tooltipTemplate);
-                        break;
-                    case 'resourceColorField':
-                        if (this.resourceBase) {
-                            this.resourceBase.setResourceCollection();
-                        }
-                        requireRefresh = true;
-                        break;
+        }
+        if (requireRefresh) {
+            this.initializeView(this.currentView);
+        }
+    };
+    Schedule.prototype.extendedPropertyChange = function (prop, newProp, oldProp) {
+        switch (prop) {
+            case 'cssClass':
+                if (oldProp.cssClass) {
+                    removeClass([this.element], oldProp.cssClass);
                 }
-            }
-            if (requireRefresh) {
-                this.renderModule.refreshDataManager();
-            }
-        };
-        Schedule.prototype.showSpinner = function () {
-            ej2_popups_1.showSpinner(this.element);
-        };
-        Schedule.prototype.hideSpinner = function () {
-            ej2_popups_1.hideSpinner(this.element);
-        };
-        Schedule.prototype.setWorkHours = function (dates, start, end, groupIndex) {
-            var startHour = this.globalize.parseDate(start, { skeleton: 'Hm' });
-            var endHour = this.globalize.parseDate(end, { skeleton: 'Hm' });
-            var tableEle = this.getContentTable();
-            if (ej2_base_3.isNullOrUndefined(startHour) || ej2_base_3.isNullOrUndefined(endHour) || !tableEle) {
-                return;
-            }
-            startHour.setMilliseconds(0);
-            endHour.setMilliseconds(0);
-            var viewStartHour = this.activeView.getStartHour();
-            if (startHour < viewStartHour) {
-                startHour = viewStartHour;
-            }
-            if (endHour > this.activeView.getEndHour()) {
-                endHour = this.activeView.getEndHour();
-            }
-            var msMajorInterval = this.activeViewOptions.timeScale.interval * util.MS_PER_MINUTE;
-            var msInterval = msMajorInterval / this.activeViewOptions.timeScale.slotCount;
-            var startIndex = Math.round((util.getDateInMs(startHour) - util.getDateInMs(viewStartHour)) / msInterval);
-            var endIndex = Math.ceil((util.getDateInMs(endHour) - util.getDateInMs(viewStartHour)) / msInterval);
-            var cells = [];
-            for (var _i = 0, dates_1 = dates; _i < dates_1.length; _i++) {
-                var date = dates_1[_i];
-                util.resetTime(date);
-                var renderDates = this.activeView.renderDates;
-                if (!ej2_base_3.isNullOrUndefined(groupIndex) && this.resourceBase) {
-                    renderDates = this.resourceBase.lastResourceLevel[groupIndex].renderDates;
+                if (newProp.cssClass) {
+                    addClass([this.element], newProp.cssClass);
                 }
-                var colIndex = this.getIndexOfDate(renderDates, date);
-                if (colIndex >= 0) {
-                    for (var i = startIndex; i < endIndex; i++) {
-                        if (!ej2_base_3.isNullOrUndefined(groupIndex)) {
-                            var tds = [].slice.call(tableEle.rows[i].querySelectorAll('.' + cls.WORK_CELLS_CLASS + '[data-group-index="' + groupIndex + '"]'));
-                            cells.push(tds[colIndex]);
-                        }
-                        else {
-                            cells.push(tableEle.rows[i].cells[colIndex]);
-                        }
+                break;
+            case 'hideEmptyAgendaDays':
+            case 'agendaDaysCount':
+                this.activeViewOptions = this.getActiveViewOptions();
+                this.changeView(this.currentView, null, true);
+                break;
+            case 'eventSettings':
+                this.onEventSettingsPropertyChanged(newProp.eventSettings, oldProp.eventSettings);
+                break;
+            case 'allowKeyboardInteraction':
+                if (this.keyboardInteractionModule) {
+                    this.keyboardInteractionModule.destroy();
+                    this.keyboardInteractionModule = null;
+                }
+                if (newProp.allowKeyboardInteraction) {
+                    this.keyboardInteractionModule = new KeyboardInteraction(this);
+                }
+                break;
+            case 'editorTemplate':
+                if (!isNullOrUndefined(this.editorTemplate)) {
+                    this.editorTemplateFn = this.templateParser(this.editorTemplate);
+                }
+                this.eventWindow.setDialogContent();
+                break;
+            case 'group':
+                this.initializeView(this.currentView);
+                break;
+            case 'resources':
+                this.initializeResources(true);
+                break;
+            case 'timeScale':
+                this.activeViewOptions.timeScale.interval = newProp.timeScale.interval || this.activeViewOptions.timeScale.interval;
+                this.activeViewOptions.timeScale.slotCount = newProp.timeScale.slotCount || this.activeViewOptions.timeScale.slotCount;
+                this.eventWindow.refreshDateTimePicker();
+                this.initializeView(this.currentView);
+                break;
+        }
+    };
+    Schedule.prototype.onEventSettingsPropertyChanged = function (newProp, oldProp) {
+        var requireRefresh = false;
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            switch (prop) {
+                case 'dataSource':
+                case 'query':
+                case 'fields':
+                    this.initializeDataModule();
+                    requireRefresh = true;
+                    break;
+                case 'template':
+                    this.activeViewOptions.eventTemplate = newProp.template;
+                    this.appointmentTemplateFn = this.templateParser(this.activeViewOptions.eventTemplate);
+                    requireRefresh = true;
+                    break;
+                case 'enableTooltip':
+                    if (this.eventTooltip) {
+                        this.eventTooltip.destroy();
+                        this.eventTooltip = null;
                     }
-                }
+                    if (newProp.enableTooltip) {
+                        this.eventTooltip = new EventTooltip(this);
+                    }
+                    break;
+                case 'tooltipTemplate':
+                    this.eventTooltipTemplateFn = this.templateParser(this.eventSettings.tooltipTemplate);
+                    break;
+                case 'resourceColorField':
+                    if (this.resourceBase) {
+                        this.resourceBase.setResourceCollection();
+                    }
+                    requireRefresh = true;
+                    break;
             }
-            ej2_base_4.addClass(cells, cls.WORK_HOURS_CLASS);
-        };
-        Schedule.prototype.getCellDetails = function (td) {
-            var startTime = this.getDateFromElement(td);
-            if (ej2_base_3.isNullOrUndefined(startTime)) {
-                return undefined;
+        }
+        if (requireRefresh) {
+            this.renderModule.refreshDataManager();
+        }
+    };
+    /**
+     * Allows to show the spinner on schedule at the required scenarios.
+     */
+    Schedule.prototype.showSpinner = function () {
+        showSpinner(this.element);
+    };
+    /**
+     * When the spinner is shown manually using `showSpinner` method, it can be hidden using this `hideSpinner` method.
+     */
+    Schedule.prototype.hideSpinner = function () {
+        hideSpinner(this.element);
+    };
+    /**
+     * Sets different working hours on the required working days by accepting the required start and end time as well as the date collection
+     *  as its parameters.
+     * @method setWorkHours
+     * @param {date} dates Collection of dates on which the given start and end hour range needs to be applied.
+     * @param {string} start Defines the work start hour.
+     * @param {string} end Defines the work end hour.
+     * @param {number} groupIndex Defines the resource index from last level.
+     * @returns {void}
+     */
+    Schedule.prototype.setWorkHours = function (dates, start, end, groupIndex) {
+        var startHour = this.globalize.parseDate(start, { skeleton: 'Hm' });
+        var endHour = this.globalize.parseDate(end, { skeleton: 'Hm' });
+        var tableEle = this.getContentTable();
+        if (isNullOrUndefined(startHour) || isNullOrUndefined(endHour) || !tableEle) {
+            return;
+        }
+        startHour.setMilliseconds(0);
+        endHour.setMilliseconds(0);
+        var viewStartHour = this.activeView.getStartHour();
+        if (startHour < viewStartHour) {
+            startHour = viewStartHour;
+        }
+        if (endHour > this.activeView.getEndHour()) {
+            endHour = this.activeView.getEndHour();
+        }
+        var msMajorInterval = this.activeViewOptions.timeScale.interval * util.MS_PER_MINUTE;
+        var msInterval = msMajorInterval / this.activeViewOptions.timeScale.slotCount;
+        var startIndex = Math.round((util.getDateInMs(startHour) - util.getDateInMs(viewStartHour)) / msInterval);
+        var endIndex = Math.ceil((util.getDateInMs(endHour) - util.getDateInMs(viewStartHour)) / msInterval);
+        var cells = [];
+        for (var _i = 0, dates_1 = dates; _i < dates_1.length; _i++) {
+            var date = dates_1[_i];
+            util.resetTime(date);
+            var renderDates = this.activeView.renderDates;
+            if (!isNullOrUndefined(groupIndex) && this.resourceBase) {
+                renderDates = this.resourceBase.lastResourceLevel[groupIndex].renderDates;
             }
-            var endTime;
-            if (!this.activeViewOptions.timeScale.enable || td.classList.contains(cls.ALLDAY_CELLS_CLASS) ||
-                td.classList.contains(cls.HEADER_CELLS_CLASS)) {
-                endTime = util.addDays(new Date(startTime.getTime()), 1);
-            }
-            else {
-                endTime = this.activeView.getEndDateFromStartDate(startTime);
-            }
-            var data = {
-                startTime: startTime,
-                endTime: endTime,
-                isAllDay: this.isAllDayCell(td),
-                element: td
-            };
-            var groupIndex = td.getAttribute('data-group-index');
-            if (!ej2_base_3.isNullOrUndefined(groupIndex)) {
-                data.groupIndex = parseInt(groupIndex, 10);
-            }
-            return data;
-        };
-        Schedule.prototype.getResourcesByIndex = function (index) {
-            if (this.resourceBase && this.resourceBase.lastResourceLevel) {
-                if (index < 0 || index >= this.resourceBase.lastResourceLevel.length) {
-                    return undefined;
+            var colIndex = this.getIndexOfDate(renderDates, date);
+            if (colIndex >= 0) {
+                for (var i = startIndex; i < endIndex; i++) {
+                    if (!isNullOrUndefined(groupIndex)) {
+                        var tds = [].slice.call(tableEle.rows[i].querySelectorAll('.' + cls.WORK_CELLS_CLASS + '[data-group-index="' + groupIndex + '"]'));
+                        cells.push(tds[colIndex]);
+                    }
+                    else {
+                        cells.push(tableEle.rows[i].cells[colIndex]);
+                    }
                 }
-                var data = this.resourceBase.lastResourceLevel[index];
-                return { resource: data.resource, resourceData: data.resourceData };
             }
+        }
+        addClass(cells, cls.WORK_HOURS_CLASS);
+    };
+    /**
+     * Retrieves the start and end time information of the specific cell element.
+     * @method getCellDetails
+     * @param  {Element} td The cell element whose start and end time details are to be retrieved.
+     * @returns {CellClickEventArgs} Object An object holding the startTime, endTime and all-day information along with the target HTML
+     *  element will be returned.
+     */
+    Schedule.prototype.getCellDetails = function (td) {
+        var startTime = this.getDateFromElement(td);
+        if (isNullOrUndefined(startTime)) {
             return undefined;
+        }
+        var endTime;
+        if (!this.activeViewOptions.timeScale.enable || td.classList.contains(cls.ALLDAY_CELLS_CLASS) ||
+            td.classList.contains(cls.HEADER_CELLS_CLASS)) {
+            endTime = util.addDays(new Date(startTime.getTime()), 1);
+        }
+        else {
+            endTime = this.activeView.getEndDateFromStartDate(startTime);
+        }
+        var data = {
+            startTime: startTime,
+            endTime: endTime,
+            isAllDay: this.isAllDayCell(td),
+            element: td
         };
-        Schedule.prototype.scrollTo = function (hour) {
-            if (this.activeView.scrollToHour) {
-                this.activeView.scrollToHour(hour);
+        var groupIndex = td.getAttribute('data-group-index');
+        if (!isNullOrUndefined(groupIndex)) {
+            data.groupIndex = parseInt(groupIndex, 10);
+        }
+        return data;
+    };
+    /**
+     * Retrieves the resource details based on the provided resource index.
+     * @param {number} index index of the resources at the last level.
+     * @returns {ResourceDetails} Object An object holding the details of resource and resourceData.
+     */
+    Schedule.prototype.getResourcesByIndex = function (index) {
+        if (this.resourceBase && this.resourceBase.lastResourceLevel) {
+            if (index < 0 || index >= this.resourceBase.lastResourceLevel.length) {
+                return undefined;
             }
-        };
-        Schedule.prototype.addEvent = function (data) {
-            this.crudModule.addEvent(data);
-        };
-        Schedule.prototype.saveEvent = function (data, currentAction) {
-            this.crudModule.saveEvent(data, currentAction);
-        };
-        Schedule.prototype.deleteEvent = function (id, currentAction) {
-            this.crudModule.deleteEvent(id, currentAction);
-        };
-        Schedule.prototype.getEvents = function () {
-            return this.eventsData;
-        };
-        Schedule.prototype.getOccurrencesByID = function (eventID) {
-            return this.eventBase.getOccurrencesByID(eventID);
-        };
-        Schedule.prototype.getOccurrencesByRange = function (startTime, endTime) {
-            return this.eventBase.getOccurrencesByRange(startTime, endTime);
-        };
-        Schedule.prototype.getCurrentViewDates = function () {
-            return this.activeView.renderDates;
-        };
-        Schedule.prototype.getCurrentViewEvents = function () {
-            return this.eventsProcessed;
-        };
-        Schedule.prototype.refreshEvents = function () {
-            this.renderModule.refreshDataManager();
-        };
-        Schedule.prototype.getEventDetails = function (element) {
-            var guid = element.getAttribute('data-guid');
-            if (guid) {
-                return this.eventBase.getEventByGuid(guid);
-            }
-            return {};
-        };
-        Schedule.prototype.isSlotAvailable = function (startTime, endTime, groupIndex) {
-            var eventCollection = this.eventBase.filterEvents(startTime, endTime);
-            if (!ej2_base_3.isNullOrUndefined(groupIndex) && this.resourceBase && this.resourceBase.lastResourceLevel.length > 0) {
-                eventCollection = this.eventBase.filterEventsByResource(this.resourceBase.lastResourceLevel[groupIndex], eventCollection);
-            }
-            return (eventCollection.length > 0) ? false : true;
-        };
-        Schedule.prototype.openEditor = function (data, action) {
-            this.eventWindow.openEditor(data, action);
-        };
-        Schedule.prototype.adjustEventWrapper = function () {
-            this.activeView.adjustEventWrapper();
-        };
-        Schedule.prototype.addResource = function (resources, name, index) {
-            this.resourceBase.addResource(resources, name, index);
-        };
-        Schedule.prototype.removeResource = function (resourceId, name) {
-            this.resourceBase.removeResource(resourceId, name);
-        };
-        Schedule.prototype.destroy = function () {
-            if (this.quickPopup) {
-                this.quickPopup.destroy();
-                this.quickPopup = null;
-            }
-            if (this.eventWindow) {
-                this.eventWindow.destroy();
-                this.eventWindow = null;
-            }
-            this.unwireEvents();
-            if (this.headerModule) {
-                this.headerModule.destroy();
-                this.headerModule = null;
-            }
-            if (this.scrollModule) {
-                this.scrollModule.destroy();
-                this.scrollModule = null;
-            }
-            if (this.activeView) {
-                this.activeView.removeEventListener();
-                this.activeView.destroy();
-                this.activeView = null;
-            }
-            if (this.scheduleTouchModule) {
-                this.scheduleTouchModule.destroy();
-                this.scheduleTouchModule = null;
-            }
-            _super.prototype.destroy.call(this);
-            this.element.innerHTML = '';
-            var removeClasses = [cls.ROOT];
-            if (this.cssClass) {
-                removeClasses = removeClasses.concat(this.cssClass.split(' '));
-            }
-            ej2_base_4.removeClass([this.element], removeClasses);
-        };
-        __decorate([
-            ej2_base_1.Property('auto')
-        ], Schedule.prototype, "width", void 0);
-        __decorate([
-            ej2_base_1.Property('auto')
-        ], Schedule.prototype, "height", void 0);
-        __decorate([
-            ej2_base_1.Property(true)
-        ], Schedule.prototype, "showHeaderBar", void 0);
-        __decorate([
-            ej2_base_1.Property(true)
-        ], Schedule.prototype, "showTimeIndicator", void 0);
-        __decorate([
-            ej2_base_1.Property('Week')
-        ], Schedule.prototype, "currentView", void 0);
-        __decorate([
-            ej2_base_1.Property(['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'])
-        ], Schedule.prototype, "views", void 0);
-        __decorate([
-            ej2_base_1.Property(new Date())
-        ], Schedule.prototype, "selectedDate", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], Schedule.prototype, "dateFormat", void 0);
-        __decorate([
-            ej2_base_1.Property(true)
-        ], Schedule.prototype, "showWeekend", void 0);
-        __decorate([
-            ej2_base_1.Property(0)
-        ], Schedule.prototype, "firstDayOfWeek", void 0);
-        __decorate([
-            ej2_base_1.Property([1, 2, 3, 4, 5])
-        ], Schedule.prototype, "workDays", void 0);
-        __decorate([
-            ej2_base_1.Property('00:00')
-        ], Schedule.prototype, "startHour", void 0);
-        __decorate([
-            ej2_base_1.Property('24:00')
-        ], Schedule.prototype, "endHour", void 0);
-        __decorate([
-            ej2_base_3.Complex({}, work_hours_1.WorkHours)
-        ], Schedule.prototype, "workHours", void 0);
-        __decorate([
-            ej2_base_3.Complex({}, time_scale_1.TimeScale)
-        ], Schedule.prototype, "timeScale", void 0);
-        __decorate([
-            ej2_base_1.Property(true)
-        ], Schedule.prototype, "allowKeyboardInteraction", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], Schedule.prototype, "dateHeaderTemplate", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], Schedule.prototype, "cellTemplate", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Schedule.prototype, "readonly", void 0);
-        __decorate([
-            ej2_base_1.Property(true)
-        ], Schedule.prototype, "showQuickInfo", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], Schedule.prototype, "editorTemplate", void 0);
-        __decorate([
-            ej2_base_1.Property(7)
-        ], Schedule.prototype, "agendaDaysCount", void 0);
-        __decorate([
-            ej2_base_1.Property(true)
-        ], Schedule.prototype, "hideEmptyAgendaDays", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], Schedule.prototype, "timezone", void 0);
-        __decorate([
-            ej2_base_3.Complex({}, event_settings_1.EventSettings)
-        ], Schedule.prototype, "eventSettings", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], Schedule.prototype, "resourceHeaderTemplate", void 0);
-        __decorate([
-            ej2_base_3.Complex({}, group_1.Group)
-        ], Schedule.prototype, "group", void 0);
-        __decorate([
-            ej2_base_1.Collection([], resources_1.Resources)
-        ], Schedule.prototype, "resources", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], Schedule.prototype, "cssClass", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Schedule.prototype, "enableRtl", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Schedule.prototype, "created", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Schedule.prototype, "destroyed", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Schedule.prototype, "cellClick", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Schedule.prototype, "cellDoubleClick", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Schedule.prototype, "actionBegin", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Schedule.prototype, "actionComplete", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Schedule.prototype, "actionFailure", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Schedule.prototype, "navigating", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Schedule.prototype, "renderCell", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Schedule.prototype, "eventClick", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Schedule.prototype, "eventRendered", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Schedule.prototype, "dataBinding", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Schedule.prototype, "popupOpen", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Schedule.prototype, "dataBound", void 0);
-        Schedule = __decorate([
-            ej2_base_3.NotifyPropertyChanges
-        ], Schedule);
-        return Schedule;
-    }(ej2_base_1.Component));
-    exports.Schedule = Schedule;
-});
+            var data = this.resourceBase.lastResourceLevel[index];
+            return { resource: data.resource, resourceData: data.resourceData };
+        }
+        return undefined;
+    };
+    /**
+     * Scrolls the Schedule content area to the specified time.
+     * @method scrollTo
+     * @param {string} hour Accepts the time value in the skeleton format of 'Hm'.
+     * @returns {void}
+     */
+    Schedule.prototype.scrollTo = function (hour) {
+        if (this.activeView.scrollToHour) {
+            this.activeView.scrollToHour(hour);
+        }
+    };
+    /**
+     * Adds the newly created event into the Schedule dataSource.
+     * @method addEvent
+     * @param {Object | Object[]} data Single or collection of event objects to be added into Schedule.
+     * @returns {void}
+     */
+    Schedule.prototype.addEvent = function (data) {
+        this.crudModule.addEvent(data);
+    };
+    /**
+     * Updates the changes made in the event object by passing it as an parameter into the dataSource.
+     * @method saveEvent
+     * @param {[key: string]: Object} data Single or collection of event objects to be saved into Schedule.
+     * @param {CurrentAction} currentAction Denotes the action that takes place either for editing occurrence or series.
+     *  The valid current action names are `EditOccurrence` or `EditSeries`.
+     * @returns {void}
+     */
+    Schedule.prototype.saveEvent = function (data, currentAction) {
+        this.crudModule.saveEvent(data, currentAction);
+    };
+    /**
+     * Deletes the events based on the provided ID or event collection in the argument list.
+     * @method deleteEvent
+     * @param {{[key: string]: Object}} id Single event objects to be removed from the Schedule.
+     * @param {{[key: string]: Object }[]} id Collection of event objects to be removed from the Schedule.
+     * @param {string | number} id Accepts the ID of the event object which needs to be removed from the Schedule.
+     * @param {CurrentAction} currentAction Denotes the delete action that takes place either on occurrence or series events.
+     *  The valid current action names are `Delete`, `DeleteOccurrence` or `DeleteSeries`.
+     * @returns {void}
+     */
+    Schedule.prototype.deleteEvent = function (id, currentAction) {
+        this.crudModule.deleteEvent(id, currentAction);
+    };
+    /**
+     * Retrieves the entire collection of events bound to the Schedule.
+     * @method getEvents
+     * @returns {Object[]} Returns the collection of event objects from the Schedule.
+     */
+    Schedule.prototype.getEvents = function () {
+        return this.eventsData;
+    };
+    /**
+     * Retrieves the occurrences of a single recurrence event based on the provided parent ID.
+     * @method getOccurrencesByID
+     * @param {number} eventID ID of the parent recurrence data from which the occurrences are fetched.
+     * @returns {Object[]} Returns the collection of occurrence event objects.
+     */
+    Schedule.prototype.getOccurrencesByID = function (eventID) {
+        return this.eventBase.getOccurrencesByID(eventID);
+    };
+    /**
+     * Retrieves all the occurrences that lies between the specific start and end time range.
+     * @method getOccurrencesByRange
+     * @param {Date} startTime Denotes the start time range.
+     * @param {Date} endTime Denotes the end time range.
+     * @returns {Object[]} Returns the collection of occurrence event objects that lies between the provided start and end time.
+     */
+    Schedule.prototype.getOccurrencesByRange = function (startTime, endTime) {
+        return this.eventBase.getOccurrencesByRange(startTime, endTime);
+    };
+    /**
+     * Retrieves the dates that lies on active view of Schedule.
+     * @method getCurrentViewDates
+     * @returns {Date[]} Returns the collection of dates.
+     */
+    Schedule.prototype.getCurrentViewDates = function () {
+        return this.activeView.renderDates;
+    };
+    /**
+     * Retrieves the events that lies on the current date range of the active view of Schedule.
+     * @method getCurrentViewEvents
+     * @returns {Object[]} Returns the collection of events.
+     */
+    Schedule.prototype.getCurrentViewEvents = function () {
+        return this.eventsProcessed;
+    };
+    /**
+     * Refreshes the event dataSource. This method may be useful when the events alone in the schedule needs to be re-rendered.
+     * @method refreshEvents
+     * @returns {void}
+     */
+    Schedule.prototype.refreshEvents = function () {
+        this.renderModule.refreshDataManager();
+    };
+    /**
+     * To retrieve the appointment object from element.
+     * @method getEventDetails
+     * @param {Element} element Denotes the event UI element on the Schedule.
+     * @returns {Object} Returns the event details.
+     */
+    Schedule.prototype.getEventDetails = function (element) {
+        var guid = element.getAttribute('data-guid');
+        if (guid) {
+            return this.eventBase.getEventByGuid(guid);
+        }
+        return {};
+    };
+    /**
+     * To check whether the given time range slots are available for event creation or already occupied by other events.
+     * @method isSlotAvailable
+     * @param {Date} startTime Denotes the start time of the slot.
+     * @param {Date} endTime Denotes the end time of the slot.
+     * @param {number} groupIndex Defines the resource index from last level.
+     * @returns {boolean} Returns true, if the slot that lies in the provided time range does not contain any other events.
+     */
+    Schedule.prototype.isSlotAvailable = function (startTime, endTime, groupIndex) {
+        var eventCollection = this.eventBase.filterEvents(startTime, endTime);
+        if (!isNullOrUndefined(groupIndex) && this.resourceBase && this.resourceBase.lastResourceLevel.length > 0) {
+            eventCollection = this.eventBase.filterEventsByResource(this.resourceBase.lastResourceLevel[groupIndex], eventCollection);
+        }
+        return (eventCollection.length > 0) ? false : true;
+    };
+    /**
+     * To manually open the event editor on specific time or on certain events.
+     * @method openEditor
+     * @param {Object} data It can be either cell data or event data.
+     * @param {CurrentAction} action Defines the action for which the editor needs to be opened such as either for new event creation or
+     *  for editing of existing events. The applicable action names that can be used here are `Add`, `Save`, `EditOccurrence`
+     *  and `EditSeries`.
+     * @returns {void}
+     */
+    Schedule.prototype.openEditor = function (data, action) {
+        this.eventWindow.openEditor(data, action);
+    };
+    /**
+     * This method has been added to adjust the size of the outer event wrapper class that holds the collection of events,
+     *  while trying to set manual height and width to the Schedule cells.
+     * @method adjustEventWrapper
+     * @returns {void}
+     */
+    Schedule.prototype.adjustEventWrapper = function () {
+        this.activeView.adjustEventWrapper();
+    };
+    /**
+     * Adds the resources to the specified index.
+     * @param resources
+     * @param {string} name Name of the resource defined in resources collection.
+     * @param {number} index Index or position where the resource should be added.
+     */
+    Schedule.prototype.addResource = function (resources, name, index) {
+        this.resourceBase.addResource(resources, name, index);
+    };
+    /**
+     * Removes the specified resource.
+     * @param resourceId Specifies the resource id to be removed.
+     * @param name Specifies the resource name from which the id should be referred.
+     */
+    Schedule.prototype.removeResource = function (resourceId, name) {
+        this.resourceBase.removeResource(resourceId, name);
+    };
+    /**
+     * Destroys the Schedule component.
+     * @method destroy
+     * @return {void}
+     */
+    Schedule.prototype.destroy = function () {
+        if (this.quickPopup) {
+            this.quickPopup.destroy();
+            this.quickPopup = null;
+        }
+        if (this.eventWindow) {
+            this.eventWindow.destroy();
+            this.eventWindow = null;
+        }
+        this.unwireEvents();
+        if (this.headerModule) {
+            this.headerModule.destroy();
+            this.headerModule = null;
+        }
+        if (this.scrollModule) {
+            this.scrollModule.destroy();
+            this.scrollModule = null;
+        }
+        if (this.activeView) {
+            this.activeView.removeEventListener();
+            this.activeView.destroy();
+            this.activeView = null;
+        }
+        if (this.scheduleTouchModule) {
+            this.scheduleTouchModule.destroy();
+            this.scheduleTouchModule = null;
+        }
+        _super.prototype.destroy.call(this);
+        this.element.innerHTML = '';
+        var removeClasses = [cls.ROOT];
+        if (this.cssClass) {
+            removeClasses = removeClasses.concat(this.cssClass.split(' '));
+        }
+        removeClass([this.element], removeClasses);
+    };
+    __decorate([
+        Property('auto')
+    ], Schedule.prototype, "width", void 0);
+    __decorate([
+        Property('auto')
+    ], Schedule.prototype, "height", void 0);
+    __decorate([
+        Property(true)
+    ], Schedule.prototype, "showHeaderBar", void 0);
+    __decorate([
+        Property(true)
+    ], Schedule.prototype, "showTimeIndicator", void 0);
+    __decorate([
+        Property('Week')
+    ], Schedule.prototype, "currentView", void 0);
+    __decorate([
+        Property(['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'])
+    ], Schedule.prototype, "views", void 0);
+    __decorate([
+        Property(new Date())
+    ], Schedule.prototype, "selectedDate", void 0);
+    __decorate([
+        Property()
+    ], Schedule.prototype, "dateFormat", void 0);
+    __decorate([
+        Property(true)
+    ], Schedule.prototype, "showWeekend", void 0);
+    __decorate([
+        Property(0)
+    ], Schedule.prototype, "firstDayOfWeek", void 0);
+    __decorate([
+        Property([1, 2, 3, 4, 5])
+    ], Schedule.prototype, "workDays", void 0);
+    __decorate([
+        Property('00:00')
+    ], Schedule.prototype, "startHour", void 0);
+    __decorate([
+        Property('24:00')
+    ], Schedule.prototype, "endHour", void 0);
+    __decorate([
+        Complex({}, WorkHours)
+    ], Schedule.prototype, "workHours", void 0);
+    __decorate([
+        Complex({}, TimeScale)
+    ], Schedule.prototype, "timeScale", void 0);
+    __decorate([
+        Property(true)
+    ], Schedule.prototype, "allowKeyboardInteraction", void 0);
+    __decorate([
+        Property()
+    ], Schedule.prototype, "dateHeaderTemplate", void 0);
+    __decorate([
+        Property()
+    ], Schedule.prototype, "cellTemplate", void 0);
+    __decorate([
+        Property(false)
+    ], Schedule.prototype, "readonly", void 0);
+    __decorate([
+        Property(true)
+    ], Schedule.prototype, "showQuickInfo", void 0);
+    __decorate([
+        Property()
+    ], Schedule.prototype, "editorTemplate", void 0);
+    __decorate([
+        Property(7)
+    ], Schedule.prototype, "agendaDaysCount", void 0);
+    __decorate([
+        Property(true)
+    ], Schedule.prototype, "hideEmptyAgendaDays", void 0);
+    __decorate([
+        Property()
+    ], Schedule.prototype, "timezone", void 0);
+    __decorate([
+        Complex({}, EventSettings)
+    ], Schedule.prototype, "eventSettings", void 0);
+    __decorate([
+        Property()
+    ], Schedule.prototype, "resourceHeaderTemplate", void 0);
+    __decorate([
+        Complex({}, Group)
+    ], Schedule.prototype, "group", void 0);
+    __decorate([
+        Collection([], Resources)
+    ], Schedule.prototype, "resources", void 0);
+    __decorate([
+        Property()
+    ], Schedule.prototype, "cssClass", void 0);
+    __decorate([
+        Property(false)
+    ], Schedule.prototype, "enableRtl", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "created", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "destroyed", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "cellClick", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "cellDoubleClick", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "actionBegin", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "actionComplete", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "actionFailure", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "navigating", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "renderCell", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "eventClick", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "eventRendered", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "dataBinding", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "popupOpen", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "dataBound", void 0);
+    Schedule = __decorate([
+        NotifyPropertyChanges
+    ], Schedule);
+    return Schedule;
+}(Component));
+export { Schedule };

src/schedule/base/type.js

@@ -1,4 +0,3 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-});
+/**
+ * types
+ */

src/schedule/base/util.js

@@ -1,124 +0,110 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.WEEK_LENGTH = 7;
-    exports.MS_PER_DAY = 86400000;
-    exports.MS_PER_MINUTE = 60000;
-    function getWeekFirstDate(date1, firstDayOfWeek) {
-        var date = new Date(date1.getTime());
-        firstDayOfWeek = (firstDayOfWeek - date.getDay() + 7 * (-1)) % 7;
-        return new Date(date.setDate(date.getDate() + firstDayOfWeek));
+import { createElement } from '@syncfusion/ej2-base';
+/**
+ * Schedule common utilities
+ */
+export var WEEK_LENGTH = 7;
+export var MS_PER_DAY = 86400000;
+export var MS_PER_MINUTE = 60000;
+export function getWeekFirstDate(date1, firstDayOfWeek) {
+    var date = new Date(date1.getTime());
+    firstDayOfWeek = (firstDayOfWeek - date.getDay() + 7 * (-1)) % 7;
+    return new Date(date.setDate(date.getDate() + firstDayOfWeek));
+}
+export function firstDateOfMonth(date) {
+    return new Date(date.getFullYear(), date.getMonth());
+}
+export function lastDateOfMonth(dt) {
+    return new Date(dt.getFullYear(), dt.getMonth() + 1, 0);
+}
+export function getWeekNumber(dt) {
+    var currentDate = new Date('' + dt).valueOf();
+    var date = new Date(dt.getFullYear(), 0, 1).valueOf();
+    var a = (currentDate - date);
+    return Math.ceil((((a) / MS_PER_DAY) + new Date(date).getDay() + 1) / 7);
+}
+export function setTime(date, time) {
+    var tzOffsetBefore = date.getTimezoneOffset();
+    var d = new Date(date.getTime() + time);
+    var tzOffsetDiff = d.getTimezoneOffset() - tzOffsetBefore;
+    date.setTime(d.getTime() + tzOffsetDiff * MS_PER_DAY);
+    return date;
+}
+export function resetTime(date) {
+    date.setHours(0, 0, 0, 0);
+    return date;
+}
+export function getDateInMs(date) {
+    return date.getTime() - new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0).getTime();
+}
+export function addDays(date, i) {
+    date = new Date('' + date);
+    return new Date(date.setDate(date.getDate() + i));
+}
+export function addMonths(date, i) {
+    date = new Date('' + date);
+    var day = date.getDate();
+    date.setDate(1);
+    date.setMonth(date.getMonth() + i);
+    date.setDate(Math.min(day, getMaxDays(date)));
+    return date;
+}
+export function addYears(date, i) {
+    date = new Date('' + date);
+    var day = date.getDate();
+    date.setDate(1);
+    date.setFullYear(date.getFullYear() + i);
+    date.setDate(Math.min(day, getMaxDays(date)));
+    return date;
+}
+export function getStartEndHours(date, startHour, endHour) {
+    var date1 = new Date(date.getTime());
+    date1.setHours(startHour.getHours());
+    date1.setMinutes(startHour.getMinutes());
+    date1.setSeconds(startHour.getSeconds());
+    var date2 = new Date(date.getTime());
+    if (endHour.getHours() === 0) {
+        date2 = addDays(date2, 1);
     }
-    exports.getWeekFirstDate = getWeekFirstDate;
-    function firstDateOfMonth(date) {
-        return new Date(date.getFullYear(), date.getMonth());
+    else {
+        date2.setHours(endHour.getHours());
+        date2.setMinutes(endHour.getMinutes());
+        date2.setSeconds(endHour.getSeconds());
     }
-    exports.firstDateOfMonth = firstDateOfMonth;
-    function lastDateOfMonth(dt) {
-        return new Date(dt.getFullYear(), dt.getMonth() + 1, 0);
+    return { startHour: date1, endHour: date2 };
+}
+export function getMaxDays(d) {
+    var date = new Date(d.getFullYear(), d.getMonth() + 1, 0);
+    return date.getDate();
+}
+export function getDaysCount(startDate, endDate) {
+    var strTime = resetTime(new Date(startDate));
+    var endTime = resetTime(new Date(endDate));
+    return (endTime.getTime() - strTime.getTime()) / MS_PER_DAY;
+}
+export function getDateFromString(date) {
+    return date.indexOf('Date') !== -1 ? new Date(parseInt(date.match(/\d+/g).toString(), 10)) :
+        date.indexOf('T') !== -1 ? new Date(date) : new Date(date.replace(/-/g, '/'));
+}
+/** @hidden */
+var scrollWidth = null;
+/** @hidden */
+export function getScrollBarWidth() {
+    if (scrollWidth !== null) {
+        return scrollWidth;
     }
-    exports.lastDateOfMonth = lastDateOfMonth;
-    function getWeekNumber(dt) {
-        var currentDate = new Date('' + dt).valueOf();
-        var date = new Date(dt.getFullYear(), 0, 1).valueOf();
-        var a = (currentDate - date);
-        return Math.ceil((((a) / exports.MS_PER_DAY) + new Date(date).getDay() + 1) / 7);
-    }
-    exports.getWeekNumber = getWeekNumber;
-    function setTime(date, time) {
-        var tzOffsetBefore = date.getTimezoneOffset();
-        var d = new Date(date.getTime() + time);
-        var tzOffsetDiff = d.getTimezoneOffset() - tzOffsetBefore;
-        date.setTime(d.getTime() + tzOffsetDiff * exports.MS_PER_DAY);
-        return date;
-    }
-    exports.setTime = setTime;
-    function resetTime(date) {
-        date.setHours(0, 0, 0, 0);
-        return date;
-    }
-    exports.resetTime = resetTime;
-    function getDateInMs(date) {
-        return date.getTime() - new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0).getTime();
-    }
-    exports.getDateInMs = getDateInMs;
-    function addDays(date, i) {
-        date = new Date('' + date);
-        return new Date(date.setDate(date.getDate() + i));
-    }
-    exports.addDays = addDays;
-    function addMonths(date, i) {
-        date = new Date('' + date);
-        var day = date.getDate();
-        date.setDate(1);
-        date.setMonth(date.getMonth() + i);
-        date.setDate(Math.min(day, getMaxDays(date)));
-        return date;
-    }
-    exports.addMonths = addMonths;
-    function addYears(date, i) {
-        date = new Date('' + date);
-        var day = date.getDate();
-        date.setDate(1);
-        date.setFullYear(date.getFullYear() + i);
-        date.setDate(Math.min(day, getMaxDays(date)));
-        return date;
-    }
-    exports.addYears = addYears;
-    function getStartEndHours(date, startHour, endHour) {
-        var date1 = new Date(date.getTime());
-        date1.setHours(startHour.getHours());
-        date1.setMinutes(startHour.getMinutes());
-        date1.setSeconds(startHour.getSeconds());
-        var date2 = new Date(date.getTime());
-        if (endHour.getHours() === 0) {
-            date2 = addDays(date2, 1);
+    var divNode = createElement('div');
+    var value = 0;
+    divNode.style.cssText = 'width:100px;height: 100px;overflow: scroll;position: absolute;top: -9999px;';
+    document.body.appendChild(divNode);
+    value = (divNode.offsetWidth - divNode.clientWidth) | 0;
+    document.body.removeChild(divNode);
+    return scrollWidth = value;
+}
+export function findIndexInData(data, property, value) {
+    for (var i = 0, length_1 = data.length; i < length_1; i++) {
+        if (data[i][property] === value) {
+            return i;
         }
-        else {
-            date2.setHours(endHour.getHours());
-            date2.setMinutes(endHour.getMinutes());
-            date2.setSeconds(endHour.getSeconds());
-        }
-        return { startHour: date1, endHour: date2 };
     }
-    exports.getStartEndHours = getStartEndHours;
-    function getMaxDays(d) {
-        var date = new Date(d.getFullYear(), d.getMonth() + 1, 0);
-        return date.getDate();
-    }
-    exports.getMaxDays = getMaxDays;
-    function getDaysCount(startDate, endDate) {
-        var strTime = resetTime(new Date(startDate));
-        var endTime = resetTime(new Date(endDate));
-        return (endTime.getTime() - strTime.getTime()) / exports.MS_PER_DAY;
-    }
-    exports.getDaysCount = getDaysCount;
-    function getDateFromString(date) {
-        return date.indexOf('Date') !== -1 ? new Date(parseInt(date.match(/\d+/g).toString(), 10)) :
-            date.indexOf('T') !== -1 ? new Date(date) : new Date(date.replace(/-/g, '/'));
-    }
-    exports.getDateFromString = getDateFromString;
-    var scrollWidth = null;
-    function getScrollBarWidth() {
-        if (scrollWidth !== null) {
-            return scrollWidth;
-        }
-        var divNode = document.createElement('div');
-        var value = 0;
-        divNode.style.cssText = 'width:100px;height: 100px;overflow: scroll;position: absolute;top: -9999px;';
-        document.body.appendChild(divNode);
-        value = (divNode.offsetWidth - divNode.clientWidth) | 0;
-        document.body.removeChild(divNode);
-        return scrollWidth = value;
-    }
-    exports.getScrollBarWidth = getScrollBarWidth;
-    function findIndexInData(data, property, value) {
-        for (var i = 0, length_1 = data.length; i < length_1; i++) {
-            if (data[i][property] === value) {
-                return i;
-            }
-        }
-        return -1;
-    }
-    exports.findIndexInData = findIndexInData;
-});
+    return -1;
+}

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

@@ -1,337 +0,343 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-lists", "@syncfusion/ej2-data", "../renderer/view-base", "../base/util", "../base/css-constant", "../base/constant"], function (require, exports, ej2_base_1, ej2_lists_1, ej2_data_1, view_base_1, util, cls, event) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var AgendaBase = (function () {
-        function AgendaBase(parent) {
-            this.parent = parent;
-            this.viewBase = new view_base_1.ViewBase(parent);
+import { isNullOrUndefined, addClass, createElement, append, EventHandler, extend, remove } from '@syncfusion/ej2-base';
+import { ListBase } from '@syncfusion/ej2-lists';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+import { ViewBase } from '../renderer/view-base';
+import * as util from '../base/util';
+import * as cls from '../base/css-constant';
+import * as event from '../base/constant';
+var AgendaBase = /** @class */ (function () {
+    /**
+     * Constructor for AgendaBase
+     */
+    function AgendaBase(parent) {
+        this.parent = parent;
+        this.viewBase = new ViewBase(parent);
+    }
+    AgendaBase.prototype.createAgendaContentElement = function (type, listData, aTd, groupOrder, groupIndex) {
+        var listElement;
+        if (type === 'noEvents') {
+            var noEvents = [{ 'subject': this.parent.localeObj.getConstant('noEvents') }];
+            listElement = ListBase.createList(noEvents, {
+                moduleName: 'agenda',
+                listClass: this.parent.activeView.viewClass,
+                itemClass: this.parent.activeView.viewClass,
+                template: '<div class=' + cls.AGENDA_NO_EVENT_CLASS + '>${subject}</div>'
+            });
         }
-        AgendaBase.prototype.createAgendaContentElement = function (type, listData, aTd, groupOrder, groupIndex) {
-            var listElement;
-            if (type === 'noEvents') {
-                var noEvents = [{ 'subject': this.parent.localeObj.getConstant('noEvents') }];
-                listElement = ej2_lists_1.ListBase.createList(noEvents, {
-                    moduleName: 'agenda',
-                    listClass: this.parent.activeView.viewClass,
-                    itemClass: this.parent.activeView.viewClass,
-                    template: '<div class=' + cls.AGENDA_NO_EVENT_CLASS + '>${subject}</div>'
+        else {
+            listElement = ListBase.createList(listData, {
+                moduleName: 'agenda',
+                listClass: this.parent.activeView.viewClass,
+                itemClass: this.parent.activeView.viewClass
+            });
+            for (var li = 0, length_1 = listData.length; li < length_1; li++) {
+                var appWrapper = createElement('div', {
+                    className: cls.APPOINTMENT_CLASS, attrs: {
+                        'data-id': 'Appointment_' + listData[li][this.parent.eventFields.id],
+                        'data-guid': listData[li].Guid,
+                        'role': 'button',
+                        'tabindex': '0',
+                        'aria-readonly': 'false',
+                        'aria-selected': 'false',
+                        'aria-grabbed': 'true',
+                        'aria-label': (listData[li][this.parent.eventFields.subject] || this.parent.eventSettings.fields.subject.default ||
+                            this.parent.localeObj.getConstant('addTitle'))
+                    }
                 });
-            }
-            else {
-                listElement = ej2_lists_1.ListBase.createList(listData, {
-                    moduleName: 'agenda',
-                    listClass: this.parent.activeView.viewClass,
-                    itemClass: this.parent.activeView.viewClass
-                });
-                for (var li = 0, length_1 = listData.length; li < length_1; li++) {
-                    var appWrapper = ej2_base_1.createElement('div', {
-                        className: cls.APPOINTMENT_CLASS, attrs: {
-                            'data-id': 'Appointment_' + listData[li][this.parent.eventFields.id],
-                            'data-guid': listData[li].Guid,
-                            'role': 'button',
-                            'tabindex': '0',
-                            'aria-readonly': 'false',
-                            'aria-selected': 'false',
-                            'aria-grabbed': 'true',
-                            'aria-label': (listData[li][this.parent.eventFields.subject] || this.parent.eventSettings.fields.subject.default ||
-                                this.parent.localeObj.getConstant('addTitle'))
-                        }
-                    });
-                    if (!ej2_base_1.isNullOrUndefined(groupIndex)) {
-                        appWrapper.setAttribute('data-group-index', groupIndex.toString());
-                    }
-                    this.parent.eventBase.applyResourceColor(appWrapper, listData[li], 'borderColor', groupOrder);
-                    var templateEle = void 0;
-                    if (!ej2_base_1.isNullOrUndefined(this.parent.activeViewOptions.eventTemplate)) {
-                        templateEle = this.parent.getAppointmentTemplate()(listData[li]);
-                    }
-                    else {
-                        templateEle = this.createAppointment(listData[li]);
-                    }
-                    ej2_base_1.append([].slice.call(templateEle), appWrapper);
-                    listElement.children[li].innerHTML = appWrapper.outerHTML;
-                    var args = { data: listData[li], element: listElement.children[li], cancel: false };
-                    this.parent.trigger(event.eventRendered, args);
-                    if (args.cancel) {
-                        ej2_base_1.remove(listElement.children[li]);
-                    }
+                if (!isNullOrUndefined(groupIndex)) {
+                    appWrapper.setAttribute('data-group-index', groupIndex.toString());
                 }
+                this.parent.eventBase.applyResourceColor(appWrapper, listData[li], 'borderColor', groupOrder);
+                var templateEle = void 0;
+                if (!isNullOrUndefined(this.parent.activeViewOptions.eventTemplate)) {
+                    templateEle = this.parent.getAppointmentTemplate()(listData[li]);
+                }
+                else {
+                    templateEle = this.createAppointment(listData[li]);
+                }
+                append([].slice.call(templateEle), appWrapper);
+                listElement.children[li].innerHTML = appWrapper.outerHTML;
+                var args = { data: listData[li], element: listElement.children[li], cancel: false };
+                this.parent.trigger(event.eventRendered, args);
+                if (args.cancel) {
+                    remove(listElement.children[li]);
+                }
             }
-            aTd.appendChild(listElement);
-            if ((this.parent.currentView === 'MonthAgenda' && this.parent.activeViewOptions.group.resources.length > 0)
-                || this.parent.currentView === 'Agenda') {
-                ej2_base_1.addClass([aTd], cls.AGENDA_DAY_BORDER_CLASS);
-            }
-            return aTd;
-        };
-        AgendaBase.prototype.createAppointment = function (event) {
-            var fieldMapping = this.parent.eventFields;
-            var eventSubject = (event[fieldMapping.subject] || this.parent.eventSettings.fields.subject.default ||
-                this.parent.localeObj.getConstant('addTitle'));
-            var eventLocation = (event[fieldMapping.location] || this.parent.eventSettings.fields.location.default);
-            var appSubjectWrap = ej2_base_1.createElement('div', { className: cls.SUBJECT_WRAP });
-            if (!ej2_base_1.isNullOrUndefined(eventLocation) && eventLocation !== '') {
-                eventSubject += ',';
-            }
-            appSubjectWrap.appendChild(ej2_base_1.createElement('div', { className: cls.SUBJECT_CLASS, innerHTML: eventSubject }));
-            if (!ej2_base_1.isNullOrUndefined(eventLocation) && eventLocation !== '') {
-                appSubjectWrap.appendChild(ej2_base_1.createElement('div', { className: cls.LOCATION_CLASS, innerHTML: eventLocation }));
-            }
-            if (!ej2_base_1.isNullOrUndefined(event[fieldMapping.recurrenceRule])) {
-                var iconClass = (event[fieldMapping.id] === event[fieldMapping.recurrenceID]) ?
-                    cls.EVENT_RECURRENCE_ICON_CLASS : cls.EVENT_RECURRENCE_EDIT_ICON_CLASS;
-                appSubjectWrap.appendChild(ej2_base_1.createElement('div', { className: cls.ICON + ' ' + iconClass }));
-            }
-            var strDate = event[fieldMapping.startTime];
-            var endDate = event[fieldMapping.endTime];
-            var isAllDay = event[fieldMapping.isAllDay];
-            var allDayStr = this.parent.localeObj.getConstant('allDay');
-            var timeStr = this.parent.getTimeString(strDate) + ' - ' + this.parent.getTimeString(endDate);
-            if (!ej2_base_1.isNullOrUndefined(event.data)) {
-                var eventString = (endDate.getTime() - strDate.getTime()) / util.MS_PER_DAY >= 1 ? allDayStr : timeStr;
-                allDayStr = eventString + ' (' + this.parent.localeObj.getConstant('day') + ' '
-                    + event.data.index + '/' + event.data.count + ')';
-            }
-            var displayStr = (!ej2_base_1.isNullOrUndefined(event.data) || isAllDay) ? allDayStr : timeStr;
-            var appDateTime = ej2_base_1.createElement('div', { className: cls.DATE_TIME_CLASS, innerHTML: displayStr });
-            return [appSubjectWrap, appDateTime];
-        };
-        AgendaBase.prototype.processAgendaEvents = function (events) {
-            var eventsProcessed = [];
-            for (var _i = 0, events_1 = events; _i < events_1.length; _i++) {
-                var event_1 = events_1[_i];
-                var splited = this.parent.eventBase.splitEventByDay(event_1);
-                eventsProcessed = eventsProcessed.concat(splited.length > 1 ? splited : event_1);
-            }
-            return eventsProcessed;
-        };
-        AgendaBase.prototype.wireEventActions = function () {
-            var eventElement = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));
-            for (var _i = 0, eventElement_1 = eventElement; _i < eventElement_1.length; _i++) {
-                var element = eventElement_1[_i];
-                this.parent.eventBase.wireAppointmentEvents(element);
-            }
-            var dateHeaderElement = [].slice.call(this.parent.element.querySelectorAll('.e-m-date'));
-            for (var _a = 0, dateHeaderElement_1 = dateHeaderElement; _a < dateHeaderElement_1.length; _a++) {
-                var element = dateHeaderElement_1[_a];
-                ej2_base_1.EventHandler.add(element, 'click', this.parent.agendaModule.dayNavigationClick, this);
-            }
-        };
-        AgendaBase.prototype.calculateResourceTableElement = function (tBody, noOfDays, agendaDate) {
-            if (ej2_base_1.isNullOrUndefined(this.parent.resourceBase.lastResourceLevel)) {
-                var level = this.viewBase.getDateSlots(this.viewBase.renderDates, this.parent.activeViewOptions.workDays);
-                this.parent.resourceBase.generateResourceLevels(level);
-            }
-            var agendaLastDate = util.addDays(new Date(agendaDate.getTime()), noOfDays);
-            var days = (this.parent.activeViewOptions.group.byDate || this.parent.currentView === 'MonthAgenda') ? noOfDays : 1;
-            var resColl = this.parent.resourceBase.resourceCollection;
-            var resData = this.parent.resourceBase.lastResourceLevel;
-            var initialDate = agendaDate;
-            for (var i = 0; i < days; i++) {
-                var lastLevelInfo = [];
-                var tempLastLevelInfo = [];
-                var tempIndex = 0;
-                var eventObj = void 0;
-                var dateObj = void 0;
-                var firstDate = util.addDays(initialDate, i);
-                var finalDate = (this.parent.activeViewOptions.group.byDate || this.parent.currentView === 'MonthAgenda')
-                    ? util.addDays(firstDate, 1) : agendaLastDate;
-                var agendaCollection = this.parent.eventBase.filterEvents(firstDate, finalDate);
-                if (agendaCollection.length > 0 || !this.parent.hideEmptyAgendaDays || this.parent.currentView === 'MonthAgenda') {
-                    for (var res = 0; res < resData.length; res++) {
-                        noOfDays = (!this.parent.activeViewOptions.group.byDate || this.parent.currentView === 'MonthAgenda') ? noOfDays : 1;
-                        var data = [];
-                        agendaDate = firstDate;
-                        var resDataCollection = this.parent.eventBase.filterEvents(agendaDate, agendaLastDate, agendaCollection, resData[res]);
-                        if (resDataCollection.length > 0 || !this.parent.hideEmptyAgendaDays || this.parent.currentView === 'MonthAgenda') {
-                            for (var r = 0; r < noOfDays; r++) {
-                                var resDayCollection = this.parent.eventBase.filterEvents(agendaDate, util.addDays(agendaDate, 1), resDataCollection, undefined);
-                                if (resDayCollection.length > 0 || !this.parent.hideEmptyAgendaDays ||
-                                    this.parent.currentView === 'MonthAgenda') {
-                                    data.push(resDayCollection[0]);
-                                    eventObj = {
-                                        rowSpan: 1, type: 'eventColumn', resource: resColl[resColl.length - 1],
-                                        groupIndex: resData[res].groupIndex, groupOrder: resData[res].groupOrder,
-                                        resourceData: resData[res].resourceData, eventData: resDayCollection, date: agendaDate
-                                    };
-                                    dateObj = {
-                                        rowSpan: 1, type: 'dateColumn', resource: resColl[resColl.length - 1],
-                                        groupOrder: resData[res].groupOrder, resourceData: resData[res].resourceData,
-                                        date: agendaDate, text: ''
-                                    };
-                                    if (!lastLevelInfo[tempIndex]) {
-                                        lastLevelInfo[tempIndex] = [];
-                                    }
-                                    lastLevelInfo[tempIndex].push(eventObj);
-                                    lastLevelInfo[tempIndex].push(dateObj);
-                                    tempIndex++;
+        }
+        aTd.appendChild(listElement);
+        if ((this.parent.currentView === 'MonthAgenda' && this.parent.activeViewOptions.group.resources.length > 0)
+            || this.parent.currentView === 'Agenda') {
+            addClass([aTd], cls.AGENDA_DAY_BORDER_CLASS);
+        }
+        return aTd;
+    };
+    AgendaBase.prototype.createAppointment = function (event) {
+        var fieldMapping = this.parent.eventFields;
+        var eventSubject = (event[fieldMapping.subject] || this.parent.eventSettings.fields.subject.default ||
+            this.parent.localeObj.getConstant('addTitle'));
+        var eventLocation = (event[fieldMapping.location] || this.parent.eventSettings.fields.location.default);
+        var appSubjectWrap = createElement('div', { className: cls.SUBJECT_WRAP });
+        if (!isNullOrUndefined(eventLocation) && eventLocation !== '') {
+            eventSubject += ',';
+        }
+        appSubjectWrap.appendChild(createElement('div', { className: cls.SUBJECT_CLASS, innerHTML: eventSubject }));
+        if (!isNullOrUndefined(eventLocation) && eventLocation !== '') {
+            appSubjectWrap.appendChild(createElement('div', { className: cls.LOCATION_CLASS, innerHTML: eventLocation }));
+        }
+        if (!isNullOrUndefined(event[fieldMapping.recurrenceRule])) {
+            var iconClass = (event[fieldMapping.id] === event[fieldMapping.recurrenceID]) ?
+                cls.EVENT_RECURRENCE_ICON_CLASS : cls.EVENT_RECURRENCE_EDIT_ICON_CLASS;
+            appSubjectWrap.appendChild(createElement('div', { className: cls.ICON + ' ' + iconClass }));
+        }
+        var strDate = event[fieldMapping.startTime];
+        var endDate = event[fieldMapping.endTime];
+        var isAllDay = event[fieldMapping.isAllDay];
+        var allDayStr = this.parent.localeObj.getConstant('allDay');
+        var timeStr = this.parent.getTimeString(strDate) + ' - ' + this.parent.getTimeString(endDate);
+        if (!isNullOrUndefined(event.data)) {
+            var eventString = (endDate.getTime() - strDate.getTime()) / util.MS_PER_DAY >= 1 ? allDayStr : timeStr;
+            allDayStr = eventString + ' (' + this.parent.localeObj.getConstant('day') + ' '
+                + event.data.index + '/' + event.data.count + ')';
+        }
+        var displayStr = (!isNullOrUndefined(event.data) || isAllDay) ? allDayStr : timeStr;
+        var appDateTime = createElement('div', { className: cls.DATE_TIME_CLASS, innerHTML: displayStr });
+        return [appSubjectWrap, appDateTime];
+    };
+    AgendaBase.prototype.processAgendaEvents = function (events) {
+        var eventsProcessed = [];
+        for (var _i = 0, events_1 = events; _i < events_1.length; _i++) {
+            var event_1 = events_1[_i];
+            var splited = this.parent.eventBase.splitEventByDay(event_1);
+            eventsProcessed = eventsProcessed.concat(splited.length > 1 ? splited : event_1);
+        }
+        return eventsProcessed;
+    };
+    AgendaBase.prototype.wireEventActions = function () {
+        var eventElement = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));
+        for (var _i = 0, eventElement_1 = eventElement; _i < eventElement_1.length; _i++) {
+            var element = eventElement_1[_i];
+            this.parent.eventBase.wireAppointmentEvents(element);
+        }
+        var dateHeaderElement = [].slice.call(this.parent.element.querySelectorAll('.e-m-date'));
+        for (var _a = 0, dateHeaderElement_1 = dateHeaderElement; _a < dateHeaderElement_1.length; _a++) {
+            var element = dateHeaderElement_1[_a];
+            EventHandler.add(element, 'click', this.parent.agendaModule.dayNavigationClick, this);
+        }
+    };
+    AgendaBase.prototype.calculateResourceTableElement = function (tBody, noOfDays, agendaDate) {
+        if (isNullOrUndefined(this.parent.resourceBase.lastResourceLevel)) {
+            var level = this.viewBase.getDateSlots(this.viewBase.renderDates, this.parent.activeViewOptions.workDays);
+            this.parent.resourceBase.generateResourceLevels(level);
+        }
+        var agendaLastDate = util.addDays(new Date(agendaDate.getTime()), noOfDays);
+        var days = (this.parent.activeViewOptions.group.byDate || this.parent.currentView === 'MonthAgenda') ? noOfDays : 1;
+        var resColl = this.parent.resourceBase.resourceCollection;
+        var resData = this.parent.resourceBase.lastResourceLevel;
+        var initialDate = agendaDate;
+        for (var i = 0; i < days; i++) {
+            var lastLevelInfo = [];
+            var tempLastLevelInfo = [];
+            var tempIndex = 0;
+            var eventObj = void 0;
+            var dateObj = void 0;
+            var firstDate = util.addDays(initialDate, i);
+            var finalDate = (this.parent.activeViewOptions.group.byDate || this.parent.currentView === 'MonthAgenda')
+                ? util.addDays(firstDate, 1) : agendaLastDate;
+            var agendaCollection = this.parent.eventBase.filterEvents(firstDate, finalDate);
+            if (agendaCollection.length > 0 || !this.parent.hideEmptyAgendaDays || this.parent.currentView === 'MonthAgenda') {
+                for (var res = 0; res < resData.length; res++) {
+                    noOfDays = (!this.parent.activeViewOptions.group.byDate || this.parent.currentView === 'MonthAgenda') ? noOfDays : 1;
+                    var data = [];
+                    agendaDate = firstDate;
+                    var resDataCollection = this.parent.eventBase.filterEvents(agendaDate, agendaLastDate, agendaCollection, resData[res]);
+                    if (resDataCollection.length > 0 || !this.parent.hideEmptyAgendaDays || this.parent.currentView === 'MonthAgenda') {
+                        for (var r = 0; r < noOfDays; r++) {
+                            var resDayCollection = this.parent.eventBase.filterEvents(agendaDate, util.addDays(agendaDate, 1), resDataCollection, undefined);
+                            if (resDayCollection.length > 0 || !this.parent.hideEmptyAgendaDays ||
+                                this.parent.currentView === 'MonthAgenda') {
+                                data.push(resDayCollection[0]);
+                                eventObj = {
+                                    rowSpan: 1, type: 'eventColumn', resource: resColl[resColl.length - 1],
+                                    groupIndex: resData[res].groupIndex, groupOrder: resData[res].groupOrder,
+                                    resourceData: resData[res].resourceData, eventData: resDayCollection, date: agendaDate
+                                };
+                                dateObj = {
+                                    rowSpan: 1, type: 'dateColumn', resource: resColl[resColl.length - 1],
+                                    groupOrder: resData[res].groupOrder, resourceData: resData[res].resourceData,
+                                    date: agendaDate, text: ''
+                                };
+                                if (!lastLevelInfo[tempIndex]) {
+                                    lastLevelInfo[tempIndex] = [];
                                 }
-                                agendaDate = util.addDays(agendaDate, 1);
-                                if (agendaDate.getTime() >= agendaLastDate.getTime() || this.parent.activeViewOptions.group.byDate
-                                    || this.parent.currentView === 'MonthAgenda') {
-                                    lastLevelInfo[lastLevelInfo.length - 1][1].text = 'lastRow';
-                                    var tempObj = {
-                                        rowSpan: data.length, type: 'resourceColumn', resource: resColl[resColl.length - 1],
-                                        groupOrder: resData[res].groupOrder.slice(0, -1), resourceData: resData[res].resourceData,
-                                        groupIndex: (lastLevelInfo.length - data.length), className: [cls.RESOURCE_NAME],
-                                        date: agendaDate
-                                    };
-                                    lastLevelInfo[lastLevelInfo.length - data.length].push(tempObj);
-                                    tempLastLevelInfo.push(ej2_base_1.extend({}, tempObj, null, true));
-                                    break;
-                                }
+                                lastLevelInfo[tempIndex].push(eventObj);
+                                lastLevelInfo[tempIndex].push(dateObj);
+                                tempIndex++;
                             }
+                            agendaDate = util.addDays(agendaDate, 1);
+                            if (agendaDate.getTime() >= agendaLastDate.getTime() || this.parent.activeViewOptions.group.byDate
+                                || this.parent.currentView === 'MonthAgenda') {
+                                lastLevelInfo[lastLevelInfo.length - 1][1].text = 'lastRow';
+                                var tempObj = {
+                                    rowSpan: data.length, type: 'resourceColumn', resource: resColl[resColl.length - 1],
+                                    groupOrder: resData[res].groupOrder.slice(0, -1), resourceData: resData[res].resourceData,
+                                    groupIndex: (lastLevelInfo.length - data.length), className: [cls.RESOURCE_NAME],
+                                    date: agendaDate
+                                };
+                                lastLevelInfo[lastLevelInfo.length - data.length].push(tempObj);
+                                tempLastLevelInfo.push(extend({}, tempObj, null, true));
+                                break;
+                            }
                         }
                     }
-                    var topResources = resColl.slice(0, -1);
-                    var tempGroupedData = [];
-                    var totalRowSpan = 0;
-                    for (var y = 0; y < topResources.length; y++) {
-                        var data = topResources[topResources.length - (y + 1)]
-                            .dataSource;
-                        for (var x = 0; x < data.length; x++) {
-                            var z = 0;
-                            for (var u = 0; u < tempLastLevelInfo.length; u++) {
-                                if (tempLastLevelInfo[u].groupOrder[topResources.length - (y + 1)] === data[x][topResources[topResources.length - (y + 1)].idField]) {
-                                    totalRowSpan = totalRowSpan + tempLastLevelInfo[u].rowSpan;
-                                    tempGroupedData.push(ej2_base_1.extend({}, tempLastLevelInfo[u], null, true));
-                                }
-                                if (++z === tempLastLevelInfo.length && tempGroupedData.length > 0) {
-                                    tempGroupedData[0].rowSpan = totalRowSpan;
-                                    tempGroupedData[0].type = 'parentColumnLevel_' + (y + 1);
-                                    tempGroupedData[0].resource = topResources[topResources.length - (y + 1)];
-                                    tempGroupedData[0].resourceData = data[x];
-                                    tempGroupedData[0].date = agendaDate;
-                                    lastLevelInfo[tempGroupedData[0].groupIndex].push(tempGroupedData[0]);
-                                    tempGroupedData = [];
-                                    totalRowSpan = 0;
-                                }
+                }
+                var topResources = resColl.slice(0, -1);
+                var tempGroupedData = [];
+                var totalRowSpan = 0;
+                for (var y = 0; y < topResources.length; y++) {
+                    var data = topResources[topResources.length - (y + 1)]
+                        .dataSource;
+                    for (var x = 0; x < data.length; x++) {
+                        var z = 0;
+                        for (var u = 0; u < tempLastLevelInfo.length; u++) {
+                            if (tempLastLevelInfo[u].groupOrder[topResources.length - (y + 1)] === data[x][topResources[topResources.length - (y + 1)].idField]) {
+                                totalRowSpan = totalRowSpan + tempLastLevelInfo[u].rowSpan;
+                                tempGroupedData.push(extend({}, tempLastLevelInfo[u], null, true));
                             }
+                            if (++z === tempLastLevelInfo.length && tempGroupedData.length > 0) {
+                                tempGroupedData[0].rowSpan = totalRowSpan;
+                                tempGroupedData[0].type = 'parentColumnLevel_' + (y + 1);
+                                tempGroupedData[0].resource = topResources[topResources.length - (y + 1)];
+                                tempGroupedData[0].resourceData = data[x];
+                                tempGroupedData[0].date = agendaDate;
+                                lastLevelInfo[tempGroupedData[0].groupIndex].push(tempGroupedData[0]);
+                                tempGroupedData = [];
+                                totalRowSpan = 0;
+                            }
                         }
                     }
-                    this.createResourceTableRow(lastLevelInfo, tBody);
                 }
+                this.createResourceTableRow(lastLevelInfo, tBody);
             }
-            var totalCollection = this.parent.eventBase.filterEvents(initialDate, agendaLastDate);
-            if (totalCollection.length === 0 && !this.parent.activeViewOptions.allowVirtualScrolling && this.parent.hideEmptyAgendaDays) {
-                this.renderEmptyContent(tBody, initialDate);
+        }
+        var totalCollection = this.parent.eventBase.filterEvents(initialDate, agendaLastDate);
+        if (totalCollection.length === 0 && !this.parent.activeViewOptions.allowVirtualScrolling && this.parent.hideEmptyAgendaDays) {
+            this.renderEmptyContent(tBody, initialDate);
+        }
+    };
+    AgendaBase.prototype.createResourceTableRow = function (tContent, tBody) {
+        var tr = createElement('tr', { attrs: { role: 'row' } });
+        var ntr;
+        var td = createElement('td', { attrs: { role: 'gridcell', 'aria-selected': 'false' } });
+        var tempData;
+        var rowSpan = 0;
+        var level;
+        if (this.parent.activeViewOptions.group.byDate || this.parent.currentView === 'MonthAgenda') {
+            var tContentCollection = [];
+            var parentCollection = this.parent.resourceBase.resourceCollection.slice(0, -1);
+            for (var w = 0; w < tContent.length; w++) {
+                tContentCollection = tContentCollection.concat(tContent[w]);
             }
-        };
-        AgendaBase.prototype.createResourceTableRow = function (tContent, tBody) {
-            var tr = ej2_base_1.createElement('tr', { attrs: { role: 'row' } });
-            var ntr;
-            var td = ej2_base_1.createElement('td', { attrs: { role: 'gridcell', 'aria-selected': 'false' } });
-            var tempData;
-            var rowSpan = 0;
-            var level;
-            if (this.parent.activeViewOptions.group.byDate || this.parent.currentView === 'MonthAgenda') {
-                var tContentCollection = [];
-                var parentCollection = this.parent.resourceBase.resourceCollection.slice(0, -1);
-                for (var w = 0; w < tContent.length; w++) {
-                    tContentCollection = tContentCollection.concat(tContent[w]);
-                }
-                level = (parentCollection.length > 0) ? 'parentColumnLevel_' + parentCollection.length : 'resourceColumn';
-                var rowSpanCollection = new ej2_data_1.DataManager({ json: tContentCollection }).executeLocal(new ej2_data_1.Query()
-                    .where('type', 'equal', level));
-                for (var x = 0; x < rowSpanCollection.length; x++) {
-                    rowSpan = rowSpan + rowSpanCollection[x].rowSpan;
-                }
+            level = (parentCollection.length > 0) ? 'parentColumnLevel_' + parentCollection.length : 'resourceColumn';
+            var rowSpanCollection = new DataManager({ json: tContentCollection }).executeLocal(new Query()
+                .where('type', 'equal', level));
+            for (var x = 0; x < rowSpanCollection.length; x++) {
+                rowSpan = rowSpan + rowSpanCollection[x].rowSpan;
             }
-            for (var row = 0; row < tContent.length; row++) {
-                ntr = tr.cloneNode();
-                for (var col = tContent[row].length - 1; col >= 0; col--) {
-                    var data = tContent[row][col];
-                    var ntd = td.cloneNode();
-                    if (data.type === 'dateColumn') {
-                        if (this.parent.activeViewOptions.group.byDate || this.parent.currentView === 'MonthAgenda') {
-                            tempData = tContent[row][col];
-                            continue;
-                        }
-                        ntd.setAttribute('data-date', data.date.getTime().toString());
-                        ntd.appendChild(this.createDateHeaderElement(data.date));
-                        var className = [cls.AGENDA_CELLS_CLASS, cls.AGENDA_DATE_CLASS];
-                        if (data.text === 'lastRow') {
-                            className.push(cls.AGENDA_DAY_BORDER_CLASS);
-                        }
-                        ej2_base_1.addClass([ntd], className);
-                        ntr.appendChild(ntd);
+        }
+        for (var row = 0; row < tContent.length; row++) {
+            ntr = tr.cloneNode();
+            for (var col = tContent[row].length - 1; col >= 0; col--) {
+                var data = tContent[row][col];
+                var ntd = td.cloneNode();
+                if (data.type === 'dateColumn') {
+                    if (this.parent.activeViewOptions.group.byDate || this.parent.currentView === 'MonthAgenda') {
+                        tempData = tContent[row][col];
+                        continue;
                     }
-                    else if (data.type === 'eventColumn') {
-                        var elementType = (data.eventData.length === 0) ? 'noEvents' : 'data';
-                        ntd = this.createAgendaContentElement(elementType, data.eventData, ntd, data.groupOrder, data.groupIndex);
-                        ntd.setAttribute('data-date', data.date.getTime().toString());
-                        if (this.parent.activeViewOptions.group.byDate || this.parent.currentView === 'MonthAgenda') {
-                            ej2_base_1.addClass([ntd], [cls.AGENDA_CELLS_CLASS, cls.AGENDA_DAY_PADDING_CLASS]);
-                        }
-                        ntr.appendChild(ntd);
+                    ntd.setAttribute('data-date', data.date.getTime().toString());
+                    ntd.appendChild(this.createDateHeaderElement(data.date));
+                    var className = [cls.AGENDA_CELLS_CLASS, cls.AGENDA_DATE_CLASS];
+                    if (data.text === 'lastRow') {
+                        className.push(cls.AGENDA_DAY_BORDER_CLASS);
                     }
-                    else {
-                        ntd.setAttribute('rowspan', data.rowSpan.toString());
-                        ej2_base_1.addClass([ntd], cls.AGENDA_RESOURCE_CLASS);
-                        this.viewBase.setResourceHeaderContent(ntd, data, data.className[0]);
-                        ntr.appendChild(ntd);
-                    }
+                    addClass([ntd], className);
+                    ntr.appendChild(ntd);
                 }
-                if (this.parent.activeViewOptions.group.byDate && row === 0 && this.parent.currentView !== 'MonthAgenda') {
-                    var ntd = td.cloneNode();
-                    ntd.setAttribute('data-date', tempData.date.getTime().toString());
-                    ntd.setAttribute('rowspan', rowSpan.toString());
-                    ntd.appendChild(this.createDateHeaderElement(tempData.date));
-                    ej2_base_1.addClass([ntd], [cls.AGENDA_CELLS_CLASS, cls.AGENDA_DATE_CLASS, cls.DATE_BORDER_CLASS]);
-                    var daysCount = util.getDaysCount(this.parent.selectedDate.getTime(), tempData.date.getTime());
-                    ntr.setAttribute('aria-rowindex', daysCount.toString());
-                    if (this.parent.element.querySelector(".e-agenda-view tr[aria-rowindex=\"" + daysCount + "\"]")) {
-                        break;
+                else if (data.type === 'eventColumn') {
+                    var elementType = (data.eventData.length === 0) ? 'noEvents' : 'data';
+                    ntd = this.createAgendaContentElement(elementType, data.eventData, ntd, data.groupOrder, data.groupIndex);
+                    ntd.setAttribute('data-date', data.date.getTime().toString());
+                    if (this.parent.activeViewOptions.group.byDate || this.parent.currentView === 'MonthAgenda') {
+                        addClass([ntd], [cls.AGENDA_CELLS_CLASS, cls.AGENDA_DAY_PADDING_CLASS]);
                     }
-                    ntr.insertBefore(ntd, ntr.childNodes[0]);
+                    ntr.appendChild(ntd);
                 }
-                tBody.appendChild(ntr);
+                else {
+                    ntd.setAttribute('rowspan', data.rowSpan.toString());
+                    addClass([ntd], cls.AGENDA_RESOURCE_CLASS);
+                    this.viewBase.setResourceHeaderContent(ntd, data, data.className[0]);
+                    ntr.appendChild(ntd);
+                }
             }
-        };
-        AgendaBase.prototype.createDateHeaderElement = function (date) {
-            var dateHeader;
-            if (this.parent.activeViewOptions.dateHeaderTemplate) {
-                dateHeader = ej2_base_1.createElement('div', { className: cls.AGENDA_HEADER_CLASS });
-                var templateArgs = { date: date, type: 'dateHeader' };
-                var template = this.parent.getDateHeaderTemplate()(templateArgs);
-                ej2_base_1.append([].slice.call(template), dateHeader);
+            if (this.parent.activeViewOptions.group.byDate && row === 0 && this.parent.currentView !== 'MonthAgenda') {
+                var ntd = td.cloneNode();
+                ntd.setAttribute('data-date', tempData.date.getTime().toString());
+                ntd.setAttribute('rowspan', rowSpan.toString());
+                ntd.appendChild(this.createDateHeaderElement(tempData.date));
+                addClass([ntd], [cls.AGENDA_CELLS_CLASS, cls.AGENDA_DATE_CLASS, cls.DATE_BORDER_CLASS]);
+                var daysCount = util.getDaysCount(this.parent.selectedDate.getTime(), tempData.date.getTime());
+                ntr.setAttribute('aria-rowindex', daysCount.toString());
+                if (this.parent.element.querySelector(".e-agenda-view tr[aria-rowindex=\"" + daysCount + "\"]")) {
+                    break;
+                }
+                ntr.insertBefore(ntd, ntr.childNodes[0]);
             }
-            else {
-                dateHeader = this.viewBase.getMobileDateElement(date, cls.AGENDA_HEADER_CLASS);
+            tBody.appendChild(ntr);
+        }
+    };
+    AgendaBase.prototype.createDateHeaderElement = function (date) {
+        var dateHeader;
+        if (this.parent.activeViewOptions.dateHeaderTemplate) {
+            dateHeader = createElement('div', { className: cls.AGENDA_HEADER_CLASS });
+            var templateArgs = { date: date, type: 'dateHeader' };
+            var template = this.parent.getDateHeaderTemplate()(templateArgs);
+            append([].slice.call(template), dateHeader);
+        }
+        else {
+            dateHeader = this.viewBase.getMobileDateElement(date, cls.AGENDA_HEADER_CLASS);
+        }
+        return dateHeader;
+    };
+    AgendaBase.prototype.renderEmptyContent = function (tBody, agendaDate) {
+        var eTr = this.createTableRowElement(agendaDate, 'noEvents');
+        var eTd = eTr.children[0];
+        var noEvents = createElement('div', {
+            className: cls.AGENDA_EMPTY_EVENT_CLASS,
+            innerHTML: this.parent.localeObj.getConstant('noEvents')
+        });
+        eTd.appendChild(noEvents);
+        tBody.appendChild(eTr);
+    };
+    AgendaBase.prototype.createTableRowElement = function (date, type) {
+        var daysCount = util.getDaysCount(this.parent.selectedDate.getTime(), date.getTime());
+        var tr = createElement('tr', { attrs: { 'role': 'row', 'aria-rowindex': daysCount.toString() } });
+        var td = createElement('td', {
+            attrs: {
+                'class': (type === 'monthHeader') ? cls.AGENDA_MONTH_HEADER_CLASS : cls.AGENDA_CELLS_CLASS,
+                'role': 'gridcell',
+                'aria-selected': 'false',
+                'aria-colindex': daysCount.toString(),
+                'data-date': date.getTime().toString()
             }
-            return dateHeader;
-        };
-        AgendaBase.prototype.renderEmptyContent = function (tBody, agendaDate) {
-            var eTr = this.createTableRowElement(agendaDate, 'noEvents');
-            var eTd = eTr.children[0];
-            var noEvents = ej2_base_1.createElement('div', {
-                className: cls.AGENDA_EMPTY_EVENT_CLASS,
-                innerHTML: this.parent.localeObj.getConstant('noEvents')
-            });
-            eTd.appendChild(noEvents);
-            tBody.appendChild(eTr);
-        };
-        AgendaBase.prototype.createTableRowElement = function (date, type) {
-            var daysCount = util.getDaysCount(this.parent.selectedDate.getTime(), date.getTime());
-            var tr = ej2_base_1.createElement('tr', { attrs: { 'role': 'row', 'aria-rowindex': daysCount.toString() } });
-            var td = ej2_base_1.createElement('td', {
-                attrs: {
-                    'class': (type === 'monthHeader') ? cls.AGENDA_MONTH_HEADER_CLASS : cls.AGENDA_CELLS_CLASS,
-                    'role': 'gridcell',
-                    'aria-selected': 'false',
-                    'aria-colindex': daysCount.toString(),
-                    'data-date': date.getTime().toString()
-                }
-            });
-            var dTd = td.cloneNode();
-            var aTd = td.cloneNode();
-            tr.appendChild(dTd);
-            if (type !== 'noEvents') {
-                tr.appendChild(aTd);
-            }
-            return tr;
-        };
-        return AgendaBase;
-    }());
-    exports.AgendaBase = AgendaBase;
-});
+        });
+        var dTd = td.cloneNode();
+        var aTd = td.cloneNode();
+        tr.appendChild(dTd);
+        if (type !== 'noEvents') {
+            tr.appendChild(aTd);
+        }
+        return tr;
+    };
+    return AgendaBase;
+}());
+export { AgendaBase };

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

@@ -1,243 +0,252 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "../timezone/timezone", "../../recurrence-editor/date-generator", "../base/util", "../base/css-constant", "../base/constant"], function (require, exports, ej2_base_1, ej2_data_1, timezone_1, date_generator_1, util, cls, event) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var EventBase = (function () {
-        function EventBase(parent) {
-            this.slots = [];
-            this.parent = parent;
-            this.timezone = new timezone_1.Timezone();
+import { isNullOrUndefined, closest, addClass, extend, EventHandler, removeClass } from '@syncfusion/ej2-base';
+import { DataManager, Query, Predicate } from '@syncfusion/ej2-data';
+import { Timezone } from '../timezone/timezone';
+import { generate } from '../../recurrence-editor/date-generator';
+import * as util from '../base/util';
+import * as cls from '../base/css-constant';
+import * as event from '../base/constant';
+/**
+ * EventBase for appointment rendering
+ */
+var EventBase = /** @class */ (function () {
+    /**
+     * Constructor for EventBase
+     */
+    function EventBase(parent) {
+        this.slots = [];
+        this.parent = parent;
+        this.timezone = new Timezone();
+    }
+    EventBase.prototype.processData = function (events, timeZonePropChanged, oldTimezone) {
+        var start = this.parent.activeView.startDate();
+        var end = this.parent.activeView.endDate();
+        var fields = this.parent.eventFields;
+        this.parent.eventsProcessed = [];
+        var processed = [];
+        var temp = 1;
+        var generateID = false;
+        if (events.length > 0 && isNullOrUndefined(events[0][fields.id])) {
+            generateID = true;
         }
-        EventBase.prototype.processData = function (events, timeZonePropChanged, oldTimezone) {
-            var start = this.parent.activeView.startDate();
-            var end = this.parent.activeView.endDate();
-            var fields = this.parent.eventFields;
-            this.parent.eventsProcessed = [];
-            var processed = [];
-            var temp = 1;
-            var generateID = false;
-            if (events.length > 0 && ej2_base_1.isNullOrUndefined(events[0][fields.id])) {
-                generateID = true;
+        for (var _i = 0, events_1 = events; _i < events_1.length; _i++) {
+            var event_1 = events_1[_i];
+            if (generateID) {
+                event_1[fields.id] = temp++;
             }
-            for (var _i = 0, events_1 = events; _i < events_1.length; _i++) {
-                var event_1 = events_1[_i];
-                if (generateID) {
-                    event_1[fields.id] = temp++;
-                }
-                if (typeof event_1[fields.startTime] === 'string') {
-                    event_1[fields.startTime] = util.getDateFromString(event_1[fields.startTime]);
-                }
-                if (typeof event_1[fields.endTime] === 'string') {
-                    event_1[fields.endTime] = util.getDateFromString(event_1[fields.endTime]);
-                }
-                if (timeZonePropChanged) {
-                    this.processTimezoneChange(event_1, oldTimezone);
-                }
-                else {
-                    this.processTimezone(event_1);
-                }
-                if (!ej2_base_1.isNullOrUndefined(event_1[fields.recurrenceRule]) && ej2_base_1.isNullOrUndefined(event_1[fields.recurrenceID])) {
-                    processed = processed.concat(this.generateOccurrence(event_1));
-                }
-                else {
-                    event_1.Guid = this.generateGuid();
-                    processed.push(event_1);
-                }
+            if (typeof event_1[fields.startTime] === 'string') {
+                event_1[fields.startTime] = util.getDateFromString(event_1[fields.startTime]);
             }
-            this.parent.eventsProcessed = this.filterEvents(start, end, processed);
-            return processed;
-        };
-        EventBase.prototype.timezonePropertyChange = function (oldTimezone) {
-            var processed = this.processData(this.parent.eventsData, true, oldTimezone);
-            this.parent.notify(event.dataReady, { processedData: processed });
-        };
-        EventBase.prototype.processTimezoneChange = function (event, oldTimezone) {
-            var fields = this.parent.eventFields;
-            if (oldTimezone && this.parent.timezone) {
-                event[fields.startTime] = this.timezone.convert(event[fields.startTime], oldTimezone, this.parent.timezone);
-                event[fields.endTime] = this.timezone.convert(event[fields.endTime], oldTimezone, this.parent.timezone);
+            if (typeof event_1[fields.endTime] === 'string') {
+                event_1[fields.endTime] = util.getDateFromString(event_1[fields.endTime]);
             }
-            else if (!oldTimezone && this.parent.timezone) {
-                event[fields.startTime] = this.timezone.add(event[fields.startTime], this.parent.timezone);
-                event[fields.endTime] = this.timezone.add(event[fields.endTime], this.parent.timezone);
+            if (timeZonePropChanged) {
+                this.processTimezoneChange(event_1, oldTimezone);
             }
-            else if (oldTimezone && !this.parent.timezone) {
-                event[fields.startTime] = this.timezone.remove(event[fields.startTime], oldTimezone);
-                event[fields.endTime] = this.timezone.remove(event[fields.endTime], oldTimezone);
+            else {
+                this.processTimezone(event_1);
             }
-        };
-        EventBase.prototype.processTimezone = function (event) {
-            var fields = this.parent.eventFields;
-            if (event[fields.startTimezone] || event[fields.endTimezone]) {
-                var startTimezone = event[fields.startTimezone] || event[fields.endTimezone];
-                var endTimezone = event[fields.endTimezone] || event[fields.startTimezone];
-                event[fields.startTime] = this.timezone.add(event[fields.startTime], startTimezone);
-                event[fields.endTime] = this.timezone.add(event[fields.endTime], endTimezone);
-                if (this.parent.timezone) {
-                    var zone = this.parent.timezone;
-                    event[fields.startTime] = this.timezone.convert(event[fields.startTime], startTimezone, zone);
-                    event[fields.endTime] = this.timezone.convert(event[fields.endTime], endTimezone, zone);
-                }
+            if (!isNullOrUndefined(event_1[fields.recurrenceRule]) && isNullOrUndefined(event_1[fields.recurrenceID])) {
+                processed = processed.concat(this.generateOccurrence(event_1));
             }
-            else if (this.parent.timezone) {
-                event[fields.startTime] = this.timezone.add(event[fields.startTime], this.parent.timezone);
-                event[fields.endTime] = this.timezone.add(event[fields.endTime], this.parent.timezone);
+            else {
+                event_1.Guid = this.generateGuid();
+                processed.push(event_1);
             }
-        };
-        EventBase.prototype.filterEvents = function (startDate, endDate, appointments, resourceTdData) {
-            if (appointments === void 0) { appointments = this.parent.eventsProcessed; }
-            var fieldMapping = this.parent.eventFields;
-            var predicate = new ej2_data_1.Predicate(fieldMapping.startTime, 'greaterthanorequal', startDate).
-                and(new ej2_data_1.Predicate(fieldMapping.endTime, 'greaterthanorequal', startDate)).
-                and(new ej2_data_1.Predicate(fieldMapping.startTime, 'lessthan', endDate)).
-                or(new ej2_data_1.Predicate(fieldMapping.startTime, 'lessthanorequal', startDate).
-                and(new ej2_data_1.Predicate(fieldMapping.endTime, 'greaterthan', startDate)));
-            var filter = new ej2_data_1.DataManager({ json: appointments }).executeLocal(new ej2_data_1.Query().where(predicate));
-            if (resourceTdData) {
-                filter = this.filterEventsByResource(resourceTdData, filter);
+        }
+        this.parent.eventsProcessed = this.filterEvents(start, end, processed);
+        return processed;
+    };
+    EventBase.prototype.timezonePropertyChange = function (oldTimezone) {
+        var processed = this.processData(this.parent.eventsData, true, oldTimezone);
+        this.parent.notify(event.dataReady, { processedData: processed });
+    };
+    EventBase.prototype.processTimezoneChange = function (event, oldTimezone) {
+        var fields = this.parent.eventFields;
+        if (oldTimezone && this.parent.timezone) {
+            event[fields.startTime] = this.timezone.convert(event[fields.startTime], oldTimezone, this.parent.timezone);
+            event[fields.endTime] = this.timezone.convert(event[fields.endTime], oldTimezone, this.parent.timezone);
+        }
+        else if (!oldTimezone && this.parent.timezone) {
+            event[fields.startTime] = this.timezone.add(event[fields.startTime], this.parent.timezone);
+            event[fields.endTime] = this.timezone.add(event[fields.endTime], this.parent.timezone);
+        }
+        else if (oldTimezone && !this.parent.timezone) {
+            event[fields.startTime] = this.timezone.remove(event[fields.startTime], oldTimezone);
+            event[fields.endTime] = this.timezone.remove(event[fields.endTime], oldTimezone);
+        }
+    };
+    EventBase.prototype.processTimezone = function (event) {
+        var fields = this.parent.eventFields;
+        if (event[fields.startTimezone] || event[fields.endTimezone]) {
+            var startTimezone = event[fields.startTimezone] || event[fields.endTimezone];
+            var endTimezone = event[fields.endTimezone] || event[fields.startTimezone];
+            event[fields.startTime] = this.timezone.add(event[fields.startTime], startTimezone);
+            event[fields.endTime] = this.timezone.add(event[fields.endTime], endTimezone);
+            if (this.parent.timezone) {
+                var zone = this.parent.timezone;
+                event[fields.startTime] = this.timezone.convert(event[fields.startTime], startTimezone, zone);
+                event[fields.endTime] = this.timezone.convert(event[fields.endTime], endTimezone, zone);
             }
-            return this.sortByTime(filter);
-        };
-        EventBase.prototype.filterEventsByResource = function (resourceTdData, appointments) {
-            if (appointments === void 0) { appointments = this.parent.eventsProcessed; }
-            var predicate;
-            var resourceCollection = this.parent.resourceBase.resourceCollection;
-            for (var level = 0; level < resourceCollection.length; level++) {
-                var operator = this.parent.activeViewOptions.group.allowGroupEdit && resourceCollection[level].allowMultiple ?
-                    'contains' : 'equal';
-                var tempPredicate = new ej2_data_1.Predicate(resourceCollection[level].field, operator, resourceTdData.groupOrder[level]);
-                predicate = predicate ? predicate.and(tempPredicate) : tempPredicate;
+        }
+        else if (this.parent.timezone) {
+            event[fields.startTime] = this.timezone.add(event[fields.startTime], this.parent.timezone);
+            event[fields.endTime] = this.timezone.add(event[fields.endTime], this.parent.timezone);
+        }
+    };
+    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 filter = new DataManager({ json: appointments }).executeLocal(new Query().where(predicate));
+        if (resourceTdData) {
+            filter = this.filterEventsByResource(resourceTdData, filter);
+        }
+        return this.sortByTime(filter);
+    };
+    EventBase.prototype.filterEventsByResource = function (resourceTdData, appointments) {
+        if (appointments === void 0) { appointments = this.parent.eventsProcessed; }
+        var predicate;
+        var resourceCollection = this.parent.resourceBase.resourceCollection;
+        for (var level = 0; level < resourceCollection.length; level++) {
+            var operator = this.parent.activeViewOptions.group.allowGroupEdit && resourceCollection[level].allowMultiple ?
+                'contains' : 'equal';
+            var tempPredicate = new Predicate(resourceCollection[level].field, operator, resourceTdData.groupOrder[level]);
+            predicate = predicate ? predicate.and(tempPredicate) : tempPredicate;
+        }
+        return new DataManager({ json: appointments }).executeLocal(new Query().where(predicate));
+    };
+    EventBase.prototype.sortByTime = function (appointments) {
+        var fieldMapping = this.parent.eventFields;
+        appointments.sort(function (a, b) {
+            var d1 = a[fieldMapping.startTime];
+            var d2 = b[fieldMapping.startTime];
+            return d1.getTime() - d2.getTime();
+        });
+        return appointments;
+    };
+    EventBase.prototype.sortByDateTime = function (appointments) {
+        var fieldMapping = this.parent.eventFields;
+        appointments.sort(function (object1, object2) {
+            var d3 = object1[fieldMapping.startTime];
+            var d4 = object2[fieldMapping.startTime];
+            var d5 = object1[fieldMapping.endTime];
+            var d6 = object2[fieldMapping.endTime];
+            var d1 = d5.getTime() - d3.getTime();
+            var d2 = d6.getTime() - d4.getTime();
+            return (d3.getTime() - d4.getTime() || d2 - d1);
+        });
+        return appointments;
+    };
+    EventBase.prototype.getSmallestMissingNumber = function (array) {
+        var large = Math.max.apply(Math, array);
+        for (var i = 0; i < large; i++) {
+            if (array.indexOf(i) === -1) {
+                return i;
             }
-            return new ej2_data_1.DataManager({ json: appointments }).executeLocal(new ej2_data_1.Query().where(predicate));
-        };
-        EventBase.prototype.sortByTime = function (appointments) {
-            var fieldMapping = this.parent.eventFields;
-            appointments.sort(function (a, b) {
-                var d1 = a[fieldMapping.startTime];
-                var d2 = b[fieldMapping.startTime];
-                return d1.getTime() - d2.getTime();
-            });
-            return appointments;
-        };
-        EventBase.prototype.sortByDateTime = function (appointments) {
-            var fieldMapping = this.parent.eventFields;
-            appointments.sort(function (object1, object2) {
-                var d3 = object1[fieldMapping.startTime];
-                var d4 = object2[fieldMapping.startTime];
-                var d5 = object1[fieldMapping.endTime];
-                var d6 = object2[fieldMapping.endTime];
-                var d1 = d5.getTime() - d3.getTime();
-                var d2 = d6.getTime() - d4.getTime();
-                return (d3.getTime() - d4.getTime() || d2 - d1);
-            });
-            return appointments;
-        };
-        EventBase.prototype.getSmallestMissingNumber = function (array) {
-            var large = Math.max.apply(Math, array);
-            for (var i = 0; i < large; i++) {
-                if (array.indexOf(i) === -1) {
-                    return i;
+        }
+        return large + 1;
+    };
+    EventBase.prototype.splitEventByDay = function (event) {
+        var eventFields = this.parent.eventFields;
+        var data = [];
+        var eventStartTime = event[eventFields.startTime];
+        var eventEndTime = event[eventFields.endTime];
+        var isDifferentDate = util.resetTime(new Date(eventStartTime.getTime())) <
+            util.resetTime(new Date(eventEndTime.getTime()));
+        if (isDifferentDate) {
+            var start = new Date(eventStartTime.getTime());
+            var end = util.addDays(util.resetTime(new Date(eventStartTime.getTime())), 1);
+            var endDate = (eventEndTime.getHours() === 0 && eventEndTime.getMinutes() === 0) ?
+                eventEndTime : util.addDays(eventEndTime, 1);
+            var index = 1;
+            var eventLength = util.getDaysCount(eventStartTime.getTime(), endDate.getTime());
+            while (end <= eventEndTime) {
+                var app = extend({}, event);
+                app[eventFields.startTime] = start;
+                app[eventFields.endTime] = end;
+                app.data = { index: index, count: eventLength };
+                app.Guid = this.generateGuid();
+                app.isSpanned = true;
+                data.push(app);
+                start = end;
+                if ((new Date(start.getTime()).setHours(0, 0, 0, 0) === new Date(eventEndTime.getTime()).setHours(0, 0, 0, 0))
+                    && !(end.getTime() === eventEndTime.getTime())) {
+                    end = new Date(new Date(start.getTime()).setHours(eventEndTime.getHours(), eventEndTime.getMinutes()));
                 }
-            }
-            return large + 1;
-        };
-        EventBase.prototype.splitEventByDay = function (event) {
-            var eventFields = this.parent.eventFields;
-            var data = [];
-            var eventStartTime = event[eventFields.startTime];
-            var eventEndTime = event[eventFields.endTime];
-            var isDifferentDate = util.resetTime(new Date(eventStartTime.getTime())) <
-                util.resetTime(new Date(eventEndTime.getTime()));
-            if (isDifferentDate) {
-                var start = new Date(eventStartTime.getTime());
-                var end = util.addDays(util.resetTime(new Date(eventStartTime.getTime())), 1);
-                var endDate = (eventEndTime.getHours() === 0 && eventEndTime.getMinutes() === 0) ?
-                    eventEndTime : util.addDays(eventEndTime, 1);
-                var index = 1;
-                var eventLength = util.getDaysCount(eventStartTime.getTime(), endDate.getTime());
-                while (end <= eventEndTime) {
-                    var app = ej2_base_1.extend({}, event);
-                    app[eventFields.startTime] = start;
-                    app[eventFields.endTime] = end;
-                    app.data = { index: index, count: eventLength };
-                    app.Guid = this.generateGuid();
-                    app.isSpanned = true;
-                    data.push(app);
-                    start = end;
-                    if ((new Date(start.getTime()).setHours(0, 0, 0, 0) === new Date(eventEndTime.getTime()).setHours(0, 0, 0, 0))
-                        && !(end.getTime() === eventEndTime.getTime())) {
-                        end = new Date(new Date(start.getTime()).setHours(eventEndTime.getHours(), eventEndTime.getMinutes()));
-                    }
-                    else {
-                        end = util.addDays(util.resetTime(new Date(start.getTime())), 1);
-                    }
-                    index++;
+                else {
+                    end = util.addDays(util.resetTime(new Date(start.getTime())), 1);
                 }
+                index++;
             }
-            else {
-                data.push(event);
+        }
+        else {
+            data.push(event);
+        }
+        return data;
+    };
+    EventBase.prototype.splitEvent = function (event, dateRender) {
+        var fields = this.parent.eventFields;
+        var start = util.resetTime(new Date(event[fields.startTime] + '')).getTime();
+        var end = util.resetTime(new Date(event[fields.endTime] + '')).getTime();
+        if (util.getDateInMs(event[fields.endTime]) <= 0) {
+            var temp = util.addDays(util.resetTime(new Date(event[fields.endTime] + '')), -1).getTime();
+            end = start > temp ? start : temp;
+        }
+        var orgStart = start;
+        var orgEnd = end;
+        var ranges = [];
+        if (start !== end) {
+            if (start < dateRender[0].getTime()) {
+                start = dateRender[0].getTime();
             }
-            return data;
-        };
-        EventBase.prototype.splitEvent = function (event, dateRender) {
-            var fields = this.parent.eventFields;
-            var start = util.resetTime(new Date(event[fields.startTime] + '')).getTime();
-            var end = util.resetTime(new Date(event[fields.endTime] + '')).getTime();
-            if (util.getDateInMs(event[fields.endTime]) <= 0) {
-                var temp = util.addDays(util.resetTime(new Date(event[fields.endTime] + '')), -1).getTime();
-                end = start > temp ? start : temp;
+            if (end > dateRender[dateRender.length - 1].getTime()) {
+                end = dateRender[dateRender.length - 1].getTime();
             }
-            var orgStart = start;
-            var orgEnd = end;
-            var ranges = [];
-            if (start !== end) {
-                if (start < dateRender[0].getTime()) {
-                    start = dateRender[0].getTime();
+            var cStart = start;
+            for (var level = 0; level < this.slots.length; level++) {
+                var slot = this.slots[level];
+                var firstSlot = slot[0];
+                cStart = (cStart <= firstSlot && end >= firstSlot) ? firstSlot : cStart;
+                if (cStart > end || firstSlot > end) {
+                    break;
                 }
-                if (end > dateRender[dateRender.length - 1].getTime()) {
-                    end = dateRender[dateRender.length - 1].getTime();
+                if (!this.parent.activeViewOptions.group.byDate && this.parent.activeViewOptions.showWeekend &&
+                    this.parent.currentView !== 'WorkWeek') {
+                    var startIndex = slot.indexOf(cStart);
+                    if (startIndex !== -1) {
+                        var endIndex = slot.indexOf(end);
+                        var hasBreak = endIndex !== -1;
+                        endIndex = hasBreak ? endIndex : slot.length - 1;
+                        var count = ((endIndex - startIndex) + 1);
+                        var isLeft = (slot[startIndex] !== orgStart);
+                        var isRight = (slot[endIndex] !== orgEnd);
+                        ranges.push(this.cloneEventObject(event, slot[startIndex], slot[endIndex], count, isLeft, isRight));
+                        if (hasBreak) {
+                            break;
+                        }
+                    }
                 }
-                var cStart = start;
-                for (var level = 0; level < this.slots.length; level++) {
-                    var slot = this.slots[level];
-                    var firstSlot = slot[0];
-                    cStart = (cStart <= firstSlot && end >= firstSlot) ? firstSlot : cStart;
-                    if (cStart > end || firstSlot > end) {
-                        break;
-                    }
-                    if (!this.parent.activeViewOptions.group.byDate && this.parent.activeViewOptions.showWeekend &&
-                        this.parent.currentView !== 'WorkWeek') {
-                        var startIndex = slot.indexOf(cStart);
-                        if (startIndex !== -1) {
-                            var endIndex = slot.indexOf(end);
-                            var hasBreak = endIndex !== -1;
-                            endIndex = hasBreak ? endIndex : slot.length - 1;
-                            var count = ((endIndex - startIndex) + 1);
-                            var isLeft = (slot[startIndex] !== orgStart);
-                            var isRight = (slot[endIndex] !== orgEnd);
-                            ranges.push(this.cloneEventObject(event, slot[startIndex], slot[endIndex], count, isLeft, isRight));
-                            if (hasBreak) {
-                                break;
+                else {
+                    if (this.dateInRange(cStart, slot[0], slot[slot.length - 1])) {
+                        var availSlot = [];
+                        for (var i = 0; i < slot.length; i++) {
+                            if (this.dateInRange(slot[i], orgStart, orgEnd)) {
+                                availSlot.push(slot[i]);
                             }
                         }
-                    }
-                    else {
-                        if (this.dateInRange(cStart, slot[0], slot[slot.length - 1])) {
-                            var availSlot = [];
-                            for (var i = 0; i < slot.length; i++) {
-                                if (this.dateInRange(slot[i], orgStart, orgEnd)) {
-                                    availSlot.push(slot[i]);
-                                }
+                        if (availSlot.length > 0) {
+                            if (!this.parent.activeViewOptions.group.byDate) {
+                                var isLeft = (availSlot[0] !== orgStart);
+                                var isRight = (availSlot[availSlot.length - 1] !== orgEnd);
+                                ranges.push(this.cloneEventObject(event, availSlot[0], availSlot[availSlot.length - 1], availSlot.length, isLeft, isRight));
                             }
-                            if (availSlot.length > 0) {
-                                if (!this.parent.activeViewOptions.group.byDate) {
-                                    var isLeft = (availSlot[0] !== orgStart);
-                                    var isRight = (availSlot[availSlot.length - 1] !== orgEnd);
-                                    ranges.push(this.cloneEventObject(event, availSlot[0], availSlot[availSlot.length - 1], availSlot.length, isLeft, isRight));
+                            else {
+                                for (var _i = 0, availSlot_1 = availSlot; _i < availSlot_1.length; _i++) {
+                                    var slot_1 = availSlot_1[_i];
+                                    ranges.push(this.cloneEventObject(event, slot_1, slot_1, 1, (slot_1 !== orgStart), (slot_1 !== orgEnd)));
                                 }
-                                else {
-                                    for (var _i = 0, availSlot_1 = availSlot; _i < availSlot_1.length; _i++) {
-                                        var slot_1 = availSlot_1[_i];
-                                        ranges.push(this.cloneEventObject(event, slot_1, slot_1, 1, (slot_1 !== orgStart), (slot_1 !== orgEnd)));
-                                    }
-                                }
                             }
@@ -248,335 +257,336 @@ }
             }
+        }
+        else {
+            ranges.push(this.cloneEventObject(event, start, end, 1, false, false));
+        }
+        return ranges;
+    };
+    EventBase.prototype.cloneEventObject = function (event, start, end, count, isLeft, isRight) {
+        var fields = this.parent.eventFields;
+        var e = extend({}, event, null, true);
+        var data = { count: count, isLeft: isLeft, isRight: isRight };
+        data[fields.startTime] = event[fields.startTime];
+        data[fields.endTime] = event[fields.endTime];
+        e.data = data;
+        e[fields.startTime] = new Date(start);
+        e[fields.endTime] = new Date(end);
+        return e;
+    };
+    EventBase.prototype.dateInRange = function (date, start, end) {
+        return start <= date && date <= end;
+    };
+    EventBase.prototype.getSelectedEventElements = function (target) {
+        this.removeSelectedAppointmentClass();
+        if (this.parent.selectedElements.length <= 0) {
+            this.parent.selectedElements.push(target);
+        }
+        else {
+            var isAlreadySelected = this.parent.selectedElements.filter(function (element) {
+                return element.getAttribute('data-guid') === target.getAttribute('data-guid');
+            });
+            if (isAlreadySelected.length <= 0) {
+                var focusElements = [].slice.call(this.parent.element.
+                    querySelectorAll('div[data-guid="' + target.getAttribute('data-guid') + '"]'));
+                for (var _i = 0, focusElements_1 = focusElements; _i < focusElements_1.length; _i++) {
+                    var element = focusElements_1[_i];
+                    this.parent.selectedElements.push(element);
+                }
+            }
             else {
-                ranges.push(this.cloneEventObject(event, start, end, 1, false, false));
+                var selectedElements = this.parent.selectedElements.filter(function (element) {
+                    return element.getAttribute('data-guid') !== target.getAttribute('data-guid');
+                });
+                this.parent.selectedElements = selectedElements;
             }
-            return ranges;
+        }
+        if (target && this.parent.selectedElements.length > 0) {
+            this.addSelectedAppointments(this.parent.selectedElements);
+        }
+        return this.parent.selectedElements;
+    };
+    EventBase.prototype.getSelectedEvents = function () {
+        var _this = this;
+        var eventSelect = [];
+        var elementSelect = [];
+        var selectAppointments = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_BORDER));
+        selectAppointments.filter(function (element) {
+            eventSelect.push(_this.getEventByGuid(element.getAttribute('data-guid')));
+            elementSelect.push(element);
+        });
+        return {
+            event: eventSelect.length > 1 ? eventSelect : eventSelect[0],
+            element: elementSelect.length > 1 ? elementSelect : elementSelect[0]
         };
-        EventBase.prototype.cloneEventObject = function (event, start, end, count, isLeft, isRight) {
-            var fields = this.parent.eventFields;
-            var e = ej2_base_1.extend({}, event, null, true);
-            var data = { count: count, isLeft: isLeft, isRight: isRight };
-            data[fields.startTime] = event[fields.startTime];
-            data[fields.endTime] = event[fields.endTime];
-            e.data = data;
-            e[fields.startTime] = new Date(start);
-            e[fields.endTime] = new Date(end);
-            return e;
-        };
-        EventBase.prototype.dateInRange = function (date, start, end) {
-            return start <= date && date <= end;
-        };
-        EventBase.prototype.getSelectedEventElements = function (target) {
-            this.removeSelectedAppointmentClass();
-            if (this.parent.selectedElements.length <= 0) {
-                this.parent.selectedElements.push(target);
+    };
+    EventBase.prototype.removeSelectedAppointmentClass = function () {
+        var selectedAppointments = this.getSelectedAppointments();
+        for (var _i = 0, selectedAppointments_1 = selectedAppointments; _i < selectedAppointments_1.length; _i++) {
+            var appointment = selectedAppointments_1[_i];
+            appointment.setAttribute('aria-selected', 'false');
+        }
+        removeClass(selectedAppointments, cls.APPOINTMENT_BORDER);
+        if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') {
+            removeClass(selectedAppointments, cls.AGENDA_SELECTED_CELL);
+        }
+    };
+    EventBase.prototype.addSelectedAppointments = function (cells) {
+        for (var _i = 0, cells_1 = cells; _i < cells_1.length; _i++) {
+            var cell = cells_1[_i];
+            cell.setAttribute('aria-selected', 'true');
+        }
+        this.parent.removeSelectedClass();
+        addClass(cells, cls.APPOINTMENT_BORDER);
+    };
+    EventBase.prototype.getSelectedAppointments = function () {
+        return [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_BORDER + ',.' + cls.APPOINTMENT_CLASS + ':focus'));
+    };
+    EventBase.prototype.focusElement = function () {
+        var selectedCell = this.parent.getSelectedElements();
+        if (selectedCell.length > 0) {
+            if (this.parent.keyboardInteractionModule) {
+                var target = (this.parent.activeCellsData.element ||
+                    selectedCell[selectedCell.length - 1]);
+                this.parent.keyboardInteractionModule.selectCells(false, target);
             }
-            else {
-                var isAlreadySelected = this.parent.selectedElements.filter(function (element) {
-                    return element.getAttribute('data-guid') === target.getAttribute('data-guid');
-                });
-                if (isAlreadySelected.length <= 0) {
-                    var focusElements = [].slice.call(this.parent.element.
-                        querySelectorAll('div[data-guid="' + target.getAttribute('data-guid') + '"]'));
-                    for (var _i = 0, focusElements_1 = focusElements; _i < focusElements_1.length; _i++) {
-                        var element = focusElements_1[_i];
-                        this.parent.selectedElements.push(element);
-                    }
-                }
-                else {
-                    var selectedElements = this.parent.selectedElements.filter(function (element) {
-                        return element.getAttribute('data-guid') !== target.getAttribute('data-guid');
-                    });
-                    this.parent.selectedElements = selectedElements;
-                }
+            return;
+        }
+        var selectedAppointments = this.getSelectedAppointments();
+        if (selectedAppointments.length > 0) {
+            selectedAppointments[selectedAppointments.length - 1].focus();
+            return;
+        }
+    };
+    EventBase.prototype.selectWorkCellByTime = function (eventsData) {
+        var target;
+        if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') {
+            return target;
+        }
+        if (eventsData.length > 0) {
+            var selectedObject = eventsData[eventsData.length - 1];
+            var eventStartTime = selectedObject[this.parent.eventFields.startTime];
+            var nearestTime = new Date(+eventStartTime).setMinutes(0, 0, 0);
+            var isAllDay = this.isAllDayAppointment(selectedObject);
+            if (this.parent.currentView === 'Month' || isAllDay) {
+                nearestTime = new Date(+eventStartTime).setHours(0, 0, 0, 0);
             }
-            if (target && this.parent.selectedElements.length > 0) {
-                this.addSelectedAppointments(this.parent.selectedElements);
+            var targetArea = void 0;
+            if (isAllDay && ['Day', 'Week', 'WorkWeek'].indexOf(this.parent.currentView) !== -1) {
+                targetArea = this.parent.getAllDayRow();
             }
-            return this.parent.selectedElements;
-        };
-        EventBase.prototype.getSelectedEvents = function () {
-            var _this = this;
-            var eventSelect = [];
-            var elementSelect = [];
-            var selectAppointments = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_BORDER));
-            selectAppointments.filter(function (element) {
-                eventSelect.push(_this.getEventByGuid(element.getAttribute('data-guid')));
-                elementSelect.push(element);
-            });
-            return {
-                event: eventSelect.length > 1 ? eventSelect : eventSelect[0],
-                element: elementSelect.length > 1 ? elementSelect : elementSelect[0]
-            };
-        };
-        EventBase.prototype.removeSelectedAppointmentClass = function () {
-            var selectedAppointments = this.getSelectedAppointments();
-            for (var _i = 0, selectedAppointments_1 = selectedAppointments; _i < selectedAppointments_1.length; _i++) {
-                var appointment = selectedAppointments_1[_i];
-                appointment.setAttribute('aria-selected', 'false');
+            else {
+                targetArea = this.parent.getContentTable();
             }
-            ej2_base_1.removeClass(selectedAppointments, cls.APPOINTMENT_BORDER);
-            if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') {
-                ej2_base_1.removeClass(selectedAppointments, cls.AGENDA_SELECTED_CELL);
+            var queryString = '[data-date="' + nearestTime + '"]';
+            if (this.parent.activeViewOptions.group.resources.length > 0) {
+                queryString += '[data-group-index="' + this.getGroupIndexFromEvent(selectedObject) + '"]';
             }
-        };
-        EventBase.prototype.addSelectedAppointments = function (cells) {
-            for (var _i = 0, cells_1 = cells; _i < cells_1.length; _i++) {
-                var cell = cells_1[_i];
-                cell.setAttribute('aria-selected', 'true');
-            }
-            this.parent.removeSelectedClass();
-            ej2_base_1.addClass(cells, cls.APPOINTMENT_BORDER);
-        };
-        EventBase.prototype.getSelectedAppointments = function () {
-            return [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_BORDER + ',.' + cls.APPOINTMENT_CLASS + ':focus'));
-        };
-        EventBase.prototype.focusElement = function () {
-            var selectedCell = this.parent.getSelectedElements();
-            if (selectedCell.length > 0) {
+            target = targetArea.querySelector(queryString);
+            if (target) {
+                this.parent.activeCellsData = this.parent.getCellDetails(target);
                 if (this.parent.keyboardInteractionModule) {
-                    var target = (this.parent.activeCellsData.element ||
-                        selectedCell[selectedCell.length - 1]);
                     this.parent.keyboardInteractionModule.selectCells(false, target);
                 }
-                return;
-            }
-            var selectedAppointments = this.getSelectedAppointments();
-            if (selectedAppointments.length > 0) {
-                selectedAppointments[selectedAppointments.length - 1].focus();
-                return;
-            }
-        };
-        EventBase.prototype.selectWorkCellByTime = function (eventsData) {
-            var target;
-            if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') {
                 return target;
             }
-            if (eventsData.length > 0) {
-                var selectedObject = eventsData[eventsData.length - 1];
-                var eventStartTime = selectedObject[this.parent.eventFields.startTime];
-                var nearestTime = new Date(+eventStartTime).setMinutes(0, 0, 0);
-                var isAllDay = this.isAllDayAppointment(selectedObject);
-                if (this.parent.currentView === 'Month' || isAllDay) {
-                    nearestTime = new Date(+eventStartTime).setHours(0, 0, 0, 0);
+        }
+        return target;
+    };
+    EventBase.prototype.getGroupIndexFromEvent = function (eventData) {
+        var groupOrder = [];
+        var groupIndex = 0;
+        for (var _i = 0, _a = this.parent.resourceBase.resourceCollection; _i < _a.length; _i++) {
+            var resourceData = _a[_i];
+            groupOrder.push(eventData[resourceData.field]);
+        }
+        this.parent.resourceBase.lastResourceLevel.forEach(function (resource) {
+            var count;
+            var order = resource.groupOrder;
+            order.forEach(function (resIndex, index) {
+                var resValue = (groupOrder[index] instanceof Array) ? groupOrder[index][index] : groupOrder[index];
+                if (resValue === resIndex) {
+                    count = count ? count + 1 : 1;
                 }
-                var targetArea = void 0;
-                if (isAllDay && ['Day', 'Week', 'WorkWeek'].indexOf(this.parent.currentView) !== -1) {
-                    targetArea = this.parent.getAllDayRow();
-                }
-                else {
-                    targetArea = this.parent.getContentTable();
-                }
-                var queryString = '[data-date="' + nearestTime + '"]';
-                if (this.parent.activeViewOptions.group.resources.length > 0) {
-                    queryString += '[data-group-index="' + this.getGroupIndexFromEvent(selectedObject) + '"]';
-                }
-                target = targetArea.querySelector(queryString);
-                if (target) {
-                    this.parent.activeCellsData = this.parent.getCellDetails(target);
-                    if (this.parent.keyboardInteractionModule) {
-                        this.parent.keyboardInteractionModule.selectCells(false, target);
-                    }
-                    return target;
-                }
-            }
-            return target;
-        };
-        EventBase.prototype.getGroupIndexFromEvent = function (eventData) {
-            var groupOrder = [];
-            var groupIndex = 0;
-            for (var _i = 0, _a = this.parent.resourceBase.resourceCollection; _i < _a.length; _i++) {
-                var resourceData = _a[_i];
-                groupOrder.push(eventData[resourceData.field]);
-            }
-            this.parent.resourceBase.lastResourceLevel.forEach(function (resource) {
-                var count;
-                var order = resource.groupOrder;
-                order.forEach(function (resIndex, index) {
-                    var resValue = (groupOrder[index] instanceof Array) ? groupOrder[index][index] : groupOrder[index];
-                    if (resValue === resIndex) {
-                        count = count ? count + 1 : 1;
-                    }
-                });
-                if (order.length === count) {
-                    groupIndex = resource.groupIndex;
-                }
             });
-            return groupIndex;
-        };
-        EventBase.prototype.isAllDayAppointment = function (event) {
-            var fieldMapping = this.parent.eventFields;
-            var isAllDay = event[fieldMapping.isAllDay];
-            var isFullDay = ((event[fieldMapping.endTime].getTime() - event[fieldMapping.startTime].getTime())
-                / util.MS_PER_DAY) >= 1;
-            return (isAllDay || isFullDay) ? true : false;
-        };
-        EventBase.prototype.addEventListener = function () {
-            this.parent.on(event.documentClick, this.appointmentBorderRemove, this);
-        };
-        EventBase.prototype.appointmentBorderRemove = function (event) {
-            var element = event.event.target;
-            if (ej2_base_1.closest(element, '.' + cls.APPOINTMENT_CLASS)) {
-                this.parent.removeSelectedClass();
+            if (order.length === count) {
+                groupIndex = resource.groupIndex;
             }
-            else if (!ej2_base_1.closest(element, '.' + cls.POPUP_OPEN)) {
-                this.removeSelectedAppointmentClass();
-            }
-        };
-        EventBase.prototype.wireAppointmentEvents = function (element) {
-            ej2_base_1.EventHandler.add(element, 'click', this.eventClick, this);
-            ej2_base_1.EventHandler.add(element, 'dblclick', this.eventDoubleClick, this);
-        };
-        EventBase.prototype.eventClick = function (eventData) {
-            if (eventData.ctrlKey && eventData.which === 1 && this.parent.keyboardInteractionModule) {
-                this.parent.quickPopup.quickPopup.hide();
-                this.parent.selectedElements = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_BORDER));
-                this.parent.keyboardInteractionModule.onAppointmentSelection(eventData);
-                return;
-            }
+        });
+        return groupIndex;
+    };
+    EventBase.prototype.isAllDayAppointment = function (event) {
+        var fieldMapping = this.parent.eventFields;
+        var isAllDay = event[fieldMapping.isAllDay];
+        var isFullDay = ((event[fieldMapping.endTime].getTime() - event[fieldMapping.startTime].getTime())
+            / util.MS_PER_DAY) >= 1;
+        return (isAllDay || isFullDay) ? true : false;
+    };
+    EventBase.prototype.addEventListener = function () {
+        this.parent.on(event.documentClick, this.appointmentBorderRemove, this);
+    };
+    EventBase.prototype.appointmentBorderRemove = function (event) {
+        var element = event.event.target;
+        if (closest(element, '.' + cls.APPOINTMENT_CLASS)) {
+            this.parent.removeSelectedClass();
+        }
+        else if (!closest(element, '.' + cls.POPUP_OPEN)) {
             this.removeSelectedAppointmentClass();
-            this.activeEventData(eventData);
-            var args = ej2_base_1.extend(this.parent.activeEventData, { cancel: false });
-            this.parent.trigger(event.eventClick, args);
-            if (args.cancel) {
-                this.removeSelectedAppointmentClass();
-                return;
-            }
-            if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') {
-                ej2_base_1.addClass([args.element], cls.AGENDA_SELECTED_CELL);
-            }
-            this.parent.notify(event.eventClick, this.parent.activeEventData);
-        };
-        EventBase.prototype.eventDoubleClick = function (e) {
-            this.parent.quickPopup.quickPopupHide(true);
-            if (e.type === 'touchstart') {
-                this.activeEventData(e);
-            }
+        }
+    };
+    EventBase.prototype.wireAppointmentEvents = function (element) {
+        EventHandler.add(element, 'click', this.eventClick, this);
+        EventHandler.add(element, 'dblclick', this.eventDoubleClick, this);
+    };
+    EventBase.prototype.eventClick = function (eventData) {
+        if (eventData.ctrlKey && eventData.which === 1 && this.parent.keyboardInteractionModule) {
+            this.parent.quickPopup.quickPopup.hide();
+            this.parent.selectedElements = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_BORDER));
+            this.parent.keyboardInteractionModule.onAppointmentSelection(eventData);
+            return;
+        }
+        this.removeSelectedAppointmentClass();
+        this.activeEventData(eventData);
+        var args = extend(this.parent.activeEventData, { cancel: false });
+        this.parent.trigger(event.eventClick, args);
+        if (args.cancel) {
             this.removeSelectedAppointmentClass();
-            var fieldMapping = this.parent.eventFields;
-            if (!ej2_base_1.isNullOrUndefined(this.parent.activeEventData.event) &&
-                ej2_base_1.isNullOrUndefined(this.parent.activeEventData.event[fieldMapping.recurrenceID])) {
-                this.parent.currentAction = 'Save';
-                this.parent.eventWindow.openEditor(this.parent.activeEventData.event, 'Save');
+            return;
+        }
+        if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') {
+            addClass([args.element], cls.AGENDA_SELECTED_CELL);
+        }
+        this.parent.notify(event.eventClick, this.parent.activeEventData);
+    };
+    EventBase.prototype.eventDoubleClick = function (e) {
+        this.parent.quickPopup.quickPopupHide(true);
+        if (e.type === 'touchstart') {
+            this.activeEventData(e);
+        }
+        this.removeSelectedAppointmentClass();
+        var fieldMapping = this.parent.eventFields;
+        if (!isNullOrUndefined(this.parent.activeEventData.event) &&
+            isNullOrUndefined(this.parent.activeEventData.event[fieldMapping.recurrenceID])) {
+            this.parent.currentAction = 'Save';
+            this.parent.eventWindow.openEditor(this.parent.activeEventData.event, 'Save');
+        }
+        else {
+            this.parent.currentAction = 'EditOccurrence';
+            this.parent.quickPopup.openRecurrenceAlert();
+        }
+    };
+    EventBase.prototype.getEventByGuid = function (guid) {
+        return new DataManager({ json: this.parent.eventsProcessed }).executeLocal(new Query().where('Guid', 'equal', guid))[0];
+    };
+    EventBase.prototype.generateGuid = function () {
+        return 'xyxxxxyx-xxxy-yxxx-xyxx-xxyxxxxyyxxx'.replace(/[xy]/g, function (c) {
+            var r = Math.random() * 16 | 0;
+            var v = (c === 'x') ? r : (r & 0x3 | 0x8);
+            return v.toString(16);
+        });
+    };
+    EventBase.prototype.getEventMaxId = function () {
+        var fields = this.parent.eventFields;
+        if (this.parent.eventsData.length < 1) {
+            return 0;
+        }
+        return Math.max.apply(Math, this.parent.eventsData.map(function (event) { return event[fields.id]; }));
+    };
+    EventBase.prototype.activeEventData = function (eventData) {
+        var _this = this;
+        var target = closest(eventData.target, '.' + cls.APPOINTMENT_CLASS);
+        var guid = target.getAttribute('data-guid');
+        this.addSelectedAppointments([].slice.call(this.parent.element.querySelectorAll('div[data-guid="' + guid + '"]')));
+        var eventObject = this.getEventByGuid(guid);
+        if (eventObject && eventObject.isSpanned) {
+            eventObject = this.parent.eventsData.filter(function (obj) {
+                return obj[_this.parent.eventFields.id] === eventObject[_this.parent.eventFields.id];
+            })[0];
+        }
+        this.parent.activeEventData = { event: eventObject, element: target };
+    };
+    EventBase.prototype.generateOccurrence = function (event, viewDate) {
+        var fields = this.parent.eventFields;
+        var startDate = event[fields.startTime];
+        var endDate = event[fields.endTime];
+        var occurrenceCollection = [];
+        var currentViewDate = isNullOrUndefined(viewDate) ? this.parent.activeView.startDate() : viewDate;
+        var eventRule = event[fields.recurrenceRule];
+        var duration = endDate.getTime() - startDate.getTime();
+        currentViewDate = new Date(+currentViewDate - duration);
+        var dates = generate(startDate, eventRule, event[fields.recurrenceException], this.parent.firstDayOfWeek, undefined, currentViewDate);
+        if (this.parent.currentView === 'Agenda' && eventRule.indexOf('COUNT') === -1 && eventRule.indexOf('UNTIL') === -1) {
+            if (isNullOrUndefined(event.generatedDates)) {
+                event.generatedDates = { start: new Date(dates[0]), end: new Date(dates[dates.length - 1]) };
             }
             else {
-                this.parent.currentAction = 'EditOccurrence';
-                this.parent.quickPopup.openRecurrenceAlert();
-            }
-        };
-        EventBase.prototype.getEventByGuid = function (guid) {
-            return new ej2_data_1.DataManager({ json: this.parent.eventsProcessed }).executeLocal(new ej2_data_1.Query().where('Guid', 'equal', guid))[0];
-        };
-        EventBase.prototype.generateGuid = function () {
-            return 'xyxxxxyx-xxxy-yxxx-xyxx-xxyxxxxyyxxx'.replace(/[xy]/g, function (c) {
-                var r = Math.random() * 16 | 0;
-                var v = (c === 'x') ? r : (r & 0x3 | 0x8);
-                return v.toString(16);
-            });
-        };
-        EventBase.prototype.getEventMaxId = function () {
-            var fields = this.parent.eventFields;
-            if (this.parent.eventsData.length < 1) {
-                return 0;
-            }
-            return Math.max.apply(Math, this.parent.eventsData.map(function (event) { return event[fields.id]; }));
-        };
-        EventBase.prototype.activeEventData = function (eventData) {
-            var _this = this;
-            var target = ej2_base_1.closest(eventData.target, '.' + cls.APPOINTMENT_CLASS);
-            var guid = target.getAttribute('data-guid');
-            this.addSelectedAppointments([].slice.call(this.parent.element.querySelectorAll('div[data-guid="' + guid + '"]')));
-            var eventObject = this.getEventByGuid(guid);
-            if (eventObject && eventObject.isSpanned) {
-                eventObject = this.parent.eventsData.filter(function (obj) {
-                    return obj[_this.parent.eventFields.id] === eventObject[_this.parent.eventFields.id];
-                })[0];
-            }
-            this.parent.activeEventData = { event: eventObject, element: target };
-        };
-        EventBase.prototype.generateOccurrence = function (event, viewDate) {
-            var fields = this.parent.eventFields;
-            var startDate = event[fields.startTime];
-            var endDate = event[fields.endTime];
-            var occurrenceCollection = [];
-            var currentViewDate = ej2_base_1.isNullOrUndefined(viewDate) ? this.parent.activeView.startDate() : viewDate;
-            var eventRule = event[fields.recurrenceRule];
-            var duration = endDate.getTime() - startDate.getTime();
-            currentViewDate = new Date(+currentViewDate - duration);
-            var dates = date_generator_1.generate(startDate, eventRule, event[fields.recurrenceException], this.parent.firstDayOfWeek, undefined, currentViewDate);
-            if (this.parent.currentView === 'Agenda' && eventRule.indexOf('COUNT') === -1 && eventRule.indexOf('UNTIL') === -1) {
-                if (ej2_base_1.isNullOrUndefined(event.generatedDates)) {
-                    event.generatedDates = { start: new Date(dates[0]), end: new Date(dates[dates.length - 1]) };
+                if (dates[0] < event.generatedDates.start.getTime()) {
+                    event.generatedDates.start = new Date(dates[0]);
                 }
-                else {
-                    if (dates[0] < event.generatedDates.start.getTime()) {
-                        event.generatedDates.start = new Date(dates[0]);
-                    }
-                    if (dates[dates.length - 1] > event.generatedDates.end.getTime()) {
-                        event.generatedDates.end = new Date(dates[dates.length - 1]);
-                    }
+                if (dates[dates.length - 1] > event.generatedDates.end.getTime()) {
+                    event.generatedDates.end = new Date(dates[dates.length - 1]);
                 }
             }
-            var date = dates.shift();
-            while (date) {
-                var clonedObject = ej2_base_1.extend({}, event, null, true);
-                clonedObject[fields.startTime] = new Date(date);
-                clonedObject[fields.endTime] = new Date(new Date(date).setMilliseconds(duration));
-                clonedObject[fields.recurrenceID] = clonedObject[fields.id];
-                clonedObject.Guid = this.generateGuid();
-                occurrenceCollection.push(clonedObject);
-                date = dates.shift();
+        }
+        var date = dates.shift();
+        while (date) {
+            var clonedObject = extend({}, event, null, true);
+            clonedObject[fields.startTime] = new Date(date);
+            clonedObject[fields.endTime] = new Date(new Date(date).setMilliseconds(duration));
+            clonedObject[fields.recurrenceID] = clonedObject[fields.id];
+            clonedObject.Guid = this.generateGuid();
+            occurrenceCollection.push(clonedObject);
+            date = dates.shift();
+        }
+        return occurrenceCollection;
+    };
+    EventBase.prototype.getRecurrenceEvent = function (eventData) {
+        var eventFields = this.parent.eventFields;
+        var parentApp = new DataManager(this.parent.eventsData).
+            executeLocal(new Query().where(eventFields.id, 'equal', eventData[eventFields.recurrenceID]));
+        return parentApp[0];
+    };
+    EventBase.prototype.getOccurrencesByID = function (id) {
+        var fields = this.parent.eventFields;
+        var occurrenceCollection = [];
+        var parentObject = this.parent.eventsData.filter(function (obj) { return obj[fields.id] === id; });
+        for (var _i = 0, _a = parentObject; _i < _a.length; _i++) {
+            var event_2 = _a[_i];
+            if (!isNullOrUndefined(event_2[fields.recurrenceRule])) {
+                occurrenceCollection = occurrenceCollection.concat(this.generateOccurrence(event_2));
             }
-            return occurrenceCollection;
-        };
-        EventBase.prototype.getRecurrenceEvent = function (eventData) {
-            var eventFields = this.parent.eventFields;
-            var parentApp = new ej2_data_1.DataManager(this.parent.eventsData).
-                executeLocal(new ej2_data_1.Query().where(eventFields.id, 'equal', eventData[eventFields.recurrenceID]));
-            return parentApp[0];
-        };
-        EventBase.prototype.getOccurrencesByID = function (id) {
-            var fields = this.parent.eventFields;
-            var occurrenceCollection = [];
-            var parentObject = this.parent.eventsData.filter(function (obj) { return obj[fields.id] === id; });
-            for (var _i = 0, _a = parentObject; _i < _a.length; _i++) {
-                var event_2 = _a[_i];
-                if (!ej2_base_1.isNullOrUndefined(event_2[fields.recurrenceRule])) {
-                    occurrenceCollection = occurrenceCollection.concat(this.generateOccurrence(event_2));
-                }
+        }
+        return occurrenceCollection;
+    };
+    EventBase.prototype.getOccurrencesByRange = function (startTime, endTime) {
+        var fields = this.parent.eventFields;
+        var occurrenceCollection = [];
+        for (var _i = 0, _a = this.parent.eventsData; _i < _a.length; _i++) {
+            var event_3 = _a[_i];
+            if (!isNullOrUndefined(event_3[fields.recurrenceRule])) {
+                occurrenceCollection = occurrenceCollection.concat(this.generateOccurrence(event_3));
             }
-            return occurrenceCollection;
+        }
+        var filter = occurrenceCollection.filter(function (obj) {
+            return obj[fields.startTime] >= startTime && obj[fields.endTime] <= endTime && !isNullOrUndefined(obj[fields.recurrenceID]);
+        });
+        return filter;
+    };
+    EventBase.prototype.applyResourceColor = function (element, eventData, type, groupOrder, alpha) {
+        if (!this.parent.resourceBase) {
+            return;
+        }
+        var alphaColor = function (color, alpha) {
+            color = color.replace('#', '');
+            var r = parseInt(color.substring(0, color.length / 3), 16);
+            var g = parseInt(color.substring(color.length / 3, 2 * color.length / 3), 16);
+            var b = parseInt(color.substring(2 * color.length / 3, 3 * color.length / 3), 16);
+            return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
         };
-        EventBase.prototype.getOccurrencesByRange = function (startTime, endTime) {
-            var fields = this.parent.eventFields;
-            var occurrenceCollection = [];
-            for (var _i = 0, _a = this.parent.eventsData; _i < _a.length; _i++) {
-                var event_3 = _a[_i];
-                if (!ej2_base_1.isNullOrUndefined(event_3[fields.recurrenceRule])) {
-                    occurrenceCollection = occurrenceCollection.concat(this.generateOccurrence(event_3));
-                }
-            }
-            var filter = occurrenceCollection.filter(function (obj) {
-                return obj[fields.startTime] >= startTime && obj[fields.endTime] <= endTime && !ej2_base_1.isNullOrUndefined(obj[fields.recurrenceID]);
-            });
-            return filter;
-        };
-        EventBase.prototype.applyResourceColor = function (element, eventData, type, groupOrder, alpha) {
-            if (!this.parent.resourceBase) {
-                return;
-            }
-            var alphaColor = function (color, alpha) {
-                color = color.replace('#', '');
-                var r = parseInt(color.substring(0, color.length / 3), 16);
-                var g = parseInt(color.substring(color.length / 3, 2 * color.length / 3), 16);
-                var b = parseInt(color.substring(2 * color.length / 3, 3 * color.length / 3), 16);
-                return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
-            };
-            var color = this.parent.resourceBase.getResourceColor(eventData, groupOrder);
-            if (color) {
-                element.style[type] = !ej2_base_1.isNullOrUndefined(alpha) ? alphaColor(color, alpha) : color;
-            }
-        };
-        return EventBase;
-    }());
-    exports.EventBase = EventBase;
-});
+        var color = this.parent.resourceBase.getResourceColor(eventData, groupOrder);
+        if (color) {
+            // tslint:disable-next-line:no-any
+            element.style[type] = !isNullOrUndefined(alpha) ? alphaColor(color, alpha) : color;
+        }
+    };
+    return EventBase;
+}());
+export { EventBase };

src/schedule/event-renderer/month.js

@@ -11,323 +11,331 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "./event-base", "../base/css-constant", "../base/constant", "../base/util"], function (require, exports, ej2_base_1, ej2_base_2, event_base_1, cls, events, util) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var EVENT_GAP = 0;
-    var MonthEvent = (function (_super) {
-        __extends(MonthEvent, _super);
-        function MonthEvent(parent) {
-            var _this = _super.call(this, parent) || this;
+import { append, prepend, createElement, extend, EventHandler, closest, addClass } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, setStyleAttribute, remove } from '@syncfusion/ej2-base';
+import { EventBase } from './event-base';
+import * as cls from '../base/css-constant';
+import * as events from '../base/constant';
+import * as util from '../base/util';
+var EVENT_GAP = 0;
+/**
+ * Month view events render
+ */
+var MonthEvent = /** @class */ (function (_super) {
+    __extends(MonthEvent, _super);
+    /**
+     * Constructor for month events
+     */
+    function MonthEvent(parent) {
+        var _this = _super.call(this, parent) || this;
+        _this.renderedEvents = [];
+        _this.element = _this.parent.activeView.getPanel();
+        _this.fields = _this.parent.eventFields;
+        _this.addEventListener();
+        return _this;
+    }
+    MonthEvent.prototype.renderAppointments = function () {
+        var _this = this;
+        var appointmentWrapper = [].slice.call(this.element.querySelectorAll('.' + cls.APPOINTMENT_WRAPPER_CLASS));
+        for (var _i = 0, appointmentWrapper_1 = appointmentWrapper; _i < appointmentWrapper_1.length; _i++) {
+            var wrap = appointmentWrapper_1[_i];
+            remove(wrap);
+        }
+        this.eventHeight = this.getElementHeightFromClass(this.element, cls.APPOINTMENT_CLASS);
+        if (this.parent.currentView === 'Month') {
+            this.monthHeaderHeight = this.getOuterHeight(this.element.querySelector('.' + cls.DATE_HEADER_CLASS));
+        }
+        else {
+            this.monthHeaderHeight = 0;
+        }
+        var renderEventsHandler = function (dateRender, workDays, resData) {
             _this.renderedEvents = [];
-            _this.element = _this.parent.activeView.getPanel();
-            _this.fields = _this.parent.eventFields;
-            _this.addEventListener();
-            return _this;
-        }
-        MonthEvent.prototype.renderAppointments = function () {
-            var _this = this;
-            var appointmentWrapper = [].slice.call(this.element.querySelectorAll('.' + cls.APPOINTMENT_WRAPPER_CLASS));
-            for (var _i = 0, appointmentWrapper_1 = appointmentWrapper; _i < appointmentWrapper_1.length; _i++) {
-                var wrap = appointmentWrapper_1[_i];
-                ej2_base_2.remove(wrap);
+            var eventsList;
+            var resIndex = 0;
+            if (resData) {
+                resIndex = resData.groupIndex;
+                _this.cssClass = resData.cssClass;
+                _this.groupOrder = resData.groupOrder;
+                eventsList = _this.parent.eventBase.filterEventsByResource(resData);
+                _this.workCells = [].slice.call(_this.element.querySelectorAll('.' + cls.WORK_CELLS_CLASS + '[data-group-index="' + resIndex + '"]'));
             }
-            this.eventHeight = this.getElementHeightFromClass(this.element, cls.APPOINTMENT_CLASS);
-            if (this.parent.currentView === 'Month') {
-                this.monthHeaderHeight = this.getOuterHeight(this.element.querySelector('.' + cls.DATE_HEADER_CLASS));
-            }
             else {
-                this.monthHeaderHeight = 0;
+                eventsList = _this.parent.eventsProcessed;
+                _this.workCells = [].slice.call(_this.element.querySelectorAll('.' + cls.WORK_CELLS_CLASS));
             }
-            var renderEventsHandler = function (dateRender, workDays, resData) {
-                _this.renderedEvents = [];
-                var eventsList;
-                var resIndex = 0;
-                if (resData) {
-                    resIndex = resData.groupIndex;
-                    _this.cssClass = resData.cssClass;
-                    _this.groupOrder = resData.groupOrder;
-                    eventsList = _this.parent.eventBase.filterEventsByResource(resData);
-                    _this.workCells = [].slice.call(_this.element.querySelectorAll('.' + cls.WORK_CELLS_CLASS + '[data-group-index="' + resIndex + '"]'));
+            _this.sortByDateTime(eventsList);
+            _this.cellWidth = _this.workCells.slice(-1)[0].offsetWidth;
+            _this.cellHeight = _this.workCells.slice(-1)[0].offsetHeight;
+            _this.dateRender = dateRender;
+            var dates = _this.dateRender.map(function (date) { return +date; });
+            _this.slots = [];
+            var noOfDays = _this.parent.activeViewOptions.showWeekend ? util.WEEK_LENGTH : workDays.length;
+            while (dates.length > 0) {
+                _this.slots.push(dates.splice(0, noOfDays));
+            }
+            for (var _i = 0, eventsList_1 = eventsList; _i < eventsList_1.length; _i++) {
+                var event_1 = eventsList_1[_i];
+                if (_this.parent.resourceBase && !resData) {
+                    _this.cssClass = _this.parent.resourceBase.getCssClass(event_1);
                 }
-                else {
-                    eventsList = _this.parent.eventsProcessed;
-                    _this.workCells = [].slice.call(_this.element.querySelectorAll('.' + cls.WORK_CELLS_CLASS));
+                var splittedEvents = _this.splitEvent(event_1, _this.dateRender);
+                for (var _a = 0, splittedEvents_1 = splittedEvents; _a < splittedEvents_1.length; _a++) {
+                    var event_2 = splittedEvents_1[_a];
+                    _this.renderAppointmentMonth(event_2, resIndex);
                 }
-                _this.sortByDateTime(eventsList);
-                _this.cellWidth = _this.workCells.slice(-1)[0].offsetWidth;
-                _this.cellHeight = _this.workCells.slice(-1)[0].offsetHeight;
-                _this.dateRender = dateRender;
-                var dates = _this.dateRender.map(function (date) { return +date; });
-                _this.slots = [];
-                var noOfDays = _this.parent.activeViewOptions.showWeekend ? util.WEEK_LENGTH : workDays.length;
-                while (dates.length > 0) {
-                    _this.slots.push(dates.splice(0, noOfDays));
-                }
-                for (var _i = 0, eventsList_1 = eventsList; _i < eventsList_1.length; _i++) {
-                    var event_1 = eventsList_1[_i];
-                    if (_this.parent.resourceBase && !resData) {
-                        _this.cssClass = _this.parent.resourceBase.getCssClass(event_1);
-                    }
-                    var splittedEvents = _this.splitEvent(event_1, _this.dateRender);
-                    for (var _a = 0, splittedEvents_1 = splittedEvents; _a < splittedEvents_1.length; _a++) {
-                        var event_2 = splittedEvents_1[_a];
-                        _this.renderAppointmentMonth(event_2, resIndex);
-                    }
-                }
-                _this.cssClass = null;
-                _this.groupOrder = null;
-            };
-            if (this.parent.activeViewOptions.group.resources.length > 0) {
-                var resources = this.parent.uiStateValues.isGroupAdaptive ?
-                    [this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex]] :
-                    this.parent.resourceBase.lastResourceLevel;
-                for (var _a = 0, resources_1 = resources; _a < resources_1.length; _a++) {
-                    var slotData = resources_1[_a];
-                    renderEventsHandler(slotData.renderDates, slotData.workDays, slotData);
-                }
             }
-            else {
-                renderEventsHandler(this.parent.activeView.renderDates, this.parent.activeViewOptions.workDays);
-            }
+            _this.cssClass = null;
+            _this.groupOrder = null;
         };
-        MonthEvent.prototype.getElementHeightFromClass = function (container, elementClass) {
-            var height = 0;
-            var el = ej2_base_1.createElement('div', { className: elementClass }).cloneNode();
-            el.style.visibility = 'hidden';
-            el.style.position = 'absolute';
-            container.appendChild(el);
-            height = this.getOuterHeight(el);
-            ej2_base_2.remove(el);
-            return height;
-        };
-        MonthEvent.prototype.getOuterHeight = function (element) {
-            var style = getComputedStyle(element);
-            return element.offsetHeight + (parseInt(style.marginTop, 10) || 0) + (parseInt(style.marginBottom, 10) || 0);
-        };
-        MonthEvent.prototype.createAppointmentElement = function (record, resIndex) {
-            var eventSubject = (record[this.fields.subject] || this.parent.eventSettings.fields.subject.default ||
-                this.parent.localeObj.getConstant('addTitle'));
-            var appointmentWrapper = ej2_base_1.createElement('div', {
-                className: cls.APPOINTMENT_CLASS,
-                attrs: {
-                    'data-id': 'Appointment_' + record[this.fields.id],
-                    'data-guid': record.Guid, 'role': 'button', 'tabindex': '0',
-                    'aria-readonly': 'false', 'aria-selected': 'false', 'aria-grabbed': 'true',
-                    'aria-label': eventSubject
-                }
-            });
-            if (!ej2_base_2.isNullOrUndefined(this.cssClass)) {
-                ej2_base_1.addClass([appointmentWrapper], this.cssClass);
+        if (this.parent.activeViewOptions.group.resources.length > 0) {
+            var resources = this.parent.uiStateValues.isGroupAdaptive ?
+                [this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex]] :
+                this.parent.resourceBase.lastResourceLevel;
+            for (var _a = 0, resources_1 = resources; _a < resources_1.length; _a++) {
+                var slotData = resources_1[_a];
+                renderEventsHandler(slotData.renderDates, slotData.workDays, slotData);
             }
-            var appointmentDetails = ej2_base_1.createElement('div', { className: cls.APPOINTMENT_DETAILS });
-            appointmentWrapper.appendChild(appointmentDetails);
-            if (this.parent.activeViewOptions.group.resources.length > 0) {
-                appointmentWrapper.setAttribute('data-group-index', resIndex.toString());
+        }
+        else {
+            renderEventsHandler(this.parent.activeView.renderDates, this.parent.activeViewOptions.workDays);
+        }
+    };
+    MonthEvent.prototype.getElementHeightFromClass = function (container, elementClass) {
+        var height = 0;
+        var el = createElement('div', { className: elementClass }).cloneNode();
+        el.style.visibility = 'hidden';
+        el.style.position = 'absolute';
+        container.appendChild(el);
+        height = this.getOuterHeight(el);
+        remove(el);
+        return height;
+    };
+    MonthEvent.prototype.getOuterHeight = function (element) {
+        var style = getComputedStyle(element);
+        return element.offsetHeight + (parseInt(style.marginTop, 10) || 0) + (parseInt(style.marginBottom, 10) || 0);
+    };
+    MonthEvent.prototype.createAppointmentElement = function (record, resIndex) {
+        var eventSubject = (record[this.fields.subject] || this.parent.eventSettings.fields.subject.default ||
+            this.parent.localeObj.getConstant('addTitle'));
+        var appointmentWrapper = createElement('div', {
+            className: cls.APPOINTMENT_CLASS,
+            attrs: {
+                'data-id': 'Appointment_' + record[this.fields.id],
+                'data-guid': record.Guid, 'role': 'button', 'tabindex': '0',
+                'aria-readonly': 'false', 'aria-selected': 'false', 'aria-grabbed': 'true',
+                'aria-label': eventSubject
             }
-            var templateElement;
-            var eventData = record.data;
-            if (!ej2_base_2.isNullOrUndefined(this.parent.activeViewOptions.eventTemplate)) {
-                templateElement = this.parent.getAppointmentTemplate()(record);
-            }
-            else {
-                var eventLocation = (record[this.fields.location] || this.parent.eventSettings.fields.location.default || '');
-                var appointmentSubject = ej2_base_1.createElement('div', {
-                    className: cls.SUBJECT_CLASS,
-                    innerHTML: (eventSubject ? eventSubject + (eventLocation ? ';&nbsp' : '') : '') + (eventLocation ? eventLocation : '')
-                });
-                var appointmentStartTime = ej2_base_1.createElement('div', {
-                    className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''),
-                    innerHTML: this.parent.getTimeString(eventData[this.fields.startTime])
-                });
-                var appointmentEndTime = ej2_base_1.createElement('div', {
-                    className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''),
-                    innerHTML: this.parent.getTimeString(eventData[this.fields.endTime])
-                });
-                if (this.parent.currentView === 'Month') {
-                    if (record[this.fields.isAllDay]) {
-                        templateElement = [appointmentSubject];
-                        ej2_base_1.addClass([appointmentSubject], 'e-text-center');
-                    }
-                    else if (eventData.count <= 1 && !eventData.isLeft && !eventData.isRight) {
-                        templateElement = [appointmentStartTime, appointmentSubject];
-                    }
-                    else {
-                        templateElement = [];
-                        ej2_base_1.addClass([appointmentSubject], 'e-text-center');
-                        if (!eventData.isLeft) {
-                            templateElement.push(appointmentStartTime);
-                        }
-                        templateElement.push(appointmentSubject);
-                        if (!eventData.isRight) {
-                            templateElement.push(appointmentEndTime);
-                        }
-                    }
+        });
+        if (!isNullOrUndefined(this.cssClass)) {
+            addClass([appointmentWrapper], this.cssClass);
+        }
+        var appointmentDetails = createElement('div', { className: cls.APPOINTMENT_DETAILS });
+        appointmentWrapper.appendChild(appointmentDetails);
+        if (this.parent.activeViewOptions.group.resources.length > 0) {
+            appointmentWrapper.setAttribute('data-group-index', resIndex.toString());
+        }
+        var templateElement;
+        var eventData = record.data;
+        if (!isNullOrUndefined(this.parent.activeViewOptions.eventTemplate)) {
+            templateElement = this.parent.getAppointmentTemplate()(record);
+        }
+        else {
+            var eventLocation = (record[this.fields.location] || this.parent.eventSettings.fields.location.default || '');
+            var appointmentSubject = createElement('div', {
+                className: cls.SUBJECT_CLASS,
+                innerHTML: (eventSubject ? eventSubject + (eventLocation ? ';&nbsp' : '') : '') + (eventLocation ? eventLocation : '')
+            });
+            var appointmentStartTime = createElement('div', {
+                className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''),
+                innerHTML: this.parent.getTimeString(eventData[this.fields.startTime])
+            });
+            var appointmentEndTime = createElement('div', {
+                className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''),
+                innerHTML: this.parent.getTimeString(eventData[this.fields.endTime])
+            });
+            if (this.parent.currentView === 'Month') {
+                if (record[this.fields.isAllDay]) {
+                    templateElement = [appointmentSubject];
+                    addClass([appointmentSubject], 'e-text-center');
                 }
+                else if (eventData.count <= 1 && !eventData.isLeft && !eventData.isRight) {
+                    templateElement = [appointmentStartTime, appointmentSubject];
+                }
                 else {
-                    var innerElement = void 0;
-                    if (record[this.fields.isAllDay]) {
-                        var allDayString = ej2_base_1.createElement('div', { className: cls.SUBJECT_CLASS, innerHTML: 'All day' });
-                        innerElement = [appointmentSubject, allDayString];
+                    templateElement = [];
+                    addClass([appointmentSubject], 'e-text-center');
+                    if (!eventData.isLeft) {
+                        templateElement.push(appointmentStartTime);
                     }
-                    else {
-                        var timeString = this.parent.getTimeString(eventData[this.fields.startTime])
-                            + ' - ' + this.parent.getTimeString(eventData[this.fields.endTime]);
-                        var appTime = ej2_base_1.createElement('div', {
-                            className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''), innerHTML: timeString,
-                        });
-                        var appLocation = ej2_base_1.createElement('div', { className: cls.LOCATION_CLASS, innerHTML: eventLocation });
-                        innerElement = [appointmentSubject, appTime, appLocation];
+                    templateElement.push(appointmentSubject);
+                    if (!eventData.isRight) {
+                        templateElement.push(appointmentEndTime);
                     }
-                    var wrap = ej2_base_1.createElement('div', { className: 'e-inner-wrap' });
-                    ej2_base_1.append(innerElement, wrap);
-                    templateElement = [wrap];
                 }
             }
-            ej2_base_1.append([].slice.call(templateElement), appointmentDetails);
-            this.appendEventIcons(record, appointmentDetails);
-            return appointmentWrapper;
-        };
-        MonthEvent.prototype.appendEventIcons = function (record, appointmentDetails) {
-            var eventData = record.data;
-            if (!ej2_base_2.isNullOrUndefined(record[this.fields.recurrenceRule])) {
-                var iconClass = (record[this.fields.id] === record[this.fields.recurrenceID]) ?
-                    cls.EVENT_RECURRENCE_ICON_CLASS : cls.EVENT_RECURRENCE_EDIT_ICON_CLASS;
-                appointmentDetails.appendChild(ej2_base_1.createElement('div', {
-                    className: cls.ICON + ' ' + iconClass + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : '')
-                }));
+            else {
+                var innerElement = void 0;
+                if (record[this.fields.isAllDay]) {
+                    var allDayString = createElement('div', { className: cls.SUBJECT_CLASS, innerHTML: 'All day' });
+                    innerElement = [appointmentSubject, allDayString];
+                }
+                else {
+                    var timeString = this.parent.getTimeString(eventData[this.fields.startTime])
+                        + ' - ' + this.parent.getTimeString(eventData[this.fields.endTime]);
+                    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 });
+                    innerElement = [appointmentSubject, appTime, appLocation];
+                }
+                var wrap = createElement('div', { className: 'e-inner-wrap' });
+                append(innerElement, wrap);
+                templateElement = [wrap];
             }
-            if (eventData.isLeft) {
-                var iconLeft = ej2_base_1.createElement('div', {
-                    className: cls.EVENT_INDICATOR_CLASS + ' ' + cls.ICON + ' ' + cls.EVENT_ICON_LEFT_CLASS
-                });
-                ej2_base_1.prepend([iconLeft], appointmentDetails);
-            }
-            if (eventData.isRight) {
-                var iconRight = ej2_base_1.createElement('div', {
-                    className: cls.EVENT_INDICATOR_CLASS + ' ' + cls.ICON + ' ' + cls.EVENT_ICON_RIGHT_CLASS
-                });
-                ej2_base_1.append([iconRight], appointmentDetails);
-            }
-        };
-        MonthEvent.prototype.renderAppointmentMonth = function (event, resIndex) {
-            var startTime = event[this.fields.startTime];
-            var endTime = event[this.fields.endTime];
-            var day = this.parent.getIndexOfDate(this.dateRender, util.resetTime(startTime));
-            if (day < 0) {
-                return;
-            }
-            var overlapCount = this.getIndex(startTime);
-            event.Index = overlapCount;
-            var moreIndicatorHeight = 19;
-            var appHeight = this.eventHeight;
-            this.renderedEvents.push(ej2_base_1.extend({}, event, null, true));
-            var diffInDays = event.data.count;
-            if (startTime.getTime() <= endTime.getTime()) {
-                var appWidth = (diffInDays * this.cellWidth) - 1;
-                var cellTd = this.workCells[day];
-                var appTop = (overlapCount * (appHeight + EVENT_GAP));
-                if (this.cellHeight > this.monthHeaderHeight + ((overlapCount + 1) * (appHeight + EVENT_GAP)) + moreIndicatorHeight) {
-                    var appointmentElement = this.createAppointmentElement(event, resIndex);
-                    this.applyResourceColor(appointmentElement, event, 'backgroundColor', this.groupOrder);
-                    this.wireAppointmentEvents(appointmentElement);
-                    ej2_base_2.setStyleAttribute(appointmentElement, { 'width': appWidth + 'px', 'top': appTop + 'px' });
-                    var args = { data: event, element: appointmentElement, cancel: false };
-                    this.parent.trigger(events.eventRendered, args);
-                    if (args.cancel) {
-                        this.renderedEvents.pop();
-                        return;
-                    }
-                    if (cellTd.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS)) {
-                        cellTd.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS).appendChild(appointmentElement);
-                    }
-                    else {
-                        var wrapper = ej2_base_1.createElement('div', { className: cls.APPOINTMENT_WRAPPER_CLASS });
-                        wrapper.appendChild(appointmentElement);
-                        cellTd.appendChild(wrapper);
-                    }
+        }
+        append([].slice.call(templateElement), appointmentDetails);
+        this.appendEventIcons(record, appointmentDetails);
+        return appointmentWrapper;
+    };
+    MonthEvent.prototype.appendEventIcons = function (record, appointmentDetails) {
+        var eventData = record.data;
+        if (!isNullOrUndefined(record[this.fields.recurrenceRule])) {
+            var iconClass = (record[this.fields.id] === record[this.fields.recurrenceID]) ?
+                cls.EVENT_RECURRENCE_ICON_CLASS : cls.EVENT_RECURRENCE_EDIT_ICON_CLASS;
+            appointmentDetails.appendChild(createElement('div', {
+                className: cls.ICON + ' ' + iconClass + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : '')
+            }));
+        }
+        if (eventData.isLeft) {
+            var iconLeft = createElement('div', {
+                className: cls.EVENT_INDICATOR_CLASS + ' ' + cls.ICON + ' ' + cls.EVENT_ICON_LEFT_CLASS
+            });
+            prepend([iconLeft], appointmentDetails);
+        }
+        if (eventData.isRight) {
+            var iconRight = createElement('div', {
+                className: cls.EVENT_INDICATOR_CLASS + ' ' + cls.ICON + ' ' + cls.EVENT_ICON_RIGHT_CLASS
+            });
+            append([iconRight], appointmentDetails);
+        }
+    };
+    MonthEvent.prototype.renderAppointmentMonth = function (event, resIndex) {
+        var startTime = event[this.fields.startTime];
+        var endTime = event[this.fields.endTime];
+        var day = this.parent.getIndexOfDate(this.dateRender, util.resetTime(startTime));
+        if (day < 0) {
+            return;
+        }
+        var overlapCount = this.getIndex(startTime);
+        event.Index = overlapCount;
+        var moreIndicatorHeight = 19;
+        var appHeight = this.eventHeight;
+        this.renderedEvents.push(extend({}, event, null, true));
+        var diffInDays = event.data.count;
+        if (startTime.getTime() <= endTime.getTime()) {
+            var appWidth = (diffInDays * this.cellWidth) - 1;
+            var cellTd = this.workCells[day];
+            var appTop = (overlapCount * (appHeight + EVENT_GAP));
+            if (this.cellHeight > this.monthHeaderHeight + ((overlapCount + 1) * (appHeight + EVENT_GAP)) + moreIndicatorHeight) {
+                var appointmentElement = this.createAppointmentElement(event, resIndex);
+                this.applyResourceColor(appointmentElement, event, 'backgroundColor', this.groupOrder);
+                this.wireAppointmentEvents(appointmentElement);
+                setStyleAttribute(appointmentElement, { 'width': appWidth + 'px', 'top': appTop + 'px' });
+                var args = { data: event, element: appointmentElement, cancel: false };
+                this.parent.trigger(events.eventRendered, args);
+                if (args.cancel) {
+                    this.renderedEvents.pop();
+                    return;
                 }
+                if (cellTd.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS)) {
+                    cellTd.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS).appendChild(appointmentElement);
+                }
                 else {
-                    for (var i = 0; i < diffInDays; i++) {
-                        var cellTd_1 = this.workCells[day + i];
-                        if (cellTd_1 && ej2_base_2.isNullOrUndefined(cellTd_1.querySelector('.' + cls.MORE_INDICATOR_CLASS))) {
-                            var startDate = new Date(this.dateRender[day + i].getTime());
-                            var endDate = util.addDays(this.dateRender[day + i], 1);
-                            var groupIndex = cellTd_1.getAttribute('data-group-index');
-                            var filterEvents = this.getFilteredEvents(startDate, endDate, groupIndex);
-                            var appArea = this.cellHeight - this.monthHeaderHeight - moreIndicatorHeight;
-                            var renderedAppCount = Math.floor(appArea / (appHeight + EVENT_GAP));
-                            var count = (filterEvents.length - renderedAppCount) <= 0 ? 1 : (filterEvents.length - renderedAppCount);
-                            var moreIndicatorElement = ej2_base_1.createElement('div', {
-                                className: cls.MORE_INDICATOR_CLASS,
-                                innerHTML: '+' + count + '&nbsp;' + (this.parent.isAdaptive ? '' : this.parent.localeObj.getConstant('more')),
-                                attrs: {
-                                    'tabindex': '0',
-                                    'data-start-date': startDate.getTime().toString(),
-                                    'data-end-date': endDate.getTime().toString()
-                                }
-                            });
-                            if (!ej2_base_2.isNullOrUndefined(groupIndex)) {
-                                moreIndicatorElement.setAttribute('data-group-index', groupIndex);
+                    var wrapper = createElement('div', { className: cls.APPOINTMENT_WRAPPER_CLASS });
+                    wrapper.appendChild(appointmentElement);
+                    cellTd.appendChild(wrapper);
+                }
+            }
+            else {
+                for (var i = 0; i < diffInDays; i++) {
+                    var cellTd_1 = this.workCells[day + i];
+                    if (cellTd_1 && isNullOrUndefined(cellTd_1.querySelector('.' + cls.MORE_INDICATOR_CLASS))) {
+                        var startDate = new Date(this.dateRender[day + i].getTime());
+                        var endDate = util.addDays(this.dateRender[day + i], 1);
+                        var groupIndex = cellTd_1.getAttribute('data-group-index');
+                        var filterEvents = this.getFilteredEvents(startDate, endDate, groupIndex);
+                        var appArea = this.cellHeight - this.monthHeaderHeight - moreIndicatorHeight;
+                        var renderedAppCount = Math.floor(appArea / (appHeight + EVENT_GAP));
+                        var count = (filterEvents.length - renderedAppCount) <= 0 ? 1 : (filterEvents.length - renderedAppCount);
+                        var moreIndicatorElement = createElement('div', {
+                            className: cls.MORE_INDICATOR_CLASS,
+                            innerHTML: '+' + count + '&nbsp;' + (this.parent.isAdaptive ? '' : this.parent.localeObj.getConstant('more')),
+                            attrs: {
+                                'tabindex': '0',
+                                'data-start-date': startDate.getTime().toString(),
+                                'data-end-date': endDate.getTime().toString()
                             }
-                            moreIndicatorElement.style.top = appArea + 'px';
-                            moreIndicatorElement.style.width = cellTd_1.offsetWidth + 'px';
-                            if (cellTd_1.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS)) {
-                                cellTd_1.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS).appendChild(moreIndicatorElement);
-                            }
-                            else {
-                                var wrapper = ej2_base_1.createElement('div', { className: cls.APPOINTMENT_WRAPPER_CLASS });
-                                wrapper.appendChild(moreIndicatorElement);
-                                cellTd_1.appendChild(wrapper);
-                            }
-                            ej2_base_1.EventHandler.add(moreIndicatorElement, 'click', this.moreIndicatorClick, this);
+                        });
+                        if (!isNullOrUndefined(groupIndex)) {
+                            moreIndicatorElement.setAttribute('data-group-index', groupIndex);
                         }
+                        moreIndicatorElement.style.top = appArea + 'px';
+                        moreIndicatorElement.style.width = cellTd_1.offsetWidth + 'px';
+                        if (cellTd_1.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS)) {
+                            cellTd_1.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS).appendChild(moreIndicatorElement);
+                        }
+                        else {
+                            var wrapper = createElement('div', { className: cls.APPOINTMENT_WRAPPER_CLASS });
+                            wrapper.appendChild(moreIndicatorElement);
+                            cellTd_1.appendChild(wrapper);
+                        }
+                        EventHandler.add(moreIndicatorElement, 'click', this.moreIndicatorClick, this);
                     }
                 }
             }
-        };
-        MonthEvent.prototype.getFilteredEvents = function (startDate, endDate, groupIndex) {
-            var filteredEvents;
-            if (ej2_base_2.isNullOrUndefined(groupIndex)) {
-                filteredEvents = this.filterEvents(startDate, endDate);
-            }
-            else {
-                var data = this.parent.resourceBase.lastResourceLevel[parseInt(groupIndex, 10)];
-                filteredEvents = this.filterEvents(startDate, endDate, undefined, data);
-            }
-            return filteredEvents;
-        };
-        MonthEvent.prototype.getIndex = function (date) {
-            var appIndex = -1;
-            var appointments = this.renderedEvents;
-            if (appointments.length > 0) {
-                var appointmentsList = [];
-                for (var _i = 0, appointments_1 = appointments; _i < appointments_1.length; _i++) {
-                    var app = appointments_1[_i];
-                    if ((util.resetTime(app[this.fields.startTime]).getTime() <= util.resetTime(date).getTime()) &&
-                        (util.resetTime(app[this.fields.endTime]).getTime() >= util.resetTime(date).getTime())) {
-                        appointmentsList.push(app);
-                    }
+        }
+    };
+    MonthEvent.prototype.getFilteredEvents = function (startDate, endDate, groupIndex) {
+        var filteredEvents;
+        if (isNullOrUndefined(groupIndex)) {
+            filteredEvents = this.filterEvents(startDate, endDate);
+        }
+        else {
+            var data = this.parent.resourceBase.lastResourceLevel[parseInt(groupIndex, 10)];
+            filteredEvents = this.filterEvents(startDate, endDate, undefined, data);
+        }
+        return filteredEvents;
+    };
+    MonthEvent.prototype.getIndex = function (date) {
+        var appIndex = -1;
+        var appointments = this.renderedEvents;
+        if (appointments.length > 0) {
+            var appointmentsList = [];
+            for (var _i = 0, appointments_1 = appointments; _i < appointments_1.length; _i++) {
+                var app = appointments_1[_i];
+                if ((util.resetTime(app[this.fields.startTime]).getTime() <= util.resetTime(date).getTime()) &&
+                    (util.resetTime(app[this.fields.endTime]).getTime() >= util.resetTime(date).getTime())) {
+                    appointmentsList.push(app);
                 }
-                var appLevel = appointmentsList.map(function (obj) { return obj.Index; });
-                appIndex = (appLevel.length > 0) ? this.getSmallestMissingNumber(appLevel) : 0;
             }
-            return (appIndex === -1) ? 0 : appIndex;
-        };
-        MonthEvent.prototype.moreIndicatorClick = function (event) {
-            var target = ej2_base_1.closest(event.target, '.' + cls.MORE_INDICATOR_CLASS);
-            var startDate = new Date(parseInt(target.getAttribute('data-start-date'), 10));
-            if (!ej2_base_2.isNullOrUndefined(startDate) && this.parent.isAdaptive) {
-                this.parent.setProperties({ selectedDate: startDate }, true);
-                this.parent.changeView('Day');
-            }
-            else {
-                var endDate = new Date(parseInt(target.getAttribute('data-end-date'), 10));
-                var groupIndex = target.getAttribute('data-group-index');
-                var filteredEvents = this.getFilteredEvents(startDate, endDate, groupIndex);
-                var moreEventArgs = { date: startDate, event: filteredEvents, element: event.target };
-                this.parent.quickPopup.moreEventClick(moreEventArgs, groupIndex);
-            }
-        };
-        return MonthEvent;
-    }(event_base_1.EventBase));
-    exports.MonthEvent = MonthEvent;
-});
+            var appLevel = appointmentsList.map(function (obj) { return obj.Index; });
+            appIndex = (appLevel.length > 0) ? this.getSmallestMissingNumber(appLevel) : 0;
+        }
+        return (appIndex === -1) ? 0 : appIndex;
+    };
+    MonthEvent.prototype.moreIndicatorClick = function (event) {
+        var target = closest(event.target, '.' + cls.MORE_INDICATOR_CLASS);
+        var startDate = new Date(parseInt(target.getAttribute('data-start-date'), 10));
+        if (!isNullOrUndefined(startDate) && this.parent.isAdaptive) {
+            this.parent.setProperties({ selectedDate: startDate }, true);
+            this.parent.changeView('Day');
+        }
+        else {
+            var endDate = new Date(parseInt(target.getAttribute('data-end-date'), 10));
+            var groupIndex = target.getAttribute('data-group-index');
+            var filteredEvents = this.getFilteredEvents(startDate, endDate, groupIndex);
+            var moreEventArgs = { date: startDate, event: filteredEvents, element: event.target };
+            this.parent.quickPopup.moreEventClick(moreEventArgs, groupIndex);
+        }
+    };
+    return MonthEvent;
+}(EventBase));
+export { MonthEvent };

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

@@ -11,400 +11,318 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "./event-base", "../base/util", "../base/constant", "../base/css-constant"], function (require, exports, ej2_base_1, ej2_base_2, ej2_data_1, event_base_1, util, events, cls) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var VerticalEvent = (function (_super) {
-        __extends(VerticalEvent, _super);
-        function VerticalEvent(parent) {
-            var _this = _super.call(this, parent) || this;
-            _this.dateRender = [];
-            _this.renderedEvents = [];
-            _this.renderedAllDayEvents = [];
-            _this.overlapEvents = [];
-            _this.moreEvents = [];
-            _this.overlapList = [];
-            _this.allDayEvents = [];
-            _this.slotCount = _this.parent.activeViewOptions.timeScale.slotCount;
-            _this.interval = _this.parent.activeViewOptions.timeScale.interval;
-            _this.allDayLevel = 0;
-            _this.startHour = _this.parent.activeView.getStartHour();
-            _this.endHour = _this.parent.activeView.getEndHour();
-            _this.element = _this.parent.activeView.getPanel();
-            _this.fields = _this.parent.eventFields;
-            _this.animation = new ej2_base_1.Animation({ progress: _this.animationUiUpdate.bind(_this) });
-            _this.addEventListener();
-            return _this;
+import { append, createElement, extend, EventHandler, prepend, Animation, formatUnit } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, setStyleAttribute, remove, removeClass, addClass } from '@syncfusion/ej2-base';
+import { DataManager, Query, Predicate } from '@syncfusion/ej2-data';
+import { EventBase } from './event-base';
+import * as util from '../base/util';
+import * as events from '../base/constant';
+import * as cls from '../base/css-constant';
+/**
+ * Vertical view appointment rendering
+ */
+var VerticalEvent = /** @class */ (function (_super) {
+    __extends(VerticalEvent, _super);
+    /**
+     * Constructor for vertical view
+     */
+    function VerticalEvent(parent) {
+        var _this = _super.call(this, parent) || this;
+        _this.dateRender = [];
+        _this.renderedEvents = [];
+        _this.renderedAllDayEvents = [];
+        _this.overlapEvents = [];
+        _this.moreEvents = [];
+        _this.overlapList = [];
+        _this.allDayEvents = [];
+        _this.slotCount = _this.parent.activeViewOptions.timeScale.slotCount;
+        _this.interval = _this.parent.activeViewOptions.timeScale.interval;
+        _this.allDayLevel = 0;
+        _this.startHour = _this.parent.activeView.getStartHour();
+        _this.endHour = _this.parent.activeView.getEndHour();
+        _this.element = _this.parent.activeView.getPanel();
+        _this.fields = _this.parent.eventFields;
+        _this.animation = new Animation({ progress: _this.animationUiUpdate.bind(_this) });
+        _this.addEventListener();
+        return _this;
+    }
+    VerticalEvent.prototype.renderAppointments = function () {
+        var _this = this;
+        var wrapperElements = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS + ',.' + cls.ROW_COUNT_WRAPPER_CLASS));
+        wrapperElements.forEach(function (element) { return remove(element); });
+        this.allDayElement = [].slice.call(this.element.querySelectorAll('.' + cls.ALLDAY_CELLS_CLASS + ':first-child'));
+        this.setAllDayRowHeight(0);
+        if (this.parent.eventsProcessed.length === 0) {
+            return;
         }
-        VerticalEvent.prototype.renderAppointments = function () {
-            var _this = this;
-            var wrapperElements = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS + ',.' + cls.ROW_COUNT_WRAPPER_CLASS));
-            wrapperElements.forEach(function (element) { return ej2_base_2.remove(element); });
-            this.allDayElement = [].slice.call(this.element.querySelectorAll('.' + cls.ALLDAY_CELLS_CLASS + ':first-child'));
-            this.setAllDayRowHeight(0);
-            if (this.parent.eventsProcessed.length === 0) {
-                return;
-            }
-            var expandCollapse = this.element.querySelector('.' + cls.ALLDAY_APPOINTMENT_SECTION_CLASS);
-            ej2_base_1.EventHandler.remove(expandCollapse, 'click', this.rowExpandCollapse);
-            ej2_base_1.EventHandler.add(expandCollapse, 'click', this.rowExpandCollapse, this);
-            this.renderedEvents = [];
-            this.renderedAllDayEvents = [];
-            this.resources = (this.parent.activeViewOptions.group.resources.length > 0) ? this.parent.uiStateValues.isGroupAdaptive ?
-                [this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex]] :
-                this.parent.resourceBase.lastResourceLevel : [];
-            this.cellHeight = this.element.querySelector('.' + cls.WORK_CELLS_CLASS).offsetHeight;
-            this.dateRender[0] = this.parent.activeView.renderDates;
-            if (this.parent.activeViewOptions.group.resources.length > 0) {
-                this.resources.forEach(function (resource, index) { return _this.dateRender[index] = resource.renderDates; });
-            }
-            this.renderEvents('normalEvents');
-            if (this.allDayEvents.length > 0) {
-                this.allDayEvents = this.allDayEvents.filter(function (item, index, arr) {
-                    return index === arr.map(function (item) { return item.Guid; }).indexOf(item.Guid);
-                });
-                ej2_base_2.removeClass(this.allDayElement, cls.ALLDAY_ROW_ANIMATE_CLASS);
-                this.slots.push(this.parent.activeView.renderDates.map(function (date) { return +date; }));
-                this.renderEvents('allDayEvents');
-            }
-            this.parent.notify(events.contentReady, {});
-            ej2_base_2.addClass(this.allDayElement, cls.ALLDAY_ROW_ANIMATE_CLASS);
-        };
-        VerticalEvent.prototype.renderEvents = function (eventType) {
-            ej2_base_2.removeClass(this.allDayElement, cls.ALLDAY_ROW_ANIMATE_CLASS);
-            var eventCollection = (eventType === 'allDayEvents') ? this.sortByDateTime(this.allDayEvents) : undefined;
-            var resources = this.getResourceList();
-            var dateCount = 0;
-            for (var _i = 0, resources_1 = resources; _i < resources_1.length; _i++) {
-                var resource = resources_1[_i];
-                var renderDates = this.dateRender[resource];
-                for (var day = 0, length_1 = renderDates.length; day < length_1; day++) {
-                    this.renderedEvents = [];
-                    var startDate = new Date(renderDates[day].getTime());
-                    var endDate = util.addDays(renderDates[day], 1);
-                    var filterEvents = this.filterEvents(startDate, endDate, eventCollection, this.resources[resource]);
-                    for (var _a = 0, filterEvents_1 = filterEvents; _a < filterEvents_1.length; _a++) {
-                        var event_1 = filterEvents_1[_a];
-                        if (this.parent.resourceBase) {
-                            this.setValues(event_1, resource);
+        var expandCollapse = this.element.querySelector('.' + cls.ALLDAY_APPOINTMENT_SECTION_CLASS);
+        EventHandler.remove(expandCollapse, 'click', this.rowExpandCollapse);
+        EventHandler.add(expandCollapse, 'click', this.rowExpandCollapse, this);
+        this.renderedEvents = [];
+        this.renderedAllDayEvents = [];
+        this.resources = (this.parent.activeViewOptions.group.resources.length > 0) ? this.parent.uiStateValues.isGroupAdaptive ?
+            [this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex]] :
+            this.parent.resourceBase.lastResourceLevel : [];
+        this.cellHeight = this.element.querySelector('.' + cls.WORK_CELLS_CLASS).offsetHeight;
+        this.dateRender[0] = this.parent.activeView.renderDates;
+        if (this.parent.activeViewOptions.group.resources.length > 0) {
+            this.resources.forEach(function (resource, index) { return _this.dateRender[index] = resource.renderDates; });
+        }
+        this.renderEvents('normalEvents');
+        if (this.allDayEvents.length > 0) {
+            this.allDayEvents = this.allDayEvents.filter(function (item, index, arr) {
+                return index === arr.map(function (item) { return item.Guid; }).indexOf(item.Guid);
+            });
+            removeClass(this.allDayElement, cls.ALLDAY_ROW_ANIMATE_CLASS);
+            this.slots.push(this.parent.activeView.renderDates.map(function (date) { return +date; }));
+            this.renderEvents('allDayEvents');
+        }
+        this.parent.notify(events.contentReady, {});
+        addClass(this.allDayElement, cls.ALLDAY_ROW_ANIMATE_CLASS);
+    };
+    VerticalEvent.prototype.renderEvents = function (eventType) {
+        removeClass(this.allDayElement, cls.ALLDAY_ROW_ANIMATE_CLASS);
+        var eventCollection = (eventType === 'allDayEvents') ? this.sortByDateTime(this.allDayEvents) : undefined;
+        var resources = this.getResourceList();
+        var dateCount = 0;
+        for (var _i = 0, resources_1 = resources; _i < resources_1.length; _i++) {
+            var resource = resources_1[_i];
+            var renderDates = this.dateRender[resource];
+            for (var day = 0, length_1 = renderDates.length; day < length_1; day++) {
+                this.renderedEvents = [];
+                var startDate = new Date(renderDates[day].getTime());
+                var endDate = util.addDays(renderDates[day], 1);
+                var filterEvents = this.filterEvents(startDate, endDate, eventCollection, this.resources[resource]);
+                for (var _a = 0, filterEvents_1 = filterEvents; _a < filterEvents_1.length; _a++) {
+                    var event_1 = filterEvents_1[_a];
+                    if (this.parent.resourceBase) {
+                        this.setValues(event_1, resource);
+                    }
+                    if (eventType === 'allDayEvents') {
+                        this.renderAllDayEvents(event_1, day, resource, dateCount);
+                    }
+                    else {
+                        if (this.isAllDayAppointment(event_1)) {
+                            this.allDayEvents.push(extend({}, event_1, null, true));
                         }
-                        if (eventType === 'allDayEvents') {
-                            this.renderAllDayEvents(event_1, day, resource, dateCount);
-                        }
                         else {
-                            if (this.isAllDayAppointment(event_1)) {
-                                this.allDayEvents.push(ej2_base_1.extend({}, event_1, null, true));
-                            }
-                            else {
-                                this.renderNormalEvents(event_1, day, resource, dateCount);
-                            }
+                            this.renderNormalEvents(event_1, day, resource, dateCount);
                         }
-                        this.cssClass = null;
-                        this.groupOrder = null;
                     }
-                    dateCount += 1;
+                    this.cssClass = null;
+                    this.groupOrder = null;
                 }
+                dateCount += 1;
             }
-        };
-        VerticalEvent.prototype.setValues = function (event, resourceIndex) {
-            if (this.parent.activeViewOptions.group.resources.length > 0) {
-                this.cssClass = this.resources[resourceIndex].cssClass;
-                this.groupOrder = this.resources[resourceIndex].groupOrder;
+        }
+    };
+    VerticalEvent.prototype.setValues = function (event, resourceIndex) {
+        if (this.parent.activeViewOptions.group.resources.length > 0) {
+            this.cssClass = this.resources[resourceIndex].cssClass;
+            this.groupOrder = this.resources[resourceIndex].groupOrder;
+        }
+        else {
+            this.cssClass = this.parent.resourceBase.getCssClass(event);
+        }
+    };
+    VerticalEvent.prototype.getResourceList = function () {
+        var resources = Array.apply(null, {
+            length: (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) ?
+                this.resources.length : 1
+        }).map(function (value, index) { return index; });
+        return resources;
+    };
+    VerticalEvent.prototype.createAppointmentElement = function (record, isAllDay, data, resource) {
+        var fieldMapping = this.parent.eventFields;
+        var recordSubject = (record[fieldMapping.subject] || this.parent.eventSettings.fields.subject.default ||
+            this.parent.localeObj.getConstant('addTitle'));
+        var appointmentWrapper = createElement('div', {
+            className: cls.APPOINTMENT_CLASS,
+            attrs: {
+                'data-id': 'Appointment_' + record[fieldMapping.id],
+                'data-guid': record.Guid,
+                'role': 'button',
+                'tabindex': '0',
+                'aria-readonly': 'false',
+                'aria-selected': 'false',
+                'aria-grabbed': 'true',
+                'aria-label': recordSubject
             }
-            else {
-                this.cssClass = this.parent.resourceBase.getCssClass(event);
-            }
-        };
-        VerticalEvent.prototype.getResourceList = function () {
-            var resources = Array.apply(null, {
-                length: (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) ?
-                    this.resources.length : 1
-            }).map(function (value, index) { return index; });
-            return resources;
-        };
-        VerticalEvent.prototype.createAppointmentElement = function (record, isAllDay, data, resource) {
-            var fieldMapping = this.parent.eventFields;
-            var recordSubject = (record[fieldMapping.subject] || this.parent.eventSettings.fields.subject.default ||
-                this.parent.localeObj.getConstant('addTitle'));
-            var appointmentWrapper = ej2_base_1.createElement('div', {
-                className: cls.APPOINTMENT_CLASS,
-                attrs: {
-                    'data-id': 'Appointment_' + record[fieldMapping.id],
-                    'data-guid': record.Guid,
-                    'role': 'button',
-                    'tabindex': '0',
-                    'aria-readonly': 'false',
-                    'aria-selected': 'false',
-                    'aria-grabbed': 'true',
-                    'aria-label': recordSubject
+        });
+        var appointmentDetails = createElement('div', { className: cls.APPOINTMENT_DETAILS });
+        appointmentWrapper.appendChild(appointmentDetails);
+        if (this.parent.activeViewOptions.group.resources.length > 0) {
+            var resourceIndex = this.parent.isAdaptive ? this.parent.uiStateValues.groupIndex : resource;
+            appointmentWrapper.setAttribute('data-group-index', resourceIndex.toString());
+        }
+        var templateElement;
+        var eventData = data;
+        if (!isNullOrUndefined(this.parent.activeViewOptions.eventTemplate)) {
+            templateElement = this.parent.getAppointmentTemplate()(record);
+        }
+        else {
+            var appointmentSubject = createElement('div', { className: cls.SUBJECT_CLASS, innerHTML: recordSubject });
+            if (isAllDay) {
+                if (record[fieldMapping.isAllDay]) {
+                    templateElement = [appointmentSubject];
                 }
-            });
-            var appointmentDetails = ej2_base_1.createElement('div', { className: cls.APPOINTMENT_DETAILS });
-            appointmentWrapper.appendChild(appointmentDetails);
-            if (this.parent.activeViewOptions.group.resources.length > 0) {
-                var resourceIndex = this.parent.isAdaptive ? this.parent.uiStateValues.groupIndex : resource;
-                appointmentWrapper.setAttribute('data-group-index', resourceIndex.toString());
-            }
-            var templateElement;
-            var eventData = data;
-            if (!ej2_base_2.isNullOrUndefined(this.parent.activeViewOptions.eventTemplate)) {
-                templateElement = this.parent.getAppointmentTemplate()(record);
-            }
-            else {
-                var appointmentSubject = ej2_base_1.createElement('div', { className: cls.SUBJECT_CLASS, innerHTML: recordSubject });
-                if (isAllDay) {
-                    if (record[fieldMapping.isAllDay]) {
-                        templateElement = [appointmentSubject];
-                    }
-                    else {
-                        templateElement = [];
-                        var appointmentStartTime = ej2_base_1.createElement('div', {
-                            className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''),
-                            innerHTML: this.parent.getTimeString(record[fieldMapping.startTime])
-                        });
-                        var appointmentEndTime = ej2_base_1.createElement('div', {
-                            className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''),
-                            innerHTML: this.parent.getTimeString(record[fieldMapping.endTime]),
-                        });
-                        ej2_base_2.addClass([appointmentSubject], 'e-text-center');
-                        if (!eventData.isLeft) {
-                            templateElement.push(appointmentStartTime);
-                        }
-                        templateElement.push(appointmentSubject);
-                        if (!eventData.isRight) {
-                            templateElement.push(appointmentEndTime);
-                        }
-                    }
-                }
                 else {
-                    var timeStr = this.parent.getTimeString(record[fieldMapping.startTime]) + ' - ' +
-                        this.parent.getTimeString(record[fieldMapping.endTime]);
-                    var appointmentTime = ej2_base_1.createElement('div', {
+                    templateElement = [];
+                    var appointmentStartTime = createElement('div', {
                         className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''),
-                        innerHTML: timeStr,
+                        innerHTML: this.parent.getTimeString(record[fieldMapping.startTime])
                     });
-                    var appointmentLocation = ej2_base_1.createElement('div', {
-                        className: cls.LOCATION_CLASS,
-                        innerHTML: (record[fieldMapping.location] || this.parent.eventSettings.fields.location.default || '')
+                    var appointmentEndTime = createElement('div', {
+                        className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''),
+                        innerHTML: this.parent.getTimeString(record[fieldMapping.endTime]),
                     });
-                    templateElement = [appointmentSubject, appointmentTime, appointmentLocation];
+                    addClass([appointmentSubject], 'e-text-center');
+                    if (!eventData.isLeft) {
+                        templateElement.push(appointmentStartTime);
+                    }
+                    templateElement.push(appointmentSubject);
+                    if (!eventData.isRight) {
+                        templateElement.push(appointmentEndTime);
+                    }
                 }
             }
-            ej2_base_1.append(templateElement, appointmentDetails);
-            if (!this.parent.isAdaptive && !ej2_base_2.isNullOrUndefined(record[fieldMapping.recurrenceRule])) {
-                var iconClass = (record[fieldMapping.id] === record[fieldMapping.recurrenceID]) ?
-                    cls.EVENT_RECURRENCE_ICON_CLASS : cls.EVENT_RECURRENCE_EDIT_ICON_CLASS;
-                var recurrenceIcon = ej2_base_1.createElement('div', { className: cls.ICON + ' ' + iconClass });
-                isAllDay ? appointmentDetails.appendChild(recurrenceIcon) : appointmentWrapper.appendChild(recurrenceIcon);
-            }
-            this.renderSpannedIcon(isAllDay ? appointmentDetails : appointmentWrapper, eventData);
-            if (!ej2_base_2.isNullOrUndefined(this.cssClass)) {
-                ej2_base_2.addClass([appointmentWrapper], this.cssClass);
-            }
-            this.applyResourceColor(appointmentWrapper, record, 'backgroundColor', this.groupOrder);
-            return appointmentWrapper;
-        };
-        VerticalEvent.prototype.createMoreIndicator = function (allDayRow, count, currentDay) {
-            var index = currentDay + count;
-            var countWrapper = allDayRow[index];
-            if (countWrapper.childElementCount <= 0) {
-                var innerCountWrap = ej2_base_1.createElement('div', {
-                    className: cls.ROW_COUNT_WRAPPER_CLASS,
-                    id: cls.ROW_COUNT_WRAPPER_CLASS + '-' + index.toString()
+            else {
+                var timeStr = this.parent.getTimeString(record[fieldMapping.startTime]) + ' - ' +
+                    this.parent.getTimeString(record[fieldMapping.endTime]);
+                var appointmentTime = createElement('div', {
+                    className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''),
+                    innerHTML: timeStr,
                 });
-                var moreIndicatorElement = ej2_base_1.createElement('div', {
-                    className: cls.MORE_INDICATOR_CLASS,
-                    attrs: { 'tabindex': '0', 'data-index': index.toString(), 'data-count': '1' },
-                    innerHTML: '+1&nbsp;' + (this.parent.isAdaptive ? '' : this.parent.localeObj.getConstant('more'))
+                var appointmentLocation = createElement('div', {
+                    className: cls.LOCATION_CLASS,
+                    innerHTML: (record[fieldMapping.location] || this.parent.eventSettings.fields.location.default || '')
                 });
-                innerCountWrap.appendChild(moreIndicatorElement);
-                countWrapper.appendChild(innerCountWrap);
-                ej2_base_1.EventHandler.add(moreIndicatorElement, 'click', this.rowExpandCollapse, this);
+                templateElement = [appointmentSubject, appointmentTime, appointmentLocation];
             }
-            else {
-                var countCell = countWrapper.querySelector('.' + cls.MORE_INDICATOR_CLASS);
-                var moreCount = parseInt(countCell.getAttribute('data-count'), 10) + 1;
-                countCell.setAttribute('data-count', moreCount.toString());
-                countCell.innerHTML = countCell.innerHTML.replace(/[0-9]/g, moreCount.toString());
-            }
-        };
-        VerticalEvent.prototype.renderSpannedIcon = function (element, spanEvent) {
-            var iconElement = ej2_base_1.createElement('div', { className: cls.EVENT_INDICATOR_CLASS + ' ' + cls.ICON });
-            if (spanEvent.isLeft) {
-                var iconLeft = iconElement.cloneNode();
-                ej2_base_2.addClass([iconLeft], cls.EVENT_ICON_LEFT_CLASS);
-                ej2_base_1.prepend([iconLeft], element);
-            }
-            if (spanEvent.isRight) {
-                var iconRight = iconElement.cloneNode();
-                ej2_base_2.addClass([iconRight], cls.EVENT_ICON_RIGHT_CLASS);
-                ej2_base_1.append([iconRight], element);
-            }
-            if (spanEvent.isTop) {
-                var iconTop = iconElement.cloneNode();
-                ej2_base_2.addClass([iconTop], cls.EVENT_ICON_UP_CLASS);
-                ej2_base_1.prepend([iconTop], element);
-            }
-            if (spanEvent.isBottom) {
-                var iconBottom = iconElement.cloneNode();
-                ej2_base_2.addClass([iconBottom], cls.EVENT_ICON_DOWN_CLASS);
-                ej2_base_1.append([iconBottom], element);
-            }
-        };
-        VerticalEvent.prototype.isSpannedEvent = function (record, day, resource) {
-            var currentDate = util.resetTime(this.dateRender[resource][day]);
-            var fieldMapping = this.parent.eventFields;
-            var startEndHours = util.getStartEndHours(currentDate, this.startHour, this.endHour);
-            var event = ej2_base_1.extend({}, record, null, true);
-            event.isSpanned = { isBottom: false, isTop: false };
-            if (record[fieldMapping.startTime].getTime() < startEndHours.startHour.getTime()) {
-                event[fieldMapping.startTime] = startEndHours.startHour;
-                event.isSpanned.isTop = true;
-            }
-            if (record[fieldMapping.endTime].getTime() > startEndHours.endHour.getTime()) {
-                event[fieldMapping.endTime] = startEndHours.endHour;
-                event.isSpanned.isBottom = true;
-            }
-            return event;
-        };
-        VerticalEvent.prototype.renderAllDayEvents = function (eventObj, dayIndex, resource, dayCount) {
-            var _this = this;
-            var currentDates = this.dateRender[resource];
-            if (this.parent.activeViewOptions.group.byDate) {
-                this.slots[0] = currentDates = [this.dateRender[resource][dayIndex]];
-            }
-            var record = this.splitEvent(eventObj, currentDates)[0];
-            var allDayRowCell = this.element.querySelector('.' + cls.ALLDAY_CELLS_CLASS + ':first-child');
-            var cellTop = allDayRowCell.offsetTop;
-            var eStart = new Date(record[this.parent.eventFields.startTime].getTime());
-            var eEnd = new Date(record[this.parent.eventFields.endTime].getTime());
-            var appWidth = 0;
-            var appLeft = '0%';
-            var topValue = 1;
-            var appLevel = 0;
-            var isDateRange = currentDates[0].getTime() <= eStart.getTime() &&
-                util.addDays(currentDates.slice(-1)[0], 1).getTime() >= eStart.getTime();
-            if (eStart <= eEnd && isDateRange) {
-                var isAlreadyRendered = [];
-                if (this.renderedAllDayEvents[resource]) {
-                    isAlreadyRendered = this.renderedAllDayEvents[resource].filter(function (event) {
-                        return event.Guid === eventObj.Guid;
+        }
+        append(templateElement, appointmentDetails);
+        if (!this.parent.isAdaptive && !isNullOrUndefined(record[fieldMapping.recurrenceRule])) {
+            var iconClass = (record[fieldMapping.id] === record[fieldMapping.recurrenceID]) ?
+                cls.EVENT_RECURRENCE_ICON_CLASS : cls.EVENT_RECURRENCE_EDIT_ICON_CLASS;
+            var recurrenceIcon = createElement('div', { className: cls.ICON + ' ' + iconClass });
+            isAllDay ? appointmentDetails.appendChild(recurrenceIcon) : appointmentWrapper.appendChild(recurrenceIcon);
+        }
+        this.renderSpannedIcon(isAllDay ? appointmentDetails : appointmentWrapper, eventData);
+        if (!isNullOrUndefined(this.cssClass)) {
+            addClass([appointmentWrapper], this.cssClass);
+        }
+        this.applyResourceColor(appointmentWrapper, record, 'backgroundColor', this.groupOrder);
+        return appointmentWrapper;
+    };
+    VerticalEvent.prototype.createMoreIndicator = function (allDayRow, count, currentDay) {
+        var index = currentDay + count;
+        var countWrapper = allDayRow[index];
+        if (countWrapper.childElementCount <= 0) {
+            var innerCountWrap = createElement('div', {
+                className: cls.ROW_COUNT_WRAPPER_CLASS,
+                id: cls.ROW_COUNT_WRAPPER_CLASS + '-' + index.toString()
+            });
+            var moreIndicatorElement = createElement('div', {
+                className: cls.MORE_INDICATOR_CLASS,
+                attrs: { 'tabindex': '0', 'data-index': index.toString(), 'data-count': '1' },
+                innerHTML: '+1&nbsp;' + (this.parent.isAdaptive ? '' : this.parent.localeObj.getConstant('more'))
+            });
+            innerCountWrap.appendChild(moreIndicatorElement);
+            countWrapper.appendChild(innerCountWrap);
+            EventHandler.add(moreIndicatorElement, 'click', this.rowExpandCollapse, this);
+        }
+        else {
+            var countCell = countWrapper.querySelector('.' + cls.MORE_INDICATOR_CLASS);
+            var moreCount = parseInt(countCell.getAttribute('data-count'), 10) + 1;
+            countCell.setAttribute('data-count', moreCount.toString());
+            countCell.innerHTML = countCell.innerHTML.replace(/[0-9]/g, moreCount.toString());
+        }
+    };
+    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[resource][day]);
+        var fieldMapping = this.parent.eventFields;
+        var startEndHours = util.getStartEndHours(currentDate, this.startHour, this.endHour);
+        var event = extend({}, record, null, true);
+        event.isSpanned = { isBottom: false, isTop: false };
+        if (record[fieldMapping.startTime].getTime() < startEndHours.startHour.getTime()) {
+            event[fieldMapping.startTime] = startEndHours.startHour;
+            event.isSpanned.isTop = true;
+        }
+        if (record[fieldMapping.endTime].getTime() > startEndHours.endHour.getTime()) {
+            event[fieldMapping.endTime] = startEndHours.endHour;
+            event.isSpanned.isBottom = true;
+        }
+        return event;
+    };
+    VerticalEvent.prototype.renderAllDayEvents = function (eventObj, dayIndex, resource, dayCount) {
+        var _this = this;
+        var currentDates = this.dateRender[resource];
+        if (this.parent.activeViewOptions.group.byDate) {
+            this.slots[0] = currentDates = [this.dateRender[resource][dayIndex]];
+        }
+        var record = this.splitEvent(eventObj, currentDates)[0];
+        var allDayRowCell = this.element.querySelector('.' + cls.ALLDAY_CELLS_CLASS + ':first-child');
+        var cellTop = allDayRowCell.offsetTop;
+        var eStart = new Date(record[this.parent.eventFields.startTime].getTime());
+        var eEnd = new Date(record[this.parent.eventFields.endTime].getTime());
+        var appWidth = 0;
+        var appLeft = '0%';
+        var topValue = 1;
+        var appLevel = 0;
+        var isDateRange = currentDates[0].getTime() <= eStart.getTime() &&
+            util.addDays(currentDates.slice(-1)[0], 1).getTime() >= eStart.getTime();
+        if (eStart <= eEnd && isDateRange) {
+            var isAlreadyRendered = [];
+            if (this.renderedAllDayEvents[resource]) {
+                isAlreadyRendered = this.renderedAllDayEvents[resource].filter(function (event) {
+                    return event.Guid === eventObj.Guid;
+                });
+                if (this.parent.activeViewOptions.group.byDate) {
+                    isAlreadyRendered = isAlreadyRendered.filter(function (event) {
+                        return event[_this.parent.eventFields.startTime] >= currentDates[dayIndex] &&
+                            event[_this.parent.eventFields.endTime] <= util.addDays(new Date(+currentDates[dayIndex]), 1);
                     });
-                    if (this.parent.activeViewOptions.group.byDate) {
-                        isAlreadyRendered = isAlreadyRendered.filter(function (event) {
-                            return event[_this.parent.eventFields.startTime] >= currentDates[dayIndex] &&
-                                event[_this.parent.eventFields.endTime] <= util.addDays(new Date(+currentDates[dayIndex]), 1);
-                        });
-                    }
                 }
-                if (isAlreadyRendered.length === 0) {
-                    var allDayDifference = record.data.count;
-                    var allDayIndex = this.getOverlapIndex(record, dayIndex, true, resource);
-                    record.Index = allDayIndex;
-                    this.allDayLevel = (this.allDayLevel < allDayIndex) ? allDayIndex : this.allDayLevel;
-                    var widthAdjustment = record.data.isRight ? 0 :
-                        this.parent.currentView === 'Day' ? 4 : 7;
-                    if (allDayDifference >= 0) {
-                        appWidth = (allDayDifference * 100) - widthAdjustment;
-                    }
-                    if (ej2_base_2.isNullOrUndefined(this.renderedAllDayEvents[resource])) {
-                        this.renderedAllDayEvents[resource] = [];
-                    }
-                    this.renderedAllDayEvents[resource].push(ej2_base_1.extend({}, record, null, true));
-                    var allDayRow = [].slice.call(this.element.querySelector('.' + cls.ALLDAY_ROW_CLASS).children);
-                    var wIndex = this.parent.activeViewOptions.group.byDate ? (this.resources.length * dayIndex) + resource : dayCount;
-                    var eventWrapper = this.element.querySelector('.' + cls.ALLDAY_APPOINTMENT_WRAPPER_CLASS +
-                        ':nth-child(' + (wIndex + 1) + ')');
-                    var appointmentElement = this.createAppointmentElement(eventObj, true, record.data, resource);
-                    ej2_base_2.addClass([appointmentElement], cls.ALLDAY_APPOINTMENT_CLASS);
-                    var args = { data: eventObj, element: appointmentElement, cancel: false };
-                    this.parent.trigger(events.eventRendered, args);
-                    if (args.cancel) {
-                        return;
-                    }
-                    eventWrapper.appendChild(appointmentElement);
-                    var appHeight = appointmentElement.offsetHeight;
-                    topValue += (allDayIndex === 0 ? cellTop : (cellTop + (allDayIndex * appHeight))) + 1;
-                    ej2_base_2.setStyleAttribute(appointmentElement, { 'width': appWidth + '%', 'top': topValue + 'px' });
-                    if (allDayIndex > 1) {
-                        this.moreEvents.push(appointmentElement);
-                        for (var count = 0, length_2 = allDayDifference; count < length_2; count++) {
-                            this.createMoreIndicator(allDayRow, count, wIndex);
-                        }
-                    }
-                    allDayRowCell.setAttribute('data-count', this.allDayLevel.toString());
-                    var allDayRowHeight = ((!this.parent.uiStateValues.expand && this.allDayLevel > 2) ?
-                        (3 * appHeight) : ((this.allDayLevel + 1) * appHeight)) + 4;
-                    this.setAllDayRowHeight(allDayRowHeight);
-                    this.addOrRemoveClass();
-                    this.wireAppointmentEvents(appointmentElement);
-                }
             }
-        };
-        VerticalEvent.prototype.renderNormalEvents = function (eventObj, dayIndex, resource, dayCount) {
-            var record = this.isSpannedEvent(eventObj, dayIndex, resource);
-            var eStart = record[this.fields.startTime];
-            var eEnd = record[this.fields.endTime];
-            var appWidth = '0%';
-            var appLeft = '0%';
-            var topValue = 0;
-            var currentDate = util.resetTime(new Date(this.dateRender[resource][dayIndex].getTime()));
-            var schedule = util.getStartEndHours(currentDate, this.startHour, this.endHour);
-            if (eStart <= eEnd && !(eStart.getTime() >= schedule.endHour.getTime() || eEnd.getTime() <= schedule.startHour.getTime())) {
-                var appHeight = 0;
-                if (schedule.endHour.getTime() <= eEnd.getTime() && schedule.startHour.getTime() >= eStart.getTime()) {
-                    appHeight = this.getAppointmentHeight(this.cellHeight, schedule.startHour, schedule.endHour);
+            if (isAlreadyRendered.length === 0) {
+                var allDayDifference = record.data.count;
+                var allDayIndex = this.getOverlapIndex(record, dayIndex, true, resource);
+                record.Index = allDayIndex;
+                this.allDayLevel = (this.allDayLevel < allDayIndex) ? allDayIndex : this.allDayLevel;
+                var widthAdjustment = record.data.isRight ? 0 :
+                    this.parent.currentView === 'Day' ? 4 : 7;
+                if (allDayDifference >= 0) {
+                    appWidth = (allDayDifference * 100) - widthAdjustment;
                 }
-                else if (schedule.endHour.getTime() <= eEnd.getTime()) {
-                    appHeight = this.getAppointmentHeight(this.cellHeight, eStart, schedule.endHour);
+                if (isNullOrUndefined(this.renderedAllDayEvents[resource])) {
+                    this.renderedAllDayEvents[resource] = [];
                 }
-                else if (schedule.startHour.getTime() >= eStart.getTime()) {
-                    appHeight = this.getAppointmentHeight(this.cellHeight, schedule.startHour, eEnd);
-                }
-                else {
-                    appHeight = (eEnd.getTime() - eStart.getTime()) / (60 * 1000) * (this.cellHeight * this.slotCount) / this.interval;
-                }
-                appHeight = (appHeight < this.cellHeight) ? this.cellHeight : appHeight;
-                if (eStart.getTime() > schedule.startHour.getTime()) {
-                    topValue = this.getTopValue(eStart, dayIndex, resource);
-                }
-                var appIndex = this.getOverlapIndex(record, dayIndex, false, resource);
-                record.Index = appIndex;
-                this.overlapList.push(record);
-                if (this.overlapList.length > 1) {
-                    if (ej2_base_2.isNullOrUndefined(this.overlapEvents[appIndex])) {
-                        this.overlapEvents[appIndex] = [];
-                    }
-                    this.overlapEvents[appIndex].push(record);
-                }
-                else {
-                    this.overlapEvents = [];
-                    this.overlapEvents.push([record]);
-                }
-                var width = this.parent.currentView === 'Day' ? 97 : 94;
-                appWidth = ((width - this.overlapEvents.length) / this.overlapEvents.length) + '%';
-                var argsData = {
-                    index: appIndex, left: appLeft, width: appWidth,
-                    day: dayIndex, dayIndex: dayCount, record: record, resource: resource
-                };
-                var tempData = this.adjustOverlapElements(argsData);
-                appWidth = (tempData.appWidth);
-                if (ej2_base_2.isNullOrUndefined(this.renderedEvents[resource])) {
-                    this.renderedEvents[resource] = [];
-                }
-                this.renderedEvents[resource].push(ej2_base_1.extend({}, record, null, true));
-                var appointmentWrap = [].slice.call(this.element.querySelectorAll('.' + cls.APPOINTMENT_WRAPPER_CLASS));
-                var appointmentElement = this.createAppointmentElement(eventObj, false, record.isSpanned, resource);
-                ej2_base_2.setStyleAttribute(appointmentElement, { 'width': tempData.appWidth, 'height': appHeight + 'px', 'top': topValue + 'px' });
-                var iconHeight = appointmentElement.querySelectorAll('.' + cls.EVENT_INDICATOR_CLASS).length * 15;
-                var maxHeight = appHeight - 40 - iconHeight;
-                var subjectElement = appointmentElement.querySelector('.' + cls.SUBJECT_CLASS);
-                if (!this.parent.isAdaptive && subjectElement) {
-                    subjectElement.style.maxHeight = ej2_base_1.formatUnit(maxHeight);
-                }
-                if (this.parent.enableRtl) {
-                    ej2_base_2.setStyleAttribute(appointmentElement, { 'right': tempData.appLeft });
-                }
-                else {
-                    ej2_base_2.setStyleAttribute(appointmentElement, { 'left': tempData.appLeft });
-                }
-                var index = this.parent.activeViewOptions.group.byDate ? (this.resources.length * dayIndex) + resource : dayCount;
+                this.renderedAllDayEvents[resource].push(extend({}, record, null, true));
+                var allDayRow = [].slice.call(this.element.querySelector('.' + cls.ALLDAY_ROW_CLASS).children);
+                var wIndex = this.parent.activeViewOptions.group.byDate ? (this.resources.length * dayIndex) + resource : dayCount;
+                var eventWrapper = this.element.querySelector('.' + cls.ALLDAY_APPOINTMENT_WRAPPER_CLASS +
+                    ':nth-child(' + (wIndex + 1) + ')');
+                var appointmentElement = this.createAppointmentElement(eventObj, true, record.data, resource);
+                addClass([appointmentElement], cls.ALLDAY_APPOINTMENT_CLASS);
                 var args = { data: eventObj, element: appointmentElement, cancel: false };
@@ -415,97 +333,188 @@ this.parent.trigger(events.eventRendered, args);
                 }
-                appointmentWrap[index].appendChild(appointmentElement);
+                eventWrapper.appendChild(appointmentElement);
+                var appHeight = appointmentElement.offsetHeight;
+                topValue += (allDayIndex === 0 ? cellTop : (cellTop + (allDayIndex * appHeight))) + 1;
+                setStyleAttribute(appointmentElement, { 'width': appWidth + '%', 'top': topValue + 'px' });
+                if (allDayIndex > 1) {
+                    this.moreEvents.push(appointmentElement);
+                    for (var count = 0, length_2 = allDayDifference; count < length_2; count++) {
+                        this.createMoreIndicator(allDayRow, count, wIndex);
+                    }
+                }
+                allDayRowCell.setAttribute('data-count', this.allDayLevel.toString());
+                var allDayRowHeight = ((!this.parent.uiStateValues.expand && this.allDayLevel > 2) ?
+                    (3 * appHeight) : ((this.allDayLevel + 1) * appHeight)) + 4;
+                this.setAllDayRowHeight(allDayRowHeight);
+                this.addOrRemoveClass();
                 this.wireAppointmentEvents(appointmentElement);
             }
-        };
-        VerticalEvent.prototype.getTopValue = function (date, day, resource) {
-            var startEndHours = util.getStartEndHours(util.resetTime(this.dateRender[resource][day]), this.startHour, this.endHour);
-            var startHour = startEndHours.startHour;
-            var diffInMinutes = ((date.getHours() - startHour.getHours()) * 60) + (date.getMinutes() - startHour.getMinutes());
-            return (diffInMinutes * this.cellHeight * this.slotCount) / this.interval;
-        };
-        VerticalEvent.prototype.getAppointmentHeight = function (cellHeight, startDate, endDate) {
-            return (((endDate.getTime() - startDate.getTime()) / (1000 * 60)) / (this.interval / this.slotCount)) * cellHeight;
-        };
-        VerticalEvent.prototype.getOverlapIndex = function (record, day, isAllDay, resource) {
-            var _this = this;
-            var fieldMapping = this.parent.eventFields;
-            var predicate;
-            var eventsList = [];
-            var appIndex = -1;
-            this.overlapEvents = [];
-            if (isAllDay) {
-                if (!ej2_base_2.isNullOrUndefined(this.renderedAllDayEvents[resource])) {
-                    var date_1 = util.resetTime(new Date(this.dateRender[resource][day].getTime()));
-                    eventsList = this.renderedAllDayEvents[resource].filter(function (app) {
-                        return util.resetTime(app[fieldMapping.startTime]).getTime() <= date_1.getTime() &&
-                            util.resetTime(app[fieldMapping.endTime]).getTime() >= date_1.getTime();
-                    });
-                    if (this.parent.activeViewOptions.group.resources.length > 0) {
-                        eventsList = this.filterEventsByResource(this.resources[resource], eventsList);
-                    }
+        }
+    };
+    VerticalEvent.prototype.renderNormalEvents = function (eventObj, dayIndex, resource, dayCount) {
+        var record = this.isSpannedEvent(eventObj, dayIndex, resource);
+        var eStart = record[this.fields.startTime];
+        var eEnd = record[this.fields.endTime];
+        var appWidth = '0%';
+        var appLeft = '0%';
+        var topValue = 0;
+        var currentDate = util.resetTime(new Date(this.dateRender[resource][dayIndex].getTime()));
+        var schedule = util.getStartEndHours(currentDate, this.startHour, this.endHour);
+        if (eStart <= eEnd && !(eStart.getTime() >= schedule.endHour.getTime() || eEnd.getTime() <= schedule.startHour.getTime())) {
+            var appHeight = 0;
+            if (schedule.endHour.getTime() <= eEnd.getTime() && schedule.startHour.getTime() >= eStart.getTime()) {
+                appHeight = this.getAppointmentHeight(this.cellHeight, schedule.startHour, schedule.endHour);
+            }
+            else if (schedule.endHour.getTime() <= eEnd.getTime()) {
+                appHeight = this.getAppointmentHeight(this.cellHeight, eStart, schedule.endHour);
+            }
+            else if (schedule.startHour.getTime() >= eStart.getTime()) {
+                appHeight = this.getAppointmentHeight(this.cellHeight, schedule.startHour, eEnd);
+            }
+            else {
+                appHeight = (eEnd.getTime() - eStart.getTime()) / (60 * 1000) * (this.cellHeight * this.slotCount) / this.interval;
+            }
+            appHeight = (appHeight < this.cellHeight) ? this.cellHeight : appHeight;
+            if (eStart.getTime() > schedule.startHour.getTime()) {
+                topValue = this.getTopValue(eStart, dayIndex, resource);
+            }
+            var appIndex = this.getOverlapIndex(record, dayIndex, false, resource);
+            record.Index = appIndex;
+            this.overlapList.push(record);
+            if (this.overlapList.length > 1) {
+                if (isNullOrUndefined(this.overlapEvents[appIndex])) {
+                    this.overlapEvents[appIndex] = [];
                 }
+                this.overlapEvents[appIndex].push(record);
             }
             else {
-                var appointmentList_1 = !ej2_base_2.isNullOrUndefined(this.renderedEvents[resource]) ? this.renderedEvents[resource] : [];
-                var appointment_1 = [];
-                predicate = new ej2_data_1.Predicate(fieldMapping.endTime, 'greaterthan', record[fieldMapping.startTime]).
-                    and(new ej2_data_1.Predicate(fieldMapping.startTime, 'lessthan', record[fieldMapping.endTime]));
-                this.overlapList = new ej2_data_1.DataManager({ json: appointmentList_1 }).executeLocal(new ej2_data_1.Query().where(predicate));
+                this.overlapEvents = [];
+                this.overlapEvents.push([record]);
+            }
+            var width = this.parent.currentView === 'Day' ? 97 : 94;
+            appWidth = ((width - this.overlapEvents.length) / this.overlapEvents.length) + '%';
+            var argsData = {
+                index: appIndex, left: appLeft, width: appWidth,
+                day: dayIndex, dayIndex: dayCount, record: record, resource: resource
+            };
+            var tempData = this.adjustOverlapElements(argsData);
+            appWidth = (tempData.appWidth);
+            if (isNullOrUndefined(this.renderedEvents[resource])) {
+                this.renderedEvents[resource] = [];
+            }
+            this.renderedEvents[resource].push(extend({}, record, null, true));
+            var appointmentWrap = [].slice.call(this.element.querySelectorAll('.' + cls.APPOINTMENT_WRAPPER_CLASS));
+            var appointmentElement = this.createAppointmentElement(eventObj, false, record.isSpanned, resource);
+            setStyleAttribute(appointmentElement, { 'width': tempData.appWidth, 'height': appHeight + 'px', 'top': topValue + 'px' });
+            var iconHeight = appointmentElement.querySelectorAll('.' + cls.EVENT_INDICATOR_CLASS).length * 15;
+            var maxHeight = appHeight - 40 - iconHeight;
+            var subjectElement = appointmentElement.querySelector('.' + cls.SUBJECT_CLASS);
+            if (!this.parent.isAdaptive && subjectElement) {
+                subjectElement.style.maxHeight = formatUnit(maxHeight);
+            }
+            if (this.parent.enableRtl) {
+                setStyleAttribute(appointmentElement, { 'right': tempData.appLeft });
+            }
+            else {
+                setStyleAttribute(appointmentElement, { 'left': tempData.appLeft });
+            }
+            var index = this.parent.activeViewOptions.group.byDate ? (this.resources.length * dayIndex) + resource : dayCount;
+            var args = { data: eventObj, element: appointmentElement, cancel: false };
+            this.parent.trigger(events.eventRendered, args);
+            if (args.cancel) {
+                return;
+            }
+            appointmentWrap[index].appendChild(appointmentElement);
+            this.wireAppointmentEvents(appointmentElement);
+        }
+    };
+    VerticalEvent.prototype.getTopValue = function (date, day, resource) {
+        var startEndHours = util.getStartEndHours(util.resetTime(this.dateRender[resource][day]), this.startHour, this.endHour);
+        var startHour = startEndHours.startHour;
+        var diffInMinutes = ((date.getHours() - startHour.getHours()) * 60) + (date.getMinutes() - startHour.getMinutes());
+        return (diffInMinutes * this.cellHeight * this.slotCount) / this.interval;
+    };
+    VerticalEvent.prototype.getAppointmentHeight = function (cellHeight, startDate, endDate) {
+        return (((endDate.getTime() - startDate.getTime()) / (1000 * 60)) / (this.interval / this.slotCount)) * cellHeight;
+    };
+    VerticalEvent.prototype.getOverlapIndex = function (record, day, isAllDay, resource) {
+        var _this = this;
+        var fieldMapping = this.parent.eventFields;
+        var predicate;
+        var eventsList = [];
+        var appIndex = -1;
+        this.overlapEvents = [];
+        if (isAllDay) {
+            if (!isNullOrUndefined(this.renderedAllDayEvents[resource])) {
+                var date_1 = util.resetTime(new Date(this.dateRender[resource][day].getTime()));
+                eventsList = this.renderedAllDayEvents[resource].filter(function (app) {
+                    return util.resetTime(app[fieldMapping.startTime]).getTime() <= date_1.getTime() &&
+                        util.resetTime(app[fieldMapping.endTime]).getTime() >= date_1.getTime();
+                });
                 if (this.parent.activeViewOptions.group.resources.length > 0) {
-                    this.overlapList = this.filterEventsByResource(this.resources[resource], this.overlapList);
+                    eventsList = this.filterEventsByResource(this.resources[resource], eventsList);
                 }
-                this.overlapList.forEach(function (obj) {
-                    predicate = new ej2_data_1.Predicate(fieldMapping.endTime, 'greaterthanorequal', obj[fieldMapping.startTime]).
-                        and(new ej2_data_1.Predicate(fieldMapping.startTime, 'lessthanorequal', obj[fieldMapping.endTime]));
-                    var filterList = new ej2_data_1.DataManager({ json: appointmentList_1 }).executeLocal(new ej2_data_1.Query().where(predicate));
-                    if (_this.parent.activeViewOptions.group.resources.length > 0) {
-                        filterList = _this.filterEventsByResource(_this.resources[resource], filterList);
-                    }
-                    var collection = _this.overlapList.filter(function (val) { return filterList.indexOf(val) === -1; });
-                    return appointment_1.concat(collection);
-                });
-                this.overlapList = this.overlapList.concat(appointment_1);
-                eventsList = this.overlapList;
-                for (var _i = 0, eventsList_1 = eventsList; _i < eventsList_1.length; _i++) {
-                    var event_2 = eventsList_1[_i];
-                    var record_1 = event_2;
-                    var index = record_1.Index;
-                    (ej2_base_2.isNullOrUndefined(this.overlapEvents[index])) ? this.overlapEvents[index] = [event_2] :
-                        this.overlapEvents[index].push(event_2);
+            }
+        }
+        else {
+            var appointmentList_1 = !isNullOrUndefined(this.renderedEvents[resource]) ? this.renderedEvents[resource] : [];
+            var appointment_1 = [];
+            predicate = new Predicate(fieldMapping.endTime, 'greaterthan', record[fieldMapping.startTime]).
+                and(new Predicate(fieldMapping.startTime, 'lessthan', record[fieldMapping.endTime]));
+            this.overlapList = new DataManager({ json: appointmentList_1 }).executeLocal(new Query().where(predicate));
+            if (this.parent.activeViewOptions.group.resources.length > 0) {
+                this.overlapList = this.filterEventsByResource(this.resources[resource], this.overlapList);
+            }
+            this.overlapList.forEach(function (obj) {
+                predicate = new Predicate(fieldMapping.endTime, 'greaterthanorequal', obj[fieldMapping.startTime]).
+                    and(new Predicate(fieldMapping.startTime, 'lessthanorequal', obj[fieldMapping.endTime]));
+                var filterList = new DataManager({ json: appointmentList_1 }).executeLocal(new Query().where(predicate));
+                if (_this.parent.activeViewOptions.group.resources.length > 0) {
+                    filterList = _this.filterEventsByResource(_this.resources[resource], filterList);
                 }
+                var collection = _this.overlapList.filter(function (val) { return filterList.indexOf(val) === -1; });
+                return appointment_1.concat(collection);
+            });
+            this.overlapList = this.overlapList.concat(appointment_1);
+            eventsList = this.overlapList;
+            for (var _i = 0, eventsList_1 = eventsList; _i < eventsList_1.length; _i++) {
+                var event_2 = eventsList_1[_i];
+                var record_1 = event_2;
+                var index = record_1.Index;
+                (isNullOrUndefined(this.overlapEvents[index])) ? this.overlapEvents[index] = [event_2] :
+                    this.overlapEvents[index].push(event_2);
             }
-            if (eventsList.length > 0) {
-                var appLevel = eventsList.map(function (obj) { return obj.Index; });
-                appIndex = (appLevel.length > 0) ? this.getSmallestMissingNumber(appLevel) : 0;
-            }
-            return (appIndex === -1) ? 0 : appIndex;
-        };
-        VerticalEvent.prototype.adjustOverlapElements = function (args) {
-            var data = { appWidth: args.width, appLeft: args.left };
-            for (var i = 0, length1 = this.overlapEvents.length; i < length1; i++) {
-                if (!ej2_base_2.isNullOrUndefined(this.overlapEvents[i])) {
-                    for (var j = 0, length2 = this.overlapEvents[i].length; j < length2; j++) {
-                        var dayCount = this.parent.activeViewOptions.group.byDate ? (this.resources.length * args.day) + args.resource :
-                            args.dayIndex;
-                        var element = this.element.querySelector('#e-appointment-wrapper-' + dayCount);
-                        if (element.childElementCount > 0) {
-                            var eleGuid = this.overlapEvents[i][j].Guid;
-                            if (element.querySelectorAll('div[data-guid="' + eleGuid + '"]').length > 0 && eleGuid !== args.record.Guid) {
-                                var apps = element.querySelector('div[data-guid="' + eleGuid + '"]');
-                                if (parseFloat(args.width) <= parseFloat(apps.style.width)) {
-                                    (this.parent.enableRtl) ? apps.style.right = ((parseFloat(args.width) + 1) * i) + '%' :
-                                        apps.style.left = ((parseFloat(args.width) + 1) * i) + '%';
-                                    apps.style.width = ((parseFloat(args.width))) + '%';
-                                    data.appWidth = apps.style.width;
-                                }
+        }
+        if (eventsList.length > 0) {
+            var appLevel = eventsList.map(function (obj) { return obj.Index; });
+            appIndex = (appLevel.length > 0) ? this.getSmallestMissingNumber(appLevel) : 0;
+        }
+        return (appIndex === -1) ? 0 : appIndex;
+    };
+    VerticalEvent.prototype.adjustOverlapElements = function (args) {
+        var data = { appWidth: args.width, appLeft: args.left };
+        for (var i = 0, length1 = this.overlapEvents.length; i < length1; i++) {
+            if (!isNullOrUndefined(this.overlapEvents[i])) {
+                for (var j = 0, length2 = this.overlapEvents[i].length; j < length2; j++) {
+                    var dayCount = this.parent.activeViewOptions.group.byDate ? (this.resources.length * args.day) + args.resource :
+                        args.dayIndex;
+                    var element = this.element.querySelector('#e-appointment-wrapper-' + dayCount);
+                    if (element.childElementCount > 0) {
+                        var eleGuid = this.overlapEvents[i][j].Guid;
+                        if (element.querySelectorAll('div[data-guid="' + eleGuid + '"]').length > 0 && eleGuid !== args.record.Guid) {
+                            var apps = element.querySelector('div[data-guid="' + eleGuid + '"]');
+                            if (parseFloat(args.width) <= parseFloat(apps.style.width)) {
+                                (this.parent.enableRtl) ? apps.style.right = ((parseFloat(args.width) + 1) * i) + '%' :
+                                    apps.style.left = ((parseFloat(args.width) + 1) * i) + '%';
+                                apps.style.width = ((parseFloat(args.width))) + '%';
+                                data.appWidth = apps.style.width;
                             }
-                            else {
-                                var appWidth = args.width;
-                                if (ej2_base_2.isNullOrUndefined(this.overlapEvents[i - 1])) {
-                                    var width = this.parent.currentView === 'Day' ? 97 : 94;
-                                    appWidth = ((width - this.overlapEvents.length) / this.overlapEvents.length) + '%';
-                                }
-                                data.appWidth = appWidth;
-                                data.appLeft = ((parseInt(appWidth, 0) + 1) * args.index) + '%';
+                        }
+                        else {
+                            var appWidth = args.width;
+                            if (isNullOrUndefined(this.overlapEvents[i - 1])) {
+                                var width = this.parent.currentView === 'Day' ? 97 : 94;
+                                appWidth = ((width - this.overlapEvents.length) / this.overlapEvents.length) + '%';
                             }
+                            data.appWidth = appWidth;
+                            data.appLeft = ((parseInt(appWidth, 0) + 1) * args.index) + '%';
                         }
@@ -515,71 +524,71 @@ }
             }
-            return data;
-        };
-        VerticalEvent.prototype.setAllDayRowHeight = function (height) {
-            for (var _i = 0, _a = this.allDayElement; _i < _a.length; _i++) {
-                var element = _a[_i];
-                element.style.height = (height / 12) + 'em';
+        }
+        return data;
+    };
+    VerticalEvent.prototype.setAllDayRowHeight = function (height) {
+        for (var _i = 0, _a = this.allDayElement; _i < _a.length; _i++) {
+            var element = _a[_i];
+            element.style.height = (height / 12) + 'em';
+        }
+        this.animation.animate(this.allDayElement[0]);
+    };
+    VerticalEvent.prototype.addOrRemoveClass = function () {
+        var _this = this;
+        this.moreEvents.filter(function (element) {
+            if (!_this.parent.uiStateValues.expand && _this.allDayLevel > 2) {
+                addClass([element], cls.EVENT_COUNT_CLASS);
+                element.setAttribute('tabindex', '-1');
             }
-            this.animation.animate(this.allDayElement[0]);
-        };
-        VerticalEvent.prototype.addOrRemoveClass = function () {
-            var _this = this;
-            this.moreEvents.filter(function (element) {
-                if (!_this.parent.uiStateValues.expand && _this.allDayLevel > 2) {
-                    ej2_base_2.addClass([element], cls.EVENT_COUNT_CLASS);
-                    element.setAttribute('tabindex', '-1');
-                }
-                else {
-                    ej2_base_2.removeClass([element], cls.EVENT_COUNT_CLASS);
-                    element.setAttribute('tabindex', '0');
-                }
-            });
-            var moreEventCount = this.element.querySelector('.' + cls.ALLDAY_APPOINTMENT_SECTION_CLASS);
-            if (this.parent.uiStateValues.expand) {
-                ej2_base_2.removeClass([moreEventCount], cls.APPOINTMENT_ROW_EXPAND_CLASS);
-                ej2_base_2.addClass([moreEventCount], cls.APPOINTMENT_ROW_COLLAPSE_CLASS);
-            }
             else {
-                ej2_base_2.removeClass([moreEventCount], cls.APPOINTMENT_ROW_COLLAPSE_CLASS);
-                ej2_base_2.addClass([moreEventCount], cls.APPOINTMENT_ROW_EXPAND_CLASS);
+                removeClass([element], cls.EVENT_COUNT_CLASS);
+                element.setAttribute('tabindex', '0');
             }
-            (this.allDayLevel > 2) ? ej2_base_2.removeClass([moreEventCount], cls.DISABLE_CLASS) : ej2_base_2.addClass([moreEventCount], cls.DISABLE_CLASS);
-            var countCell = [].slice.call(this.element.querySelectorAll('.' + cls.ROW_COUNT_WRAPPER_CLASS));
-            countCell.filter(function (element) {
-                (!_this.parent.uiStateValues.expand && _this.allDayLevel > 2) ? ej2_base_2.removeClass([element], cls.DISABLE_CLASS) :
-                    ej2_base_2.addClass([element], cls.DISABLE_CLASS);
-            });
-        };
-        VerticalEvent.prototype.getEventHeight = function () {
-            var eventElement = ej2_base_1.createElement('div', { className: cls.APPOINTMENT_CLASS, styles: 'visibility:hidden' });
-            var eventWrapper = this.element.querySelector('.' + cls.ALLDAY_APPOINTMENT_WRAPPER_CLASS + ':first-child');
-            eventWrapper.appendChild(eventElement);
-            var height = eventElement.offsetHeight;
-            eventElement.remove();
-            return height;
-        };
-        VerticalEvent.prototype.rowExpandCollapse = function () {
-            var target = this.element.querySelector('.' + cls.ALLDAY_APPOINTMENT_SECTION_CLASS);
-            this.parent.uiStateValues.expand = target.classList.contains(cls.APPOINTMENT_ROW_EXPAND_CLASS);
-            var rowHeight;
-            if (this.parent.uiStateValues.expand) {
-                target.setAttribute('title', 'Collapse-all-day-section');
-                target.setAttribute('aria-label', 'Collapse section');
-                rowHeight = ((this.allDayLevel + 1) * this.getEventHeight()) + 4;
-            }
-            else {
-                target.setAttribute('title', 'Expand-all-day-section');
-                target.setAttribute('aria-label', 'Expand section');
-                rowHeight = (3 * this.getEventHeight()) + 4;
-            }
-            this.setAllDayRowHeight(rowHeight);
-            this.addOrRemoveClass();
-            this.animation.animate(target);
-        };
-        VerticalEvent.prototype.animationUiUpdate = function () {
-            this.parent.notify(events.contentReady, {});
-        };
-        return VerticalEvent;
-    }(event_base_1.EventBase));
-    exports.VerticalEvent = VerticalEvent;
-});
+        });
+        var moreEventCount = this.element.querySelector('.' + cls.ALLDAY_APPOINTMENT_SECTION_CLASS);
+        if (this.parent.uiStateValues.expand) {
+            removeClass([moreEventCount], cls.APPOINTMENT_ROW_EXPAND_CLASS);
+            addClass([moreEventCount], cls.APPOINTMENT_ROW_COLLAPSE_CLASS);
+        }
+        else {
+            removeClass([moreEventCount], cls.APPOINTMENT_ROW_COLLAPSE_CLASS);
+            addClass([moreEventCount], cls.APPOINTMENT_ROW_EXPAND_CLASS);
+        }
+        (this.allDayLevel > 2) ? removeClass([moreEventCount], cls.DISABLE_CLASS) : addClass([moreEventCount], cls.DISABLE_CLASS);
+        var countCell = [].slice.call(this.element.querySelectorAll('.' + cls.ROW_COUNT_WRAPPER_CLASS));
+        countCell.filter(function (element) {
+            (!_this.parent.uiStateValues.expand && _this.allDayLevel > 2) ? removeClass([element], cls.DISABLE_CLASS) :
+                addClass([element], cls.DISABLE_CLASS);
+        });
+    };
+    VerticalEvent.prototype.getEventHeight = function () {
+        var eventElement = createElement('div', { className: cls.APPOINTMENT_CLASS, styles: 'visibility:hidden' });
+        var eventWrapper = this.element.querySelector('.' + cls.ALLDAY_APPOINTMENT_WRAPPER_CLASS + ':first-child');
+        eventWrapper.appendChild(eventElement);
+        var height = eventElement.offsetHeight;
+        eventElement.remove();
+        return height;
+    };
+    VerticalEvent.prototype.rowExpandCollapse = function () {
+        var target = this.element.querySelector('.' + cls.ALLDAY_APPOINTMENT_SECTION_CLASS);
+        this.parent.uiStateValues.expand = target.classList.contains(cls.APPOINTMENT_ROW_EXPAND_CLASS);
+        var rowHeight;
+        if (this.parent.uiStateValues.expand) {
+            target.setAttribute('title', 'Collapse-all-day-section');
+            target.setAttribute('aria-label', 'Collapse section');
+            rowHeight = ((this.allDayLevel + 1) * this.getEventHeight()) + 4;
+        }
+        else {
+            target.setAttribute('title', 'Expand-all-day-section');
+            target.setAttribute('aria-label', 'Expand section');
+            rowHeight = (3 * this.getEventHeight()) + 4;
+        }
+        this.setAllDayRowHeight(rowHeight);
+        this.addOrRemoveClass();
+        this.animation.animate(target);
+    };
+    VerticalEvent.prototype.animationUiUpdate = function () {
+        this.parent.notify(events.contentReady, {});
+    };
+    return VerticalEvent;
+}(EventBase));
+export { VerticalEvent };

src/schedule/index.js

@@ -1,19 +0,15 @@
-define(["require", "exports", "./base/schedule", "./base/constant", "./base/util", "./renderer/header-renderer", "./renderer/view-base", "./renderer/day", "./renderer/week", "./renderer/work-week", "./renderer/month", "./renderer/agenda", "./renderer/month-agenda", "./timezone/timezone"], function (require, exports, schedule_1, constant_1, util_1, header_renderer_1, view_base_1, day_1, week_1, work_week_1, month_1, agenda_1, month_agenda_1, timezone_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    __export(schedule_1);
-    __export(constant_1);
-    __export(util_1);
-    __export(header_renderer_1);
-    __export(view_base_1);
-    __export(day_1);
-    __export(week_1);
-    __export(work_week_1);
-    __export(month_1);
-    __export(agenda_1);
-    __export(month_agenda_1);
-    __export(timezone_1);
-});
+/**
+ * Schedule component exported items
+ */
+export * from './base/schedule';
+export * from './base/constant';
+export * from './base/util';
+export * from './renderer/header-renderer';
+export * from './renderer/view-base';
+export * from './renderer/day';
+export * from './renderer/week';
+export * from './renderer/work-week';
+export * from './renderer/month';
+export * from './renderer/agenda';
+export * from './renderer/month-agenda';
+export * from './timezone/timezone';

src/schedule/models/event-settings.js

@@ -17,34 +17,35 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "./fields"], function (require, exports, ej2_base_1, fields_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var EventSettings = (function (_super) {
-        __extends(EventSettings, _super);
-        function EventSettings() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        __decorate([
-            ej2_base_1.Property()
-        ], EventSettings.prototype, "template", void 0);
-        __decorate([
-            ej2_base_1.Property([])
-        ], EventSettings.prototype, "dataSource", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], EventSettings.prototype, "query", void 0);
-        __decorate([
-            ej2_base_1.Complex({}, fields_1.Field)
-        ], EventSettings.prototype, "fields", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], EventSettings.prototype, "enableTooltip", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], EventSettings.prototype, "tooltipTemplate", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], EventSettings.prototype, "resourceColorField", void 0);
-        return EventSettings;
-    }(ej2_base_1.ChildProperty));
-    exports.EventSettings = EventSettings;
-});
+import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';
+import { Field } from './fields';
+/**
+ * Holds the configuration of event related options and dataSource binding to Schedule.
+ */
+var EventSettings = /** @class */ (function (_super) {
+    __extends(EventSettings, _super);
+    function EventSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property()
+    ], EventSettings.prototype, "template", void 0);
+    __decorate([
+        Property([])
+    ], EventSettings.prototype, "dataSource", void 0);
+    __decorate([
+        Property()
+    ], EventSettings.prototype, "query", void 0);
+    __decorate([
+        Complex({}, Field)
+    ], EventSettings.prototype, "fields", void 0);
+    __decorate([
+        Property(false)
+    ], EventSettings.prototype, "enableTooltip", void 0);
+    __decorate([
+        Property()
+    ], EventSettings.prototype, "tooltipTemplate", void 0);
+    __decorate([
+        Property()
+    ], EventSettings.prototype, "resourceColorField", void 0);
+    return EventSettings;
+}(ChildProperty));
+export { EventSettings };

src/schedule/models/field-options.js

@@ -17,25 +17,25 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var FieldOptions = (function (_super) {
-        __extends(FieldOptions, _super);
-        function FieldOptions() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        __decorate([
-            ej2_base_1.Property()
-        ], FieldOptions.prototype, "name", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], FieldOptions.prototype, "default", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], FieldOptions.prototype, "title", void 0);
-        __decorate([
-            ej2_base_1.Property({})
-        ], FieldOptions.prototype, "validation", void 0);
-        return FieldOptions;
-    }(ej2_base_1.ChildProperty));
-    exports.FieldOptions = FieldOptions;
-});
+import { Property, ChildProperty } from '@syncfusion/ej2-base';
+/**
+ * Configuration of every event field related options on Schedule.
+ */
+var FieldOptions = /** @class */ (function (_super) {
+    __extends(FieldOptions, _super);
+    function FieldOptions() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property()
+    ], FieldOptions.prototype, "name", void 0);
+    __decorate([
+        Property()
+    ], FieldOptions.prototype, "default", void 0);
+    __decorate([
+        Property()
+    ], FieldOptions.prototype, "title", void 0);
+    __decorate([
+        Property({})
+    ], FieldOptions.prototype, "validation", void 0);
+    return FieldOptions;
+}(ChildProperty));
+export { FieldOptions };

src/schedule/models/fields.js

@@ -17,49 +17,54 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "./field-options"], function (require, exports, ej2_base_1, field_options_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var Field = (function (_super) {
-        __extends(Field, _super);
-        function Field() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        __decorate([
-            ej2_base_1.Property('Id')
-        ], Field.prototype, "id", void 0);
-        __decorate([
-            ej2_base_1.Complex({ name: 'Subject', default: 'Add title' }, field_options_1.FieldOptions)
-        ], Field.prototype, "subject", void 0);
-        __decorate([
-            ej2_base_1.Complex({ name: 'StartTime' }, field_options_1.FieldOptions)
-        ], Field.prototype, "startTime", void 0);
-        __decorate([
-            ej2_base_1.Complex({ name: 'EndTime' }, field_options_1.FieldOptions)
-        ], Field.prototype, "endTime", void 0);
-        __decorate([
-            ej2_base_1.Complex({ name: 'StartTimezone' }, field_options_1.FieldOptions)
-        ], Field.prototype, "startTimezone", void 0);
-        __decorate([
-            ej2_base_1.Complex({ name: 'EndTimezone' }, field_options_1.FieldOptions)
-        ], Field.prototype, "endTimezone", void 0);
-        __decorate([
-            ej2_base_1.Complex({ name: 'Location' }, field_options_1.FieldOptions)
-        ], Field.prototype, "location", void 0);
-        __decorate([
-            ej2_base_1.Complex({ name: 'Description' }, field_options_1.FieldOptions)
-        ], Field.prototype, "description", void 0);
-        __decorate([
-            ej2_base_1.Complex({ name: 'IsAllDay' }, field_options_1.FieldOptions)
-        ], Field.prototype, "isAllDay", void 0);
-        __decorate([
-            ej2_base_1.Complex({ name: 'RecurrenceID' }, field_options_1.FieldOptions)
-        ], Field.prototype, "recurrenceID", void 0);
-        __decorate([
-            ej2_base_1.Complex({ name: 'RecurrenceRule' }, field_options_1.FieldOptions)
-        ], Field.prototype, "recurrenceRule", void 0);
-        __decorate([
-            ej2_base_1.Complex({ name: 'RecurrenceException' }, field_options_1.FieldOptions)
-        ], Field.prototype, "recurrenceException", void 0);
-        return Field;
-    }(ej2_base_1.ChildProperty));
-    exports.Field = Field;
-});
+import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';
+import { FieldOptions } from './field-options';
+/**
+ * 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.
+ */
+var Field = /** @class */ (function (_super) {
+    __extends(Field, _super);
+    function Field() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('Id')
+    ], Field.prototype, "id", void 0);
+    __decorate([
+        Complex({ name: 'Subject', default: 'Add title' }, FieldOptions)
+    ], Field.prototype, "subject", void 0);
+    __decorate([
+        Complex({ name: 'StartTime' }, FieldOptions)
+    ], Field.prototype, "startTime", void 0);
+    __decorate([
+        Complex({ name: 'EndTime' }, FieldOptions)
+    ], Field.prototype, "endTime", void 0);
+    __decorate([
+        Complex({ name: 'StartTimezone' }, FieldOptions)
+    ], Field.prototype, "startTimezone", void 0);
+    __decorate([
+        Complex({ name: 'EndTimezone' }, FieldOptions)
+    ], Field.prototype, "endTimezone", void 0);
+    __decorate([
+        Complex({ name: 'Location' }, FieldOptions)
+    ], Field.prototype, "location", void 0);
+    __decorate([
+        Complex({ name: 'Description' }, FieldOptions)
+    ], Field.prototype, "description", void 0);
+    __decorate([
+        Complex({ name: 'IsAllDay' }, FieldOptions)
+    ], Field.prototype, "isAllDay", void 0);
+    __decorate([
+        Complex({ name: 'RecurrenceID' }, FieldOptions)
+    ], Field.prototype, "recurrenceID", void 0);
+    __decorate([
+        Complex({ name: 'RecurrenceRule' }, FieldOptions)
+    ], Field.prototype, "recurrenceRule", void 0);
+    __decorate([
+        Complex({ name: 'RecurrenceException' }, FieldOptions)
+    ], Field.prototype, "recurrenceException", void 0);
+    return Field;
+}(ChildProperty));
+export { Field };

src/schedule/models/group.js

@@ -17,28 +17,28 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var Group = (function (_super) {
-        __extends(Group, _super);
-        function Group() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Group.prototype, "byDate", void 0);
-        __decorate([
-            ej2_base_1.Property(true)
-        ], Group.prototype, "byGroupID", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Group.prototype, "allowGroupEdit", void 0);
-        __decorate([
-            ej2_base_1.Property([])
-        ], Group.prototype, "resources", void 0);
-        __decorate([
-            ej2_base_1.Property(true)
-        ], Group.prototype, "enableCompactView", void 0);
-        return Group;
-    }(ej2_base_1.ChildProperty));
-    exports.Group = Group;
-});
+import { Property, ChildProperty } from '@syncfusion/ej2-base';
+/**
+ * A class that holds the resource grouping related configurations on Schedule.
+ */
+var Group = /** @class */ (function (_super) {
+    __extends(Group, _super);
+    function Group() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(false)
+    ], Group.prototype, "byDate", void 0);
+    __decorate([
+        Property(true)
+    ], Group.prototype, "byGroupID", void 0);
+    __decorate([
+        Property(false)
+    ], Group.prototype, "allowGroupEdit", void 0);
+    __decorate([
+        Property([])
+    ], Group.prototype, "resources", void 0);
+    __decorate([
+        Property(true)
+    ], Group.prototype, "enableCompactView", void 0);
+    return Group;
+}(ChildProperty));
+export { Group };

src/schedule/models/models.js

@@ -1,4 +0,3 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-});
+/**
+ * Export model files
+ */

src/schedule/models/resources.js

@@ -17,55 +17,55 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var Resources = (function (_super) {
-        __extends(Resources, _super);
-        function Resources() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        __decorate([
-            ej2_base_1.Property()
-        ], Resources.prototype, "field", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], Resources.prototype, "title", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], Resources.prototype, "name", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Resources.prototype, "allowMultiple", void 0);
-        __decorate([
-            ej2_base_1.Property([])
-        ], Resources.prototype, "dataSource", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], Resources.prototype, "query", void 0);
-        __decorate([
-            ej2_base_1.Property('Id')
-        ], Resources.prototype, "idField", void 0);
-        __decorate([
-            ej2_base_1.Property('Text')
-        ], Resources.prototype, "textField", void 0);
-        __decorate([
-            ej2_base_1.Property('GroupID')
-        ], Resources.prototype, "groupIDField", void 0);
-        __decorate([
-            ej2_base_1.Property('Color')
-        ], Resources.prototype, "colorField", void 0);
-        __decorate([
-            ej2_base_1.Property('StartHour')
-        ], Resources.prototype, "startHourField", void 0);
-        __decorate([
-            ej2_base_1.Property('EndHour')
-        ], Resources.prototype, "endHourField", void 0);
-        __decorate([
-            ej2_base_1.Property('WorkDays')
-        ], Resources.prototype, "workDaysField", void 0);
-        __decorate([
-            ej2_base_1.Property('CssClass')
-        ], Resources.prototype, "cssClassField", void 0);
-        return Resources;
-    }(ej2_base_1.ChildProperty));
-    exports.Resources = Resources;
-});
+import { Property, ChildProperty } from '@syncfusion/ej2-base';
+/**
+ * A class that represents the resource related configurations and its data binding options.
+ */
+var Resources = /** @class */ (function (_super) {
+    __extends(Resources, _super);
+    function Resources() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property()
+    ], Resources.prototype, "field", void 0);
+    __decorate([
+        Property()
+    ], Resources.prototype, "title", void 0);
+    __decorate([
+        Property()
+    ], Resources.prototype, "name", void 0);
+    __decorate([
+        Property(false)
+    ], Resources.prototype, "allowMultiple", void 0);
+    __decorate([
+        Property([])
+    ], Resources.prototype, "dataSource", void 0);
+    __decorate([
+        Property()
+    ], Resources.prototype, "query", void 0);
+    __decorate([
+        Property('Id')
+    ], Resources.prototype, "idField", void 0);
+    __decorate([
+        Property('Text')
+    ], Resources.prototype, "textField", void 0);
+    __decorate([
+        Property('GroupID')
+    ], Resources.prototype, "groupIDField", void 0);
+    __decorate([
+        Property('Color')
+    ], Resources.prototype, "colorField", void 0);
+    __decorate([
+        Property('StartHour')
+    ], Resources.prototype, "startHourField", void 0);
+    __decorate([
+        Property('EndHour')
+    ], Resources.prototype, "endHourField", void 0);
+    __decorate([
+        Property('WorkDays')
+    ], Resources.prototype, "workDaysField", void 0);
+    __decorate([
+        Property('CssClass')
+    ], Resources.prototype, "cssClassField", void 0);
+    return Resources;
+}(ChildProperty));
+export { Resources };

src/schedule/models/time-scale.js

@@ -17,28 +17,28 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var TimeScale = (function (_super) {
-        __extends(TimeScale, _super);
-        function TimeScale() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        __decorate([
-            ej2_base_1.Property(true)
-        ], TimeScale.prototype, "enable", void 0);
-        __decorate([
-            ej2_base_1.Property(60)
-        ], TimeScale.prototype, "interval", void 0);
-        __decorate([
-            ej2_base_1.Property(2)
-        ], TimeScale.prototype, "slotCount", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], TimeScale.prototype, "minorSlotTemplate", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], TimeScale.prototype, "majorSlotTemplate", void 0);
-        return TimeScale;
-    }(ej2_base_1.ChildProperty));
-    exports.TimeScale = TimeScale;
-});
+import { Property, ChildProperty } from '@syncfusion/ej2-base';
+/**
+ * Configuration of options related to timescale on Schedule.
+ */
+var TimeScale = /** @class */ (function (_super) {
+    __extends(TimeScale, _super);
+    function TimeScale() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(true)
+    ], TimeScale.prototype, "enable", void 0);
+    __decorate([
+        Property(60)
+    ], TimeScale.prototype, "interval", void 0);
+    __decorate([
+        Property(2)
+    ], TimeScale.prototype, "slotCount", void 0);
+    __decorate([
+        Property()
+    ], TimeScale.prototype, "minorSlotTemplate", void 0);
+    __decorate([
+        Property()
+    ], TimeScale.prototype, "majorSlotTemplate", void 0);
+    return TimeScale;
+}(ChildProperty));
+export { TimeScale };

src/schedule/models/views.js

@@ -17,64 +17,66 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "../models/time-scale", "../models/group"], function (require, exports, ej2_base_1, time_scale_1, group_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var Views = (function (_super) {
-        __extends(Views, _super);
-        function Views() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        __decorate([
-            ej2_base_1.Property()
-        ], Views.prototype, "option", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Views.prototype, "isSelected", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], Views.prototype, "dateFormat", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Views.prototype, "readonly", void 0);
-        __decorate([
-            ej2_base_1.Property('00:00')
-        ], Views.prototype, "startHour", void 0);
-        __decorate([
-            ej2_base_1.Property('24:00')
-        ], Views.prototype, "endHour", void 0);
-        __decorate([
-            ej2_base_1.Property(true)
-        ], Views.prototype, "allowVirtualScrolling", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], Views.prototype, "dateHeaderTemplate", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], Views.prototype, "cellTemplate", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], Views.prototype, "eventTemplate", void 0);
-        __decorate([
-            ej2_base_1.Property(true)
-        ], Views.prototype, "showWeekend", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], Views.prototype, "displayName", void 0);
-        __decorate([
-            ej2_base_1.Property(1)
-        ], Views.prototype, "interval", void 0);
-        __decorate([
-            ej2_base_1.Property([1, 2, 3, 4, 5])
-        ], Views.prototype, "workDays", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], Views.prototype, "resourceHeaderTemplate", void 0);
-        __decorate([
-            ej2_base_1.Complex({}, time_scale_1.TimeScale)
-        ], Views.prototype, "timeScale", void 0);
-        __decorate([
-            ej2_base_1.Complex({}, group_1.Group)
-        ], Views.prototype, "group", void 0);
-        return Views;
-    }(ej2_base_1.ChildProperty));
-    exports.Views = Views;
-});
+import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';
+import { TimeScale } from '../models/time-scale';
+import { Group } from '../models/group';
+/**
+ * Configuration of view-specific settings on Schedule.
+ */
+var Views = /** @class */ (function (_super) {
+    __extends(Views, _super);
+    function Views() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property()
+    ], Views.prototype, "option", void 0);
+    __decorate([
+        Property(false)
+    ], Views.prototype, "isSelected", void 0);
+    __decorate([
+        Property()
+    ], Views.prototype, "dateFormat", void 0);
+    __decorate([
+        Property(false)
+    ], Views.prototype, "readonly", void 0);
+    __decorate([
+        Property('00:00')
+    ], Views.prototype, "startHour", void 0);
+    __decorate([
+        Property('24:00')
+    ], Views.prototype, "endHour", void 0);
+    __decorate([
+        Property(true)
+    ], Views.prototype, "allowVirtualScrolling", void 0);
+    __decorate([
+        Property()
+    ], Views.prototype, "dateHeaderTemplate", void 0);
+    __decorate([
+        Property()
+    ], Views.prototype, "cellTemplate", void 0);
+    __decorate([
+        Property()
+    ], Views.prototype, "eventTemplate", void 0);
+    __decorate([
+        Property(true)
+    ], Views.prototype, "showWeekend", void 0);
+    __decorate([
+        Property()
+    ], Views.prototype, "displayName", void 0);
+    __decorate([
+        Property(1)
+    ], Views.prototype, "interval", void 0);
+    __decorate([
+        Property([1, 2, 3, 4, 5])
+    ], Views.prototype, "workDays", void 0);
+    __decorate([
+        Property()
+    ], Views.prototype, "resourceHeaderTemplate", void 0);
+    __decorate([
+        Complex({}, TimeScale)
+    ], Views.prototype, "timeScale", void 0);
+    __decorate([
+        Complex({}, Group)
+    ], Views.prototype, "group", void 0);
+    return Views;
+}(ChildProperty));
+export { Views };

src/schedule/models/work-hours.js

@@ -17,22 +17,22 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var WorkHours = (function (_super) {
-        __extends(WorkHours, _super);
-        function WorkHours() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        __decorate([
-            ej2_base_1.Property(true)
-        ], WorkHours.prototype, "highlight", void 0);
-        __decorate([
-            ej2_base_1.Property('09:00')
-        ], WorkHours.prototype, "start", void 0);
-        __decorate([
-            ej2_base_1.Property('18:00')
-        ], WorkHours.prototype, "end", void 0);
-        return WorkHours;
-    }(ej2_base_1.ChildProperty));
-    exports.WorkHours = WorkHours;
-});
+import { Property, ChildProperty } from '@syncfusion/ej2-base';
+/**
+ * Configuration of options related to working hours on Schedule.
+ */
+var WorkHours = /** @class */ (function (_super) {
+    __extends(WorkHours, _super);
+    function WorkHours() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(true)
+    ], WorkHours.prototype, "highlight", void 0);
+    __decorate([
+        Property('09:00')
+    ], WorkHours.prototype, "start", void 0);
+    __decorate([
+        Property('18:00')
+    ], WorkHours.prototype, "end", void 0);
+    return WorkHours;
+}(ChildProperty));
+export { WorkHours };

src/schedule/popups/event-tooltip.js

@@ -1,74 +0,81 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-popups", "../base/css-constant", "../base/util"], function (require, exports, ej2_base_1, ej2_popups_1, cls, util) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var EventTooltip = (function () {
-        function EventTooltip(parent) {
-            this.parent = parent;
-            this.tooltipObj = new ej2_popups_1.Tooltip({
-                content: 'No title',
-                position: 'BottomRight',
-                offsetY: 10,
-                mouseTrail: this.parent.isAdaptive ? false : true,
-                showTipPointer: false,
-                cssClass: this.parent.cssClass + ' ' + cls.EVENT_TOOLTIP_ROOT_CLASS,
-                target: '.' + cls.APPOINTMENT_CLASS,
-                beforeRender: this.onBeforeRender.bind(this),
-                enableRtl: this.parent.enableRtl
-            });
-            this.tooltipObj.appendTo(this.parent.element);
+import { isNullOrUndefined, append, createElement } from '@syncfusion/ej2-base';
+import { Tooltip } from '@syncfusion/ej2-popups';
+import * as cls from '../base/css-constant';
+import * as util from '../base/util';
+/**
+ * Tooltip on appointments in Schedule
+ */
+var EventTooltip = /** @class */ (function () {
+    function EventTooltip(parent) {
+        this.parent = parent;
+        this.tooltipObj = new Tooltip({
+            content: 'No title',
+            position: 'BottomRight',
+            offsetY: 10,
+            mouseTrail: this.parent.isAdaptive ? false : true,
+            showTipPointer: false,
+            cssClass: this.parent.cssClass + ' ' + cls.EVENT_TOOLTIP_ROOT_CLASS,
+            target: '.' + cls.APPOINTMENT_CLASS,
+            beforeRender: this.onBeforeRender.bind(this),
+            enableRtl: this.parent.enableRtl
+        });
+        this.tooltipObj.appendTo(this.parent.element);
+    }
+    EventTooltip.prototype.onBeforeRender = function (args) {
+        if (!isNullOrUndefined(args.target.getAttribute('data-tooltip-id'))) {
+            return;
         }
-        EventTooltip.prototype.onBeforeRender = function (args) {
-            if (!ej2_base_1.isNullOrUndefined(args.target.getAttribute('data-tooltip-id'))) {
-                return;
+        var record = this.parent.eventBase.getEventByGuid(args.target.getAttribute('data-guid'));
+        var content = '';
+        if (!isNullOrUndefined(this.parent.eventSettings.tooltipTemplate)) {
+            var ele = createElement('div');
+            append([].slice.call(this.parent.getEventTooltipTemplate()(record)), ele);
+            content = ele.innerHTML;
+        }
+        else {
+            var globalize = this.parent.globalize;
+            var fields = this.parent.eventFields;
+            var eventStart = new Date('' + record[fields.startTime]);
+            var eventEnd = new Date('' + record[fields.endTime]);
+            eventEnd = (eventEnd.getHours() === 0 && eventEnd.getMinutes() === 0) ? new Date(eventEnd.setMilliseconds(-1000)) : eventEnd;
+            var startDate = util.resetTime(new Date('' + eventStart));
+            var endDate = util.resetTime(new Date('' + eventEnd));
+            var tooltipSubject = (record[fields.subject] || this.parent.eventSettings.fields.subject.default);
+            var tooltipLocation = !isNullOrUndefined(record[fields.location]) ? record[fields.location] : '';
+            var startMonthDate = globalize.formatDate(eventStart, { type: 'date', skeleton: 'MMMd' });
+            var startMonthYearDate = globalize.formatDate(eventStart, { type: 'date', skeleton: 'yMMMd' });
+            var endMonthYearDate = globalize.formatDate(eventEnd, { type: 'date', skeleton: 'yMMMd' });
+            var startTime = globalize.formatDate(eventStart, { type: 'time', skeleton: 'short' });
+            var endTime = globalize.formatDate(eventEnd, { type: 'time', skeleton: 'short' });
+            var tooltipDetails = void 0;
+            if (startDate.getTime() === endDate.getTime()) {
+                tooltipDetails = globalize.formatDate(eventStart, { type: 'date', skeleton: 'long' });
             }
-            var record = this.parent.eventBase.getEventByGuid(args.target.getAttribute('data-guid'));
-            var content = '';
-            if (!ej2_base_1.isNullOrUndefined(this.parent.eventSettings.tooltipTemplate)) {
-                var ele = document.createElement('div');
-                ej2_base_1.append([].slice.call(this.parent.getEventTooltipTemplate()(record)), ele);
-                content = ele.innerHTML;
-            }
             else {
-                var globalize = this.parent.globalize;
-                var fields = this.parent.eventFields;
-                var eventStart = new Date('' + record[fields.startTime]);
-                var eventEnd = new Date('' + record[fields.endTime]);
-                eventEnd = (eventEnd.getHours() === 0 && eventEnd.getMinutes() === 0) ? new Date(eventEnd.setMilliseconds(-1000)) : eventEnd;
-                var startDate = util.resetTime(new Date('' + eventStart));
-                var endDate = util.resetTime(new Date('' + eventEnd));
-                var tooltipSubject = (record[fields.subject] || this.parent.eventSettings.fields.subject.default ||
-                    this.parent.localeObj.getConstant('noTitle'));
-                var tooltipLocation = !ej2_base_1.isNullOrUndefined(record[fields.location]) ? record[fields.location] : '';
-                var startMonthDate = globalize.formatDate(eventStart, { type: 'date', skeleton: 'MMMd' });
-                var startMonthYearDate = globalize.formatDate(eventStart, { type: 'date', skeleton: 'yMMMd' });
-                var endMonthYearDate = globalize.formatDate(eventEnd, { type: 'date', skeleton: 'yMMMd' });
-                var startTime = globalize.formatDate(eventStart, { type: 'time', skeleton: 'short' });
-                var endTime = globalize.formatDate(eventEnd, { type: 'time', skeleton: 'short' });
-                var tooltipDetails = void 0;
-                if (startDate.getTime() === endDate.getTime()) {
-                    tooltipDetails = globalize.formatDate(eventStart, { type: 'date', skeleton: 'long' });
-                }
-                else {
-                    tooltipDetails = (startDate.getFullYear() === endDate.getFullYear()) ? (startMonthDate + ' - ' + endMonthYearDate) :
-                        (startMonthYearDate + ' - ' + endMonthYearDate);
-                }
-                var tooltipTime = (record[fields.isAllDay]) ? this.parent.localeObj.getConstant('allDay') :
-                    (startTime + ' - ' + endTime);
-                content = '<div><div class="e-subject">' + tooltipSubject + '</div>' +
-                    '<div class="e-location">' + tooltipLocation + '</div>' +
-                    '<div class="e-details">' + tooltipDetails + '</div>' +
-                    '<div class="e-all-day">' + tooltipTime + '</div></div>';
+                tooltipDetails = (startDate.getFullYear() === endDate.getFullYear()) ? (startMonthDate + ' - ' + endMonthYearDate) :
+                    (startMonthYearDate + ' - ' + endMonthYearDate);
             }
-            this.tooltipObj.content = content;
-        };
-        EventTooltip.prototype.close = function () {
-            this.tooltipObj.close();
-        };
-        EventTooltip.prototype.destroy = function () {
-            this.tooltipObj.destroy();
-            this.tooltipObj = null;
-        };
-        return EventTooltip;
-    }());
-    exports.EventTooltip = EventTooltip;
-});
+            var tooltipTime = (record[fields.isAllDay]) ? this.parent.localeObj.getConstant('allDay') :
+                (startTime + ' - ' + endTime);
+            content = '<div><div class="e-subject">' + tooltipSubject + '</div>' +
+                '<div class="e-location">' + tooltipLocation + '</div>' +
+                '<div class="e-details">' + tooltipDetails + '</div>' +
+                '<div class="e-all-day">' + tooltipTime + '</div></div>';
+        }
+        this.tooltipObj.content = content;
+    };
+    EventTooltip.prototype.close = function () {
+        this.tooltipObj.close();
+    };
+    /**
+     * To destroy the event tooltip.
+     * @return {void}
+     * @private
+     */
+    EventTooltip.prototype.destroy = function () {
+        this.tooltipObj.destroy();
+        this.tooltipObj = null;
+    };
+    return EventTooltip;
+}());
+export { EventTooltip };

src/schedule/popups/form-validator.js

@@ -1,82 +0,87 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-inputs", "../base/css-constant"], function (require, exports, ej2_base_1, ej2_inputs_1, cls) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var FieldValidator = (function () {
-        function FieldValidator() {
+import { createElement, remove } from '@syncfusion/ej2-base';
+import { FormValidator } from '@syncfusion/ej2-inputs';
+import * as cls from '../base/css-constant';
+/**
+ * Appointment window field validation
+ */
+var FieldValidator = /** @class */ (function () {
+    function FieldValidator() {
+    }
+    FieldValidator.prototype.renderFormValidator = function (form, rules, element) {
+        var _this = this;
+        this.element = element;
+        this.formObj = new FormValidator(form, {
+            customPlacement: function (inputElement, error) {
+                _this.errorPlacement(inputElement, error);
+            },
+            rules: rules,
+            validationComplete: function (args) {
+                _this.validationComplete(args);
+            }
+        });
+    };
+    FieldValidator.prototype.validationComplete = function (args) {
+        var elem = this.element.querySelector('#' + args.inputName + '_Error');
+        if (elem) {
+            elem.style.display = (args.status === 'failure') ? '' : 'none';
         }
-        FieldValidator.prototype.renderFormValidator = function (form, rules, element) {
-            var _this = this;
-            this.element = element;
-            this.formObj = new ej2_inputs_1.FormValidator(form, {
-                customPlacement: function (inputElement, error) {
-                    _this.errorPlacement(inputElement, error);
-                },
-                rules: rules,
-                validationComplete: function (args) {
-                    _this.validationComplete(args);
-                }
-            });
-        };
-        FieldValidator.prototype.validationComplete = function (args) {
-            var elem = this.element.querySelector('#' + args.inputName + '_Error');
-            if (elem) {
-                elem.style.display = (args.status === 'failure') ? '' : 'none';
+    };
+    FieldValidator.prototype.errorPlacement = function (inputElement, error) {
+        var id = error.getAttribute('for');
+        var elem = this.element.querySelector('#' + id + '_Error');
+        if (!elem) {
+            this.createTooltip(inputElement, error, id, '');
+        }
+    };
+    FieldValidator.prototype.createTooltip = function (element, error, name, display) {
+        var dlgContent;
+        var client;
+        var inputClient = element.getBoundingClientRect();
+        if (this.element.classList.contains(cls.POPUP_WRAPPER_CLASS)) {
+            dlgContent = this.element;
+            client = this.element.getBoundingClientRect();
+        }
+        else {
+            dlgContent = this.element.querySelector('.e-schedule-dialog .e-dlg-content');
+            client = dlgContent.getBoundingClientRect();
+        }
+        var div = createElement('div', {
+            className: 'e-tooltip-wrap e-popup ' + cls.ERROR_VALIDATION_CLASS,
+            id: name + '_Error',
+            styles: 'display:' + display + ';top:' +
+                (inputClient.bottom - client.top + dlgContent.scrollTop + 9) + 'px;left:' +
+                (inputClient.left - client.left + dlgContent.scrollLeft + inputClient.width / 2) + 'px;'
+        });
+        var content = createElement('div', { className: 'e-tip-content' });
+        content.appendChild(error);
+        var arrow = createElement('div', { className: 'e-arrow-tip e-tip-top' });
+        arrow.appendChild(createElement('div', { className: 'e-arrow-tip-outer e-tip-top' }));
+        arrow.appendChild(createElement('div', { className: 'e-arrow-tip-inner e-tip-top' }));
+        div.appendChild(content);
+        div.appendChild(arrow);
+        dlgContent.appendChild(div);
+        div.style.left = (parseInt(div.style.left, 10) - div.offsetWidth / 2) + 'px';
+    };
+    FieldValidator.prototype.destroyToolTip = function () {
+        if (this.element) {
+            var elements = [].slice.call(this.element.querySelectorAll('.' + cls.ERROR_VALIDATION_CLASS));
+            for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
+                var elem = elements_1[_i];
+                remove(elem);
             }
-        };
-        FieldValidator.prototype.errorPlacement = function (inputElement, error) {
-            var id = error.getAttribute('for');
-            var elem = this.element.querySelector('#' + id + '_Error');
-            if (!elem) {
-                this.createTooltip(inputElement, error, id, '');
-            }
-        };
-        FieldValidator.prototype.createTooltip = function (element, error, name, display) {
-            var dlgContent;
-            var client;
-            var inputClient = element.getBoundingClientRect();
-            if (this.element.classList.contains(cls.POPUP_WRAPPER_CLASS)) {
-                dlgContent = this.element;
-                client = this.element.getBoundingClientRect();
-            }
-            else {
-                dlgContent = this.element.querySelector('.e-schedule-dialog .e-dlg-content');
-                client = dlgContent.getBoundingClientRect();
-            }
-            var div = ej2_base_1.createElement('div', {
-                className: 'e-tooltip-wrap e-popup ' + cls.ERROR_VALIDATION_CLASS,
-                id: name + '_Error',
-                styles: 'display:' + display + ';top:' +
-                    (inputClient.bottom - client.top + dlgContent.scrollTop + 9) + 'px;left:' +
-                    (inputClient.left - client.left + dlgContent.scrollLeft + inputClient.width / 2) + 'px;'
-            });
-            var content = ej2_base_1.createElement('div', { className: 'e-tip-content' });
-            content.appendChild(error);
-            var arrow = ej2_base_1.createElement('div', { className: 'e-arrow-tip e-tip-top' });
-            arrow.appendChild(ej2_base_1.createElement('div', { className: 'e-arrow-tip-outer e-tip-top' }));
-            arrow.appendChild(ej2_base_1.createElement('div', { className: 'e-arrow-tip-inner e-tip-top' }));
-            div.appendChild(content);
-            div.appendChild(arrow);
-            dlgContent.appendChild(div);
-            div.style.left = (parseInt(div.style.left, 10) - div.offsetWidth / 2) + 'px';
-        };
-        FieldValidator.prototype.destroyToolTip = function () {
-            if (this.element) {
-                var elements = [].slice.call(this.element.querySelectorAll('.' + cls.ERROR_VALIDATION_CLASS));
-                for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
-                    var elem = elements_1[_i];
-                    ej2_base_1.remove(elem);
-                }
-            }
-            if (this.formObj) {
-                this.formObj.reset();
-            }
-        };
-        FieldValidator.prototype.destroy = function () {
-            if (this.formObj && !this.formObj.isDestroyed) {
-                this.formObj.destroy();
-            }
-        };
-        return FieldValidator;
-    }());
-    exports.FieldValidator = FieldValidator;
-});
+        }
+        if (this.formObj) {
+            this.formObj.reset();
+        }
+    };
+    /**
+     * @hidden
+     */
+    FieldValidator.prototype.destroy = function () {
+        if (this.formObj && !this.formObj.isDestroyed) {
+            this.formObj.destroy();
+        }
+    };
+    return FieldValidator;
+}());
+export { FieldValidator };

src/schedule/popups/quick-popups.js

@@ -1,842 +0,857 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-popups", "@syncfusion/ej2-buttons", "@syncfusion/ej2-inputs", "../actions/crud", "./form-validator", "../base/constant", "../base/css-constant", "../base/util"], function (require, exports, ej2_base_1, ej2_base_2, ej2_popups_1, ej2_buttons_1, ej2_inputs_1, crud_1, form_validator_1, event, cls, util) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var QuickPopups = (function () {
-        function QuickPopups(parent) {
-            this.isMultipleEventSelect = false;
-            this.parent = parent;
-            this.l10n = this.parent.localeObj;
-            this.crudAction = new crud_1.Crud(parent);
-            this.fieldValidator = new form_validator_1.FieldValidator();
-            this.render();
-            this.addEventListener();
+import { closest, EventHandler, isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base';
+import { addClass, removeClass, createElement, remove, extend } from '@syncfusion/ej2-base';
+import { Dialog, Popup } from '@syncfusion/ej2-popups';
+import { Button } from '@syncfusion/ej2-buttons';
+import { Input } from '@syncfusion/ej2-inputs';
+import { Crud } from '../actions/crud';
+import { FieldValidator } from './form-validator';
+import * as event from '../base/constant';
+import * as cls from '../base/css-constant';
+import * as util from '../base/util';
+/**
+ * Quick Popups interactions
+ */
+var QuickPopups = /** @class */ (function () {
+    /**
+     * Constructor for QuickPopups
+     */
+    function QuickPopups(parent) {
+        this.isMultipleEventSelect = false;
+        this.parent = parent;
+        this.l10n = this.parent.localeObj;
+        this.crudAction = new Crud(parent);
+        this.fieldValidator = new FieldValidator();
+        this.render();
+        this.addEventListener();
+    }
+    QuickPopups.prototype.render = function () {
+        this.renderQuickPopup();
+        this.renderMorePopup();
+        this.renderQuickDialog();
+    };
+    QuickPopups.prototype.renderQuickPopup = function () {
+        var quickPopupWrapper = createElement('div', { className: cls.POPUP_WRAPPER_CLASS + ' e-popup-close' });
+        if (this.parent.isAdaptive) {
+            document.body.appendChild(quickPopupWrapper);
+            addClass([quickPopupWrapper], cls.DEVICE_CLASS);
         }
-        QuickPopups.prototype.render = function () {
-            this.renderQuickPopup();
-            this.renderMorePopup();
-            this.renderQuickDialog();
-        };
-        QuickPopups.prototype.renderQuickPopup = function () {
-            var quickPopupWrapper = ej2_base_2.createElement('div', { className: cls.POPUP_WRAPPER_CLASS + ' e-popup-close' });
-            if (this.parent.isAdaptive) {
-                document.body.appendChild(quickPopupWrapper);
-                ej2_base_2.addClass([quickPopupWrapper], cls.DEVICE_CLASS);
-            }
-            else {
-                this.parent.element.appendChild(quickPopupWrapper);
-            }
-            this.quickPopup = new ej2_popups_1.Popup(quickPopupWrapper, {
-                actionOnScroll: 'hide',
-                targetType: (this.parent.isAdaptive ? 'container' : 'relative'),
-                enableRtl: this.parent.enableRtl,
-                open: this.quickPopupOpen.bind(this),
-                close: this.quickPopupClose.bind(this),
-                hideAnimation: (this.parent.isAdaptive ? { name: 'ZoomOut' } : { name: 'FadeOut', duration: 150 }),
-                showAnimation: (this.parent.isAdaptive ? { name: 'ZoomIn' } : { name: 'FadeIn', duration: 150 }),
-                collision: (this.parent.isAdaptive ? { X: 'fit', Y: 'fit' } : { X: 'fit', Y: 'flip' }),
-                position: (this.parent.isAdaptive ? { X: 'left', Y: 'top' } : { X: 'center', Y: 'top' }),
-                viewPortElement: (this.parent.isAdaptive ? document.body : this.parent.element),
-                zIndex: (this.parent.isAdaptive ? 1000 : 1)
-            });
-        };
-        QuickPopups.prototype.renderMorePopup = function () {
-            var moreEventPopup = "<div class=\"" + cls.MORE_EVENT_POPUP_CLASS + "\"><div class=\"" + cls.MORE_EVENT_HEADER_CLASS + "\">" +
-                ("<div class=\"" + cls.MORE_EVENT_CLOSE_CLASS + "\" title=\"" + this.l10n.getConstant('close') + "\" tabindex=\"0\"></div>") +
-                ("<div class=\"" + cls.MORE_EVENT_DATE_HEADER_CLASS + "\"><div class=\"" + cls.MORE_EVENT_HEADER_DAY_CLASS + "\"></div>") +
-                ("<div class=\"" + cls.MORE_EVENT_HEADER_DATE_CLASS + " " + cls.NAVIGATE_CLASS + "\" tabindex=\"0\"></div></div></div></div>");
-            var moreEventWrapper = ej2_base_2.createElement('div', {
-                className: cls.MORE_POPUP_WRAPPER_CLASS + ' e-popup-close',
-                innerHTML: moreEventPopup
-            });
-            this.parent.element.appendChild(moreEventWrapper);
-            this.morePopup = new ej2_popups_1.Popup(moreEventWrapper, {
-                targetType: 'relative',
-                enableRtl: this.parent.enableRtl,
-                hideAnimation: { name: 'ZoomOut', duration: 300 },
-                showAnimation: { name: 'ZoomIn', duration: 300 },
-                open: this.morePopupOpen.bind(this),
-                close: this.morePopupClose.bind(this),
-                collision: { X: 'flip', Y: 'flip' },
-                viewPortElement: this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS),
-                zIndex: 0
-            });
-            var closeButton = this.morePopup.element.querySelector('.' + cls.MORE_EVENT_CLOSE_CLASS);
-            this.renderButton('e-round', cls.ICON + ' ' + cls.CLOSE_ICON_CLASS, false, closeButton, this.closeClick);
-            ej2_base_1.EventHandler.add(this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS), 'click', this.navigationClick, this);
-        };
-        QuickPopups.prototype.renderQuickDialog = function () {
-            this.quickDialog = new ej2_popups_1.Dialog({
-                animationSettings: { effect: 'Zoom' },
-                buttons: [
-                    { buttonModel: { cssClass: 'e-quick-alertok e-flat', isPrimary: true }, click: this.dialogButtonClick.bind(this) },
-                    { buttonModel: { cssClass: 'e-quick-alertcancel e-flat', isPrimary: false }, click: this.dialogButtonClick.bind(this) }
-                ],
-                cssClass: cls.QUICK_DIALOG_CLASS,
-                closeOnEscape: true,
-                enableRtl: this.parent.enableRtl,
-                beforeClose: this.beforeQuickDialogClose.bind(this),
-                isModal: true,
-                position: { X: 'center', Y: 'center' },
-                showCloseIcon: true,
-                target: document.body,
-                visible: false,
-                width: 'auto'
-            });
-            var dialogElement = ej2_base_2.createElement('div', { id: this.parent.element.id + 'QuickDialog' });
-            this.parent.element.appendChild(dialogElement);
-            this.quickDialog.appendTo(dialogElement);
-            var okButton = this.quickDialog.element.querySelector('.e-quick-alertok');
-            if (okButton) {
-                okButton.setAttribute('aria-label', this.l10n.getConstant('occurrence'));
-            }
-            var cancelButton = this.quickDialog.element.querySelector('.e-quick-alertcancel');
-            if (cancelButton) {
-                cancelButton.setAttribute('aria-label', this.l10n.getConstant('series'));
-            }
-        };
-        QuickPopups.prototype.renderButton = function (className, iconName, isDisabled, element, clickEvent) {
-            new ej2_buttons_1.Button({ cssClass: className, disabled: isDisabled, enableRtl: this.parent.enableRtl, iconCss: iconName }, element);
-            ej2_base_1.EventHandler.add(element, 'click', clickEvent, this);
-        };
-        QuickPopups.prototype.quickDialogClass = function (action) {
-            var classList = [
-                cls.QUICK_DIALOG_EDIT_EVENT_CLASS, cls.QUICK_DIALOG_EDIT_SERIES_CLASS, cls.QUICK_DIALOG_DELETE_CLASS,
-                cls.QUICK_DIALOG_CANCEL_CLASS, cls.QUICK_DIALOG_ALERT_BTN_CLASS, cls.DISABLE_CLASS
-            ];
-            var okButton = this.quickDialog.element.querySelector('.e-quick-alertok');
-            var cancelButton = this.quickDialog.element.querySelector('.e-quick-alertcancel');
-            ej2_base_2.removeClass([okButton, cancelButton], classList);
-            switch (action) {
-                case 'Recurrence':
-                    ej2_base_2.addClass([okButton], cls.QUICK_DIALOG_EDIT_EVENT_CLASS);
-                    ej2_base_2.addClass([cancelButton], cls.QUICK_DIALOG_EDIT_SERIES_CLASS);
-                    break;
-                case 'Delete':
-                    ej2_base_2.addClass([okButton], cls.QUICK_DIALOG_DELETE_CLASS);
-                    ej2_base_2.addClass([cancelButton], cls.QUICK_DIALOG_CANCEL_CLASS);
-                    break;
-                case 'Alert':
-                    ej2_base_2.addClass([okButton], cls.QUICK_DIALOG_ALERT_BTN_CLASS);
-                    ej2_base_2.addClass([cancelButton], cls.DISABLE_CLASS);
-                    break;
-            }
-        };
-        QuickPopups.prototype.applyFormValidation = function () {
-            var form = this.quickPopup.element.querySelector('.' + cls.FORM_CLASS);
-            var rules = {};
-            rules[this.parent.eventSettings.fields.subject.name] = this.parent.eventSettings.fields.subject.validation;
-            this.fieldValidator.renderFormValidator(form, rules, this.quickPopup.element);
-        };
-        QuickPopups.prototype.openRecurrenceAlert = function () {
-            var editDeleteOnly = this.quickDialog.element.querySelector('.e-quick-alertok');
-            if (editDeleteOnly) {
-                editDeleteOnly.innerHTML = this.l10n.getConstant(this.parent.currentAction === 'Delete' ? 'deleteEvent' : 'editEvent');
-            }
-            var editDeleteSeries = this.quickDialog.element.querySelector('.e-quick-alertcancel');
-            if (editDeleteSeries) {
-                editDeleteSeries.innerHTML = this.l10n.getConstant(this.parent.currentAction === 'Delete' ? 'deleteSeries' : 'editSeries');
-            }
-            this.quickDialog.content =
-                this.l10n.getConstant(this.parent.currentAction === 'Delete' ? 'deleteRecurrenceContent' : 'editContent');
-            this.quickDialog.header = this.l10n.getConstant(this.parent.currentAction === 'Delete' ? 'deleteEvent' : 'editEvent');
-            this.quickDialogClass('Recurrence');
-            this.showQuickDialog('RecurrenceAlert');
-        };
-        QuickPopups.prototype.openRecurrenceValidationAlert = function (type) {
-            var okButton = this.quickDialog.element.querySelector('.e-quick-alertok');
-            ej2_base_2.removeClass([okButton], cls.QUICK_DIALOG_EDIT_EVENT_CLASS);
+        else {
+            this.parent.element.appendChild(quickPopupWrapper);
+        }
+        this.quickPopup = new Popup(quickPopupWrapper, {
+            actionOnScroll: 'hide',
+            targetType: (this.parent.isAdaptive ? 'container' : 'relative'),
+            enableRtl: this.parent.enableRtl,
+            open: this.quickPopupOpen.bind(this),
+            close: this.quickPopupClose.bind(this),
+            hideAnimation: (this.parent.isAdaptive ? { name: 'ZoomOut' } : { name: 'FadeOut', duration: 150 }),
+            showAnimation: (this.parent.isAdaptive ? { name: 'ZoomIn' } : { name: 'FadeIn', duration: 150 }),
+            collision: (this.parent.isAdaptive ? { X: 'fit', Y: 'fit' } : { X: 'fit', Y: 'flip' }),
+            position: (this.parent.isAdaptive ? { X: 'left', Y: 'top' } : { X: 'center', Y: 'top' }),
+            viewPortElement: (this.parent.isAdaptive ? document.body : this.parent.element),
+            zIndex: (this.parent.isAdaptive ? 1000 : 1)
+        });
+    };
+    QuickPopups.prototype.renderMorePopup = function () {
+        var moreEventPopup = "<div class=\"" + cls.MORE_EVENT_POPUP_CLASS + "\"><div class=\"" + cls.MORE_EVENT_HEADER_CLASS + "\">" +
+            ("<div class=\"" + cls.MORE_EVENT_CLOSE_CLASS + "\" title=\"" + this.l10n.getConstant('close') + "\" tabindex=\"0\"></div>") +
+            ("<div class=\"" + cls.MORE_EVENT_DATE_HEADER_CLASS + "\"><div class=\"" + cls.MORE_EVENT_HEADER_DAY_CLASS + "\"></div>") +
+            ("<div class=\"" + cls.MORE_EVENT_HEADER_DATE_CLASS + " " + cls.NAVIGATE_CLASS + "\" tabindex=\"0\"></div></div></div></div>");
+        var moreEventWrapper = createElement('div', {
+            className: cls.MORE_POPUP_WRAPPER_CLASS + ' e-popup-close',
+            innerHTML: moreEventPopup
+        });
+        this.parent.element.appendChild(moreEventWrapper);
+        this.morePopup = new Popup(moreEventWrapper, {
+            targetType: 'relative',
+            enableRtl: this.parent.enableRtl,
+            hideAnimation: { name: 'ZoomOut', duration: 300 },
+            showAnimation: { name: 'ZoomIn', duration: 300 },
+            open: this.morePopupOpen.bind(this),
+            close: this.morePopupClose.bind(this),
+            collision: { X: 'flip', Y: 'flip' },
+            viewPortElement: this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS),
+            zIndex: 0
+        });
+        var closeButton = this.morePopup.element.querySelector('.' + cls.MORE_EVENT_CLOSE_CLASS);
+        this.renderButton('e-round', cls.ICON + ' ' + cls.CLOSE_ICON_CLASS, false, closeButton, this.closeClick);
+        EventHandler.add(this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS), 'click', this.navigationClick, this);
+    };
+    QuickPopups.prototype.renderQuickDialog = function () {
+        this.quickDialog = new Dialog({
+            animationSettings: { effect: 'Zoom' },
+            buttons: [
+                { buttonModel: { cssClass: 'e-quick-alertok e-flat', isPrimary: true }, click: this.dialogButtonClick.bind(this) },
+                { buttonModel: { cssClass: 'e-quick-alertcancel e-flat', isPrimary: false }, click: this.dialogButtonClick.bind(this) }
+            ],
+            cssClass: cls.QUICK_DIALOG_CLASS,
+            closeOnEscape: true,
+            enableRtl: this.parent.enableRtl,
+            beforeClose: this.beforeQuickDialogClose.bind(this),
+            isModal: true,
+            position: { X: 'center', Y: 'center' },
+            showCloseIcon: true,
+            target: document.body,
+            visible: false,
+            width: 'auto'
+        });
+        var dialogElement = createElement('div', { id: this.parent.element.id + 'QuickDialog' });
+        this.parent.element.appendChild(dialogElement);
+        this.quickDialog.appendTo(dialogElement);
+        var okButton = this.quickDialog.element.querySelector('.e-quick-alertok');
+        if (okButton) {
+            okButton.setAttribute('aria-label', this.l10n.getConstant('occurrence'));
+        }
+        var cancelButton = this.quickDialog.element.querySelector('.e-quick-alertcancel');
+        if (cancelButton) {
+            cancelButton.setAttribute('aria-label', this.l10n.getConstant('series'));
+        }
+    };
+    QuickPopups.prototype.renderButton = function (className, iconName, isDisabled, element, clickEvent) {
+        new Button({ cssClass: className, disabled: isDisabled, enableRtl: this.parent.enableRtl, iconCss: iconName }, element);
+        EventHandler.add(element, 'click', clickEvent, this);
+    };
+    QuickPopups.prototype.quickDialogClass = function (action) {
+        var classList = [
+            cls.QUICK_DIALOG_EDIT_EVENT_CLASS, cls.QUICK_DIALOG_EDIT_SERIES_CLASS, cls.QUICK_DIALOG_DELETE_CLASS,
+            cls.QUICK_DIALOG_CANCEL_CLASS, cls.QUICK_DIALOG_ALERT_BTN_CLASS, cls.DISABLE_CLASS
+        ];
+        var okButton = this.quickDialog.element.querySelector('.e-quick-alertok');
+        var cancelButton = this.quickDialog.element.querySelector('.e-quick-alertcancel');
+        removeClass([okButton, cancelButton], classList);
+        switch (action) {
+            case 'Recurrence':
+                addClass([okButton], cls.QUICK_DIALOG_EDIT_EVENT_CLASS);
+                addClass([cancelButton], cls.QUICK_DIALOG_EDIT_SERIES_CLASS);
+                break;
+            case 'Delete':
+                addClass([okButton], cls.QUICK_DIALOG_DELETE_CLASS);
+                addClass([cancelButton], cls.QUICK_DIALOG_CANCEL_CLASS);
+                break;
+            case 'Alert':
+                addClass([okButton], cls.QUICK_DIALOG_ALERT_BTN_CLASS);
+                addClass([cancelButton], cls.DISABLE_CLASS);
+                break;
+        }
+    };
+    QuickPopups.prototype.applyFormValidation = function () {
+        var form = this.quickPopup.element.querySelector('.' + cls.FORM_CLASS);
+        var rules = {};
+        rules[this.parent.eventSettings.fields.subject.name] = this.parent.eventSettings.fields.subject.validation;
+        this.fieldValidator.renderFormValidator(form, rules, this.quickPopup.element);
+    };
+    QuickPopups.prototype.openRecurrenceAlert = function () {
+        var editDeleteOnly = this.quickDialog.element.querySelector('.e-quick-alertok');
+        if (editDeleteOnly) {
+            editDeleteOnly.innerHTML = this.l10n.getConstant(this.parent.currentAction === 'Delete' ? 'deleteEvent' : 'editEvent');
+        }
+        var editDeleteSeries = this.quickDialog.element.querySelector('.e-quick-alertcancel');
+        if (editDeleteSeries) {
+            editDeleteSeries.innerHTML = this.l10n.getConstant(this.parent.currentAction === 'Delete' ? 'deleteSeries' : 'editSeries');
+        }
+        this.quickDialog.content =
+            this.l10n.getConstant(this.parent.currentAction === 'Delete' ? 'deleteRecurrenceContent' : 'editContent');
+        this.quickDialog.header = this.l10n.getConstant(this.parent.currentAction === 'Delete' ? 'deleteEvent' : 'editEvent');
+        this.quickDialogClass('Recurrence');
+        this.showQuickDialog('RecurrenceAlert');
+    };
+    QuickPopups.prototype.openRecurrenceValidationAlert = function (type) {
+        var okButton = this.quickDialog.element.querySelector('.e-quick-alertok');
+        removeClass([okButton], cls.QUICK_DIALOG_EDIT_EVENT_CLASS);
+        okButton.innerHTML = this.l10n.getConstant('ok');
+        var cancelButton = this.quickDialog.element.querySelector('.e-quick-alertcancel');
+        cancelButton.innerHTML = this.l10n.getConstant('cancel');
+        this.quickDialog.header = this.l10n.getConstant('alert');
+        switch (type) {
+            case 'wrongPattern':
+                addClass([cancelButton], cls.DISABLE_CLASS);
+                this.quickDialog.content = this.l10n.getConstant('wrongPattern');
+                break;
+            case 'dateValidation':
+                removeClass([cancelButton], cls.DISABLE_CLASS);
+                this.quickDialog.content = this.l10n.getConstant('recurrenceDateValidation');
+                break;
+            case 'createError':
+                addClass([cancelButton], cls.DISABLE_CLASS);
+                this.quickDialog.content = this.l10n.getConstant('createError');
+                break;
+            case 'sameDayAlert':
+                addClass([cancelButton], cls.DISABLE_CLASS);
+                this.quickDialog.content = this.l10n.getConstant('sameDayAlert');
+                break;
+            case 'seriesChangeAlert':
+                removeClass([cancelButton], cls.DISABLE_CLASS);
+                this.quickDialog.content = this.l10n.getConstant('seriesChangeAlert');
+                break;
+        }
+        if (!cancelButton.classList.contains(cls.DISABLE_CLASS)) {
+            addClass([cancelButton], 'e-quick-alert-cancelpresent');
+        }
+        this.showQuickDialog('RecurrenceValidationAlert');
+    };
+    QuickPopups.prototype.openDeleteAlert = function () {
+        if (this.parent.activeViewOptions.readonly) {
+            return;
+        }
+        var okButton = this.quickDialog.element.querySelector('.e-quick-alertok');
+        if (okButton) {
+            okButton.innerHTML = this.l10n.getConstant('delete');
+        }
+        var cancelButton = this.quickDialog.element.querySelector('.e-quick-alertcancel');
+        if (cancelButton) {
+            cancelButton.innerHTML = this.l10n.getConstant('cancel');
+        }
+        this.quickDialog.content = (this.parent.activeEventData.event.length > 1) ?
+            this.l10n.getConstant('deleteMultipleContent') : this.l10n.getConstant('deleteContent');
+        this.quickDialog.header = (this.parent.activeEventData.event.length > 1) ?
+            this.l10n.getConstant('deleteMultipleEvent') : this.l10n.getConstant('deleteEvent');
+        this.quickDialogClass('Delete');
+        this.showQuickDialog('DeleteAlert');
+    };
+    QuickPopups.prototype.openValidationError = function (type) {
+        this.quickDialog.header = this.l10n.getConstant('alert');
+        this.quickDialog.content = this.l10n.getConstant(type);
+        var okButton = this.quickDialog.element.querySelector('.e-quick-alertok');
+        if (okButton) {
             okButton.innerHTML = this.l10n.getConstant('ok');
-            var cancelButton = this.quickDialog.element.querySelector('.e-quick-alertcancel');
+        }
+        var cancelButton = this.quickDialog.element.querySelector('.e-quick-alertcancel');
+        if (cancelButton) {
             cancelButton.innerHTML = this.l10n.getConstant('cancel');
-            this.quickDialog.header = this.l10n.getConstant('alert');
-            switch (type) {
-                case 'wrongPattern':
-                    ej2_base_2.addClass([cancelButton], cls.DISABLE_CLASS);
-                    this.quickDialog.content = this.l10n.getConstant('wrongPattern');
-                    break;
-                case 'dateValidation':
-                    ej2_base_2.removeClass([cancelButton], cls.DISABLE_CLASS);
-                    this.quickDialog.content = this.l10n.getConstant('recurrenceDateValidation');
-                    break;
-                case 'createError':
-                    ej2_base_2.addClass([cancelButton], cls.DISABLE_CLASS);
-                    this.quickDialog.content = this.l10n.getConstant('createError');
-                    break;
-                case 'sameDayAlert':
-                    ej2_base_2.addClass([cancelButton], cls.DISABLE_CLASS);
-                    this.quickDialog.content = this.l10n.getConstant('sameDayAlert');
-                    break;
-                case 'seriesChangeAlert':
-                    ej2_base_2.removeClass([cancelButton], cls.DISABLE_CLASS);
-                    this.quickDialog.content = this.l10n.getConstant('seriesChangeAlert');
-                    break;
-            }
-            if (!cancelButton.classList.contains(cls.DISABLE_CLASS)) {
-                ej2_base_2.addClass([cancelButton], 'e-quick-alert-cancelpresent');
-            }
-            this.showQuickDialog('RecurrenceValidationAlert');
+        }
+        this.quickDialogClass('Alert');
+        this.showQuickDialog('ValidationAlert');
+    };
+    QuickPopups.prototype.showQuickDialog = function (popupType) {
+        this.quickDialog.dataBind();
+        var eventProp = {
+            type: popupType, cancel: false, data: this.parent.activeEventData, element: this.quickDialog.element
         };
-        QuickPopups.prototype.openDeleteAlert = function () {
-            if (this.parent.activeViewOptions.readonly) {
-                return;
-            }
-            var okButton = this.quickDialog.element.querySelector('.e-quick-alertok');
-            if (okButton) {
-                okButton.innerHTML = this.l10n.getConstant('delete');
-            }
-            var cancelButton = this.quickDialog.element.querySelector('.e-quick-alertcancel');
-            if (cancelButton) {
-                cancelButton.innerHTML = this.l10n.getConstant('cancel');
-            }
-            this.quickDialog.content = (this.parent.activeEventData.event.length > 1) ?
-                this.l10n.getConstant('deleteMultipleContent') : this.l10n.getConstant('deleteContent');
-            this.quickDialog.header = (this.parent.activeEventData.event.length > 1) ?
-                this.l10n.getConstant('deleteMultipleEvent') : this.l10n.getConstant('deleteEvent');
-            this.quickDialogClass('Delete');
-            this.showQuickDialog('DeleteAlert');
-        };
-        QuickPopups.prototype.openValidationError = function (type) {
-            this.quickDialog.header = this.l10n.getConstant('alert');
-            this.quickDialog.content = this.l10n.getConstant(type);
-            var okButton = this.quickDialog.element.querySelector('.e-quick-alertok');
-            if (okButton) {
-                okButton.innerHTML = this.l10n.getConstant('ok');
-            }
-            var cancelButton = this.quickDialog.element.querySelector('.e-quick-alertcancel');
-            if (cancelButton) {
-                cancelButton.innerHTML = this.l10n.getConstant('cancel');
-            }
-            this.quickDialogClass('Alert');
-            this.showQuickDialog('ValidationAlert');
-        };
-        QuickPopups.prototype.showQuickDialog = function (popupType) {
-            this.quickDialog.dataBind();
-            var eventProp = {
-                type: popupType, cancel: false, data: this.parent.activeEventData, element: this.quickDialog.element
-            };
-            this.parent.trigger(event.popupOpen, eventProp);
-            if (eventProp.cancel) {
-                return;
-            }
-            this.quickDialog.show();
-        };
-        QuickPopups.prototype.createMoreEventList = function (eventCollection, groupOrder, groupIndex) {
-            var fields = this.parent.eventFields;
-            var moreEventContentEle = ej2_base_2.createElement('div', { className: cls.MORE_EVENT_CONTENT_CLASS });
-            var moreEventWrapperEle = ej2_base_2.createElement('div', { className: cls.MORE_EVENT_WRAPPER_CLASS });
-            if (eventCollection.length === 0) {
-                moreEventWrapperEle = ej2_base_2.createElement('div', {
-                    className: cls.MORE_EVENT_CONTENT_CLASS,
-                    innerHTML: this.l10n.getConstant('emptyContainer')
+        this.parent.trigger(event.popupOpen, eventProp);
+        if (eventProp.cancel) {
+            return;
+        }
+        this.quickDialog.show();
+    };
+    QuickPopups.prototype.createMoreEventList = function (eventCollection, groupOrder, groupIndex) {
+        var fields = this.parent.eventFields;
+        var moreEventContentEle = createElement('div', { className: cls.MORE_EVENT_CONTENT_CLASS });
+        var moreEventWrapperEle = createElement('div', { className: cls.MORE_EVENT_WRAPPER_CLASS });
+        if (eventCollection.length === 0) {
+            moreEventWrapperEle = createElement('div', {
+                className: cls.MORE_EVENT_CONTENT_CLASS,
+                innerHTML: this.l10n.getConstant('emptyContainer')
+            });
+        }
+        else {
+            for (var _i = 0, eventCollection_1 = eventCollection; _i < eventCollection_1.length; _i++) {
+                var eventData = eventCollection_1[_i];
+                var eventText = (eventData[fields.subject] || this.parent.eventSettings.fields.subject.default);
+                var appointmentEle = createElement('div', {
+                    className: cls.APPOINTMENT_CLASS,
+                    attrs: {
+                        'data-id': '' + eventData[fields.id],
+                        'data-guid': eventData.Guid, 'role': 'button', 'tabindex': '0', 'aria-readonly': 'false',
+                        'aria-selected': 'false', 'aria-grabbed': 'true', 'aria-label': eventText
+                    }
                 });
-            }
-            else {
-                for (var _i = 0, eventCollection_1 = eventCollection; _i < eventCollection_1.length; _i++) {
-                    var eventData = eventCollection_1[_i];
-                    var eventText = (eventData[fields.subject] || this.parent.eventSettings.fields.subject.default);
-                    var appointmentEle = ej2_base_2.createElement('div', {
-                        className: cls.APPOINTMENT_CLASS,
-                        attrs: {
-                            'data-id': '' + eventData[fields.id],
-                            'data-guid': eventData.Guid, 'role': 'button', 'tabindex': '0', 'aria-readonly': 'false',
-                            'aria-selected': 'false', 'aria-grabbed': 'true', 'aria-label': eventText
-                        }
-                    });
-                    appointmentEle.appendChild(ej2_base_2.createElement('div', { className: cls.SUBJECT_CLASS, innerHTML: eventText }));
-                    if (this.parent.activeViewOptions.group.resources.length > 0) {
-                        appointmentEle.setAttribute('data-group-index', groupIndex);
-                    }
-                    if (!ej2_base_1.isNullOrUndefined(eventData[fields.recurrenceRule])) {
-                        var iconClass = (eventData[fields.id] === eventData[fields.recurrenceID]) ?
-                            cls.EVENT_RECURRENCE_ICON_CLASS : cls.EVENT_RECURRENCE_EDIT_ICON_CLASS;
-                        appointmentEle.appendChild(ej2_base_2.createElement('div', { className: cls.ICON + ' ' + iconClass }));
-                    }
-                    var args = { data: eventData, element: appointmentEle, cancel: false };
-                    this.parent.trigger(event.eventRendered, args);
-                    if (!args.cancel) {
-                        moreEventWrapperEle.appendChild(appointmentEle);
-                        this.parent.eventBase.wireAppointmentEvents(appointmentEle);
-                        this.parent.eventBase.applyResourceColor(appointmentEle, eventData, 'backgroundColor', groupOrder);
-                    }
+                appointmentEle.appendChild(createElement('div', { className: cls.SUBJECT_CLASS, innerHTML: eventText }));
+                if (this.parent.activeViewOptions.group.resources.length > 0) {
+                    appointmentEle.setAttribute('data-group-index', groupIndex);
                 }
+                if (!isNullOrUndefined(eventData[fields.recurrenceRule])) {
+                    var iconClass = (eventData[fields.id] === eventData[fields.recurrenceID]) ?
+                        cls.EVENT_RECURRENCE_ICON_CLASS : cls.EVENT_RECURRENCE_EDIT_ICON_CLASS;
+                    appointmentEle.appendChild(createElement('div', { className: cls.ICON + ' ' + iconClass }));
+                }
+                var args = { data: eventData, element: appointmentEle, cancel: false };
+                this.parent.trigger(event.eventRendered, args);
+                if (!args.cancel) {
+                    moreEventWrapperEle.appendChild(appointmentEle);
+                    this.parent.eventBase.wireAppointmentEvents(appointmentEle);
+                    this.parent.eventBase.applyResourceColor(appointmentEle, eventData, 'backgroundColor', groupOrder);
+                }
             }
-            moreEventContentEle.appendChild(moreEventWrapperEle);
-            return moreEventContentEle;
-        };
-        QuickPopups.prototype.tapHoldEventPopup = function (args) {
-            var target = ej2_base_1.closest(args.event.target, '.' + cls.APPOINTMENT_CLASS);
-            this.isMultipleEventSelect = false;
-            this.parent.selectedElements = [];
-            this.isMultipleEventSelect = true;
-            this.parent.eventBase.getSelectedEventElements(target);
-            this.parent.activeEventData = this.parent.eventBase.getSelectedEvents();
-            var guid = target.getAttribute('data-guid');
-            var eventObj = this.parent.eventBase.getEventByGuid(guid);
-            var eventTitle = (eventObj[this.parent.eventFields.subject] || this.l10n.getConstant('noTitle'));
-            var eventTemplate = "<div class=\"" + cls.MULTIPLE_EVENT_POPUP_CLASS + "\"><div class=\"" + cls.POPUP_HEADER_CLASS + "\">" +
-                ("<button class=\"" + cls.CLOSE_CLASS + "\" title=\"" + this.l10n.getConstant('close') + "\"></button>") +
-                ("<div class=\"" + cls.SUBJECT_CLASS + "\">" + eventTitle + "</div>") +
-                ("<button class=\"" + cls.EDIT_CLASS + "\" title=\"" + this.l10n.getConstant('edit') + "\"></button>") +
-                ("<button class=\"" + cls.DELETE_CLASS + "\" title=\"" + this.l10n.getConstant('delete') + "\"></button></div></div>");
-            this.quickPopup.element.innerHTML = eventTemplate;
-            var closeIcon = this.quickPopup.element.querySelector('.' + cls.CLOSE_CLASS);
-            this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.CLOSE_ICON_CLASS, false, closeIcon, this.closeClick);
-            var editIcon = this.quickPopup.element.querySelector('.' + cls.EDIT_CLASS);
+        }
+        moreEventContentEle.appendChild(moreEventWrapperEle);
+        return moreEventContentEle;
+    };
+    QuickPopups.prototype.tapHoldEventPopup = function (args) {
+        var target = closest(args.event.target, '.' + cls.APPOINTMENT_CLASS);
+        this.isMultipleEventSelect = false;
+        this.parent.selectedElements = [];
+        this.isMultipleEventSelect = true;
+        this.parent.eventBase.getSelectedEventElements(target);
+        this.parent.activeEventData = this.parent.eventBase.getSelectedEvents();
+        var guid = target.getAttribute('data-guid');
+        var eventObj = this.parent.eventBase.getEventByGuid(guid);
+        var eventTitle = (eventObj[this.parent.eventFields.subject] || this.l10n.getConstant('noTitle'));
+        var eventTemplate = "<div class=\"" + cls.MULTIPLE_EVENT_POPUP_CLASS + "\"><div class=\"" + cls.POPUP_HEADER_CLASS + "\">" +
+            ("<button class=\"" + cls.CLOSE_CLASS + "\" title=\"" + this.l10n.getConstant('close') + "\"></button>") +
+            ("<div class=\"" + cls.SUBJECT_CLASS + "\">" + eventTitle + "</div>") +
+            ("<button class=\"" + cls.EDIT_CLASS + "\" title=\"" + this.l10n.getConstant('edit') + "\"></button>") +
+            ("<button class=\"" + cls.DELETE_CLASS + "\" title=\"" + this.l10n.getConstant('delete') + "\"></button></div></div>");
+        this.quickPopup.element.innerHTML = eventTemplate;
+        var closeIcon = this.quickPopup.element.querySelector('.' + cls.CLOSE_CLASS);
+        this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.CLOSE_ICON_CLASS, false, closeIcon, this.closeClick);
+        var editIcon = this.quickPopup.element.querySelector('.' + cls.EDIT_CLASS);
+        this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.EDIT_ICON_CLASS, false, editIcon, this.editClick);
+        var deleteIcon = this.quickPopup.element.querySelector('.' + cls.DELETE_CLASS);
+        this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.DELETE_ICON_CLASS, false, deleteIcon, this.deleteClick);
+        this.beforeQuickPopupOpen(target);
+    };
+    QuickPopups.prototype.cellClick = function (args) {
+        if (!this.parent.showQuickInfo || this.parent.currentView === 'MonthAgenda' || this.parent.isAdaptive) {
+            this.quickPopupHide();
+            return;
+        }
+        var target = closest(args.event.target, '.' + cls.WORK_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS + ',.' +
+            cls.HEADER_CELLS_CLASS);
+        if (isNullOrUndefined(target) || args.event.target.classList.contains(cls.MORE_INDICATOR_CLASS)) {
+            return;
+        }
+        var temp = {};
+        temp[this.parent.eventFields.startTime] = this.parent.activeCellsData.startTime;
+        temp[this.parent.eventFields.endTime] = this.parent.activeCellsData.endTime;
+        temp[this.parent.eventFields.isAllDay] = this.parent.activeCellsData.isAllDay;
+        var cellDetails = this.getFormattedString(temp);
+        var cellTemplate = "<div class=\"" + cls.POPUP_HEADER_CLASS + "\"><div class=\"" + cls.POPUP_HEADER_ICON_WRAPPER + "\">" +
+            ("<button class=\"" + cls.CLOSE_CLASS + "\" title=\"" + this.l10n.getConstant('close') + "\"></button></div></div>") +
+            ("<div class=\"" + cls.POPUP_CONTENT_CLASS + "\"><table class=\"" + cls.POPUP_TABLE_CLASS + "\"><tbody><tr><td>") +
+            ("<form class=\"" + cls.FORM_CLASS + "\" onsubmit=\"return false;\"><input class=\"" + cls.SUBJECT_CLASS + "\" type=\"text\" ") +
+            ("name=\"" + this.parent.eventFields.subject + "\" /></form></td></tr><tr><td><div class=\"" + cls.DATE_TIME_CLASS + "\">") +
+            ("<div class=\"" + cls.DATE_TIME_ICON_CLASS + " " + cls.ICON + "\"></div><div class=\"" + cls.DATE_TIME_DETAILS_CLASS + " ") +
+            (cls.TEXT_ELLIPSIS + "\">" + cellDetails.details + "</div></div>") +
+            ((this.parent.activeViewOptions.group.resources.length > 0 ? "<div class=\"" + cls.RESOURCE_CLASS + "\">" +
+                ("<div class=\"" + cls.RESOURCE_ICON_CLASS + " " + cls.ICON + " \"></div><div class=\"" + cls.RESOURCE_DETAILS_CLASS + " ") +
+                (cls.TEXT_ELLIPSIS + "\">" + this.getResourceText(args, 'cell') + "</div></div>") : '') + "</td></tr>") +
+            ("</tbody></table></div><div class=\"" + cls.POPUP_FOOTER_CLASS + "\"><button class=\"" + (cls.QUICK_POPUP_EVENT_DETAILS_CLASS + ' ' +
+                cls.TEXT_ELLIPSIS) + "\" title=\"" + this.l10n.getConstant('moreDetails') + "\">" + this.l10n.getConstant('moreDetails') + "</button>") +
+            ("<button class=\"" + cls.EVENT_CREATE_CLASS + " " + cls.TEXT_ELLIPSIS + "\" title=\"" + this.l10n.getConstant('save') + "\">") +
+            (this.l10n.getConstant('save') + "</button></div>");
+        var quickCellPopup = createElement('div', { className: cls.CELL_POPUP_CLASS, innerHTML: cellTemplate });
+        Input.createInput({
+            element: quickCellPopup.querySelector('.' + cls.SUBJECT_CLASS),
+            properties: { placeholder: this.l10n.getConstant('addTitle') }
+        });
+        var closeIcon = quickCellPopup.querySelector('.' + cls.CLOSE_CLASS);
+        this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.CLOSE_ICON_CLASS, false, closeIcon, this.quickPopupHide);
+        var moreButton = quickCellPopup.querySelector('.' + cls.QUICK_POPUP_EVENT_DETAILS_CLASS);
+        this.renderButton('e-flat', '', false, moreButton, this.detailsClick);
+        var saveButton = quickCellPopup.querySelector('.' + cls.EVENT_CREATE_CLASS);
+        this.renderButton('e-flat e-primary', '', this.parent.activeViewOptions.readonly, saveButton, this.saveClick);
+        this.quickPopup.content = quickCellPopup;
+        this.quickPopup.dataBind();
+        this.applyFormValidation();
+        if (this.morePopup) {
+            this.morePopup.hide();
+        }
+        var isSameTarget = this.quickPopup.relateTo === target;
+        this.quickPopup.relateTo = target;
+        if (isSameTarget && this.quickPopup.element.classList.contains(cls.POPUP_OPEN)) {
+            quickCellPopup.querySelector('.' + cls.SUBJECT_CLASS).focus();
+        }
+        else {
+            this.beforeQuickPopupOpen(target);
+        }
+    };
+    QuickPopups.prototype.eventClick = function (events) {
+        if (this.parent.eventTooltip) {
+            this.parent.eventTooltip.close();
+        }
+        if (!this.parent.showQuickInfo) {
+            return;
+        }
+        if (this.parent.isAdaptive && this.isMultipleEventSelect) {
+            this.updateTapHoldEventPopup(closest(events.element, '.' + cls.APPOINTMENT_CLASS));
+        }
+        else {
+            var eventData = events.event;
+            var args = this.getFormattedString(eventData);
+            var eventTemplate = "<div class=\"" + cls.POPUP_HEADER_CLASS + "\"><div class=\"" + cls.POPUP_HEADER_ICON_WRAPPER + "\">" +
+                ("<button class=\"" + (cls.EDIT_CLASS + ' ' + cls.ICON) + "\" title=\"" + this.l10n.getConstant('edit') + "\"></button>") +
+                ("<button class=\"" + (cls.DELETE_CLASS + ' ' + cls.ICON) + "\" title=\"" + this.l10n.getConstant('delete') + "\"></button>") +
+                ("<button class=\"" + cls.CLOSE_CLASS + "\" title=\"" + this.l10n.getConstant('close') + "\"></button></div>") +
+                ("<div class=\"" + cls.SUBJECT_WRAP + "\"><div class=\"" + cls.SUBJECT_CLASS + " " + cls.TEXT_ELLIPSIS + "\" title=\"" + args.eventSubject + "\">") +
+                (args.eventSubject + "</div></div ></div><div class=\"" + cls.POPUP_CONTENT_CLASS + "\"><div class=\"" + cls.DATE_TIME_CLASS + "\">") +
+                ("<div class=\"" + cls.DATE_TIME_ICON_CLASS + " " + cls.ICON + "\"></div><div class=\"" + cls.DATE_TIME_WRAPPER_CLASS + " ") +
+                (cls.TEXT_ELLIPSIS + "\"><div class=\"" + cls.DATE_TIME_DETAILS_CLASS + " " + cls.TEXT_ELLIPSIS + "\">" + args.details + "</div>") +
+                ((eventData[this.parent.eventFields.recurrenceRule] ? "<div class=\"" + cls.RECURRENCE_SUMMARY_CLASS + " " + cls.TEXT_ELLIPSIS + "\"" +
+                    (">" + this.getRecurrenceSummary(eventData) + "</div>") : '') + "</div></div>") +
+                ("" + (eventData[this.parent.eventFields.location] ? "<div class=\"" + cls.LOCATION_CLASS + "\"><div class=\"" +
+                    (cls.LOCATION_ICON_CLASS + " " + cls.ICON + "\"></div><div class=\"" + cls.LOCATION_DETAILS_CLASS + " " + cls.TEXT_ELLIPSIS + "\">") +
+                    (eventData[this.parent.eventFields.location] + "</div></div>") : '') + (eventData[this.parent.eventFields.startTimezone] ||
+                    eventData[this.parent.eventFields.endTimezone] ? "<div class=\"" + cls.TIME_ZONE_CLASS + "\"><div class=\"" +
+                    (cls.TIME_ZONE_ICON_CLASS + " " + cls.ICON + "\"></div><div class=\"" + cls.TIME_ZONE_DETAILS_CLASS + " " + cls.TEXT_ELLIPSIS + "\">") +
+                    (this.getTimezone(eventData) + " </div></div>") : '')) +
+                ("" + (eventData[this.parent.eventFields.description] ? "<div class=\"" + cls.DESCRIPTION_CLASS + "\"><div class=\"" +
+                    (cls.DESCRIPTION_ICON_CLASS + " " + cls.ICON + "\"></div><div class=\"" + cls.DESCRIPTION_DETAILS_CLASS + " " + cls.TEXT_ELLIPSIS + "\">") +
+                    (eventData[this.parent.eventFields.description] + "</div></div>") : '')) +
+                ((this.parent.resources.length > 0 ? "<div class=\"" + cls.RESOURCE_CLASS + "\"><div class=\"" +
+                    (cls.RESOURCE_ICON_CLASS + " " + cls.ICON + "\"></div><div class=\"" + cls.RESOURCE_DETAILS_CLASS + " " + cls.TEXT_ELLIPSIS + "\">") +
+                    (this.getResourceText(events, 'event') + "</div></div>") : '') + "</div>") +
+                ("<div class=\"" + cls.POPUP_FOOTER_CLASS + "\">" + (this.parent.isAdaptive ? '' : "<button class=\"" + cls.EDIT_EVENT_CLASS + " " +
+                    (cls.TEXT_ELLIPSIS + "\" title=\"" + this.l10n.getConstant('edit') + "\">" + this.l10n.getConstant('edit') + "</button>") +
+                    ("<button class=\"" + cls.DELETE_EVENT_CLASS + " " + cls.TEXT_ELLIPSIS + "\" title=\"" + this.l10n.getConstant('delete') + "\">") +
+                    (this.l10n.getConstant('delete') + "</button>")) + "</div >");
+            var quickEventPopup = createElement('div', { className: cls.EVENT_POPUP_CLASS, innerHTML: eventTemplate });
+            var readonly = this.parent.activeViewOptions.readonly;
+            var editIcon = quickEventPopup.querySelector('.' + cls.EDIT_CLASS);
             this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.EDIT_ICON_CLASS, false, editIcon, this.editClick);
-            var deleteIcon = this.quickPopup.element.querySelector('.' + cls.DELETE_CLASS);
-            this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.DELETE_ICON_CLASS, false, deleteIcon, this.deleteClick);
-            this.beforeQuickPopupOpen(target);
-        };
-        QuickPopups.prototype.cellClick = function (args) {
-            if (!this.parent.showQuickInfo || this.parent.currentView === 'MonthAgenda' || this.parent.isAdaptive) {
-                this.quickPopupHide();
-                return;
+            var deleteIcon = quickEventPopup.querySelector('.' + cls.DELETE_CLASS);
+            this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.DELETE_ICON_CLASS, readonly, deleteIcon, this.deleteClick);
+            var closeIcon = quickEventPopup.querySelector('.' + cls.CLOSE_CLASS);
+            this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.CLOSE_ICON_CLASS, false, closeIcon, this.quickPopupHide);
+            if (!this.parent.isAdaptive) {
+                var editButton = quickEventPopup.querySelector('.' + cls.EDIT_EVENT_CLASS);
+                this.renderButton('e-flat e-primary', '', false, editButton, this.editClick);
+                var deleteButton = quickEventPopup.querySelector('.' + cls.DELETE_EVENT_CLASS);
+                this.renderButton('e-flat', '', readonly, deleteButton, this.deleteClick);
             }
-            var target = ej2_base_1.closest(args.event.target, '.' + cls.WORK_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS + ',.' +
-                cls.HEADER_CELLS_CLASS);
-            if (ej2_base_1.isNullOrUndefined(target) || args.event.target.classList.contains(cls.MORE_INDICATOR_CLASS)) {
-                return;
-            }
-            var temp = {};
-            temp[this.parent.eventFields.startTime] = this.parent.activeCellsData.startTime;
-            temp[this.parent.eventFields.endTime] = this.parent.activeCellsData.endTime;
-            temp[this.parent.eventFields.isAllDay] = this.parent.activeCellsData.isAllDay;
-            var cellDetails = this.getFormattedString(temp);
-            var cellTemplate = "<div class=\"" + cls.POPUP_HEADER_CLASS + "\"><div class=\"" + cls.POPUP_HEADER_ICON_WRAPPER + "\">" +
-                ("<button class=\"" + cls.CLOSE_CLASS + "\" title=\"" + this.l10n.getConstant('close') + "\"></button></div></div>") +
-                ("<div class=\"" + cls.POPUP_CONTENT_CLASS + "\"><table class=\"" + cls.POPUP_TABLE_CLASS + "\"><tbody><tr><td>") +
-                ("<form class=\"" + cls.FORM_CLASS + "\" onsubmit=\"return false;\"><input class=\"" + cls.SUBJECT_CLASS + "\" type=\"text\" ") +
-                ("name=\"" + this.parent.eventFields.subject + "\" /></form></td></tr><tr><td><div class=\"" + cls.DATE_TIME_CLASS + "\">") +
-                ("<div class=\"" + cls.DATE_TIME_ICON_CLASS + " " + cls.ICON + "\"></div><div class=\"" + cls.DATE_TIME_DETAILS_CLASS + " ") +
-                (cls.TEXT_ELLIPSIS + "\">" + cellDetails.details + "</div></div>") +
-                ((this.parent.activeViewOptions.group.resources.length > 0 ? "<div class=\"" + cls.RESOURCE_CLASS + "\">" +
-                    ("<div class=\"" + cls.RESOURCE_ICON_CLASS + " " + cls.ICON + " \"></div><div class=\"" + cls.RESOURCE_DETAILS_CLASS + " ") +
-                    (cls.TEXT_ELLIPSIS + "\">" + this.getResourceText(args, 'cell') + "</div></div>") : '') + "</td></tr>") +
-                ("</tbody></table></div><div class=\"" + cls.POPUP_FOOTER_CLASS + "\"><button class=\"" + (cls.QUICK_POPUP_EVENT_DETAILS_CLASS + ' ' +
-                    cls.TEXT_ELLIPSIS) + "\" title=\"" + this.l10n.getConstant('moreDetails') + "\">" + this.l10n.getConstant('moreDetails') + "</button>") +
-                ("<button class=\"" + cls.EVENT_CREATE_CLASS + " " + cls.TEXT_ELLIPSIS + "\" title=\"" + this.l10n.getConstant('save') + "\">") +
-                (this.l10n.getConstant('save') + "</button></div>");
-            var quickCellPopup = ej2_base_2.createElement('div', { className: cls.CELL_POPUP_CLASS, innerHTML: cellTemplate });
-            ej2_inputs_1.Input.createInput({
-                element: quickCellPopup.querySelector('.' + cls.SUBJECT_CLASS),
-                properties: { placeholder: this.l10n.getConstant('addTitle') }
-            });
-            var closeIcon = quickCellPopup.querySelector('.' + cls.CLOSE_CLASS);
-            this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.CLOSE_ICON_CLASS, false, closeIcon, this.quickPopupHide);
-            var moreButton = quickCellPopup.querySelector('.' + cls.QUICK_POPUP_EVENT_DETAILS_CLASS);
-            this.renderButton('e-flat', '', false, moreButton, this.detailsClick);
-            var saveButton = quickCellPopup.querySelector('.' + cls.EVENT_CREATE_CLASS);
-            this.renderButton('e-flat e-primary', '', this.parent.activeViewOptions.readonly, saveButton, this.saveClick);
-            this.quickPopup.content = quickCellPopup;
+            this.quickPopup.content = quickEventPopup;
             this.quickPopup.dataBind();
-            this.applyFormValidation();
-            if (this.morePopup) {
+            if (this.morePopup && !closest(events.element, '.' + cls.MORE_EVENT_WRAPPER_CLASS)) {
                 this.morePopup.hide();
             }
-            var isSameTarget = this.quickPopup.relateTo === target;
-            this.quickPopup.relateTo = target;
-            if (!isSameTarget && !this.parent.isAdaptive) {
-                this.beforeQuickPopupOpen(target);
+            var isSameTarget = this.quickPopup.relateTo === closest(events.element, '.' + cls.APPOINTMENT_CLASS);
+            this.quickPopup.relateTo = this.parent.isAdaptive ? document.body :
+                closest(events.element, '.' + cls.APPOINTMENT_CLASS);
+            if (isSameTarget && this.quickPopup.element.classList.contains(cls.POPUP_OPEN)) {
+                editIcon.focus();
+                if (!this.parent.isAdaptive) {
+                    var editButton = quickEventPopup.querySelector('.' + cls.EDIT_EVENT_CLASS);
+                    editButton.focus();
+                }
+                this.applyEventColor();
             }
             else {
-                quickCellPopup.querySelector('.' + cls.SUBJECT_CLASS).focus();
+                this.beforeQuickPopupOpen(events.element);
             }
-        };
-        QuickPopups.prototype.eventClick = function (events) {
-            if (this.parent.eventTooltip) {
-                this.parent.eventTooltip.close();
-            }
-            if (!this.parent.showQuickInfo) {
-                return;
-            }
-            if (this.parent.isAdaptive && this.isMultipleEventSelect) {
-                this.updateTapHoldEventPopup(ej2_base_1.closest(events.element, '.' + cls.APPOINTMENT_CLASS));
-            }
-            else {
-                var eventData = events.event;
-                var args = this.getFormattedString(eventData);
-                var eventTemplate = "<div class=\"" + cls.POPUP_HEADER_CLASS + "\"><div class=\"" + cls.POPUP_HEADER_ICON_WRAPPER + "\">" +
-                    ("<button class=\"" + (cls.EDIT_CLASS + ' ' + cls.ICON) + "\" title=\"" + this.l10n.getConstant('edit') + "\"></button>") +
-                    ("<button class=\"" + (cls.DELETE_CLASS + ' ' + cls.ICON) + "\" title=\"" + this.l10n.getConstant('delete') + "\"></button>") +
-                    ("<button class=\"" + cls.CLOSE_CLASS + "\" title=\"" + this.l10n.getConstant('close') + "\"></button></div>") +
-                    ("<div class=\"" + cls.SUBJECT_WRAP + "\"><div class=\"" + cls.SUBJECT_CLASS + " " + cls.TEXT_ELLIPSIS + "\" title=\"" + args.eventSubject + "\">") +
-                    (args.eventSubject + "</div></div ></div><div class=\"" + cls.POPUP_CONTENT_CLASS + "\"><div class=\"" + cls.DATE_TIME_CLASS + "\">") +
-                    ("<div class=\"" + cls.DATE_TIME_ICON_CLASS + " " + cls.ICON + "\"></div><div class=\"" + cls.DATE_TIME_WRAPPER_CLASS + " ") +
-                    (cls.TEXT_ELLIPSIS + "\"><div class=\"" + cls.DATE_TIME_DETAILS_CLASS + " " + cls.TEXT_ELLIPSIS + "\">" + args.details + "</div>") +
-                    ((eventData[this.parent.eventFields.recurrenceRule] ? "<div class=\"" + cls.RECURRENCE_SUMMARY_CLASS + " " + cls.TEXT_ELLIPSIS + "\"" +
-                        (">" + this.getRecurrenceSummary(eventData) + "</div>") : '') + "</div></div>") +
-                    ("" + (eventData[this.parent.eventFields.location] ? "<div class=\"" + cls.LOCATION_CLASS + "\"><div class=\"" +
-                        (cls.LOCATION_ICON_CLASS + " " + cls.ICON + "\"></div><div class=\"" + cls.LOCATION_DETAILS_CLASS + " " + cls.TEXT_ELLIPSIS + "\">") +
-                        (eventData[this.parent.eventFields.location] + "</div></div>") : '') + (eventData[this.parent.eventFields.startTimezone] ||
-                        eventData[this.parent.eventFields.endTimezone] ? "<div class=\"" + cls.TIME_ZONE_CLASS + "\"><div class=\"" +
-                        (cls.TIME_ZONE_ICON_CLASS + " " + cls.ICON + "\"></div><div class=\"" + cls.TIME_ZONE_DETAILS_CLASS + " " + cls.TEXT_ELLIPSIS + "\">") +
-                        (this.getTimezone(eventData) + " </div></div>") : '')) +
-                    ("" + (eventData[this.parent.eventFields.description] ? "<div class=\"" + cls.DESCRIPTION_CLASS + "\"><div class=\"" +
-                        (cls.DESCRIPTION_ICON_CLASS + " " + cls.ICON + "\"></div><div class=\"" + cls.DESCRIPTION_DETAILS_CLASS + " " + cls.TEXT_ELLIPSIS + "\">") +
-                        (eventData[this.parent.eventFields.description] + "</div></div>") : '')) +
-                    ((this.parent.resources.length > 0 ? "<div class=\"" + cls.RESOURCE_CLASS + "\"><div class=\"" +
-                        (cls.RESOURCE_ICON_CLASS + " " + cls.ICON + "\"></div><div class=\"" + cls.RESOURCE_DETAILS_CLASS + " " + cls.TEXT_ELLIPSIS + "\">") +
-                        (this.getResourceText(events, 'event') + "</div></div>") : '') + "</div>") +
-                    ("<div class=\"" + cls.POPUP_FOOTER_CLASS + "\">" + (this.parent.isAdaptive ? '' : "<button class=\"" + cls.EDIT_EVENT_CLASS + " " +
-                        (cls.TEXT_ELLIPSIS + "\" title=\"" + this.l10n.getConstant('edit') + "\">" + this.l10n.getConstant('edit') + "</button>") +
-                        ("<button class=\"" + cls.DELETE_EVENT_CLASS + " " + cls.TEXT_ELLIPSIS + "\" title=\"" + this.l10n.getConstant('delete') + "\">") +
-                        (this.l10n.getConstant('delete') + "</button>")) + "</div >");
-                var quickEventPopup = ej2_base_2.createElement('div', { className: cls.EVENT_POPUP_CLASS, innerHTML: eventTemplate });
-                var readonly = this.parent.activeViewOptions.readonly;
-                var editIcon = quickEventPopup.querySelector('.' + cls.EDIT_CLASS);
-                this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.EDIT_ICON_CLASS, false, editIcon, this.editClick);
-                var deleteIcon = quickEventPopup.querySelector('.' + cls.DELETE_CLASS);
-                this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.DELETE_ICON_CLASS, readonly, deleteIcon, this.deleteClick);
-                var closeIcon = quickEventPopup.querySelector('.' + cls.CLOSE_CLASS);
-                this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.CLOSE_ICON_CLASS, false, closeIcon, this.quickPopupHide);
-                if (!this.parent.isAdaptive) {
-                    var editButton = quickEventPopup.querySelector('.' + cls.EDIT_EVENT_CLASS);
-                    this.renderButton('e-flat e-primary', '', false, editButton, this.editClick);
-                    var deleteButton = quickEventPopup.querySelector('.' + cls.DELETE_EVENT_CLASS);
-                    this.renderButton('e-flat', '', readonly, deleteButton, this.deleteClick);
+        }
+    };
+    QuickPopups.prototype.getResourceText = function (args, type) {
+        var resourceValue = '';
+        if (this.parent.activeViewOptions.group.resources.length === 0) {
+            var resourceCollection_1 = this.parent.resourceBase.resourceCollection.slice(-1)[0];
+            var resourceData = resourceCollection_1.dataSource;
+            var resourceIndex_1 = 0;
+            var eventData_1 = args.event;
+            resourceData.forEach(function (resource, index) {
+                if (resource[resourceCollection_1.idField] === eventData_1[resourceCollection_1.field]) {
+                    resourceIndex_1 = index;
                 }
-                this.quickPopup.content = quickEventPopup;
-                this.quickPopup.dataBind();
-                if (this.morePopup && !ej2_base_1.closest(events.element, '.' + cls.MORE_EVENT_WRAPPER_CLASS)) {
-                    this.morePopup.hide();
+            });
+            resourceValue = resourceData[resourceIndex_1][resourceCollection_1.textField];
+        }
+        else {
+            if (type === 'event') {
+                var eventData = args.event;
+                var resourceData_1 = eventData[this.parent.resourceBase.resourceCollection.slice(-1)[0].field];
+                if (!Array.isArray(resourceData_1)) {
+                    resourceData_1 = [resourceData_1];
                 }
-                var isSameTarget = this.quickPopup.relateTo === ej2_base_1.closest(events.element, '.' + cls.APPOINTMENT_CLASS);
-                this.quickPopup.relateTo = this.parent.isAdaptive ? document.body :
-                    ej2_base_1.closest(events.element, '.' + cls.APPOINTMENT_CLASS);
-                if (!isSameTarget) {
-                    this.beforeQuickPopupOpen(events.element);
+                var resourceCollection_2 = this.parent.resourceBase.lastResourceLevel;
+                if (!this.parent.activeViewOptions.group.byGroupID) {
+                    var resourceData_2 = this.parent.resourceBase.resourceCollection.slice(-1)[0]
+                        .dataSource;
+                    resourceCollection_2 = this.parent.resourceBase.lastResourceLevel.slice(0, resourceData_2.length);
                 }
-                else {
-                    editIcon.focus();
-                    if (!this.parent.isAdaptive) {
-                        var editButton = quickEventPopup.querySelector('.' + cls.EDIT_EVENT_CLASS);
-                        editButton.focus();
-                    }
-                    this.applyEventColor();
-                }
-            }
-        };
-        QuickPopups.prototype.getResourceText = function (args, type) {
-            var resourceValue = '';
-            if (this.parent.activeViewOptions.group.resources.length === 0) {
-                var resourceCollection_1 = this.parent.resourceBase.resourceCollection.slice(-1)[0];
-                var resourceData = resourceCollection_1.dataSource;
-                var resourceIndex_1 = 0;
-                var eventData_1 = args.event;
-                resourceData.forEach(function (resource, index) {
-                    if (resource[resourceCollection_1.idField] === eventData_1[resourceCollection_1.field]) {
-                        resourceIndex_1 = index;
-                    }
-                });
-                resourceValue = resourceData[resourceIndex_1][resourceCollection_1.textField];
-            }
-            else {
-                if (type === 'event') {
-                    var eventData = args.event;
-                    var resourceData_1 = eventData[this.parent.resourceBase.resourceCollection.slice(-1)[0].field];
-                    if (!Array.isArray(resourceData_1)) {
-                        resourceData_1 = [resourceData_1];
-                    }
-                    var resourceCollection_2 = this.parent.resourceBase.lastResourceLevel;
-                    if (!this.parent.activeViewOptions.group.byGroupID) {
-                        var resourceData_2 = this.parent.resourceBase.resourceCollection.slice(-1)[0]
-                            .dataSource;
-                        resourceCollection_2 = this.parent.resourceBase.lastResourceLevel.slice(0, resourceData_2.length);
-                    }
-                    resourceData_1.map(function (value, index) {
-                        return resourceCollection_2.forEach(function (obj) {
-                            if (obj.resourceData[obj.resource.idField] === value) {
-                                resourceValue += obj.resourceData[obj.resource.textField];
-                                if (resourceData_1.length !== index + 1) {
-                                    resourceValue += ', ';
-                                }
+                resourceData_1.map(function (value, index) {
+                    return resourceCollection_2.forEach(function (obj) {
+                        if (obj.resourceData[obj.resource.idField] === value) {
+                            resourceValue += obj.resourceData[obj.resource.textField];
+                            if (resourceData_1.length !== index + 1) {
+                                resourceValue += ', ';
                             }
-                        });
+                        }
                     });
-                }
-                else {
-                    var argsData = args;
-                    var groupIndex = !ej2_base_1.isNullOrUndefined(argsData.groupIndex) ? argsData.groupIndex : 0;
-                    var resourceDetails = this.parent.resourceBase.lastResourceLevel[groupIndex];
-                    resourceValue = resourceDetails.resourceData[resourceDetails.resource.textField];
-                }
+                });
             }
-            return resourceValue;
-        };
-        QuickPopups.prototype.getFormattedString = function (eventData) {
-            var fields = this.parent.eventFields;
-            var eventSubject = (eventData[fields.subject] || this.l10n.getConstant('noTitle'));
-            var startDate = eventData[fields.startTime];
-            var endDate = eventData[fields.endTime];
-            var startDateDetails = this.getDateFormat(startDate, 'long');
-            var endDateDetails = (eventData[fields.isAllDay] && endDate.getHours() === 0 && endDate.getMinutes() === 0) ?
-                this.getDateFormat(util.addDays(new Date(endDate.getTime()), -1), 'long') : this.getDateFormat(endDate, 'long');
-            var startTimeDetail = this.parent.getTimeString(startDate);
-            var endTimeDetail = this.parent.getTimeString(endDate);
-            var details;
-            var allDayLength = (endDate.getTime() - startDate.getTime()) / util.MS_PER_DAY;
-            var spanLength = endDate.getDate() !== startDate.getDate() &&
-                (endDate.getTime() - startDate.getTime()) / (60 * 60 * 1000) < 24 ? 1 : 0;
-            if (eventData[fields.isAllDay] || allDayLength >= 1 || spanLength > 0) {
-                details = startDateDetails + ' (' +
-                    (eventData[fields.isAllDay] ? this.l10n.getConstant('allDay') : startTimeDetail) + ')';
-                if (allDayLength > 1 || spanLength > 0) {
-                    details += '&nbsp;-&nbsp;' + endDateDetails + ' (' +
-                        (eventData[fields.isAllDay] ? this.l10n.getConstant('allDay') : endTimeDetail) + ')';
-                }
-            }
             else {
-                details = startDateDetails + ' (' + (startTimeDetail + '&nbsp;-&nbsp;' + endTimeDetail) + ')';
+                var argsData = args;
+                var groupIndex = !isNullOrUndefined(argsData.groupIndex) ? argsData.groupIndex : 0;
+                var resourceDetails = this.parent.resourceBase.lastResourceLevel[groupIndex];
+                resourceValue = resourceDetails.resourceData[resourceDetails.resource.textField];
             }
-            return { eventSubject: eventSubject, details: details };
-        };
-        QuickPopups.prototype.moreEventClick = function (data, groupIndex) {
-            this.quickPopupHide(true);
-            var moreEventContentEle = this.morePopup.element.querySelector('.' + cls.MORE_EVENT_CONTENT_CLASS);
-            if (moreEventContentEle) {
-                ej2_base_2.remove(moreEventContentEle);
+        }
+        return resourceValue;
+    };
+    QuickPopups.prototype.getFormattedString = function (eventData) {
+        var fields = this.parent.eventFields;
+        var eventSubject = (eventData[fields.subject] || this.l10n.getConstant('noTitle'));
+        var startDate = eventData[fields.startTime];
+        var endDate = eventData[fields.endTime];
+        var startDateDetails = this.getDateFormat(startDate, 'long');
+        var endDateDetails = (eventData[fields.isAllDay] && endDate.getHours() === 0 && endDate.getMinutes() === 0) ?
+            this.getDateFormat(util.addDays(new Date(endDate.getTime()), -1), 'long') : this.getDateFormat(endDate, 'long');
+        var startTimeDetail = this.parent.getTimeString(startDate);
+        var endTimeDetail = this.parent.getTimeString(endDate);
+        var details;
+        var allDayLength = (endDate.getTime() - startDate.getTime()) / util.MS_PER_DAY;
+        var spanLength = endDate.getDate() !== startDate.getDate() &&
+            (endDate.getTime() - startDate.getTime()) / (60 * 60 * 1000) < 24 ? 1 : 0;
+        if (eventData[fields.isAllDay] || allDayLength >= 1 || spanLength > 0) {
+            details = startDateDetails + ' (' +
+                (eventData[fields.isAllDay] ? this.l10n.getConstant('allDay') : startTimeDetail) + ')';
+            if (allDayLength > 1 || spanLength > 0) {
+                details += '&nbsp;-&nbsp;' + endDateDetails + ' (' +
+                    (eventData[fields.isAllDay] ? this.l10n.getConstant('allDay') : endTimeDetail) + ')';
             }
-            var selectedDate = ((data.date).getTime()).toString();
-            var target = ej2_base_1.closest(data.element, '.' + cls.MORE_INDICATOR_CLASS);
-            this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DAY_CLASS).innerHTML = this.getDateFormat(data.date, 'E');
-            var dateElement = this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS);
-            dateElement.innerHTML = this.getDateFormat(data.date, 'd');
-            dateElement.setAttribute('data-date', selectedDate);
-            var groupOrder;
-            if (!ej2_base_1.isNullOrUndefined(groupIndex)) {
-                dateElement.setAttribute('data-group-index', groupIndex);
-                groupOrder = this.parent.resourceBase.lastResourceLevel[parseInt(groupIndex, 10)].groupOrder;
+        }
+        else {
+            details = startDateDetails + ' (' + (startTimeDetail + '&nbsp;-&nbsp;' + endTimeDetail) + ')';
+        }
+        return { eventSubject: eventSubject, details: details };
+    };
+    QuickPopups.prototype.moreEventClick = function (data, groupIndex) {
+        this.quickPopupHide(true);
+        var moreEventContentEle = this.morePopup.element.querySelector('.' + cls.MORE_EVENT_CONTENT_CLASS);
+        if (moreEventContentEle) {
+            remove(moreEventContentEle);
+        }
+        var selectedDate = ((data.date).getTime()).toString();
+        var target = closest(data.element, '.' + cls.MORE_INDICATOR_CLASS);
+        this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DAY_CLASS).innerHTML = this.getDateFormat(data.date, 'E');
+        var dateElement = this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS);
+        dateElement.innerHTML = this.getDateFormat(data.date, 'd');
+        dateElement.setAttribute('data-date', selectedDate);
+        var groupOrder;
+        if (!isNullOrUndefined(groupIndex)) {
+            dateElement.setAttribute('data-group-index', groupIndex);
+            groupOrder = this.parent.resourceBase.lastResourceLevel[parseInt(groupIndex, 10)].groupOrder;
+        }
+        var moreEventElements = this.createMoreEventList(data.event, groupOrder, groupIndex);
+        this.morePopup.element.querySelector('.' + cls.MORE_EVENT_POPUP_CLASS).appendChild(moreEventElements);
+        removeClass(this.morePopup.element.querySelector('.' + cls.MORE_EVENT_DATE_HEADER_CLASS).children, cls.CURRENTDATE_CLASS);
+        if (util.resetTime(data.date).getTime() === util.resetTime(new Date()).getTime()) {
+            addClass(this.morePopup.element.querySelector('.' + cls.MORE_EVENT_DATE_HEADER_CLASS).children, cls.CURRENTDATE_CLASS);
+        }
+        this.morePopup.relateTo = closest(target, '.' + cls.WORK_CELLS_CLASS);
+        var eventProp = { type: 'EventContainer', data: data, cancel: false, element: this.morePopup.element };
+        this.parent.trigger(event.popupOpen, eventProp);
+        if (eventProp.cancel) {
+            return;
+        }
+        this.morePopup.show();
+    };
+    QuickPopups.prototype.saveClick = function () {
+        if (!this.quickPopup.element.querySelector('.' + cls.FORM_CLASS).ej2_instances[0].validate()) {
+            return;
+        }
+        var fields = this.parent.eventFields;
+        var saveObj = {};
+        saveObj[fields.id] = this.parent.eventBase.getEventMaxId() + 1;
+        saveObj[fields.subject] = this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS).value ||
+            this.parent.eventSettings.fields.subject.default;
+        saveObj[fields.startTime] = this.parent.activeCellsData.startTime;
+        saveObj[fields.endTime] = this.parent.activeCellsData.endTime;
+        saveObj[fields.isAllDay] = this.parent.activeCellsData.isAllDay;
+        if (this.parent.resourceBase) {
+            this.parent.resourceBase.setResourceValues(saveObj, true);
+        }
+        this.crudAction.addEvent(saveObj);
+        this.quickPopupHide();
+    };
+    QuickPopups.prototype.detailsClick = function () {
+        var subject = this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS).value;
+        if (subject !== '') {
+            var args = extend(this.parent.activeCellsData, { subject: subject });
+        }
+        this.fieldValidator.destroyToolTip();
+        this.quickPopupHide();
+        this.parent.eventWindow.openEditor(this.parent.activeCellsData, 'Add');
+    };
+    QuickPopups.prototype.editClick = function () {
+        this.quickPopupHide(true);
+        var data = this.parent.activeEventData.event;
+        this.parent.currentAction = 'EditSeries';
+        if (!isNullOrUndefined(data[this.parent.eventFields.recurrenceRule])) {
+            this.parent.currentAction = 'EditOccurrence';
+            this.openRecurrenceAlert();
+        }
+        else {
+            this.parent.eventWindow.openEditor(data, this.parent.currentAction);
+        }
+    };
+    QuickPopups.prototype.deleteClick = function () {
+        this.quickPopupHide(true);
+        this.parent.currentAction = 'Delete';
+        if (this.parent.activeEventData.event[this.parent.eventFields.recurrenceRule]) {
+            this.openRecurrenceAlert();
+        }
+        else {
+            this.openDeleteAlert();
+        }
+    };
+    QuickPopups.prototype.updateMoreEventContent = function () {
+        if (this.morePopup.element.classList.contains('e-popup-close')) {
+            return;
+        }
+        var moreEventContentEle = this.morePopup.element.querySelector('.' + cls.MORE_EVENT_CONTENT_CLASS);
+        if (moreEventContentEle) {
+            remove(moreEventContentEle);
+        }
+        var dateElement = this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS);
+        var startDate = this.parent.getDateFromElement(dateElement);
+        var endDate = util.addDays(startDate, 1);
+        var groupIndex = dateElement.getAttribute('data-group-index');
+        var data;
+        var groupOrder;
+        if (!isNullOrUndefined(groupIndex)) {
+            data = this.parent.resourceBase.lastResourceLevel[parseInt(groupIndex, 10)];
+            groupOrder = data.groupOrder;
+        }
+        var filteredEvents = this.parent.eventBase.filterEvents(startDate, endDate, this.parent.eventsProcessed, data);
+        var moreElement = this.createMoreEventList(filteredEvents, groupOrder, groupIndex);
+        this.morePopup.element.querySelector('.' + cls.MORE_EVENT_POPUP_CLASS).appendChild(moreElement);
+    };
+    QuickPopups.prototype.closeClick = function () {
+        this.quickPopupHide();
+        this.morePopup.hide();
+    };
+    QuickPopups.prototype.dialogButtonClick = function (event) {
+        var cancelButton = this.quickDialog.element.querySelector('.e-quick-alertcancel');
+        if (event.target.classList.contains('e-quick-alertok') &&
+            (cancelButton.classList.contains('e-quick-alert-cancelpresent'))) {
+            removeClass([cancelButton], 'e-quick-alert-cancelpresent');
+            this.parent.eventWindow.eventSave(this.l10n.getConstant('ok'));
+            return;
+        }
+        this.quickDialog.hide();
+        if (event.target.classList.contains(cls.QUICK_DIALOG_EDIT_EVENT_CLASS)) {
+            this.parent.currentAction = (this.parent.currentAction === 'Delete') ? 'DeleteOccurrence' : 'EditOccurrence';
+            switch (this.parent.currentAction) {
+                case 'EditOccurrence':
+                    this.parent.eventWindow.openEditor(this.parent.activeEventData.event, this.parent.currentAction);
+                    break;
+                case 'DeleteOccurrence':
+                    this.crudAction.deleteEvent(this.parent.activeEventData.event, this.parent.currentAction);
+                    break;
             }
-            var moreEventElements = this.createMoreEventList(data.event, groupOrder, groupIndex);
-            this.morePopup.element.querySelector('.' + cls.MORE_EVENT_POPUP_CLASS).appendChild(moreEventElements);
-            ej2_base_2.removeClass(this.morePopup.element.querySelector('.' + cls.MORE_EVENT_DATE_HEADER_CLASS).children, cls.CURRENTDATE_CLASS);
-            if (util.resetTime(data.date).getTime() === util.resetTime(new Date()).getTime()) {
-                ej2_base_2.addClass(this.morePopup.element.querySelector('.' + cls.MORE_EVENT_DATE_HEADER_CLASS).children, cls.CURRENTDATE_CLASS);
+        }
+        else if (event.target.classList.contains(cls.QUICK_DIALOG_EDIT_SERIES_CLASS)) {
+            this.parent.currentAction = (this.parent.currentAction === 'Delete') ? 'DeleteSeries' : 'EditSeries';
+            switch (this.parent.currentAction) {
+                case 'EditSeries':
+                    var parentEvent = this.parent.eventBase.getRecurrenceEvent(this.parent.activeEventData.event);
+                    this.parent.eventWindow.openEditor(parentEvent, this.parent.currentAction);
+                    break;
+                case 'DeleteSeries':
+                    this.crudAction.deleteEvent(this.parent.activeEventData.event, this.parent.currentAction);
+                    break;
             }
-            this.morePopup.relateTo = ej2_base_1.closest(target, '.' + cls.WORK_CELLS_CLASS);
-            var eventProp = { type: 'EventContainer', data: data, cancel: false, element: this.morePopup.element };
-            this.parent.trigger(event.popupOpen, eventProp);
-            if (eventProp.cancel) {
-                return;
+        }
+        else if (event.target.classList.contains(cls.QUICK_DIALOG_DELETE_CLASS)) {
+            this.crudAction.deleteEvent(this.parent.activeEventData.event, this.parent.currentAction);
+        }
+    };
+    QuickPopups.prototype.updateTapHoldEventPopup = function (target) {
+        var selectedElements = this.parent.eventBase.getSelectedEventElements(target);
+        this.parent.activeEventData = this.parent.eventBase.getSelectedEvents();
+        if (selectedElements.length > 0) {
+            var eventObj = this.parent.eventBase.getEventByGuid(selectedElements[0].getAttribute('data-guid'));
+            var titleContent = (selectedElements.length === 1) ?
+                (eventObj[this.parent.eventFields.subject] || this.l10n.getConstant('noTitle')) :
+                '(' + selectedElements.length + ')' + '&nbsp;' + this.l10n.getConstant('selectedItems');
+            this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS).innerHTML = titleContent;
+            if (selectedElements.length > 1) {
+                addClass([this.quickPopup.element.querySelector('.' + cls.EDIT_ICON_CLASS)], cls.HIDDEN_CLASS);
             }
-            this.morePopup.show();
-        };
-        QuickPopups.prototype.saveClick = function () {
-            if (!this.quickPopup.element.querySelector('.' + cls.FORM_CLASS).ej2_instances[0].validate()) {
-                return;
-            }
-            var fields = this.parent.eventFields;
-            var saveObj = {};
-            saveObj[fields.id] = this.parent.eventBase.getEventMaxId() + 1;
-            saveObj[fields.subject] = this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS).value ||
-                this.parent.eventSettings.fields.subject.default;
-            saveObj[fields.startTime] = this.parent.activeCellsData.startTime;
-            saveObj[fields.endTime] = this.parent.activeCellsData.endTime;
-            saveObj[fields.isAllDay] = this.parent.activeCellsData.isAllDay;
-            if (this.parent.resourceBase) {
-                this.parent.resourceBase.setResourceValues(saveObj, true);
-            }
-            this.crudAction.addEvent(saveObj);
-            this.quickPopupHide();
-        };
-        QuickPopups.prototype.detailsClick = function () {
-            var subject = this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS).value;
-            if (subject !== '') {
-                var args = ej2_base_2.extend(this.parent.activeCellsData, { subject: subject });
-            }
-            this.fieldValidator.destroyToolTip();
-            this.quickPopupHide();
-            this.parent.eventWindow.openEditor(this.parent.activeCellsData, 'Add');
-        };
-        QuickPopups.prototype.editClick = function () {
-            this.quickPopupHide(true);
-            var data = this.parent.activeEventData.event;
-            this.parent.currentAction = 'EditSeries';
-            if (!ej2_base_1.isNullOrUndefined(data[this.parent.eventFields.recurrenceRule])) {
-                this.parent.currentAction = 'EditOccurrence';
-                this.openRecurrenceAlert();
-            }
             else {
-                this.parent.eventWindow.openEditor(data, this.parent.currentAction);
+                removeClass([this.quickPopup.element.querySelector('.' + cls.EDIT_ICON_CLASS)], cls.HIDDEN_CLASS);
             }
-        };
-        QuickPopups.prototype.deleteClick = function () {
-            this.quickPopupHide(true);
-            this.parent.currentAction = 'Delete';
-            if (this.parent.activeEventData.event[this.parent.eventFields.recurrenceRule]) {
-                this.openRecurrenceAlert();
-            }
-            else {
-                this.openDeleteAlert();
-            }
-        };
-        QuickPopups.prototype.updateMoreEventContent = function () {
-            if (this.morePopup.element.classList.contains('e-popup-close')) {
-                return;
-            }
-            var moreEventContentEle = this.morePopup.element.querySelector('.' + cls.MORE_EVENT_CONTENT_CLASS);
-            if (moreEventContentEle) {
-                ej2_base_2.remove(moreEventContentEle);
-            }
-            var dateElement = this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS);
-            var startDate = this.parent.getDateFromElement(dateElement);
-            var endDate = util.addDays(startDate, 1);
-            var groupIndex = dateElement.getAttribute('data-group-index');
-            var data;
-            var groupOrder;
-            if (!ej2_base_1.isNullOrUndefined(groupIndex)) {
-                data = this.parent.resourceBase.lastResourceLevel[parseInt(groupIndex, 10)];
-                groupOrder = data.groupOrder;
-            }
-            var filteredEvents = this.parent.eventBase.filterEvents(startDate, endDate, this.parent.eventsProcessed, data);
-            var moreElement = this.createMoreEventList(filteredEvents, groupOrder, groupIndex);
-            this.morePopup.element.querySelector('.' + cls.MORE_EVENT_POPUP_CLASS).appendChild(moreElement);
-        };
-        QuickPopups.prototype.closeClick = function () {
+        }
+        else {
+            this.parent.selectedElements = [];
             this.quickPopupHide();
-            this.morePopup.hide();
+        }
+    };
+    QuickPopups.prototype.getTimezone = function (event) {
+        var zoneDetails = '';
+        zoneDetails += event[this.parent.eventFields.startTimezone] || '';
+        zoneDetails += zoneDetails === '' ? '' : ' - ';
+        zoneDetails += event[this.parent.eventFields.endTimezone] || '';
+        return zoneDetails;
+    };
+    QuickPopups.prototype.getRecurrenceSummary = function (event) {
+        var recurrenceEditor = this.parent.eventWindow.getRecurrenceEditorInstance();
+        var ruleSummary = recurrenceEditor.getRuleSummary(event[this.parent.eventFields.recurrenceRule]);
+        return ruleSummary.charAt(0).toUpperCase() + ruleSummary.slice(1);
+    };
+    QuickPopups.prototype.getDateFormat = function (date, formatString) {
+        return this.parent.globalize.formatDate(date, { skeleton: formatString });
+    };
+    QuickPopups.prototype.getDataFromTarget = function (target) {
+        if (target.classList.contains(cls.APPOINTMENT_CLASS)) {
+            return this.parent.activeEventData.event;
+        }
+        return this.parent.activeCellsData;
+    };
+    QuickPopups.prototype.beforeQuickDialogClose = function () {
+        this.parent.eventBase.focusElement();
+    };
+    QuickPopups.prototype.beforeQuickPopupOpen = function (target) {
+        var isEventPopup = this.quickPopup.element.querySelector('.' + cls.EVENT_POPUP_CLASS);
+        var popupType = this.parent.isAdaptive ? isEventPopup ? 'ViewEventInfo' : 'EditEventInfo' : 'QuickInfo';
+        var eventProp = {
+            type: popupType, cancel: false, data: this.getDataFromTarget(target),
+            target: target, element: this.quickPopup.element
         };
-        QuickPopups.prototype.dialogButtonClick = function (event) {
-            var cancelButton = this.quickDialog.element.querySelector('.e-quick-alertcancel');
-            if (event.target.classList.contains('e-quick-alertok') &&
-                (cancelButton.classList.contains('e-quick-alert-cancelpresent'))) {
-                ej2_base_2.removeClass([cancelButton], 'e-quick-alert-cancelpresent');
-                this.parent.eventWindow.eventSave(this.l10n.getConstant('ok'));
-                return;
+        this.parent.trigger(event.popupOpen, eventProp);
+        if (eventProp.cancel) {
+            this.destroyButtons();
+            if (eventProp.element.classList.contains(cls.POPUP_OPEN)) {
+                this.quickPopupClose();
             }
-            this.quickDialog.hide();
-            if (event.target.classList.contains(cls.QUICK_DIALOG_EDIT_EVENT_CLASS)) {
-                this.parent.currentAction = (this.parent.currentAction === 'Delete') ? 'DeleteOccurrence' : 'EditOccurrence';
-                switch (this.parent.currentAction) {
-                    case 'EditOccurrence':
-                        this.parent.eventWindow.openEditor(this.parent.activeEventData.event, this.parent.currentAction);
-                        break;
-                    case 'DeleteOccurrence':
-                        this.crudAction.deleteEvent(this.parent.activeEventData.event, this.parent.currentAction);
-                        break;
-                }
-            }
-            else if (event.target.classList.contains(cls.QUICK_DIALOG_EDIT_SERIES_CLASS)) {
-                this.parent.currentAction = (this.parent.currentAction === 'Delete') ? 'DeleteSeries' : 'EditSeries';
-                switch (this.parent.currentAction) {
-                    case 'EditSeries':
-                        var parentEvent = this.parent.eventBase.getRecurrenceEvent(this.parent.activeEventData.event);
-                        this.parent.eventWindow.openEditor(parentEvent, this.parent.currentAction);
-                        break;
-                    case 'DeleteSeries':
-                        this.crudAction.deleteEvent(this.parent.activeEventData.event, this.parent.currentAction);
-                        break;
-                }
-            }
-            else if (event.target.classList.contains(cls.QUICK_DIALOG_DELETE_CLASS)) {
-                this.crudAction.deleteEvent(this.parent.activeEventData.event, this.parent.currentAction);
-            }
-        };
-        QuickPopups.prototype.updateTapHoldEventPopup = function (target) {
-            var selectedElements = this.parent.eventBase.getSelectedEventElements(target);
-            this.parent.activeEventData = this.parent.eventBase.getSelectedEvents();
-            if (selectedElements.length > 0) {
-                var eventObj = this.parent.eventBase.getEventByGuid(selectedElements[0].getAttribute('data-guid'));
-                var titleContent = (selectedElements.length === 1) ?
-                    (eventObj[this.parent.eventFields.subject] || this.l10n.getConstant('noTitle')) :
-                    '(' + selectedElements.length + ')' + '&nbsp;' + this.l10n.getConstant('selectedItems');
-                this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS).innerHTML = titleContent;
-                if (selectedElements.length > 1) {
-                    ej2_base_2.addClass([this.quickPopup.element.querySelector('.' + cls.EDIT_ICON_CLASS)], cls.HIDDEN_CLASS);
-                }
-                else {
-                    ej2_base_2.removeClass([this.quickPopup.element.querySelector('.' + cls.EDIT_ICON_CLASS)], cls.HIDDEN_CLASS);
-                }
-            }
-            else {
-                this.parent.selectedElements = [];
-                this.quickPopupHide();
-            }
-        };
-        QuickPopups.prototype.getTimezone = function (event) {
-            var zoneDetails = '';
-            zoneDetails += event[this.parent.eventFields.startTimezone] || '';
-            zoneDetails += zoneDetails === '' ? '' : ' - ';
-            zoneDetails += event[this.parent.eventFields.endTimezone] || '';
-            return zoneDetails;
-        };
-        QuickPopups.prototype.getRecurrenceSummary = function (event) {
-            var recurrenceEditor = this.parent.eventWindow.getRecurrenceEditorInstance();
-            var ruleSummary = recurrenceEditor.getRuleSummary(event[this.parent.eventFields.recurrenceRule]);
-            return ruleSummary.charAt(0).toUpperCase() + ruleSummary.slice(1);
-        };
-        QuickPopups.prototype.getDateFormat = function (date, formatString) {
-            return this.parent.globalize.formatDate(date, { skeleton: formatString });
-        };
-        QuickPopups.prototype.getDataFromTarget = function (target) {
-            if (target.classList.contains(cls.APPOINTMENT_CLASS)) {
-                return this.parent.activeEventData.event;
-            }
-            return this.parent.activeCellsData;
-        };
-        QuickPopups.prototype.beforeQuickDialogClose = function () {
-            this.parent.eventBase.focusElement();
-        };
-        QuickPopups.prototype.beforeQuickPopupOpen = function (target) {
-            var isEventPopup = this.quickPopup.element.querySelector('.' + cls.EVENT_POPUP_CLASS);
-            var popupType = this.parent.isAdaptive ? isEventPopup ? 'ViewEventInfo' : 'EditEventInfo' : 'QuickInfo';
-            var eventProp = {
-                type: popupType, cancel: false, data: this.getDataFromTarget(target),
-                target: target, element: this.quickPopup.element
-            };
-            this.parent.trigger(event.popupOpen, eventProp);
-            if (eventProp.cancel) {
-                this.destroyButtons();
-                this.quickPopup.element.innerHTML = '';
-                return;
-            }
-            var display = this.quickPopup.element.style.display;
+            this.quickPopup.element.innerHTML = '';
+            return;
+        }
+        var display = this.quickPopup.element.style.display;
+        this.quickPopup.element.style.display = 'block';
+        if (this.parent.isAdaptive) {
+            this.quickPopup.element.removeAttribute('style');
             this.quickPopup.element.style.display = 'block';
-            if (this.parent.isAdaptive) {
-                this.quickPopup.element.removeAttribute('style');
-                this.quickPopup.element.style.display = 'block';
-                this.quickPopup.element.style.height = ej2_base_1.formatUnit((popupType === 'EditEventInfo') ? 65 : window.innerHeight);
+            this.quickPopup.element.style.height = formatUnit((popupType === 'EditEventInfo') ? 65 : window.innerHeight);
+        }
+        else {
+            this.quickPopup.offsetX = -(this.quickPopup.element.offsetWidth / 2);
+            this.quickPopup.offsetY = -this.quickPopup.element.offsetHeight;
+        }
+        if (isEventPopup) {
+            this.applyEventColor();
+        }
+        this.quickPopup.element.style.display = display;
+        this.quickPopup.dataBind();
+        this.quickPopup.show();
+    };
+    QuickPopups.prototype.applyEventColor = function () {
+        var color = this.parent.activeEventData.element.style.backgroundColor;
+        if (color === '') {
+            return;
+        }
+        var colorEle = this.quickPopup.element.querySelector('.' + cls.POPUP_HEADER_CLASS);
+        if (this.quickPopup.element.querySelector('.' + cls.POPUP_FOOTER_CLASS).offsetParent) {
+            colorEle = this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS);
+            colorEle.style.borderLeftColor = color;
+            color = "rgba(" + color.match(/\d+/g).join() + ",0.3)";
+        }
+        colorEle.style.backgroundColor = color;
+    };
+    QuickPopups.prototype.quickPopupOpen = function () {
+        if (this.parent.isAdaptive) {
+            return;
+        }
+        if (this.quickPopup.element.querySelector('.' + cls.CELL_POPUP_CLASS)) {
+            var subjectElement = this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS);
+            if (subjectElement) {
+                subjectElement.focus();
             }
-            else {
-                this.quickPopup.offsetX = -(this.quickPopup.element.offsetWidth / 2);
-                this.quickPopup.offsetY = -this.quickPopup.element.offsetHeight;
+        }
+        else {
+            var editElement = this.quickPopup.element.querySelector('.' + cls.EDIT_EVENT_CLASS);
+            if (editElement) {
+                editElement.focus();
             }
-            if (isEventPopup) {
-                this.applyEventColor();
+            var editIcon = this.quickPopup.element.querySelector('.' + cls.EDIT_CLASS);
+            if (editIcon) {
+                editIcon.focus();
             }
-            this.quickPopup.element.style.display = display;
-            this.quickPopup.dataBind();
-            this.quickPopup.show();
-        };
-        QuickPopups.prototype.applyEventColor = function () {
-            var color = this.parent.activeEventData.element.style.backgroundColor;
-            if (color === '') {
-                return;
+        }
+    };
+    QuickPopups.prototype.quickPopupClose = function () {
+        this.parent.eventBase.focusElement();
+        this.quickPopup.relateTo = cls.WORK_CELLS_CLASS;
+        this.fieldValidator.destroyToolTip();
+        this.destroyButtons();
+        this.quickPopup.element.innerHTML = '';
+    };
+    QuickPopups.prototype.morePopupOpen = function () {
+        this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS).focus();
+        this.morePopup.refreshPosition();
+    };
+    QuickPopups.prototype.morePopupClose = function () {
+        var moreWrapper = this.parent.element.querySelector('.' + cls.MORE_EVENT_WRAPPER_CLASS);
+        if (moreWrapper) {
+            moreWrapper.remove();
+        }
+    };
+    QuickPopups.prototype.quickPopupHide = function (hideAnimation) {
+        if (this.quickPopup.element.classList.contains('e-popup-open')) {
+            if (hideAnimation) {
+                var animation = this.quickPopup.hideAnimation;
+                this.quickPopup.hideAnimation = null;
+                this.quickPopup.hide();
+                this.quickPopup.hideAnimation = animation;
             }
-            var colorEle = this.quickPopup.element.querySelector('.' + cls.POPUP_HEADER_CLASS);
-            if (this.quickPopup.element.querySelector('.' + cls.POPUP_FOOTER_CLASS).offsetParent) {
-                colorEle = this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS);
-                colorEle.style.borderLeftColor = color;
-                color = "rgba(" + color.match(/\d+/g).join() + ",0.3)";
-            }
-            colorEle.style.backgroundColor = color;
-        };
-        QuickPopups.prototype.quickPopupOpen = function () {
-            if (this.parent.isAdaptive) {
-                return;
-            }
-            if (this.quickPopup.element.querySelector('.' + cls.CELL_POPUP_CLASS)) {
-                var subjectElement = this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS);
-                if (subjectElement) {
-                    subjectElement.focus();
-                }
-            }
             else {
-                var editElement = this.quickPopup.element.querySelector('.' + cls.EDIT_EVENT_CLASS);
-                if (editElement) {
-                    editElement.focus();
-                }
-                var editIcon = this.quickPopup.element.querySelector('.' + cls.EDIT_CLASS);
-                if (editIcon) {
-                    editIcon.focus();
-                }
+                this.quickPopup.hide();
             }
-        };
-        QuickPopups.prototype.quickPopupClose = function () {
-            this.parent.eventBase.focusElement();
-            this.quickPopup.relateTo = cls.WORK_CELLS_CLASS;
-            this.fieldValidator.destroyToolTip();
-            this.destroyButtons();
-            this.quickPopup.element.innerHTML = '';
-        };
-        QuickPopups.prototype.morePopupOpen = function () {
-            this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS).focus();
-            this.morePopup.refreshPosition();
-        };
-        QuickPopups.prototype.morePopupClose = function () {
-            var moreWrapper = this.parent.element.querySelector('.' + cls.MORE_EVENT_WRAPPER_CLASS);
-            if (moreWrapper) {
-                moreWrapper.remove();
+            this.isMultipleEventSelect = false;
+        }
+    };
+    QuickPopups.prototype.navigationClick = function (e) {
+        var navigateEle = closest(e.target, '.' + cls.NAVIGATE_CLASS);
+        if (!isNullOrUndefined(navigateEle)) {
+            var date = this.parent.getDateFromElement(e.currentTarget);
+            if (!isNullOrUndefined(date) && !this.parent.isAdaptive) {
+                this.closeClick();
+                this.parent.setProperties({ selectedDate: date }, true);
+                this.parent.changeView('Day');
             }
-        };
-        QuickPopups.prototype.quickPopupHide = function (hideAnimation) {
-            if (this.quickPopup.element.classList.contains('e-popup-open')) {
-                if (hideAnimation) {
-                    var animation = this.quickPopup.hideAnimation;
-                    this.quickPopup.hideAnimation = null;
-                    this.quickPopup.hide();
-                    this.quickPopup.hideAnimation = animation;
-                }
-                else {
-                    this.quickPopup.hide();
-                }
-                this.isMultipleEventSelect = false;
-            }
-        };
-        QuickPopups.prototype.navigationClick = function (e) {
-            var navigateEle = ej2_base_1.closest(e.target, '.' + cls.NAVIGATE_CLASS);
-            if (!ej2_base_1.isNullOrUndefined(navigateEle)) {
-                var date = this.parent.getDateFromElement(e.currentTarget);
-                if (!ej2_base_1.isNullOrUndefined(date) && !this.parent.isAdaptive) {
-                    this.closeClick();
-                    this.parent.setProperties({ selectedDate: date }, true);
-                    this.parent.changeView('Day');
-                }
-            }
-        };
-        QuickPopups.prototype.documentClick = function (e) {
-            var target = e.event.target;
-            var classNames = '.' + cls.POPUP_WRAPPER_CLASS + ',.' + cls.HEADER_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS +
-                ',.' + cls.WORK_CELLS_CLASS + ',.' + cls.APPOINTMENT_CLASS;
-            if (!ej2_base_1.closest(target, classNames)) {
-                this.quickPopupHide();
-            }
-            if (!ej2_base_1.closest(target, '.' + cls.MORE_POPUP_WRAPPER_CLASS) && !target.classList.contains(cls.MORE_INDICATOR_CLASS)
-                && (!ej2_base_1.closest(target, '.' + cls.POPUP_OPEN))) {
-                this.morePopup.hide();
-            }
-        };
-        QuickPopups.prototype.onClosePopup = function () {
+        }
+    };
+    QuickPopups.prototype.documentClick = function (e) {
+        var target = e.event.target;
+        var classNames = '.' + cls.POPUP_WRAPPER_CLASS + ',.' + cls.HEADER_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS +
+            ',.' + cls.WORK_CELLS_CLASS + ',.' + cls.APPOINTMENT_CLASS;
+        if (!closest(target, classNames)) {
             this.quickPopupHide();
-            this.parent.eventBase.focusElement();
-        };
-        QuickPopups.prototype.addEventListener = function () {
-            this.parent.on(event.cellClick, this.cellClick, this);
-            this.parent.on(event.eventClick, this.eventClick, this);
-            this.parent.on(event.documentClick, this.documentClick, this);
-            this.parent.on(event.dataReady, this.updateMoreEventContent, this);
-            this.parent.on(event.tapHoldReady, this.tapHoldEventPopup, this);
-        };
-        QuickPopups.prototype.removeEventListner = function () {
-            this.parent.off(event.cellClick, this.cellClick);
-            this.parent.off(event.eventClick, this.eventClick);
-            this.parent.off(event.documentClick, this.documentClick);
-            this.parent.off(event.dataReady, this.updateMoreEventContent);
-            this.parent.off(event.tapHoldReady, this.tapHoldEventPopup);
-        };
-        QuickPopups.prototype.destroyButtons = function () {
-            var buttonCollections = [].slice.call(this.quickPopup.element.querySelectorAll('.e-control.e-btn'));
-            buttonCollections.forEach(function (button) {
-                var instance = button.ej2_instances[0];
-                if (instance) {
-                    instance.destroy();
-                }
-            });
-        };
-        QuickPopups.prototype.destroy = function () {
-            this.fieldValidator.destroy();
-            this.removeEventListner();
-            this.destroyButtons();
-            this.quickPopup.destroy();
-            ej2_base_2.remove(this.quickPopup.element);
-            this.morePopup.destroy();
-            if (this.quickDialog.element) {
-                this.quickDialog.destroy();
-                ej2_base_2.remove(this.quickDialog.element);
-                this.quickDialog.element = null;
+        }
+        if (!closest(target, '.' + cls.MORE_POPUP_WRAPPER_CLASS) && !target.classList.contains(cls.MORE_INDICATOR_CLASS)
+            && (!closest(target, '.' + cls.POPUP_OPEN))) {
+            this.morePopup.hide();
+        }
+    };
+    QuickPopups.prototype.onClosePopup = function () {
+        this.quickPopupHide();
+        this.parent.eventBase.focusElement();
+    };
+    QuickPopups.prototype.addEventListener = function () {
+        this.parent.on(event.cellClick, this.cellClick, this);
+        this.parent.on(event.eventClick, this.eventClick, this);
+        this.parent.on(event.documentClick, this.documentClick, this);
+        this.parent.on(event.dataReady, this.updateMoreEventContent, this);
+        this.parent.on(event.tapHoldReady, this.tapHoldEventPopup, this);
+    };
+    QuickPopups.prototype.removeEventListner = function () {
+        this.parent.off(event.cellClick, this.cellClick);
+        this.parent.off(event.eventClick, this.eventClick);
+        this.parent.off(event.documentClick, this.documentClick);
+        this.parent.off(event.dataReady, this.updateMoreEventContent);
+        this.parent.off(event.tapHoldReady, this.tapHoldEventPopup);
+    };
+    QuickPopups.prototype.destroyButtons = function () {
+        var buttonCollections = [].slice.call(this.quickPopup.element.querySelectorAll('.e-control.e-btn'));
+        buttonCollections.forEach(function (button) {
+            var instance = button.ej2_instances[0];
+            if (instance) {
+                instance.destroy();
             }
-        };
-        return QuickPopups;
-    }());
-    exports.QuickPopups = QuickPopups;
-});
+        });
+    };
+    QuickPopups.prototype.destroy = function () {
+        this.fieldValidator.destroy();
+        this.removeEventListner();
+        this.destroyButtons();
+        this.quickPopup.destroy();
+        remove(this.quickPopup.element);
+        this.morePopup.destroy();
+        if (this.quickDialog.element) {
+            this.quickDialog.destroy();
+            remove(this.quickDialog.element);
+            this.quickDialog.element = null;
+        }
+    };
+    return QuickPopups;
+}());
+export { QuickPopups };

src/schedule/renderer/agenda.js

@@ -11,405 +11,441 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../event-renderer/agenda-base", "./view-base", "../base/util", "../base/constant", "../base/css-constant"], function (require, exports, ej2_base_1, ej2_base_2, agenda_base_1, view_base_1, util, event, cls) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var Agenda = (function (_super) {
-        __extends(Agenda, _super);
-        function Agenda(parent) {
-            var _this = _super.call(this, parent) || this;
-            _this.viewClass = 'e-agenda-view';
-            _this.isInverseTableSelect = false;
-            _this.agendaDates = {};
-            _this.virtualScrollTop = 1;
-            _this.minDate = new Date(1900, 0, 1);
-            _this.maxDate = new Date(2099, 11, 31);
-            _this.agendaBase = new agenda_base_1.AgendaBase(parent);
-            return _this;
+import { formatUnit, isNullOrUndefined, closest, extend } from '@syncfusion/ej2-base';
+import { createElement, remove, addClass, EventHandler } from '@syncfusion/ej2-base';
+import { AgendaBase } from '../event-renderer/agenda-base';
+import { ViewBase } from './view-base';
+import * as util from '../base/util';
+import * as event from '../base/constant';
+import * as cls from '../base/css-constant';
+/**
+ * agenda view
+ */
+var Agenda = /** @class */ (function (_super) {
+    __extends(Agenda, _super);
+    /**
+     * Constructor for agenda view
+     */
+    function Agenda(parent) {
+        var _this = _super.call(this, parent) || this;
+        _this.viewClass = 'e-agenda-view';
+        _this.isInverseTableSelect = false;
+        _this.agendaDates = {};
+        _this.virtualScrollTop = 1;
+        _this.minDate = new Date(1900, 0, 1);
+        _this.maxDate = new Date(2099, 11, 31);
+        _this.agendaBase = new AgendaBase(parent);
+        return _this;
+    }
+    /**
+     * Get module name.
+     */
+    Agenda.prototype.getModuleName = function () {
+        return 'agenda';
+    };
+    Agenda.prototype.renderLayout = function () {
+        this.agendaDates = {};
+        this.element = createElement('div', { className: cls.TABLE_WRAP_CLASS });
+        addClass([this.element], this.viewClass);
+        this.element.appendChild(this.createTableLayout(cls.OUTER_TABLE_CLASS));
+        this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS).appendChild(this.element);
+        var eTr = createElement('tr');
+        this.element.querySelector('tbody').appendChild(eTr);
+        var workTd = createElement('td');
+        eTr.appendChild(workTd);
+        var wrap = createElement('div', { className: cls.CONTENT_WRAP_CLASS });
+        workTd.appendChild(wrap);
+        var tbl = this.createTableLayout(cls.CONTENT_TABLE_CLASS);
+        wrap.appendChild(tbl);
+        var tBody = tbl.querySelector('tbody');
+        var agendaDate = util.resetTime(this.parent.selectedDate);
+        this.agendaBase.renderEmptyContent(tBody, agendaDate);
+        this.wireEvents();
+        if (this.parent.uiStateValues.isGroupAdaptive && !this.parent.element.querySelector('.' + cls.RESOURCE_TOOLBAR_CONTAINER)) {
+            this.parent.resourceBase.generateResourceLevels([{ renderDates: this.parent.activeView.renderDates }]);
+            this.renderResourceMobileLayout();
         }
-        Agenda.prototype.getModuleName = function () {
-            return 'agenda';
-        };
-        Agenda.prototype.renderLayout = function () {
-            this.agendaDates = {};
-            this.element = ej2_base_2.createElement('div', { className: cls.TABLE_WRAP_CLASS });
-            ej2_base_2.addClass([this.element], this.viewClass);
-            this.element.appendChild(this.createTableLayout(cls.OUTER_TABLE_CLASS));
-            this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS).appendChild(this.element);
-            var eTr = ej2_base_2.createElement('tr');
-            this.element.querySelector('tbody').appendChild(eTr);
-            var workTd = ej2_base_2.createElement('td');
-            eTr.appendChild(workTd);
-            var wrap = ej2_base_2.createElement('div', { className: cls.CONTENT_WRAP_CLASS });
-            workTd.appendChild(wrap);
-            var tbl = this.createTableLayout(cls.CONTENT_TABLE_CLASS);
-            wrap.appendChild(tbl);
-            var tBody = tbl.querySelector('tbody');
-            var agendaDate = util.resetTime(this.parent.selectedDate);
-            this.agendaBase.renderEmptyContent(tBody, agendaDate);
-            this.wireEvents();
-            if (this.parent.uiStateValues.isGroupAdaptive && !this.parent.element.querySelector('.' + cls.RESOURCE_TOOLBAR_CONTAINER)) {
-                this.parent.resourceBase.generateResourceLevels([{ renderDates: this.parent.activeView.renderDates }]);
-                this.renderResourceMobileLayout();
+        this.parent.notify(event.contentReady, {});
+    };
+    Agenda.prototype.eventLoad = function (args) {
+        this.dataSource = extend([], this.parent.eventsData, null, true);
+        for (var _i = 0, _a = this.parent.eventsData; _i < _a.length; _i++) {
+            var event_1 = _a[_i];
+            delete event_1.generatedDates;
+        }
+        var eventCollection = args.processedData;
+        if (this.parent.uiStateValues.isGroupAdaptive) {
+            var resource = this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex];
+            this.dataSource = this.parent.eventBase.filterEventsByResource(resource, this.dataSource);
+            eventCollection = this.parent.eventBase.filterEventsByResource(resource, eventCollection);
+        }
+        this.parent.eventsProcessed = this.agendaBase.processAgendaEvents(eventCollection);
+        var agendaDate = util.resetTime(this.parent.selectedDate);
+        var tBody = this.parent.getContentTable();
+        tBody.innerHTML = '';
+        this.renderContent(tBody, agendaDate);
+        this.agendaBase.wireEventActions();
+        var contentArea = closest(tBody, '.' + cls.CONTENT_WRAP_CLASS);
+        contentArea.scrollTop = 1;
+    };
+    Agenda.prototype.refreshEvent = function (refreshDate) {
+        var processedData = [];
+        for (var _i = 0, _a = this.dataSource; _i < _a.length; _i++) {
+            var eventData = _a[_i];
+            var fields = this.parent.eventFields;
+            var data = eventData;
+            if (isNullOrUndefined(data[fields.recurrenceID]) && !isNullOrUndefined(data[fields.recurrenceRule]) &&
+                !isNullOrUndefined(data.generatedDates) && refreshDate >= data.generatedDates.end) {
+                processedData = processedData.concat(this.parent.eventBase.generateOccurrence(data, refreshDate));
             }
-            this.parent.notify(event.contentReady, {});
-        };
-        Agenda.prototype.eventLoad = function (args) {
-            this.dataSource = ej2_base_1.extend([], this.parent.eventsData, null, true);
-            for (var _i = 0, _a = this.parent.eventsData; _i < _a.length; _i++) {
-                var event_1 = _a[_i];
-                delete event_1.generatedDates;
-            }
-            var eventCollection = args.processedData;
-            if (this.parent.uiStateValues.isGroupAdaptive) {
-                var resource = this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex];
-                this.dataSource = this.parent.eventBase.filterEventsByResource(resource, this.dataSource);
-                eventCollection = this.parent.eventBase.filterEventsByResource(resource, eventCollection);
-            }
-            this.parent.eventsProcessed = this.agendaBase.processAgendaEvents(eventCollection);
-            var agendaDate = util.resetTime(this.parent.selectedDate);
-            var tBody = this.parent.getContentTable();
-            tBody.innerHTML = '';
-            this.renderContent(tBody, agendaDate);
-            this.agendaBase.wireEventActions();
-            var contentArea = ej2_base_1.closest(tBody, '.' + cls.CONTENT_WRAP_CLASS);
-            contentArea.scrollTop = 1;
-        };
-        Agenda.prototype.refreshEvent = function (refreshDate) {
-            var processedData = [];
-            for (var _i = 0, _a = this.dataSource; _i < _a.length; _i++) {
-                var eventData = _a[_i];
-                var fields = this.parent.eventFields;
-                var data = eventData;
-                if (ej2_base_1.isNullOrUndefined(data[fields.recurrenceID]) && !ej2_base_1.isNullOrUndefined(data[fields.recurrenceRule]) &&
-                    !ej2_base_1.isNullOrUndefined(data.generatedDates) && refreshDate >= data.generatedDates.end) {
-                    processedData = processedData.concat(this.parent.eventBase.generateOccurrence(data, refreshDate));
-                }
-            }
-            this.parent.eventsProcessed = this.parent.eventsProcessed.concat(this.agendaBase.processAgendaEvents(processedData));
-        };
-        Agenda.prototype.renderContent = function (tBody, agendaDate) {
-            var fieldMapping = this.parent.eventFields;
-            var firstDate = new Date(agendaDate.getTime());
-            var lastDate = this.getEndDateFromStartDate(firstDate);
-            var isObject = this.appointmentFiltering(firstDate, lastDate);
+        }
+        this.parent.eventsProcessed = this.parent.eventsProcessed.concat(this.agendaBase.processAgendaEvents(processedData));
+    };
+    Agenda.prototype.renderContent = function (tBody, agendaDate) {
+        var fieldMapping = this.parent.eventFields;
+        var firstDate = new Date(agendaDate.getTime());
+        var lastDate = this.getEndDateFromStartDate(firstDate);
+        var isObject = this.appointmentFiltering(firstDate, lastDate);
+        if (isObject.length === 0) {
+            lastDate = firstDate;
+            firstDate = new Date(this.minDate.getTime());
+            isObject = this.appointmentFiltering(firstDate, lastDate);
             if (isObject.length === 0) {
-                lastDate = firstDate;
-                firstDate = new Date(this.minDate.getTime());
+                firstDate = lastDate;
+                lastDate = new Date(this.maxDate.getTime());
                 isObject = this.appointmentFiltering(firstDate, lastDate);
-                if (isObject.length === 0) {
-                    firstDate = lastDate;
-                    lastDate = new Date(this.maxDate.getTime());
-                    isObject = this.appointmentFiltering(firstDate, lastDate);
+            }
+        }
+        if (isObject.length > 0) {
+            var appoint = isObject;
+            agendaDate = appoint[0][fieldMapping.startTime];
+            agendaDate = new Date(new Date(agendaDate.getTime()).setHours(0, 0, 0, 0));
+            this.updateHeaderText(appoint[0][fieldMapping.startTime]);
+        }
+        var endDate;
+        if (!this.parent.hideEmptyAgendaDays || (this.parent.agendaDaysCount > 0 && isObject.length > 0)) {
+            var noOfDays = (!this.parent.hideEmptyAgendaDays || !this.parent.activeViewOptions.allowVirtualScrolling ||
+                this.parent.agendaDaysCount < isObject.length) ? this.parent.agendaDaysCount : isObject.length;
+            if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
+                var date = agendaDate;
+                if (!this.parent.activeViewOptions.group.byDate) {
+                    this.parent.activeViewOptions.allowVirtualScrolling = false;
+                    date = firstDate;
+                    if (this.parent.headerModule) {
+                        this.parent.headerModule.updateDateRange(this.parent.activeView.getDateRangeText());
+                        this.parent.headerModule.updateHeaderItems('remove');
+                    }
                 }
+                this.agendaBase.calculateResourceTableElement(tBody, this.parent.agendaDaysCount, date);
             }
-            if (isObject.length > 0) {
-                var appoint = isObject;
-                agendaDate = appoint[0][fieldMapping.startTime];
-                agendaDate = new Date(new Date(agendaDate.getTime()).setHours(0, 0, 0, 0));
-                this.updateHeaderText(appoint[0][fieldMapping.startTime]);
-            }
-            var endDate;
-            if (!this.parent.hideEmptyAgendaDays || (this.parent.agendaDaysCount > 0 && isObject.length > 0)) {
-                var noOfDays = (!this.parent.hideEmptyAgendaDays || !this.parent.activeViewOptions.allowVirtualScrolling ||
-                    this.parent.agendaDaysCount < isObject.length) ? this.parent.agendaDaysCount : isObject.length;
-                if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
-                    var date = agendaDate;
-                    if (!this.parent.activeViewOptions.group.byDate) {
-                        this.parent.activeViewOptions.allowVirtualScrolling = false;
-                        date = firstDate;
-                        if (this.parent.headerModule) {
-                            this.parent.headerModule.updateDateRange(this.parent.activeView.getDateRangeText());
-                            this.parent.headerModule.updateHeaderItems('remove');
+            else {
+                for (var day = 0; day < noOfDays; day++) {
+                    var filterData = [];
+                    filterData = this.appointmentFiltering(agendaDate);
+                    var nTr = this.agendaBase.createTableRowElement(agendaDate, 'data');
+                    if (this.element.querySelector('tr[aria-rowindex="' + parseInt(nTr.getAttribute('aria-rowindex'), 10)
+                        + '"]')) {
+                        continue;
+                    }
+                    // if (this.isMonthFirstDate(agendaDate)) {
+                    //     tBody.appendChild(this.renderMonthHeader(this.createTableRowElement(agendaDate, 'monthHeader')));
+                    // }
+                    var dTd = nTr.children[0];
+                    var aTd = nTr.children[1];
+                    if (filterData.length > 0 || (!this.parent.hideEmptyAgendaDays && filterData.length === 0)) {
+                        var elementType = (!this.parent.hideEmptyAgendaDays && filterData.length === 0) ? 'noEvents' : 'data';
+                        dTd.appendChild(this.agendaBase.createDateHeaderElement(agendaDate));
+                        nTr.appendChild(dTd);
+                        var cTd = this.agendaBase.createAgendaContentElement(elementType, filterData, aTd);
+                        nTr.appendChild(cTd);
+                        if (cTd.querySelectorAll('li').length > 0) {
+                            tBody.appendChild(nTr);
                         }
                     }
-                    this.agendaBase.calculateResourceTableElement(tBody, this.parent.agendaDaysCount, date);
+                    else if (this.parent.activeViewOptions.allowVirtualScrolling) {
+                        day--;
+                    }
+                    if (this.isCurrentDate(new Date(agendaDate.getTime()))) {
+                        addClass(dTd.children, cls.AGENDA_CURRENT_DAY_CLASS);
+                    }
+                    agendaDate = util.addDays(agendaDate, 1);
+                    if (agendaDate.getTime() > lastDate.getTime()) {
+                        break;
+                    }
                 }
-                else {
-                    for (var day = 0; day < noOfDays; day++) {
-                        var filterData = [];
-                        filterData = this.appointmentFiltering(agendaDate);
-                        var nTr = this.agendaBase.createTableRowElement(agendaDate, 'data');
-                        if (this.element.querySelector('tr[aria-rowindex="' + parseInt(nTr.getAttribute('aria-rowindex'), 10)
-                            + '"]')) {
-                            continue;
-                        }
-                        var dTd = nTr.children[0];
-                        var aTd = nTr.children[1];
-                        if (filterData.length > 0 || (!this.parent.hideEmptyAgendaDays && filterData.length === 0)) {
-                            var elementType = (!this.parent.hideEmptyAgendaDays && filterData.length === 0) ? 'noEvents' : 'data';
-                            dTd.appendChild(this.agendaBase.createDateHeaderElement(agendaDate));
-                            nTr.appendChild(dTd);
-                            var cTd = this.agendaBase.createAgendaContentElement(elementType, filterData, aTd);
-                            nTr.appendChild(cTd);
-                            if (cTd.querySelectorAll('li').length > 0) {
-                                tBody.appendChild(nTr);
-                            }
-                        }
-                        else if (this.parent.activeViewOptions.allowVirtualScrolling) {
-                            day--;
-                        }
-                        if (this.isCurrentDate(new Date(agendaDate.getTime()))) {
-                            ej2_base_2.addClass(dTd.children, cls.AGENDA_CURRENT_DAY_CLASS);
-                        }
-                        agendaDate = util.addDays(agendaDate, 1);
-                        if (agendaDate.getTime() > lastDate.getTime()) {
-                            break;
-                        }
+            }
+            endDate = new Date(agendaDate.getTime() - util.MS_PER_DAY);
+        }
+        else {
+            this.agendaBase.renderEmptyContent(tBody, agendaDate);
+            endDate = util.addDays(agendaDate, this.parent.agendaDaysCount - 1);
+        }
+        this.agendaDates = { start: firstDate, end: endDate };
+    };
+    // private renderMonthHeader(mTr: Element): Element {
+    //     mTr.removeAttribute('aria-rowindex');
+    //     for (let td of [].slice.call(mTr.childNodes)) {
+    //         td.removeAttribute('aria-colindex');
+    //     }
+    //     let headerDate: Date = new Date(parseInt(mTr.children[0].getAttribute('data-date'), 10));
+    //     let div: Element = createElement('div', {
+    //         className: cls.DATE_HEADER_CLASS,
+    //         innerHTML: headerDate.toLocaleString(this.parent.locale, { month: 'long' }) + '&nbsp' + headerDate.getFullYear()
+    //     });
+    //     mTr.lastElementChild.appendChild(div);
+    //     return mTr;
+    // }
+    Agenda.prototype.agendaScrolling = function (event) {
+        this.parent.quickPopup.quickPopupHide();
+        if (this.parent.activeViewOptions.allowVirtualScrolling) {
+            this.virtualScrolling(event);
+        }
+    };
+    Agenda.prototype.virtualScrolling = function (event) {
+        var target = event.target;
+        var scrollTop = target.scrollTop;
+        var scrollHeight = target.scrollHeight;
+        var offsetHeight = target.clientHeight;
+        var totalHeight = scrollTop + offsetHeight;
+        var direction = (this.virtualScrollTop < scrollTop) ? 'next' : 'previous';
+        var tBody = target.querySelector('tbody');
+        var emptyTBody = createElement('tbody');
+        var topElement = this.getElementFromScrollerPosition(event, direction);
+        var scrollDate = new Date(parseInt(topElement.getAttribute('data-date'), 0));
+        var filterDate;
+        var filterData;
+        if (scrollTop === 0) {
+            filterDate = this.getPreviousNextDate(util.addDays(scrollDate, -1), direction);
+            filterData = this.appointmentFiltering(filterDate.start, filterDate.end);
+            if (filterData.length > 0 || !this.parent.hideEmptyAgendaDays) {
+                this.renderContent(emptyTBody, filterDate.start);
+                tBody.innerHTML = emptyTBody.innerHTML + tBody.innerHTML;
+                this.agendaBase.wireEventActions();
+                for (var s = 0, element = tBody.children; s < element.length; s++) {
+                    if (element[s].getAttribute('aria-rowindex') === topElement.getAttribute('aria-colindex')) {
+                        var scrollToValue = element[s].offsetTop -
+                            this.element.querySelector('.e-agenda-item').offsetHeight;
+                        target.scrollTop = scrollToValue;
+                        break;
                     }
                 }
-                endDate = new Date(agendaDate.getTime() - util.MS_PER_DAY);
+                this.updateHeaderText(scrollDate);
             }
-            else {
-                this.agendaBase.renderEmptyContent(tBody, agendaDate);
-                endDate = util.addDays(agendaDate, this.parent.agendaDaysCount - 1);
+        }
+        else if (totalHeight === scrollHeight) {
+            filterDate = this.getPreviousNextDate(util.addDays(scrollDate, 1), direction);
+            filterData = this.appointmentFiltering(filterDate.start, filterDate.end);
+            if (filterData.length > 0 || !this.parent.hideEmptyAgendaDays) {
+                this.renderContent(emptyTBody, filterDate.start);
+                tBody.innerHTML += emptyTBody.innerHTML;
+                this.agendaBase.wireEventActions();
+                this.updateHeaderText(scrollDate);
             }
-            this.agendaDates = { start: firstDate, end: endDate };
-        };
-        Agenda.prototype.agendaScrolling = function (event) {
-            this.parent.quickPopup.quickPopupHide();
-            if (this.parent.activeViewOptions.allowVirtualScrolling) {
-                this.virtualScrolling(event);
-            }
-        };
-        Agenda.prototype.virtualScrolling = function (event) {
-            var target = event.target;
-            var scrollTop = target.scrollTop;
-            var scrollHeight = target.scrollHeight;
-            var offsetHeight = target.clientHeight;
-            var totalHeight = scrollTop + offsetHeight;
-            var direction = (this.virtualScrollTop < scrollTop) ? 'next' : 'previous';
-            var tBody = target.querySelector('tbody');
-            var emptyTBody = ej2_base_2.createElement('tbody');
-            var topElement = this.getElementFromScrollerPosition(event, direction);
-            var scrollDate = new Date(parseInt(topElement.getAttribute('data-date'), 0));
-            var filterDate;
-            var filterData;
+        }
+        else {
+            this.updateHeaderText(scrollDate);
+        }
+        this.virtualScrollTop = scrollTop;
+        var selectedElements = this.parent.eventBase.getSelectedAppointments();
+        if (selectedElements.length > 0) {
+            selectedElements[selectedElements.length - 1].focus();
+        }
+    };
+    Agenda.prototype.getElementFromScrollerPosition = function (event, direction) {
+        var filterElement;
+        var target = event.target;
+        var scrollTop = target.scrollTop;
+        var scrollHeight = target.scrollHeight;
+        var offsetHeight = target.clientHeight;
+        var totalHeight = scrollTop + offsetHeight;
+        var liCollection = [].slice.call(target.querySelectorAll('.e-agenda-item'));
+        var li;
+        var liDetails;
+        if (liCollection.length > 0) {
             if (scrollTop === 0) {
-                filterDate = this.getPreviousNextDate(util.addDays(scrollDate, -1), direction);
-                filterData = this.appointmentFiltering(filterDate.start, filterDate.end);
-                if (filterData.length > 0 || !this.parent.hideEmptyAgendaDays) {
-                    this.renderContent(emptyTBody, filterDate.start);
-                    tBody.innerHTML = emptyTBody.innerHTML + tBody.innerHTML;
-                    this.agendaBase.wireEventActions();
-                    for (var s = 0, element = tBody.children; s < element.length; s++) {
-                        if (element[s].getAttribute('aria-rowindex') === topElement.getAttribute('aria-colindex')) {
-                            var scrollToValue = element[s].offsetTop -
-                                this.element.querySelector('.e-agenda-item').offsetHeight;
-                            target.scrollTop = scrollToValue;
-                            break;
-                        }
-                    }
-                    this.updateHeaderText(scrollDate);
-                }
+                li = liCollection[0];
+                filterElement = closest(li, '.' + cls.AGENDA_CELLS_CLASS);
             }
             else if (totalHeight === scrollHeight) {
-                filterDate = this.getPreviousNextDate(util.addDays(scrollDate, 1), direction);
-                filterData = this.appointmentFiltering(filterDate.start, filterDate.end);
-                if (filterData.length > 0 || !this.parent.hideEmptyAgendaDays) {
-                    this.renderContent(emptyTBody, filterDate.start);
-                    tBody.innerHTML += emptyTBody.innerHTML;
-                    this.agendaBase.wireEventActions();
-                    this.updateHeaderText(scrollDate);
-                }
+                li = liCollection[liCollection.length - 1];
+                filterElement = closest(li, '.' + cls.AGENDA_CELLS_CLASS);
             }
             else {
-                this.updateHeaderText(scrollDate);
-            }
-            this.virtualScrollTop = scrollTop;
-            var selectedElements = this.parent.eventBase.getSelectedAppointments();
-            if (selectedElements.length > 0) {
-                selectedElements[selectedElements.length - 1].focus();
-            }
-        };
-        Agenda.prototype.getElementFromScrollerPosition = function (event, direction) {
-            var filterElement;
-            var target = event.target;
-            var scrollTop = target.scrollTop;
-            var scrollHeight = target.scrollHeight;
-            var offsetHeight = target.clientHeight;
-            var totalHeight = scrollTop + offsetHeight;
-            var liCollection = [].slice.call(target.querySelectorAll('.e-agenda-item'));
-            var li;
-            var liDetails;
-            if (liCollection.length > 0) {
-                if (scrollTop === 0) {
-                    li = liCollection[0];
-                    filterElement = ej2_base_1.closest(li, '.' + cls.AGENDA_CELLS_CLASS);
-                }
-                else if (totalHeight === scrollHeight) {
-                    li = liCollection[liCollection.length - 1];
-                    filterElement = ej2_base_1.closest(li, '.' + cls.AGENDA_CELLS_CLASS);
-                }
-                else {
-                    for (var a = 0, length_1 = liCollection.length; a < length_1; a++) {
-                        li = liCollection[a];
-                        liDetails = li.getBoundingClientRect();
-                        if (liDetails.top >= 0) {
-                            filterElement = ej2_base_1.closest(li, '.' + cls.AGENDA_CELLS_CLASS);
-                            break;
-                        }
+                for (var a = 0, length_1 = liCollection.length; a < length_1; a++) {
+                    li = liCollection[a];
+                    liDetails = li.getBoundingClientRect();
+                    if (liDetails.top >= 0) {
+                        filterElement = closest(li, '.' + cls.AGENDA_CELLS_CLASS);
+                        break;
                     }
                 }
             }
-            return filterElement;
-        };
-        Agenda.prototype.updateHeaderText = function (date) {
-            if (this.parent.showHeaderBar) {
-                this.parent.headerModule.updateDateRange(this.getDateRangeText(date));
+        }
+        return filterElement;
+    };
+    Agenda.prototype.updateHeaderText = function (date) {
+        if (this.parent.showHeaderBar) {
+            this.parent.headerModule.updateDateRange(this.getDateRangeText(date));
+        }
+    };
+    Agenda.prototype.getPreviousNextDate = function (date, type) {
+        var currentDate = new Date(date.getTime());
+        var firstDate = this.getStartDateFromEndDate(date);
+        var lastDate = this.getEndDateFromStartDate(date);
+        var daysCount = 0;
+        do {
+            var filterData = this.appointmentFiltering(currentDate);
+            if (filterData.length > 0 || !this.parent.hideEmptyAgendaDays) {
+                daysCount++;
             }
-        };
-        Agenda.prototype.getPreviousNextDate = function (date, type) {
-            var currentDate = new Date(date.getTime());
-            var firstDate = this.getStartDateFromEndDate(date);
-            var lastDate = this.getEndDateFromStartDate(date);
-            var daysCount = 0;
-            do {
-                var filterData = this.appointmentFiltering(currentDate);
-                if (filterData.length > 0 || !this.parent.hideEmptyAgendaDays) {
-                    daysCount++;
-                }
-                currentDate = util.addDays(currentDate, (type === 'next') ? 1 : -1);
-                if (currentDate < firstDate || currentDate > lastDate) {
-                    break;
-                }
-            } while (daysCount !== this.parent.agendaDaysCount);
-            var endDate = util.addDays(currentDate, (type === 'next') ? -1 : 1);
-            return (type === 'next') ? { start: date, end: util.addDays(endDate, 1) } : { start: endDate, end: util.addDays(date, 1) };
-        };
-        Agenda.prototype.appointmentFiltering = function (startDate, endDate) {
-            var dateStart;
-            var dateEnd;
-            if (!ej2_base_1.isNullOrUndefined(startDate) && ej2_base_1.isNullOrUndefined(endDate)) {
-                dateStart = util.resetTime(new Date(startDate.getTime()));
-                dateEnd = util.setTime(new Date(dateStart.getTime()), util.MS_PER_DAY);
+            currentDate = util.addDays(currentDate, (type === 'next') ? 1 : -1);
+            if (currentDate < firstDate || currentDate > lastDate) {
+                break;
             }
-            else {
-                dateStart = new Date(startDate.getTime());
-                dateEnd = new Date(endDate.getTime());
-            }
-            var filterData = this.parent.eventBase.filterEvents(dateStart, dateEnd);
-            if (filterData.length === 0) {
-                this.refreshEvent(startDate);
-                filterData = this.parent.eventBase.filterEvents(dateStart, dateEnd);
-            }
-            return filterData;
-        };
-        Agenda.prototype.getStartDateFromEndDate = function (endDate) {
-            var filterDate;
-            var fieldMapping = this.parent.eventFields;
-            if (this.parent.eventsProcessed.length > 0) {
-                var firstDate = Math.min.apply(Math, this.parent.eventsProcessed.map(function (a) {
-                    var date = a[fieldMapping.startTime];
-                    return date.getTime();
-                }));
-                filterDate = this.parent.hideEmptyAgendaDays ? new Date(firstDate) : this.minDate;
-            }
-            else {
-                filterDate = this.parent.hideEmptyAgendaDays ? util.addMonths(endDate, -1) : this.minDate;
-            }
-            return util.resetTime(filterDate);
-        };
-        Agenda.prototype.getEndDateFromStartDate = function (startDate) {
-            var filterDate;
-            var fieldMapping = this.parent.eventFields;
-            if (this.parent.eventsProcessed.length > 0) {
-                var lastDate = Math.max.apply(Math, this.parent.eventsProcessed.map(function (a) {
-                    var date = a[fieldMapping.endTime];
-                    return date.getTime();
-                }));
-                filterDate = this.parent.hideEmptyAgendaDays ? new Date(lastDate) : this.maxDate;
-            }
-            else {
-                filterDate = this.parent.hideEmptyAgendaDays ? util.addMonths(startDate, 1) : this.maxDate;
-            }
-            return util.resetTime(util.addDays(filterDate, 1));
-        };
-        Agenda.prototype.getNextPreviousDate = function (type) {
-            var noOfDays = (type === 'next') ? 1 : -1;
-            return util.addDays(this.parent.selectedDate, noOfDays);
-        };
-        Agenda.prototype.startDate = function () {
-            return util.resetTime(this.parent.selectedDate);
-        };
-        Agenda.prototype.endDate = function () {
+        } while (daysCount !== this.parent.agendaDaysCount);
+        var endDate = util.addDays(currentDate, (type === 'next') ? -1 : 1);
+        return (type === 'next') ? { start: date, end: util.addDays(endDate, 1) } : { start: endDate, end: util.addDays(date, 1) };
+    };
+    Agenda.prototype.appointmentFiltering = function (startDate, endDate) {
+        var dateStart;
+        var dateEnd;
+        if (!isNullOrUndefined(startDate) && isNullOrUndefined(endDate)) {
+            dateStart = util.resetTime(new Date(startDate.getTime()));
+            dateEnd = util.setTime(new Date(dateStart.getTime()), util.MS_PER_DAY);
+        }
+        else {
+            dateStart = new Date(startDate.getTime());
+            dateEnd = new Date(endDate.getTime());
+        }
+        var filterData = this.parent.eventBase.filterEvents(dateStart, dateEnd);
+        if (filterData.length === 0) {
+            this.refreshEvent(startDate);
+            filterData = this.parent.eventBase.filterEvents(dateStart, dateEnd);
+        }
+        return filterData;
+    };
+    Agenda.prototype.getStartDateFromEndDate = function (endDate) {
+        var filterDate;
+        var fieldMapping = this.parent.eventFields;
+        if (this.parent.eventsProcessed.length > 0) {
+            var firstDate = Math.min.apply(Math, this.parent.eventsProcessed.map(function (a) {
+                var date = a[fieldMapping.startTime];
+                return date.getTime();
+            }));
+            filterDate = this.parent.hideEmptyAgendaDays ? new Date(firstDate) : this.minDate;
+        }
+        else {
+            filterDate = this.parent.hideEmptyAgendaDays ? util.addMonths(endDate, -1) : this.minDate;
+        }
+        return util.resetTime(filterDate);
+    };
+    Agenda.prototype.getEndDateFromStartDate = function (startDate) {
+        var filterDate;
+        var fieldMapping = this.parent.eventFields;
+        if (this.parent.eventsProcessed.length > 0) {
+            var lastDate = Math.max.apply(Math, this.parent.eventsProcessed.map(function (a) {
+                var date = a[fieldMapping.endTime];
+                return date.getTime();
+            }));
+            filterDate = this.parent.hideEmptyAgendaDays ? new Date(lastDate) : this.maxDate;
+        }
+        else {
+            filterDate = this.parent.hideEmptyAgendaDays ? util.addMonths(startDate, 1) : this.maxDate;
+        }
+        return util.resetTime(util.addDays(filterDate, 1));
+    };
+    Agenda.prototype.getNextPreviousDate = function (type) {
+        var noOfDays = (type === 'next') ? 1 : -1;
+        return util.addDays(this.parent.selectedDate, noOfDays);
+    };
+    Agenda.prototype.startDate = function () {
+        return util.resetTime(this.parent.selectedDate);
+    };
+    Agenda.prototype.endDate = function () {
+        if (this.parent.activeViewOptions.allowVirtualScrolling) {
+            return this.getEndDateFromStartDate(this.startDate());
+        }
+        else {
+            return util.addDays(this.startDate(), this.parent.agendaDaysCount);
+        }
+    };
+    Agenda.prototype.getDateRangeText = function (date) {
+        var formatDate = (this.parent.activeViewOptions.dateFormat) ? this.parent.activeViewOptions.dateFormat : 'MMMM y';
+        if (this.parent.activeViewOptions.allowVirtualScrolling || this.parent.isAdaptive) {
+            var currentDate = isNullOrUndefined(date) ? this.parent.selectedDate : date;
+            return this.parent.globalize.formatDate(currentDate, { format: formatDate });
+        }
+        else {
+            var startDate = this.parent.selectedDate;
+            var endDate = util.addDays(startDate, this.parent.agendaDaysCount - 1);
+            return this.formatDateRange(startDate, endDate);
+        }
+    };
+    Agenda.prototype.dayNavigationClick = function (e) {
+        var date = this.parent.getDateFromElement(closest(e.currentTarget, '.' + cls.AGENDA_CELLS_CLASS));
+        if (!isNullOrUndefined(date) && !this.parent.isAdaptive) {
+            this.parent.setProperties({ selectedDate: date }, true);
+            this.parent.changeView('Day');
+        }
+    };
+    // private isMonthFirstDate(date: Date): boolean {
+    //     return date.getDate() === 1;
+    // }
+    Agenda.prototype.wireEvents = function () {
+        EventHandler.add(this.element.querySelector('.' + cls.CONTENT_WRAP_CLASS), event.scroll, this.agendaScrolling, this);
+    };
+    Agenda.prototype.unWireEvents = function () {
+        EventHandler.remove(this.element.querySelector('.' + cls.CONTENT_WRAP_CLASS), event.scroll, this.agendaScrolling);
+        var dateHeaderElement = [].slice.call(this.element.querySelectorAll('.e-m-date'));
+        for (var _i = 0, dateHeaderElement_1 = dateHeaderElement; _i < dateHeaderElement_1.length; _i++) {
+            var element = dateHeaderElement_1[_i];
+            EventHandler.remove(element, 'click', this.dayNavigationClick);
+        }
+    };
+    Agenda.prototype.addEventListener = function () {
+        this.parent.on(event.scrollUiUpdate, this.onAgendaScrollUiUpdate, this);
+        this.parent.on(event.dataReady, this.eventLoad, this);
+    };
+    Agenda.prototype.removeEventListener = function () {
+        this.parent.off(event.scrollUiUpdate, this.onAgendaScrollUiUpdate);
+        this.parent.off(event.dataReady, this.eventLoad);
+    };
+    Agenda.prototype.onAgendaScrollUiUpdate = function () {
+        var headerHeight = 2;
+        if (this.parent.headerModule) {
+            headerHeight += this.parent.headerModule.getHeaderElement().offsetHeight;
             if (this.parent.activeViewOptions.allowVirtualScrolling) {
-                return this.getEndDateFromStartDate(this.startDate());
+                this.parent.headerModule.updateHeaderItems('add');
             }
             else {
-                return util.addDays(this.startDate(), this.parent.agendaDaysCount);
+                this.parent.headerModule.updateHeaderItems('remove');
             }
-        };
-        Agenda.prototype.getDateRangeText = function (date) {
-            var formatDate = (this.parent.activeViewOptions.dateFormat) ? this.parent.activeViewOptions.dateFormat : 'MMMM y';
-            if (this.parent.activeViewOptions.allowVirtualScrolling || this.parent.isAdaptive) {
-                var currentDate = ej2_base_1.isNullOrUndefined(date) ? this.parent.selectedDate : date;
-                return this.parent.globalize.formatDate(currentDate, { format: formatDate });
+        }
+        if (this.parent.uiStateValues.isGroupAdaptive) {
+            headerHeight += this.parent.element.querySelector('.' + cls.RESOURCE_HEADER_TOOLBAR).offsetHeight;
+        }
+        var contentArea = this.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
+        contentArea.style.height = formatUnit(this.parent.element.offsetHeight - headerHeight);
+    };
+    /**
+     * To destroy the agenda.
+     * @return {void}
+     * @private
+     */
+    Agenda.prototype.destroy = function () {
+        if (this.parent.isDestroyed) {
+            return;
+        }
+        if (this.element) {
+            this.unWireEvents();
+            if (this.parent.resourceBase) {
+                this.parent.resourceBase.destroy();
             }
-            else {
-                var startDate = this.parent.selectedDate;
-                var endDate = util.addDays(startDate, this.parent.agendaDaysCount - 1);
-                return this.formatDateRange(startDate, endDate);
+            remove(this.element);
+            this.element = null;
+            if (this.parent.headerModule && this.parent.activeViewOptions.allowVirtualScrolling) {
+                this.parent.headerModule.updateHeaderItems('remove');
             }
-        };
-        Agenda.prototype.dayNavigationClick = function (e) {
-            var date = this.parent.getDateFromElement(ej2_base_1.closest(e.currentTarget, '.' + cls.AGENDA_CELLS_CLASS));
-            if (!ej2_base_1.isNullOrUndefined(date) && !this.parent.isAdaptive) {
-                this.parent.setProperties({ selectedDate: date }, true);
-                this.parent.changeView('Day');
-            }
-        };
-        Agenda.prototype.wireEvents = function () {
-            ej2_base_2.EventHandler.add(this.element.querySelector('.' + cls.CONTENT_WRAP_CLASS), event.scroll, this.agendaScrolling, this);
-        };
-        Agenda.prototype.unWireEvents = function () {
-            ej2_base_2.EventHandler.remove(this.element.querySelector('.' + cls.CONTENT_WRAP_CLASS), event.scroll, this.agendaScrolling);
-            var dateHeaderElement = [].slice.call(this.element.querySelectorAll('.e-m-date'));
-            for (var _i = 0, dateHeaderElement_1 = dateHeaderElement; _i < dateHeaderElement_1.length; _i++) {
-                var element = dateHeaderElement_1[_i];
-                ej2_base_2.EventHandler.remove(element, 'click', this.dayNavigationClick);
-            }
-        };
-        Agenda.prototype.addEventListener = function () {
-            this.parent.on(event.scrollUiUpdate, this.onAgendaScrollUiUpdate, this);
-            this.parent.on(event.dataReady, this.eventLoad, this);
-        };
-        Agenda.prototype.removeEventListener = function () {
-            this.parent.off(event.scrollUiUpdate, this.onAgendaScrollUiUpdate);
-            this.parent.off(event.dataReady, this.eventLoad);
-        };
-        Agenda.prototype.onAgendaScrollUiUpdate = function () {
-            var headerHeight = 2;
-            if (this.parent.headerModule) {
-                headerHeight += this.parent.headerModule.getHeaderElement().offsetHeight;
-                if (this.parent.activeViewOptions.allowVirtualScrolling) {
-                    this.parent.headerModule.updateHeaderItems('add');
-                }
-                else {
-                    this.parent.headerModule.updateHeaderItems('remove');
-                }
-            }
-            if (this.parent.uiStateValues.isGroupAdaptive) {
-                headerHeight += this.parent.element.querySelector('.' + cls.RESOURCE_HEADER_TOOLBAR).offsetHeight;
-            }
-            var contentArea = this.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
-            contentArea.style.height = ej2_base_1.formatUnit(this.parent.element.offsetHeight - headerHeight);
-        };
-        Agenda.prototype.destroy = function () {
-            if (this.parent.isDestroyed) {
-                return;
-            }
-            if (this.element) {
-                this.unWireEvents();
-                if (this.parent.resourceBase) {
-                    this.parent.resourceBase.destroy();
-                }
-                ej2_base_2.remove(this.element);
-                this.element = null;
-                if (this.parent.headerModule && this.parent.activeViewOptions.allowVirtualScrolling) {
-                    this.parent.headerModule.updateHeaderItems('remove');
-                }
-            }
-        };
-        return Agenda;
-    }(view_base_1.ViewBase));
-    exports.Agenda = Agenda;
-});
+        }
+    };
+    return Agenda;
+}(ViewBase));
+export { Agenda };

src/schedule/renderer/day.js

@@ -11,40 +11,47 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "./vertical-view", "../base/util"], function (require, exports, vertical_view_1, util) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var Day = (function (_super) {
-        __extends(Day, _super);
-        function Day(parent) {
-            var _this = _super.call(this, parent) || this;
-            _this.viewClass = 'e-day-view';
-            return _this;
+import { VerticalView } from './vertical-view';
+import * as util from '../base/util';
+/**
+ * day view
+ */
+var Day = /** @class */ (function (_super) {
+    __extends(Day, _super);
+    /**
+     * Constructor for day view
+     */
+    function Day(parent) {
+        var _this = _super.call(this, parent) || this;
+        _this.viewClass = 'e-day-view';
+        return _this;
+    }
+    Day.prototype.getNextPreviousDate = function (type) {
+        var daysCount = (type === 'next') ? this.parent.activeViewOptions.interval : -(this.parent.activeViewOptions.interval);
+        if (this.parent.activeViewOptions.showWeekend) {
+            return util.addDays(this.parent.selectedDate, daysCount);
         }
-        Day.prototype.getNextPreviousDate = function (type) {
-            var daysCount = (type === 'next') ? this.parent.activeViewOptions.interval : -(this.parent.activeViewOptions.interval);
-            if (this.parent.activeViewOptions.showWeekend) {
-                return util.addDays(this.parent.selectedDate, daysCount);
+        else {
+            var date = util.addDays(this.parent.selectedDate, daysCount);
+            while (!this.isWorkDay(date)) {
+                date = util.addDays(date, daysCount);
             }
-            else {
-                var date = util.addDays(this.parent.selectedDate, daysCount);
-                while (!this.isWorkDay(date)) {
-                    date = util.addDays(date, daysCount);
-                }
-                return date;
-            }
-        };
-        Day.prototype.getDateRangeText = function () {
-            if (this.parent.isAdaptive) {
-                return this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM y' });
-            }
-            if (this.parent.activeViewOptions.interval > 1) {
-                return this.formatDateRange(this.renderDates[0], this.renderDates[this.renderDates.length - 1]);
-            }
-            return this.formatDateRange(this.parent.selectedDate);
-        };
-        Day.prototype.getModuleName = function () {
-            return 'day';
-        };
-        return Day;
-    }(vertical_view_1.VerticalView));
-    exports.Day = Day;
-});
+            return date;
+        }
+    };
+    Day.prototype.getDateRangeText = function () {
+        if (this.parent.isAdaptive) {
+            return this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM y' });
+        }
+        if (this.parent.activeViewOptions.interval > 1) {
+            return this.formatDateRange(this.renderDates[0], this.renderDates[this.renderDates.length - 1]);
+        }
+        return this.formatDateRange(this.parent.selectedDate);
+    };
+    /**
+     * Get module name.
+     */
+    Day.prototype.getModuleName = function () {
+        return 'day';
+    };
+    return Day;
+}(VerticalView));
+export { Day };

src/schedule/renderer/header-renderer.d.ts

@@ -32,3 +32,3 @@ import { CalendarView } from '@syncfusion/ej2-calendars';
     updateActiveView(): void;
-    updateDateRange(text?: string): void;
+    updateDateRange(text: string): void;
     private getDateRangeText();
@@ -35,0 +35,0 @@ private getItems();

src/schedule/renderer/header-renderer.js

@@ -1,363 +0,399 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-navigations", "@syncfusion/ej2-calendars", "@syncfusion/ej2-popups", "../base/constant", "../base/util", "../base/css-constant"], function (require, exports, ej2_base_1, ej2_navigations_1, ej2_calendars_1, ej2_popups_1, events, util, cls) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var HeaderRenderer = (function () {
-        function HeaderRenderer(parent) {
-            this.parent = parent;
-            this.l10n = this.parent.localeObj;
-            this.renderHeader();
-            this.addEventListener();
+import { isNullOrUndefined, createElement, remove, closest, addClass, removeClass, extend } from '@syncfusion/ej2-base';
+import { Toolbar } from '@syncfusion/ej2-navigations';
+import { Calendar } from '@syncfusion/ej2-calendars';
+import { Popup } from '@syncfusion/ej2-popups';
+import * as events from '../base/constant';
+import * as util from '../base/util';
+import * as cls from '../base/css-constant';
+/**
+ * Header module
+ */
+var HeaderRenderer = /** @class */ (function () {
+    /**
+     * Constructor for render module
+     */
+    function HeaderRenderer(parent) {
+        this.parent = parent;
+        this.l10n = this.parent.localeObj;
+        this.renderHeader();
+        this.addEventListener();
+    }
+    HeaderRenderer.prototype.addEventListener = function () {
+        this.parent.on(events.documentClick, this.closeHeaderPopup, this);
+    };
+    HeaderRenderer.prototype.removeEventListener = function () {
+        this.parent.off(events.documentClick, this.closeHeaderPopup);
+    };
+    HeaderRenderer.prototype.closeHeaderPopup = function (e) {
+        var closestEle = closest(e.event.target, '.e-date-range,.e-header-popup,.e-day,.e-selected');
+        if (!isNullOrUndefined(closestEle)) {
+            return;
         }
-        HeaderRenderer.prototype.addEventListener = function () {
-            this.parent.on(events.documentClick, this.closeHeaderPopup, this);
-        };
-        HeaderRenderer.prototype.removeEventListener = function () {
-            this.parent.off(events.documentClick, this.closeHeaderPopup);
-        };
-        HeaderRenderer.prototype.closeHeaderPopup = function (e) {
-            var closestEle = ej2_base_1.closest(e.event.target, '.e-date-range,.e-header-popup,.e-day,.e-selected');
-            if (!ej2_base_1.isNullOrUndefined(closestEle)) {
-                return;
-            }
-            this.hideHeaderPopup();
-        };
-        HeaderRenderer.prototype.hideHeaderPopup = function () {
-            if (this.headerPopup) {
-                this.headerPopup.hide();
-            }
-        };
-        HeaderRenderer.prototype.renderHeader = function () {
-            this.element = ej2_base_1.createElement('div', { className: cls.TOOLBAR_CONTAINER });
-            var toolbarEle = ej2_base_1.createElement('div', { className: cls.HEADER_TOOLBAR });
-            this.element.appendChild(toolbarEle);
-            this.parent.element.insertBefore(this.element, this.parent.element.firstElementChild);
-            this.renderToolbar();
-        };
-        HeaderRenderer.prototype.renderToolbar = function () {
+        this.hideHeaderPopup();
+    };
+    /** @hidden */
+    HeaderRenderer.prototype.hideHeaderPopup = function () {
+        if (this.headerPopup) {
+            this.headerPopup.hide();
+        }
+    };
+    HeaderRenderer.prototype.renderHeader = function () {
+        this.element = createElement('div', { className: cls.TOOLBAR_CONTAINER });
+        var toolbarEle = createElement('div', { className: cls.HEADER_TOOLBAR });
+        this.element.appendChild(toolbarEle);
+        this.parent.element.insertBefore(this.element, this.parent.element.firstElementChild);
+        this.renderToolbar();
+    };
+    HeaderRenderer.prototype.renderToolbar = function () {
+        var items = this.getItems();
+        var args = { requestType: 'toolbarItemRendering', items: items };
+        this.parent.trigger(events.actionBegin, args);
+        this.toolbarObj = new Toolbar({
+            items: args.items,
+            overflowMode: 'Popup',
+            clicked: this.toolbarClickHandler.bind(this),
+            enableRtl: this.parent.enableRtl,
+            locale: this.parent.locale
+        });
+        this.toolbarObj.appendTo(this.parent.element.querySelector('.' + cls.HEADER_TOOLBAR));
+        var prevNavEle = this.toolbarObj.element.querySelector('.e-prev');
+        if (prevNavEle) {
+            prevNavEle.firstChild.setAttribute('title', this.l10n.getConstant('previous'));
+        }
+        var nextNavEle = this.toolbarObj.element.querySelector('.e-next');
+        if (nextNavEle) {
+            nextNavEle.firstChild.setAttribute('title', this.l10n.getConstant('next'));
+        }
+        this.updateActiveView();
+        this.parent.trigger(events.actionComplete, { requestType: 'toolBarItemRendered', items: this.toolbarObj.items });
+    };
+    HeaderRenderer.prototype.updateItems = function () {
+        if (this.toolbarObj) {
             var items = this.getItems();
             var args = { requestType: 'toolbarItemRendering', items: items };
             this.parent.trigger(events.actionBegin, args);
-            this.toolbarObj = new ej2_navigations_1.Toolbar({
-                items: args.items,
-                overflowMode: 'Popup',
-                clicked: this.toolbarClickHandler.bind(this),
-                enableRtl: this.parent.enableRtl,
-                locale: this.parent.locale
+            this.toolbarObj.items = args.items;
+            this.toolbarObj.dataBind();
+            this.parent.trigger(events.actionComplete, {
+                requestType: 'toolBarItemRendered',
+                items: this.toolbarObj.items
             });
-            this.toolbarObj.appendTo(this.parent.element.querySelector('.' + cls.HEADER_TOOLBAR));
-            var prevNavEle = this.toolbarObj.element.querySelector('.e-prev');
-            if (prevNavEle) {
-                prevNavEle.firstChild.setAttribute('title', this.l10n.getConstant('previous'));
-            }
-            var nextNavEle = this.toolbarObj.element.querySelector('.e-next');
-            if (nextNavEle) {
-                nextNavEle.firstChild.setAttribute('title', this.l10n.getConstant('next'));
-            }
-            this.updateActiveView();
-            this.parent.trigger(events.actionComplete, { requestType: 'toolBarItemRendered', items: this.toolbarObj.items });
-        };
-        HeaderRenderer.prototype.updateItems = function () {
-            if (this.toolbarObj) {
-                var items = this.getItems();
-                var args = { requestType: 'toolbarItemRendering', items: items };
-                this.parent.trigger(events.actionBegin, args);
-                this.toolbarObj.items = args.items;
-                this.toolbarObj.dataBind();
-                this.parent.trigger(events.actionComplete, {
-                    requestType: 'toolBarItemRendered',
-                    items: this.toolbarObj.items
-                });
-            }
-        };
-        HeaderRenderer.prototype.getPopUpRelativeElement = function () {
-            if (this.parent.isAdaptive) {
-                return this.toolbarObj.element;
-            }
-            return this.element.querySelector('.e-date-range');
-        };
-        HeaderRenderer.prototype.setDayOfWeek = function (index) {
-            if (this.headerCalendar) {
-                this.headerCalendar.firstDayOfWeek = index;
-                this.headerCalendar.dataBind();
-            }
-        };
-        HeaderRenderer.prototype.setCalendarDate = function (date) {
-            if (this.headerCalendar) {
-                this.headerCalendar.value = date;
-                this.headerCalendar.dataBind();
-            }
-        };
-        HeaderRenderer.prototype.getCalendarView = function () {
-            if (this.parent.currentView === 'Month' || this.parent.currentView === 'MonthAgenda') {
-                return 'Year';
-            }
-            return 'Month';
-        };
-        HeaderRenderer.prototype.setCalendarView = function () {
-            if (this.headerCalendar) {
-                var calendarView = this.getCalendarView();
-                this.headerCalendar.depth = calendarView;
-                this.headerCalendar.start = calendarView;
-                this.headerCalendar.refresh();
-            }
-        };
-        HeaderRenderer.prototype.setRtl = function (isRtl) {
-            if (this.headerPopup) {
-                this.headerPopup.enableRtl = isRtl;
-                this.headerPopup.dataBind();
-            }
-            if (this.headerCalendar) {
-                this.headerCalendar.enableRtl = isRtl;
-                this.headerCalendar.dataBind();
-            }
-            this.toolbarObj.enableRtl = isRtl;
-            this.toolbarObj.dataBind();
-        };
-        HeaderRenderer.prototype.updateActiveView = function () {
-            var selEle = this.toolbarObj.element.querySelectorAll('.e-views');
-            ej2_base_1.removeClass(selEle, ['e-active-view']);
-            if (selEle.length > 0 && selEle[this.parent.viewIndex]) {
-                ej2_base_1.addClass([selEle[this.parent.viewIndex]], ['e-active-view']);
-            }
-        };
-        HeaderRenderer.prototype.updateDateRange = function (text) {
-            if (text === void 0) { text = this.getDateRangeText(); }
-            var selEle = this.toolbarObj.element.querySelector('.e-date-range');
-            if (selEle) {
-                selEle.setAttribute('aria-label', text);
-                selEle.querySelector('.e-tbar-btn-text').innerHTML = text;
-                this.toolbarObj.refreshOverflow();
-            }
-        };
-        HeaderRenderer.prototype.getDateRangeText = function () {
-            return this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM y' });
-        };
-        HeaderRenderer.prototype.getItems = function () {
-            var items = [];
-            var showInPopup = this.parent.isAdaptive;
+        }
+    };
+    HeaderRenderer.prototype.getPopUpRelativeElement = function () {
+        if (this.parent.isAdaptive) {
+            return this.toolbarObj.element;
+        }
+        return this.element.querySelector('.e-date-range');
+    };
+    HeaderRenderer.prototype.setDayOfWeek = function (index) {
+        if (this.headerCalendar) {
+            this.headerCalendar.firstDayOfWeek = index;
+            this.headerCalendar.dataBind();
+        }
+    };
+    HeaderRenderer.prototype.setCalendarDate = function (date) {
+        if (this.headerCalendar) {
+            this.headerCalendar.value = date;
+            this.headerCalendar.dataBind();
+        }
+    };
+    HeaderRenderer.prototype.getCalendarView = function () {
+        if (this.parent.currentView === 'Month' || this.parent.currentView === 'MonthAgenda') {
+            return 'Year';
+        }
+        return 'Month';
+    };
+    HeaderRenderer.prototype.setCalendarView = function () {
+        if (this.headerCalendar) {
+            var calendarView = this.getCalendarView();
+            this.headerCalendar.depth = calendarView;
+            this.headerCalendar.start = calendarView;
+            this.headerCalendar.refresh();
+        }
+    };
+    HeaderRenderer.prototype.setRtl = function (isRtl) {
+        if (this.headerPopup) {
+            this.headerPopup.enableRtl = isRtl;
+            this.headerPopup.dataBind();
+        }
+        if (this.headerCalendar) {
+            this.headerCalendar.enableRtl = isRtl;
+            this.headerCalendar.dataBind();
+        }
+        this.toolbarObj.enableRtl = isRtl;
+        this.toolbarObj.dataBind();
+    };
+    HeaderRenderer.prototype.updateActiveView = function () {
+        var selEle = this.toolbarObj.element.querySelectorAll('.e-views');
+        removeClass(selEle, ['e-active-view']);
+        if (selEle.length > 0 && selEle[this.parent.viewIndex]) {
+            addClass([selEle[this.parent.viewIndex]], ['e-active-view']);
+        }
+    };
+    HeaderRenderer.prototype.updateDateRange = function (text) {
+        var selEle = this.toolbarObj.element.querySelector('.e-date-range');
+        if (selEle) {
+            selEle.setAttribute('aria-label', text);
+            selEle.querySelector('.e-tbar-btn-text').innerHTML = text;
+            this.toolbarObj.refreshOverflow();
+        }
+    };
+    HeaderRenderer.prototype.getDateRangeText = function () {
+        return this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM y' });
+    };
+    HeaderRenderer.prototype.getItems = function () {
+        var items = [];
+        var showInPopup = this.parent.isAdaptive;
+        items.push({
+            align: 'Left', prefixIcon: 'e-icon-prev', tooltipText: 'Previous', overflow: 'Show',
+            cssClass: 'e-prev', htmlAttributes: { 'aria-label': 'previous period' }
+        });
+        items.push({
+            align: 'Left', prefixIcon: 'e-icon-next', tooltipText: 'Next', overflow: 'Show',
+            cssClass: 'e-next', htmlAttributes: { 'aria-label': 'next period' }
+        });
+        items.push({
+            align: 'Left', text: this.getDateRangeText(), suffixIcon: 'e-icon-down-arrow', cssClass: 'e-date-range',
+            overflow: 'Show', htmlAttributes: { 'aria-atomic': 'true', 'aria-live': 'assertive', 'aria-label': 'title' }
+        });
+        if (this.parent.isAdaptive) {
             items.push({
-                align: 'Left', prefixIcon: 'e-icon-prev', tooltipText: 'Previous', overflow: 'Show',
-                cssClass: 'e-prev', htmlAttributes: { 'aria-label': 'previous period' }
+                align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-add', text: this.l10n.getConstant('newEvent'),
+                cssClass: 'e-add', overflow: 'Show'
             });
             items.push({
-                align: 'Left', prefixIcon: 'e-icon-next', tooltipText: 'Next', overflow: 'Show',
-                cssClass: 'e-next', htmlAttributes: { 'aria-label': 'next period' }
+                align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-today', text: this.l10n.getConstant('today'),
+                cssClass: 'e-today', overflow: 'Show'
             });
+        }
+        else {
             items.push({
-                align: 'Left', text: this.getDateRangeText(), suffixIcon: 'e-icon-down-arrow', cssClass: 'e-date-range',
-                overflow: 'Show', htmlAttributes: { 'aria-atomic': 'true', 'aria-live': 'assertive', 'aria-label': 'title' }
+                align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-day', text: this.l10n.getConstant('today'),
+                cssClass: 'e-today', overflow: 'Show'
             });
-            if (this.parent.isAdaptive) {
+            if (this.parent.views.length > 1) {
                 items.push({
-                    align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-add', text: this.l10n.getConstant('newEvent'),
-                    cssClass: 'e-add', overflow: 'Show'
+                    align: 'Right', type: 'Separator', cssClass: 'e-schedule-seperator'
                 });
-                items.push({
-                    align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-today', text: this.l10n.getConstant('today'),
-                    cssClass: 'e-today', overflow: 'Show'
-                });
             }
-            else {
-                items.push({
-                    align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-day', text: this.l10n.getConstant('today'),
-                    cssClass: 'e-today', overflow: 'Show'
-                });
-                if (this.parent.views.length > 1) {
-                    items.push({
-                        align: 'Right', type: 'Separator', cssClass: 'e-schedule-seperator'
-                    });
-                }
+        }
+        if (this.parent.views.length > 1) {
+            for (var _i = 0, _a = this.parent.views; _i < _a.length; _i++) {
+                var item = _a[_i];
+                typeof (item) === 'string' ? items.push(this.getItemObject(item.toLowerCase(), null)) :
+                    items.push(this.getItemObject(item.option.toLowerCase(), item.displayName));
             }
-            if (this.parent.views.length > 1) {
-                for (var _i = 0, _a = this.parent.views; _i < _a.length; _i++) {
-                    var item = _a[_i];
-                    typeof (item) === 'string' ? items.push(this.getItemObject(item.toLowerCase(), null)) :
-                        items.push(this.getItemObject(item.option.toLowerCase(), item.displayName));
+        }
+        return items;
+    };
+    HeaderRenderer.prototype.getItemObject = function (viewName, displayName) {
+        var view;
+        var showInPopup = this.parent.isAdaptive;
+        switch (viewName) {
+            case 'day':
+                view = {
+                    align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-day',
+                    text: displayName || this.l10n.getConstant('day'), cssClass: 'e-views e-day'
+                };
+                break;
+            case 'week':
+                view = {
+                    align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-week',
+                    text: displayName || this.l10n.getConstant('week'), cssClass: 'e-views e-week'
+                };
+                break;
+            case 'workweek':
+                view = {
+                    align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-workweek',
+                    text: displayName || this.l10n.getConstant('workWeek'), cssClass: 'e-views e-work-week'
+                };
+                break;
+            case 'month':
+                view = {
+                    align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-month',
+                    text: displayName || this.l10n.getConstant('month'), cssClass: 'e-views e-month'
+                };
+                break;
+            case 'agenda':
+                view = {
+                    align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-agenda', text: this.l10n.getConstant('agenda'),
+                    cssClass: 'e-views e-agenda'
+                };
+                break;
+            // case 'weekagenda':
+            //     view = {
+            //         align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-week', text: this.l10n.getConstant('weekAgenda'),
+            //         cssClass: 'e-week-agenda'
+            //     };
+            //     break;
+            // case 'workweekagenda':
+            //     view = {
+            //         align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-workweek',
+            //         text: this.l10n.getConstant('workWeekAgenda'), cssClass: 'e-work-week-agenda'
+            //     };
+            //     break;
+            case 'monthagenda':
+                view = {
+                    align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-month-agenda',
+                    text: this.l10n.getConstant('monthAgenda'), cssClass: 'e-views e-month-agenda'
+                };
+                break;
+        }
+        return view;
+    };
+    HeaderRenderer.prototype.renderHeaderPopup = function () {
+        var headerPopupEle = createElement('div', { className: cls.HEADER_POPUP_CLASS });
+        var headerCalendarEle = createElement('div', { className: cls.HEADER_CALENDAR_CLASS });
+        headerPopupEle.appendChild(headerCalendarEle);
+        this.element.appendChild(headerPopupEle);
+        this.headerPopup = new Popup(headerPopupEle, {
+            actionOnScroll: 'hide',
+            targetType: 'relative',
+            relateTo: this.getPopUpRelativeElement(),
+            position: { X: 'left', Y: 'bottom' },
+            enableRtl: this.parent.enableRtl
+        });
+        var calendarView = this.getCalendarView();
+        this.headerCalendar = new Calendar({
+            value: this.parent.selectedDate,
+            firstDayOfWeek: this.parent.firstDayOfWeek,
+            enableRtl: this.parent.enableRtl,
+            locale: this.parent.locale,
+            depth: calendarView,
+            start: calendarView,
+            change: this.calendarChange.bind(this)
+        });
+        this.headerCalendar.appendTo(headerCalendarEle);
+        this.headerPopup.hide();
+    };
+    HeaderRenderer.prototype.calendarChange = function (args) {
+        if (args.value.getTime() !== this.parent.selectedDate.getTime()) {
+            this.parent.changeDate(args.value);
+        }
+        this.headerPopup.hide();
+    };
+    HeaderRenderer.prototype.calculateViewIndex = function (args) {
+        var target = closest(args.originalEvent.target, '.e-views');
+        var views = [].slice.call(this.element.querySelectorAll('.e-views'));
+        return views.indexOf(target);
+    };
+    HeaderRenderer.prototype.toolbarClickHandler = function (args) {
+        if (!args.item) {
+            return;
+        }
+        var strClass = args.item.cssClass.replace('e-views ', '');
+        switch (strClass) {
+            case 'e-date-range':
+                if (!this.headerPopup) {
+                    this.renderHeaderPopup();
                 }
-            }
-            return items;
-        };
-        HeaderRenderer.prototype.getItemObject = function (viewName, displayName) {
-            var view;
-            var showInPopup = this.parent.isAdaptive;
-            switch (viewName) {
-                case 'day':
-                    view = {
-                        align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-day',
-                        text: displayName || this.l10n.getConstant('day'), cssClass: 'e-views e-day'
-                    };
-                    break;
-                case 'week':
-                    view = {
-                        align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-week',
-                        text: displayName || this.l10n.getConstant('week'), cssClass: 'e-views e-week'
-                    };
-                    break;
-                case 'workweek':
-                    view = {
-                        align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-workweek',
-                        text: displayName || this.l10n.getConstant('workWeek'), cssClass: 'e-views e-work-week'
-                    };
-                    break;
-                case 'month':
-                    view = {
-                        align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-month',
-                        text: displayName || this.l10n.getConstant('month'), cssClass: 'e-views e-month'
-                    };
-                    break;
-                case 'agenda':
-                    view = {
-                        align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-agenda', text: this.l10n.getConstant('agenda'),
-                        cssClass: 'e-views e-agenda'
-                    };
-                    break;
-                case 'monthagenda':
-                    view = {
-                        align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-month-agenda',
-                        text: this.l10n.getConstant('monthAgenda'), cssClass: 'e-views e-month-agenda'
-                    };
-                    break;
-            }
-            return view;
-        };
-        HeaderRenderer.prototype.renderHeaderPopup = function () {
-            var headerPopupEle = ej2_base_1.createElement('div', { className: cls.HEADER_POPUP_CLASS });
-            var headerCalendarEle = ej2_base_1.createElement('div', { className: cls.HEADER_CALENDAR_CLASS });
-            headerPopupEle.appendChild(headerCalendarEle);
-            this.element.appendChild(headerPopupEle);
-            this.headerPopup = new ej2_popups_1.Popup(headerPopupEle, {
-                actionOnScroll: 'hide',
-                targetType: 'relative',
-                relateTo: this.getPopUpRelativeElement(),
-                position: { X: 'left', Y: 'bottom' },
-                enableRtl: this.parent.enableRtl
-            });
-            var calendarView = this.getCalendarView();
-            this.headerCalendar = new ej2_calendars_1.Calendar({
-                value: this.parent.selectedDate,
-                firstDayOfWeek: this.parent.firstDayOfWeek,
-                enableRtl: this.parent.enableRtl,
-                locale: this.parent.locale,
-                depth: calendarView,
-                start: calendarView,
-                change: this.calendarChange.bind(this)
-            });
-            this.headerCalendar.appendTo(headerCalendarEle);
-            this.headerPopup.hide();
-        };
-        HeaderRenderer.prototype.calendarChange = function (args) {
-            if (args.value.getTime() !== this.parent.selectedDate.getTime()) {
-                this.parent.changeDate(args.value);
-            }
-            this.headerPopup.hide();
-        };
-        HeaderRenderer.prototype.calculateViewIndex = function (args) {
-            var target = ej2_base_1.closest(args.originalEvent.target, '.e-views');
-            var views = [].slice.call(this.element.querySelectorAll('.e-views'));
-            return views.indexOf(target);
-        };
-        HeaderRenderer.prototype.toolbarClickHandler = function (args) {
-            if (!args.item) {
-                return;
-            }
-            var strClass = args.item.cssClass.replace('e-views ', '');
-            switch (strClass) {
-                case 'e-date-range':
-                    if (!this.headerPopup) {
-                        this.renderHeaderPopup();
-                    }
-                    if (this.headerPopup.element.classList.contains(cls.POPUP_OPEN)) {
-                        this.headerPopup.hide();
-                    }
-                    else {
-                        this.headerPopup.show();
-                    }
-                    break;
-                case 'e-day':
-                    this.parent.changeView('Day', args.originalEvent, undefined, this.calculateViewIndex(args));
-                    break;
-                case 'e-week':
-                    this.parent.changeView('Week', args.originalEvent, undefined, this.calculateViewIndex(args));
-                    break;
-                case 'e-work-week':
-                    this.parent.changeView('WorkWeek', args.originalEvent, undefined, this.calculateViewIndex(args));
-                    break;
-                case 'e-month':
-                    this.parent.changeView('Month', args.originalEvent, undefined, this.calculateViewIndex(args));
-                    break;
-                case 'e-agenda':
-                    this.parent.changeView('Agenda', args.originalEvent, undefined, this.calculateViewIndex(args));
-                    break;
-                case 'e-month-agenda':
-                    this.parent.changeView('MonthAgenda', args.originalEvent, undefined, this.calculateViewIndex(args));
-                    break;
-                case 'e-today':
-                    if (!this.parent.isSelectedDate(util.resetTime(new Date()))) {
-                        this.parent.changeDate(util.resetTime(new Date()), args.originalEvent);
-                    }
-                    break;
-                case 'e-prev':
-                    this.parent.changeDate(this.parent.activeView.getNextPreviousDate('previous'), args.originalEvent);
-                    break;
-                case 'e-next':
-                    this.parent.changeDate(this.parent.activeView.getNextPreviousDate('next'), args.originalEvent);
-                    break;
-                case 'e-add':
-                    var data = void 0;
-                    if (this.parent.activeCellsData) {
-                        data = this.parent.activeCellsData;
-                    }
-                    else {
-                        var interval = this.parent.activeViewOptions.timeScale.interval;
-                        var slotCount = this.parent.activeViewOptions.timeScale.slotCount;
-                        var msInterval = (interval * util.MS_PER_MINUTE) / slotCount;
-                        var startTime = new Date(this.parent.selectedDate.getTime());
-                        startTime.setHours(new Date().getHours(), (Math.round(startTime.getMinutes() / msInterval) * msInterval), 0);
-                        var endTime = new Date(new Date(startTime.getTime()).setMilliseconds(startTime.getMilliseconds() + msInterval));
-                        data = ej2_base_1.extend({ startTime: startTime, endTime: endTime, isAllDay: false }, { cancel: false, event: args.originalEvent });
-                    }
-                    this.parent.eventWindow.openEditor(data, 'Add');
-                    break;
-            }
-            var toolbarPopUp = this.toolbarObj.element.querySelector('.e-toolbar-pop');
-            if (toolbarPopUp) {
-                toolbarPopUp.ej2_instances[0].hide({ name: 'SlideUp', duration: 100 });
-            }
-        };
-        HeaderRenderer.prototype.getHeaderElement = function () {
-            return this.element;
-        };
-        HeaderRenderer.prototype.updateHeaderItems = function (classType) {
-            var prevNavEle = this.toolbarObj.element.querySelector('.e-prev');
-            var nextNavEle = this.toolbarObj.element.querySelector('.e-next');
-            var dateRangeEle = this.toolbarObj.element.querySelector('.e-date-range');
-            if (prevNavEle) {
-                (classType === 'add') ? ej2_base_1.addClass([prevNavEle], cls.HIDDEN_CLASS) : ej2_base_1.removeClass([prevNavEle], cls.HIDDEN_CLASS);
-            }
-            if (nextNavEle) {
-                (classType === 'add') ? ej2_base_1.addClass([nextNavEle], cls.HIDDEN_CLASS) : ej2_base_1.removeClass([nextNavEle], cls.HIDDEN_CLASS);
-            }
-            if (dateRangeEle) {
-                (classType === 'add') ? ej2_base_1.addClass([dateRangeEle], cls.TEXT_ELLIPSIS) : ej2_base_1.removeClass([dateRangeEle], cls.TEXT_ELLIPSIS);
-            }
-        };
-        HeaderRenderer.prototype.getModuleName = function () {
-            return 'headerbar';
-        };
-        HeaderRenderer.prototype.destroy = function () {
-            if (this.headerPopup) {
-                this.headerPopup.destroy();
-            }
-            if (this.headerCalendar) {
-                this.headerCalendar.destroy();
-            }
-            if (!this.toolbarObj.isDestroyed) {
-                this.toolbarObj.destroy();
-                this.removeEventListener();
-                ej2_base_1.remove(this.element);
-            }
-        };
-        return HeaderRenderer;
-    }());
-    exports.HeaderRenderer = HeaderRenderer;
-});
+                if (this.headerPopup.element.classList.contains(cls.POPUP_OPEN)) {
+                    this.headerPopup.hide();
+                }
+                else {
+                    this.headerPopup.show();
+                }
+                break;
+            case 'e-day':
+                this.parent.changeView('Day', args.originalEvent, undefined, this.calculateViewIndex(args));
+                break;
+            case 'e-week':
+                this.parent.changeView('Week', args.originalEvent, undefined, this.calculateViewIndex(args));
+                break;
+            case 'e-work-week':
+                this.parent.changeView('WorkWeek', args.originalEvent, undefined, this.calculateViewIndex(args));
+                break;
+            case 'e-month':
+                this.parent.changeView('Month', args.originalEvent, undefined, this.calculateViewIndex(args));
+                break;
+            case 'e-agenda':
+                this.parent.changeView('Agenda', args.originalEvent, undefined, this.calculateViewIndex(args));
+                break;
+            // case 'e-week-agenda':
+            //     this.parent.changeView('weekAgenda', args.originalEvent);
+            //     break;
+            // case 'e-work-week-agenda':
+            //     this.parent.changeView('workWeekAgenda', args.originalEvent);
+            //     break;
+            case 'e-month-agenda':
+                this.parent.changeView('MonthAgenda', args.originalEvent, undefined, this.calculateViewIndex(args));
+                break;
+            case 'e-today':
+                if (!this.parent.isSelectedDate(util.resetTime(new Date()))) {
+                    this.parent.changeDate(util.resetTime(new Date()), args.originalEvent);
+                }
+                break;
+            case 'e-prev':
+                this.parent.changeDate(this.parent.activeView.getNextPreviousDate('previous'), args.originalEvent);
+                break;
+            case 'e-next':
+                this.parent.changeDate(this.parent.activeView.getNextPreviousDate('next'), args.originalEvent);
+                break;
+            case 'e-add':
+                var data = void 0;
+                var isSameTime = this.parent.activeCellsData.startTime.getTime() === this.parent.activeCellsData.endTime.getTime();
+                if (this.parent.activeCellsData && !isSameTime) {
+                    data = this.parent.activeCellsData;
+                }
+                else {
+                    var interval = this.parent.activeViewOptions.timeScale.interval;
+                    var slotCount = this.parent.activeViewOptions.timeScale.slotCount;
+                    var msInterval = (interval * util.MS_PER_MINUTE) / slotCount;
+                    var startTime = new Date(this.parent.selectedDate.getTime());
+                    startTime.setHours(new Date().getHours(), (Math.round(startTime.getMinutes() / msInterval) * msInterval), 0);
+                    var endTime = new Date(new Date(startTime.getTime()).setMilliseconds(startTime.getMilliseconds() + msInterval));
+                    data = { startTime: startTime, endTime: endTime, isAllDay: false };
+                }
+                this.parent.eventWindow.openEditor(extend(data, { cancel: false, event: args.originalEvent }), 'Add');
+                break;
+        }
+        var toolbarPopUp = this.toolbarObj.element.querySelector('.e-toolbar-pop');
+        if (toolbarPopUp) {
+            toolbarPopUp.ej2_instances[0].hide({ name: 'SlideUp', duration: 100 });
+        }
+    };
+    HeaderRenderer.prototype.getHeaderElement = function () {
+        return this.element;
+    };
+    HeaderRenderer.prototype.updateHeaderItems = function (classType) {
+        var prevNavEle = this.toolbarObj.element.querySelector('.e-prev');
+        var nextNavEle = this.toolbarObj.element.querySelector('.e-next');
+        var dateRangeEle = this.toolbarObj.element.querySelector('.e-date-range');
+        if (prevNavEle) {
+            (classType === 'add') ? addClass([prevNavEle], cls.HIDDEN_CLASS) : removeClass([prevNavEle], cls.HIDDEN_CLASS);
+        }
+        if (nextNavEle) {
+            (classType === 'add') ? addClass([nextNavEle], cls.HIDDEN_CLASS) : removeClass([nextNavEle], cls.HIDDEN_CLASS);
+        }
+        if (dateRangeEle) {
+            (classType === 'add') ? addClass([dateRangeEle], cls.TEXT_ELLIPSIS) : removeClass([dateRangeEle], cls.TEXT_ELLIPSIS);
+        }
+    };
+    /**
+     * Get module name.
+     */
+    HeaderRenderer.prototype.getModuleName = function () {
+        return 'headerbar';
+    };
+    /**
+     * To destroy the headerbar.
+     * @return {void}
+     * @private
+     */
+    HeaderRenderer.prototype.destroy = function () {
+        if (this.headerPopup) {
+            this.headerPopup.destroy();
+        }
+        if (this.headerCalendar) {
+            this.headerCalendar.destroy();
+        }
+        if (!this.toolbarObj.isDestroyed) {
+            this.toolbarObj.destroy();
+            this.removeEventListener();
+            remove(this.element);
+        }
+    };
+    return HeaderRenderer;
+}());
+export { HeaderRenderer };

src/schedule/renderer/month-agenda.js

@@ -11,127 +11,137 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "../event-renderer/agenda-base", "./month", "../base/util", "../base/css-constant"], function (require, exports, ej2_base_1, agenda_base_1, month_1, util, cls) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var MonthAgenda = (function (_super) {
-        __extends(MonthAgenda, _super);
-        function MonthAgenda(parent) {
-            var _this = _super.call(this, parent) || this;
-            _this.dayNameFormat = 'narrow';
-            _this.viewClass = 'e-month-agenda-view';
-            _this.agendaDates = {};
-            _this.agendaBase = new agenda_base_1.AgendaBase(parent);
-            return _this;
+import { createElement, addClass, formatUnit, remove } from '@syncfusion/ej2-base';
+import { AgendaBase } from '../event-renderer/agenda-base';
+import { Month } from './month';
+import * as util from '../base/util';
+import * as cls from '../base/css-constant';
+/**
+ * month agenda view
+ */
+var MonthAgenda = /** @class */ (function (_super) {
+    __extends(MonthAgenda, _super);
+    /**
+     * Constructor
+     */
+    function MonthAgenda(parent) {
+        var _this = _super.call(this, parent) || this;
+        _this.dayNameFormat = 'narrow';
+        _this.viewClass = 'e-month-agenda-view';
+        _this.agendaDates = {};
+        _this.agendaBase = new AgendaBase(parent);
+        return _this;
+    }
+    MonthAgenda.prototype.renderAppointmentContainer = function () {
+        var contentArea = this.getContentAreaElement();
+        var wrapperContainer = createElement('div', { className: cls.WRAPPER_CONTAINER_CLASS });
+        contentArea.appendChild(wrapperContainer);
+        var appWrap = createElement('div', { className: cls.APPOINTMENT_WRAP_CLASS });
+        wrapperContainer.appendChild(appWrap);
+        this.appendAppContainer(appWrap);
+        this.setEventWrapperHeight();
+    };
+    MonthAgenda.prototype.getDayNameFormat = function () {
+        if (this.parent.isAdaptive) {
+            return 'narrow';
         }
-        MonthAgenda.prototype.renderAppointmentContainer = function () {
-            var contentArea = this.getContentAreaElement();
-            var wrapperContainer = ej2_base_1.createElement('div', { className: cls.WRAPPER_CONTAINER_CLASS });
-            contentArea.appendChild(wrapperContainer);
-            var appWrap = ej2_base_1.createElement('div', { className: cls.APPOINTMENT_WRAP_CLASS });
-            wrapperContainer.appendChild(appWrap);
-            this.appendAppContainer(appWrap);
-            this.setEventWrapperHeight();
-        };
-        MonthAgenda.prototype.getDayNameFormat = function () {
-            if (this.parent.isAdaptive) {
-                return 'narrow';
+        return 'abbreviated';
+    };
+    MonthAgenda.prototype.setEventWrapperHeight = function () {
+        var headerHeight = (this.parent.headerModule ? this.parent.headerModule.getHeaderElement().offsetHeight : 0) + 2;
+        var resourceWrapper = this.parent.element.querySelector('.' + cls.RESOURCE_HEADER_TOOLBAR);
+        if (resourceWrapper) {
+            headerHeight += resourceWrapper.offsetHeight;
+        }
+        var contentArea = this.getContentAreaElement().firstChild;
+        var dateHeader = this.element.querySelector('.' + cls.DATE_HEADER_WRAP_CLASS);
+        var availableHeight = this.parent.element.offsetHeight - headerHeight - dateHeader.offsetHeight - contentArea.offsetHeight;
+        var wrapperContainer = this.element.querySelector('.' + cls.WRAPPER_CONTAINER_CLASS);
+        var eventWrapper = this.element.querySelector('.' + cls.APPOINTMENT_WRAP_CLASS);
+        wrapperContainer.style.height = eventWrapper.style.height = formatUnit(availableHeight);
+    };
+    MonthAgenda.prototype.onDataReady = function (args) {
+        this.setEventWrapperHeight();
+        this.clearElements();
+        var eventCollection = args.processedData;
+        if (this.parent.uiStateValues.isGroupAdaptive) {
+            var resource = this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex];
+            eventCollection = this.parent.eventBase.filterEventsByResource(resource, eventCollection);
+        }
+        this.parent.eventsProcessed = this.agendaBase.processAgendaEvents(eventCollection);
+        var count = 0;
+        for (var _i = 0, _a = this.renderDates; _i < _a.length; _i++) {
+            var date = _a[_i];
+            var filterData = this.appointmentFiltering(date);
+            var workCell = this.element.querySelectorAll('.' + cls.WORK_CELLS_CLASS)[count];
+            if (filterData.length > 0) {
+                if (!workCell.querySelector('.' + cls.APPOINTMENT_INDICATOR_CLASS)) {
+                    workCell.appendChild(createElement('div', { className: cls.APPOINTMENT_INDICATOR_CLASS }));
+                }
+                if (date.getTime() === util.resetTime(new Date(this.parent.selectedDate.getTime())).getTime()) {
+                    this.onEventRender(filterData, date);
+                }
             }
-            return 'abbreviated';
-        };
-        MonthAgenda.prototype.setEventWrapperHeight = function () {
-            var headerHeight = (this.parent.headerModule ? this.parent.headerModule.getHeaderElement().offsetHeight : 0) + 2;
-            var resourceWrapper = this.parent.element.querySelector('.' + cls.RESOURCE_HEADER_TOOLBAR);
-            if (resourceWrapper) {
-                headerHeight += resourceWrapper.offsetHeight;
+            count++;
+        }
+    };
+    MonthAgenda.prototype.onCellClick = function (event) {
+        this.parent.quickPopup.quickPopupHide();
+        var filterData = this.appointmentFiltering(event.startTime);
+        this.onEventRender(filterData, event.startTime);
+        this.parent.setProperties({ selectedDate: new Date('' + event.startTime) }, true);
+    };
+    MonthAgenda.prototype.onEventRender = function (events, date) {
+        var appWrap = this.element.querySelector('.' + cls.APPOINTMENT_WRAP_CLASS);
+        appWrap.innerHTML = '';
+        if (this.parent.activeViewOptions.group.resources.length === 0 || this.parent.uiStateValues.isGroupAdaptive) {
+            if (events.length > 0) {
+                var appContainer = createElement('div', { className: cls.APPOINTMENT_CONTAINER_CLASS });
+                appWrap.appendChild(this.agendaBase.
+                    createAgendaContentElement('data', events, appContainer));
             }
-            var contentArea = this.getContentAreaElement().firstChild;
-            var dateHeader = this.element.querySelector('.' + cls.DATE_HEADER_WRAP_CLASS);
-            var availableHeight = this.parent.element.offsetHeight - headerHeight - dateHeader.offsetHeight - contentArea.offsetHeight;
-            var wrapperContainer = this.element.querySelector('.' + cls.WRAPPER_CONTAINER_CLASS);
-            var eventWrapper = this.element.querySelector('.' + cls.APPOINTMENT_WRAP_CLASS);
-            wrapperContainer.style.height = eventWrapper.style.height = ej2_base_1.formatUnit(availableHeight);
-        };
-        MonthAgenda.prototype.onDataReady = function (args) {
-            this.setEventWrapperHeight();
-            this.clearElements();
-            var eventCollection = args.processedData;
-            if (this.parent.uiStateValues.isGroupAdaptive) {
-                var resource = this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex];
-                eventCollection = this.parent.eventBase.filterEventsByResource(resource, eventCollection);
+            else {
+                this.appendAppContainer(appWrap);
             }
-            this.parent.eventsProcessed = this.agendaBase.processAgendaEvents(eventCollection);
-            var count = 0;
-            for (var _i = 0, _a = this.renderDates; _i < _a.length; _i++) {
-                var date = _a[_i];
-                var filterData = this.appointmentFiltering(date);
-                var workCell = this.element.querySelectorAll('.' + cls.WORK_CELLS_CLASS)[count];
-                if (filterData.length > 0) {
-                    if (!workCell.querySelector('.' + cls.APPOINTMENT_INDICATOR_CLASS)) {
-                        workCell.appendChild(ej2_base_1.createElement('div', { className: cls.APPOINTMENT_INDICATOR_CLASS }));
-                    }
-                    if (date.getTime() === util.resetTime(new Date(this.parent.selectedDate.getTime())).getTime()) {
-                        this.onEventRender(filterData, date);
-                    }
-                }
-                count++;
+        }
+        else {
+            if (events.length > 0) {
+                var table = this.createTableLayout();
+                var tBody = table.querySelector('tbody');
+                this.agendaBase.calculateResourceTableElement(tBody, 1, date);
+                table.appendChild(tBody);
+                appWrap.appendChild(table);
             }
-        };
-        MonthAgenda.prototype.onCellClick = function (event) {
-            this.parent.quickPopup.quickPopupHide();
-            var filterData = this.appointmentFiltering(event.startTime);
-            this.onEventRender(filterData, event.startTime);
-            this.parent.setProperties({ selectedDate: new Date('' + event.startTime) }, true);
-        };
-        MonthAgenda.prototype.onEventRender = function (events, date) {
-            var appWrap = this.element.querySelector('.' + cls.APPOINTMENT_WRAP_CLASS);
-            appWrap.innerHTML = '';
-            if (this.parent.activeViewOptions.group.resources.length === 0 || this.parent.uiStateValues.isGroupAdaptive) {
-                if (events.length > 0) {
-                    var appContainer = ej2_base_1.createElement('div', { className: cls.APPOINTMENT_CONTAINER_CLASS });
-                    appWrap.appendChild(this.agendaBase.
-                        createAgendaContentElement('data', events, appContainer));
-                }
-                else {
-                    this.appendAppContainer(appWrap);
-                }
-            }
             else {
-                if (events.length > 0) {
-                    var table = this.createTableLayout();
-                    var tBody = table.querySelector('tbody');
-                    this.agendaBase.calculateResourceTableElement(tBody, 1, date);
-                    table.appendChild(tBody);
-                    appWrap.appendChild(table);
-                }
-                else {
-                    this.appendAppContainer(appWrap);
-                }
+                this.appendAppContainer(appWrap);
             }
-            this.agendaBase.wireEventActions();
-        };
-        MonthAgenda.prototype.appointmentFiltering = function (date) {
-            var dateStart = util.resetTime(new Date(date.getTime()));
-            var dateEnd = util.setTime(new Date(dateStart.getTime()), util.MS_PER_DAY);
-            return this.parent.eventBase.filterEvents(dateStart, dateEnd);
-        };
-        MonthAgenda.prototype.clearElements = function () {
-            var appointmentIndicators = [].slice.call(this.element.querySelectorAll('.' + cls.APPOINTMENT_INDICATOR_CLASS));
-            for (var _i = 0, appointmentIndicators_1 = appointmentIndicators; _i < appointmentIndicators_1.length; _i++) {
-                var appointmentIndicator = appointmentIndicators_1[_i];
-                ej2_base_1.remove(appointmentIndicator);
-            }
-            this.appendAppContainer(this.element.querySelector('.' + cls.APPOINTMENT_WRAP_CLASS));
-        };
-        MonthAgenda.prototype.appendAppContainer = function (appWrap) {
-            var app = ej2_base_1.createElement('div', { className: cls.APPOINTMENT_CONTAINER_CLASS });
-            ej2_base_1.addClass([app], cls.AGENDA_NO_EVENT_CLASS);
-            app.innerHTML = this.parent.localeObj.getConstant('noEvents');
-            appWrap.innerHTML = '';
-            appWrap.appendChild(app);
-        };
-        MonthAgenda.prototype.getModuleName = function () {
-            return 'monthAgenda';
-        };
-        return MonthAgenda;
-    }(month_1.Month));
-    exports.MonthAgenda = MonthAgenda;
-});
+        }
+        this.agendaBase.wireEventActions();
+    };
+    MonthAgenda.prototype.appointmentFiltering = function (date) {
+        var dateStart = util.resetTime(new Date(date.getTime()));
+        var dateEnd = util.setTime(new Date(dateStart.getTime()), util.MS_PER_DAY);
+        return this.parent.eventBase.filterEvents(dateStart, dateEnd);
+    };
+    MonthAgenda.prototype.clearElements = function () {
+        var appointmentIndicators = [].slice.call(this.element.querySelectorAll('.' + cls.APPOINTMENT_INDICATOR_CLASS));
+        for (var _i = 0, appointmentIndicators_1 = appointmentIndicators; _i < appointmentIndicators_1.length; _i++) {
+            var appointmentIndicator = appointmentIndicators_1[_i];
+            remove(appointmentIndicator);
+        }
+        this.appendAppContainer(this.element.querySelector('.' + cls.APPOINTMENT_WRAP_CLASS));
+    };
+    MonthAgenda.prototype.appendAppContainer = function (appWrap) {
+        var app = createElement('div', { className: cls.APPOINTMENT_CONTAINER_CLASS });
+        addClass([app], cls.AGENDA_NO_EVENT_CLASS);
+        app.innerHTML = this.parent.localeObj.getConstant('noEvents');
+        appWrap.innerHTML = '';
+        appWrap.appendChild(app);
+    };
+    /**
+     * Get module name.
+     */
+    MonthAgenda.prototype.getModuleName = function () {
+        return 'monthAgenda';
+    };
+    return MonthAgenda;
+}(Month));
+export { MonthAgenda };

src/schedule/renderer/month.js

@@ -11,378 +11,400 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../actions/work-cells", "./view-base", "../base/util", "../base/constant", "../base/css-constant", "../event-renderer/month"], function (require, exports, ej2_base_1, ej2_base_2, work_cells_1, view_base_1, util, event, cls, month_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var Month = (function (_super) {
-        __extends(Month, _super);
-        function Month(parent) {
-            var _this = _super.call(this, parent) || this;
-            _this.dayNameFormat = 'wide';
-            _this.viewClass = 'e-month-view';
-            _this.isInverseTableSelect = false;
-            _this.monthDates = {};
-            _this.workCellAction = new work_cells_1.WorkCellInteraction(parent);
-            return _this;
+import { EventHandler, formatUnit, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { createElement, remove, addClass, append, prepend } from '@syncfusion/ej2-base';
+import { WorkCellInteraction } from '../actions/work-cells';
+import { ViewBase } from './view-base';
+import * as util from '../base/util';
+import * as event from '../base/constant';
+import * as cls from '../base/css-constant';
+import { MonthEvent } from '../event-renderer/month';
+/**
+ * month view
+ */
+var Month = /** @class */ (function (_super) {
+    __extends(Month, _super);
+    /**
+     * Constructor for month view
+     */
+    function Month(parent) {
+        var _this = _super.call(this, parent) || this;
+        _this.dayNameFormat = 'wide';
+        _this.viewClass = 'e-month-view';
+        _this.isInverseTableSelect = false;
+        _this.monthDates = {};
+        _this.workCellAction = new WorkCellInteraction(parent);
+        return _this;
+    }
+    Month.prototype.addEventListener = function () {
+        this.parent.on(event.scrollUiUpdate, this.onScrollUiUpdate, this);
+        this.parent.on(event.dataReady, this.onDataReady, this);
+        this.parent.on(event.cellClick, this.onCellClick, this);
+    };
+    Month.prototype.removeEventListener = function () {
+        this.parent.off(event.scrollUiUpdate, this.onScrollUiUpdate);
+        this.parent.off(event.dataReady, this.onDataReady);
+        this.parent.off(event.cellClick, this.onCellClick);
+    };
+    Month.prototype.onDataReady = function (args) {
+        var monthEvent = new MonthEvent(this.parent);
+        monthEvent.renderAppointments();
+    };
+    Month.prototype.onCellClick = function (event) {
+        // Here cell click
+    };
+    Month.prototype.onContentScroll = function (e) {
+        this.getDatesHeaderElement().firstChild.scrollLeft = e.target.scrollLeft;
+    };
+    Month.prototype.onScrollUiUpdate = function (args) {
+        var headerHeight = 0;
+        if (this.parent.headerModule) {
+            headerHeight += this.parent.headerModule.getHeaderElement().offsetHeight;
         }
-        Month.prototype.addEventListener = function () {
-            this.parent.on(event.scrollUiUpdate, this.onScrollUiUpdate, this);
-            this.parent.on(event.dataReady, this.onDataReady, this);
-            this.parent.on(event.cellClick, this.onCellClick, this);
-        };
-        Month.prototype.removeEventListener = function () {
-            this.parent.off(event.scrollUiUpdate, this.onScrollUiUpdate);
-            this.parent.off(event.dataReady, this.onDataReady);
-            this.parent.off(event.cellClick, this.onCellClick);
-        };
-        Month.prototype.onDataReady = function (args) {
-            var monthEvent = new month_1.MonthEvent(this.parent);
-            monthEvent.renderAppointments();
-        };
-        Month.prototype.onCellClick = function (event) {
-        };
-        Month.prototype.onContentScroll = function (e) {
-            this.getDatesHeaderElement().firstChild.scrollLeft = e.target.scrollLeft;
-        };
-        Month.prototype.onScrollUiUpdate = function (args) {
-            var headerHeight = 0;
-            if (this.parent.headerModule) {
-                headerHeight += this.parent.headerModule.getHeaderElement().offsetHeight;
+        if (this.parent.uiStateValues.isGroupAdaptive && this.parent.currentView !== 'MonthAgenda') {
+            headerHeight += this.parent.element.querySelector('.' + cls.RESOURCE_HEADER_TOOLBAR).offsetHeight;
+        }
+        var header = this.getDatesHeaderElement();
+        var content = this.getContentAreaElement();
+        content.style.height = 'auto';
+        content.style.height = formatUnit(this.parent.element.offsetHeight - headerHeight - header.offsetHeight - 2);
+        // tslint:disable:no-any
+        if (content.offsetWidth - content.clientWidth > 0) {
+            var scrollBarWidth = util.getScrollBarWidth();
+            header.firstChild.style[args.cssProperties.border] = scrollBarWidth > 0 ? '1px' : '0px';
+            header.style[args.cssProperties.padding] = scrollBarWidth > 0 ? scrollBarWidth - 1 + 'px' : '0px';
+        }
+        else {
+            header.firstChild.style[args.cssProperties.border] = '';
+            header.style[args.cssProperties.padding] = '';
+        }
+        // tslint:enable:no-any
+    };
+    Month.prototype.generateColumnLevels = function () {
+        var colLevels = [];
+        var level = this.getDateSlots(this.renderDates, this.parent.activeViewOptions.workDays);
+        if (this.parent.activeViewOptions.group.resources.length > 0) {
+            colLevels = this.parent.resourceBase.generateResourceLevels(level);
+            if (this.parent.currentView === 'MonthAgenda') {
+                colLevels = [level];
             }
-            if (this.parent.uiStateValues.isGroupAdaptive && this.parent.currentView !== 'MonthAgenda') {
-                headerHeight += this.parent.element.querySelector('.' + cls.RESOURCE_HEADER_TOOLBAR).offsetHeight;
+            if (this.parent.uiStateValues.isGroupAdaptive) {
+                var resourceLevel = this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex];
+                colLevels = [this.getDateSlots(resourceLevel.renderDates, resourceLevel.workDays)];
             }
-            var header = this.getDatesHeaderElement();
-            var content = this.getContentAreaElement();
-            content.style.height = 'auto';
-            content.style.height = ej2_base_1.formatUnit(this.parent.element.offsetHeight - headerHeight - header.offsetHeight - 2);
-            if (content.offsetWidth - content.clientWidth > 0) {
-                var scrollBarWidth = util.getScrollBarWidth();
-                header.firstChild.style[args.cssProperties.border] = scrollBarWidth > 0 ? '1px' : '0px';
-                header.style[args.cssProperties.padding] = scrollBarWidth > 0 ? scrollBarWidth - 1 + 'px' : '0px';
+        }
+        else {
+            colLevels.push(level);
+        }
+        this.colLevels = colLevels;
+        return colLevels;
+    };
+    Month.prototype.getDateSlots = function (renderDates, workDays) {
+        var count = this.parent.activeViewOptions.showWeekend ? util.WEEK_LENGTH : workDays.length;
+        var dateSlots = [];
+        for (var col = 0; col < count; col++) {
+            var classList = [cls.HEADER_CELLS_CLASS];
+            var currentDateIndex = renderDates.slice(0, count).map(function (date) { return date.getDay(); });
+            if (this.isCurrentMonth(this.parent.selectedDate) && currentDateIndex.indexOf(new Date().getDay()) === col) {
+                classList.push(cls.CURRENT_DAY_CLASS);
             }
-            else {
-                header.firstChild.style[args.cssProperties.border] = '';
-                header.style[args.cssProperties.padding] = '';
+            dateSlots.push({ date: renderDates[col], type: 'monthHeader', className: classList, colSpan: 1, workDays: workDays });
+        }
+        return dateSlots;
+    };
+    Month.prototype.getDayNameFormat = function () {
+        if (this.parent.isAdaptive || this.parent.activeViewOptions.group.resources.length > 0) {
+            return 'abbreviated';
+        }
+        return 'wide';
+    };
+    Month.prototype.renderLayout = function (type) {
+        this.dayNameFormat = this.getDayNameFormat();
+        this.setPanel(createElement('div', { className: cls.TABLE_WRAP_CLASS }));
+        var clsList = [this.viewClass];
+        clsList.push(type);
+        if (this.parent.activeViewOptions.group.byDate) {
+            clsList.push('e-by-date');
+        }
+        addClass([this.element], clsList);
+        this.renderPanel(type);
+        this.element.appendChild(this.createTableLayout(cls.OUTER_TABLE_CLASS));
+        this.colLevels = this.generateColumnLevels();
+        this.renderHeader();
+        this.renderContent();
+        var target = (this.parent.currentView === 'MonthAgenda') ? this.parent.activeView.getPanel() : this.parent.element;
+        if (this.parent.uiStateValues.isGroupAdaptive && !target.querySelector('.' + cls.RESOURCE_TOOLBAR_CONTAINER)) {
+            this.renderResourceMobileLayout();
+        }
+        this.parent.notify(event.contentReady, {});
+    };
+    Month.prototype.wireCellEvents = function (element) {
+        EventHandler.add(element, 'mousedown', this.workCellAction.cellMouseDown, this);
+        EventHandler.add(element, 'click', this.workCellAction.cellClick, this);
+        EventHandler.add(element, 'dblclick', this.workCellAction.cellDblClick, this);
+    };
+    Month.prototype.renderHeader = function () {
+        var tr = createElement('tr');
+        var dateTd = createElement('td');
+        dateTd.appendChild(this.renderDatesHeader());
+        tr.appendChild(dateTd);
+        prepend([tr], this.element.querySelector('tbody'));
+    };
+    Month.prototype.renderContent = function () {
+        var tr = createElement('tr');
+        var workTd = createElement('td');
+        workTd.appendChild(this.renderContentArea());
+        tr.appendChild(workTd);
+        this.element.querySelector('tbody').appendChild(tr);
+        this.renderAppointmentContainer();
+    };
+    Month.prototype.renderAppointmentContainer = function () {
+        //Here needs to render mobile view appointment details on selected date
+    };
+    Month.prototype.renderDatesHeader = function () {
+        var container = createElement('div', { className: cls.DATE_HEADER_CONTAINER_CLASS });
+        var wrap = createElement('div', { className: cls.DATE_HEADER_WRAP_CLASS });
+        container.appendChild(wrap);
+        var table = this.createTableLayout();
+        var trEle = createElement('tr');
+        var colGroupEle = createElement('colgroup');
+        for (var i = 0; i < this.colLevels[this.colLevels.length - 1].length; i++) {
+            colGroupEle.appendChild(createElement('col'));
+        }
+        table.appendChild(colGroupEle);
+        for (var i = 0; i < this.colLevels.length; i++) {
+            var level = this.colLevels[i];
+            var ntr = trEle.cloneNode();
+            for (var j = 0; j < level.length; j++) {
+                var td = level[j];
+                ntr.appendChild(this.createHeaderCell(td));
             }
+            table.querySelector('tbody').appendChild(ntr);
+        }
+        wrap.appendChild(table);
+        return container;
+    };
+    Month.prototype.createHeaderCell = function (td) {
+        var tdEle = createElement('th');
+        if (td.colSpan) {
+            tdEle.setAttribute('colspan', td.colSpan.toString());
+        }
+        if (td.className) {
+            addClass([tdEle], td.className);
+        }
+        if (td.type === 'monthHeader') {
+            var ele = createElement('span', { innerHTML: this.parent.getDayNames(this.dayNameFormat)[td.date.getDay()] });
+            tdEle.appendChild(ele);
+        }
+        if (td.type === 'resourceHeader') {
+            this.setResourceHeaderContent(tdEle, td);
+        }
+        var args = { elementType: td.type, element: tdEle, date: td.date, groupIndex: td.groupIndex };
+        this.parent.trigger(event.renderCell, args);
+        return tdEle;
+    };
+    Month.prototype.isOtherMonth = function (date) {
+        return date.getTime() < this.monthDates.start.getTime() || date.getTime() > this.monthDates.end.getTime();
+    };
+    Month.prototype.renderContentArea = function () {
+        var wrap = createElement('div', { className: cls.CONTENT_WRAP_CLASS });
+        var tbl = this.createTableLayout(cls.CONTENT_TABLE_CLASS);
+        var tbody = tbl.querySelector('tbody');
+        var tr = createElement('tr', { attrs: { role: 'row' } });
+        var td = createElement('td', { attrs: { role: 'gridcell', 'aria-selected': 'false' } });
+        var monthDate = new Date(this.parent.selectedDate.getTime());
+        this.monthDates = {
+            start: util.firstDateOfMonth(monthDate),
+            end: util.lastDateOfMonth(util.addMonths(monthDate, this.parent.activeViewOptions.interval - 1))
         };
-        Month.prototype.generateColumnLevels = function () {
-            var colLevels = [];
-            var level = this.getDateSlots(this.renderDates, this.parent.activeViewOptions.workDays);
-            if (this.parent.activeViewOptions.group.resources.length > 0) {
-                colLevels = this.parent.resourceBase.generateResourceLevels(level);
-                if (this.parent.currentView === 'MonthAgenda') {
-                    colLevels = [level];
-                }
-                if (this.parent.uiStateValues.isGroupAdaptive) {
-                    var resourceLevel = this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex];
-                    colLevels = [this.getDateSlots(resourceLevel.renderDates, resourceLevel.workDays)];
-                }
+        var slotDatas = [];
+        var prepareSlots = function (rowIndex, renderDate, resData, classList) {
+            var data = {
+                date: new Date(+renderDate), groupIndex: resData.groupIndex, workDays: resData.workDays,
+                type: 'monthCells', className: classList || [cls.WORK_CELLS_CLASS]
+            };
+            if (!slotDatas[rowIndex]) {
+                slotDatas[rowIndex] = [];
             }
-            else {
-                colLevels.push(level);
-            }
-            this.colLevels = colLevels;
-            return colLevels;
+            slotDatas[rowIndex].push(data);
         };
-        Month.prototype.getDateSlots = function (renderDates, workDays) {
-            var count = this.parent.activeViewOptions.showWeekend ? util.WEEK_LENGTH : workDays.length;
-            var dateSlots = [];
-            for (var col = 0; col < count; col++) {
-                var classList = [cls.HEADER_CELLS_CLASS];
-                var currentDateIndex = renderDates.slice(0, count).map(function (date) { return date.getDay(); });
-                if (this.isCurrentMonth(this.parent.selectedDate) && currentDateIndex.indexOf(new Date().getDay()) === col) {
-                    classList.push(cls.CURRENT_DAY_CLASS);
-                }
-                dateSlots.push({ date: renderDates[col], type: 'monthHeader', className: classList, colSpan: 1, workDays: workDays });
-            }
-            return dateSlots;
-        };
-        Month.prototype.getDayNameFormat = function () {
-            if (this.parent.isAdaptive || this.parent.activeViewOptions.group.resources.length > 0) {
-                return 'abbreviated';
-            }
-            return 'wide';
-        };
-        Month.prototype.renderLayout = function (type) {
-            this.dayNameFormat = this.getDayNameFormat();
-            this.setPanel(ej2_base_2.createElement('div', { className: cls.TABLE_WRAP_CLASS }));
-            var clsList = [this.viewClass];
-            clsList.push(type);
-            if (this.parent.activeViewOptions.group.byDate) {
-                clsList.push('e-by-date');
-            }
-            ej2_base_2.addClass([this.element], clsList);
-            this.renderPanel(type);
-            this.element.appendChild(this.createTableLayout(cls.OUTER_TABLE_CLASS));
-            this.colLevels = this.generateColumnLevels();
-            this.renderHeader();
-            this.renderContent();
-            var target = (this.parent.currentView === 'MonthAgenda') ? this.parent.activeView.getPanel() : this.parent.element;
-            if (this.parent.uiStateValues.isGroupAdaptive && !target.querySelector('.' + cls.RESOURCE_TOOLBAR_CONTAINER)) {
-                this.renderResourceMobileLayout();
-            }
-            this.parent.notify(event.contentReady, {});
-        };
-        Month.prototype.wireCellEvents = function (element) {
-            ej2_base_1.EventHandler.add(element, 'mousedown', this.workCellAction.cellMouseDown, this);
-            ej2_base_1.EventHandler.add(element, 'click', this.workCellAction.cellClick, this);
-            ej2_base_1.EventHandler.add(element, 'dblclick', this.workCellAction.cellDblClick, this);
-        };
-        Month.prototype.renderHeader = function () {
-            var tr = ej2_base_2.createElement('tr');
-            var dateTd = ej2_base_2.createElement('td');
-            dateTd.appendChild(this.renderDatesHeader());
-            tr.appendChild(dateTd);
-            ej2_base_2.prepend([tr], this.element.querySelector('tbody'));
-        };
-        Month.prototype.renderContent = function () {
-            var tr = ej2_base_2.createElement('tr');
-            var workTd = ej2_base_2.createElement('td');
-            workTd.appendChild(this.renderContentArea());
-            tr.appendChild(workTd);
-            this.element.querySelector('tbody').appendChild(tr);
-            this.renderAppointmentContainer();
-        };
-        Month.prototype.renderAppointmentContainer = function () {
-        };
-        Month.prototype.renderDatesHeader = function () {
-            var container = ej2_base_2.createElement('div', { className: cls.DATE_HEADER_CONTAINER_CLASS });
-            var wrap = ej2_base_2.createElement('div', { className: cls.DATE_HEADER_WRAP_CLASS });
-            container.appendChild(wrap);
-            var table = this.createTableLayout();
-            var trEle = ej2_base_2.createElement('tr');
-            var colGroupEle = ej2_base_2.createElement('colgroup');
-            for (var i = 0; i < this.colLevels[this.colLevels.length - 1].length; i++) {
-                colGroupEle.appendChild(ej2_base_2.createElement('col'));
-            }
-            table.appendChild(colGroupEle);
-            for (var i = 0; i < this.colLevels.length; i++) {
-                var level = this.colLevels[i];
-                var ntr = trEle.cloneNode();
-                for (var j = 0; j < level.length; j++) {
-                    var td = level[j];
-                    ntr.appendChild(this.createHeaderCell(td));
-                }
-                table.querySelector('tbody').appendChild(ntr);
-            }
-            wrap.appendChild(table);
-            return container;
-        };
-        Month.prototype.createHeaderCell = function (td) {
-            var tdEle = ej2_base_2.createElement('th');
-            if (td.colSpan) {
-                tdEle.setAttribute('colspan', td.colSpan.toString());
-            }
-            if (td.className) {
-                ej2_base_2.addClass([tdEle], td.className);
-            }
-            if (td.type === 'monthHeader') {
-                var ele = ej2_base_2.createElement('span', { innerHTML: this.parent.getDayNames(this.dayNameFormat)[td.date.getDay()] });
-                tdEle.appendChild(ele);
-            }
-            if (td.type === 'resourceHeader') {
-                this.setResourceHeaderContent(tdEle, td);
-            }
-            var args = { elementType: td.type, element: tdEle, date: td.date, groupIndex: td.groupIndex };
-            this.parent.trigger(event.renderCell, args);
-            return tdEle;
-        };
-        Month.prototype.isOtherMonth = function (date) {
-            return date.getTime() < this.monthDates.start.getTime() || date.getTime() > this.monthDates.end.getTime();
-        };
-        Month.prototype.renderContentArea = function () {
-            var wrap = ej2_base_2.createElement('div', { className: cls.CONTENT_WRAP_CLASS });
-            var tbl = this.createTableLayout(cls.CONTENT_TABLE_CLASS);
-            var tbody = tbl.querySelector('tbody');
-            var tr = ej2_base_2.createElement('tr', { attrs: { role: 'row' } });
-            var td = ej2_base_2.createElement('td', { attrs: { role: 'gridcell', 'aria-selected': 'false' } });
-            var monthDate = new Date(this.parent.selectedDate.getTime());
-            this.monthDates = {
-                start: util.firstDateOfMonth(monthDate),
-                end: util.lastDateOfMonth(util.addMonths(monthDate, this.parent.activeViewOptions.interval - 1))
-            };
-            var slotDatas = [];
-            var prepareSlots = function (rowIndex, renderDate, resData, classList) {
-                var data = {
-                    date: new Date(+renderDate), groupIndex: resData.groupIndex, workDays: resData.workDays,
-                    type: 'monthCells', className: classList || [cls.WORK_CELLS_CLASS]
-                };
-                if (!slotDatas[rowIndex]) {
-                    slotDatas[rowIndex] = [];
-                }
-                slotDatas[rowIndex].push(data);
-            };
-            var includeResource = this.parent.currentView !== 'MonthAgenda' &&
-                this.parent.activeViewOptions.group.resources.length > 0;
-            if (includeResource && !this.parent.uiStateValues.isGroupAdaptive && !this.parent.activeViewOptions.group.byDate) {
-                for (var _i = 0, _a = this.colLevels[this.colLevels.length - 2]; _i < _a.length; _i++) {
-                    var res = _a[_i];
-                    var dates = res.renderDates.map(function (date) { return new Date(+date); });
-                    var count = this.parent.activeViewOptions.showWeekend ? util.WEEK_LENGTH : res.workDays.length;
-                    for (var i = 0; i < (res.renderDates.length / count); i++) {
-                        var colDates = dates.splice(0, count);
-                        for (var _b = 0, colDates_1 = colDates; _b < colDates_1.length; _b++) {
-                            var colDate = colDates_1[_b];
-                            prepareSlots(i, colDate, res);
-                        }
+        var includeResource = this.parent.currentView !== 'MonthAgenda' &&
+            this.parent.activeViewOptions.group.resources.length > 0;
+        if (includeResource && !this.parent.uiStateValues.isGroupAdaptive && !this.parent.activeViewOptions.group.byDate) {
+            for (var _i = 0, _a = this.colLevels[this.colLevels.length - 2]; _i < _a.length; _i++) {
+                var res = _a[_i];
+                var dates = res.renderDates.map(function (date) { return new Date(+date); });
+                var count = this.parent.activeViewOptions.showWeekend ? util.WEEK_LENGTH : res.workDays.length;
+                for (var i = 0; i < (res.renderDates.length / count); i++) {
+                    var colDates = dates.splice(0, count);
+                    for (var _b = 0, colDates_1 = colDates; _b < colDates_1.length; _b++) {
+                        var colDate = colDates_1[_b];
+                        prepareSlots(i, colDate, res);
                     }
                 }
             }
-            else {
-                var dates = this.renderDates.map(function (date) { return new Date(+date); });
-                var count = this.parent.activeViewOptions.showWeekend ? util.WEEK_LENGTH :
-                    this.parent.activeViewOptions.workDays.length;
-                for (var i = 0; i < (this.renderDates.length / count); i++) {
-                    var colDates = dates.splice(0, count);
-                    for (var _c = 0, colDates_2 = colDates; _c < colDates_2.length; _c++) {
-                        var colDate = colDates_2[_c];
-                        if (includeResource) {
-                            var lastRow = this.colLevels[(this.colLevels.length - 1)];
-                            var resourcesTd = lastRow.slice(0, lastRow.length / count);
-                            for (var resIndex = 0; resIndex < resourcesTd.length; resIndex++) {
-                                var clsList = void 0;
-                                if (resIndex !== 0) {
-                                    clsList = [cls.WORK_CELLS_CLASS, cls.DISABLE_DATE];
-                                }
-                                prepareSlots(i, colDate, resourcesTd[resIndex], clsList);
+        }
+        else {
+            var dates = this.renderDates.map(function (date) { return new Date(+date); });
+            var count = this.parent.activeViewOptions.showWeekend ? util.WEEK_LENGTH :
+                this.parent.activeViewOptions.workDays.length;
+            for (var i = 0; i < (this.renderDates.length / count); i++) {
+                var colDates = dates.splice(0, count);
+                for (var _c = 0, colDates_2 = colDates; _c < colDates_2.length; _c++) {
+                    var colDate = colDates_2[_c];
+                    if (includeResource) {
+                        var lastRow = this.colLevels[(this.colLevels.length - 1)];
+                        var resourcesTd = lastRow.slice(0, lastRow.length / count);
+                        for (var resIndex = 0; resIndex < resourcesTd.length; resIndex++) {
+                            var clsList = void 0;
+                            if (resIndex !== 0) {
+                                clsList = [cls.WORK_CELLS_CLASS, cls.DISABLE_DATE];
                             }
+                            prepareSlots(i, colDate, resourcesTd[resIndex], clsList);
                         }
-                        else {
-                            prepareSlots(i, colDate, this.colLevels[this.colLevels.length - 1][0]);
-                        }
                     }
-                }
-            }
-            for (var row = 0; row < slotDatas.length; row++) {
-                var ntr = tr.cloneNode();
-                for (var col = 0; col < slotDatas[row].length; col++) {
-                    var data = slotDatas[row][col];
-                    var ntd = td.cloneNode();
-                    if (this.isOtherMonth(data.date)) {
-                        data.className.push(cls.OTHERMONTH_CLASS);
+                    else {
+                        prepareSlots(i, colDate, this.colLevels[this.colLevels.length - 1][0]);
                     }
-                    if (this.parent.workHours.highlight && this.isWorkDay(data.date, data.workDays)) {
-                        data.className.push(cls.WORKDAY_CLASS);
-                    }
-                    if (this.isCurrentDate(data.date)) {
-                        data.className.push(cls.CURRENTDATE_CLASS);
-                    }
-                    if (this.parent.currentView === 'MonthAgenda' && this.parent.isSelectedDate(data.date)) {
-                        data.className.push(cls.SELECTED_CELL_CLASS);
-                    }
-                    ej2_base_2.addClass([ntd], data.className);
-                    ntd.setAttribute('data-date', data.date.getTime().toString());
-                    if (!ej2_base_1.isNullOrUndefined(data.groupIndex) || this.parent.uiStateValues.isGroupAdaptive) {
-                        var groupIndex = this.parent.uiStateValues.isGroupAdaptive ? this.parent.uiStateValues.groupIndex :
-                            data.groupIndex;
-                        ntd.setAttribute('data-group-index', '' + groupIndex);
-                    }
-                    this.renderDateHeaderElement(data, ntd);
-                    if (this.parent.cellTemplate) {
-                        var args_1 = { date: data.date, type: data.type, groupIndex: data.groupIndex };
-                        ej2_base_2.append([].slice.call(this.parent.getCellTemplate()(args_1)), ntd);
-                    }
-                    this.wireCellEvents(ntd);
-                    var args = { elementType: data.type, element: ntd, date: data.date, groupIndex: data.groupIndex };
-                    this.parent.trigger(event.renderCell, args);
-                    ntr.appendChild(ntd);
                 }
-                tbody.appendChild(ntr);
             }
-            wrap.appendChild(tbl);
-            ej2_base_1.EventHandler.add(wrap, 'scroll', this.onContentScroll, this);
-            return wrap;
-        };
-        Month.prototype.getDatesHeaderElement = function () {
-            return this.element.querySelector('.' + cls.DATE_HEADER_CONTAINER_CLASS);
-        };
-        Month.prototype.getContentAreaElement = function () {
-            return this.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
-        };
-        Month.prototype.renderDateHeaderElement = function (data, ntd) {
-            var dateHeader = ej2_base_2.createElement('div', { className: cls.DATE_HEADER_CLASS });
-            dateHeader.innerHTML = (data.date.getDate() === 1 && !this.isCurrentDate(data.date) && !this.parent.isAdaptive) ?
-                this.parent.globalize.formatDate(data.date, { format: 'MMM d' }) :
-                this.parent.globalize.formatDate(data.date, { skeleton: 'd' });
-            ntd.appendChild(dateHeader);
-            if (this.getModuleName() === 'month') {
-                ej2_base_2.addClass([dateHeader], cls.NAVIGATE_CLASS);
-            }
-        };
-        Month.prototype.getRenderDates = function (workDays) {
-            var renderDates = [];
-            var currentDate = util.resetTime(this.parent.selectedDate);
-            var monthStart = util.getWeekFirstDate(util.firstDateOfMonth(currentDate), this.parent.firstDayOfWeek);
-            var endDate = util.addMonths(currentDate, this.parent.activeViewOptions.interval - 1);
-            var lastWeekOfMonth = util.getWeekFirstDate(util.lastDateOfMonth(endDate), this.parent.firstDayOfWeek);
-            var monthEnd = util.addDays(lastWeekOfMonth, util.WEEK_LENGTH - 1);
-            var start = new Date(monthStart.getFullYear(), monthStart.getMonth(), monthStart.getDate());
-            do {
-                if (this.parent.activeViewOptions.showWeekend) {
-                    renderDates.push(start);
+        }
+        for (var row = 0; row < slotDatas.length; row++) {
+            var ntr = tr.cloneNode();
+            for (var col = 0; col < slotDatas[row].length; col++) {
+                var data = slotDatas[row][col];
+                var ntd = td.cloneNode();
+                if (this.isOtherMonth(data.date)) {
+                    data.className.push(cls.OTHERMONTH_CLASS);
                 }
-                else {
-                    if (this.isWorkDay(start, workDays)) {
-                        renderDates.push(start);
-                    }
+                if (this.parent.workHours.highlight && this.isWorkDay(data.date, data.workDays)) {
+                    data.className.push(cls.WORKDAY_CLASS);
                 }
-                start = util.addDays(start, 1);
-            } while (start.getTime() <= monthEnd.getTime());
-            if (!workDays) {
-                this.renderDates = renderDates;
+                if (this.isCurrentDate(data.date)) {
+                    data.className.push(cls.CURRENTDATE_CLASS);
+                }
+                if (this.parent.currentView === 'MonthAgenda' && this.parent.isSelectedDate(data.date)) {
+                    data.className.push(cls.SELECTED_CELL_CLASS);
+                }
+                addClass([ntd], data.className);
+                ntd.setAttribute('data-date', data.date.getTime().toString());
+                if (!isNullOrUndefined(data.groupIndex) || this.parent.uiStateValues.isGroupAdaptive) {
+                    var groupIndex = this.parent.uiStateValues.isGroupAdaptive ? this.parent.uiStateValues.groupIndex :
+                        data.groupIndex;
+                    ntd.setAttribute('data-group-index', '' + groupIndex);
+                }
+                this.renderDateHeaderElement(data, ntd);
+                if (this.parent.cellTemplate) {
+                    var args_1 = { date: data.date, type: data.type, groupIndex: data.groupIndex };
+                    append([].slice.call(this.parent.getCellTemplate()(args_1)), ntd);
+                }
+                this.wireCellEvents(ntd);
+                var args = { elementType: data.type, element: ntd, date: data.date, groupIndex: data.groupIndex };
+                this.parent.trigger(event.renderCell, args);
+                ntr.appendChild(ntd);
             }
-            return renderDates;
-        };
-        Month.prototype.getNextPreviousDate = function (type) {
-            if (type === 'next') {
-                return util.addMonths(this.parent.selectedDate, this.parent.activeViewOptions.interval);
+            tbody.appendChild(ntr);
+        }
+        wrap.appendChild(tbl);
+        EventHandler.add(wrap, 'scroll', this.onContentScroll, this);
+        return wrap;
+    };
+    Month.prototype.getDatesHeaderElement = function () {
+        return this.element.querySelector('.' + cls.DATE_HEADER_CONTAINER_CLASS);
+    };
+    Month.prototype.getContentAreaElement = function () {
+        return this.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
+    };
+    Month.prototype.renderDateHeaderElement = function (data, ntd) {
+        var dateHeader = createElement('div', { className: cls.DATE_HEADER_CLASS });
+        dateHeader.innerHTML = (data.date.getDate() === 1 && !this.isCurrentDate(data.date) && !this.parent.isAdaptive) ?
+            this.parent.globalize.formatDate(data.date, { format: 'MMM d' }) :
+            this.parent.globalize.formatDate(data.date, { skeleton: 'd' });
+        ntd.appendChild(dateHeader);
+        if (this.getModuleName() === 'month') {
+            addClass([dateHeader], cls.NAVIGATE_CLASS);
+        }
+    };
+    Month.prototype.getRenderDates = function (workDays) {
+        var renderDates = [];
+        var currentDate = util.resetTime(this.parent.selectedDate);
+        var monthStart = util.getWeekFirstDate(util.firstDateOfMonth(currentDate), this.parent.firstDayOfWeek);
+        var endDate = util.addMonths(currentDate, this.parent.activeViewOptions.interval - 1);
+        var lastWeekOfMonth = util.getWeekFirstDate(util.lastDateOfMonth(endDate), this.parent.firstDayOfWeek);
+        var monthEnd = util.addDays(lastWeekOfMonth, util.WEEK_LENGTH - 1);
+        var start = new Date(monthStart.getFullYear(), monthStart.getMonth(), monthStart.getDate());
+        do {
+            if (this.parent.activeViewOptions.showWeekend) {
+                renderDates.push(start);
             }
             else {
-                return util.addMonths(this.parent.selectedDate, -(this.parent.activeViewOptions.interval));
+                if (this.isWorkDay(start, workDays)) {
+                    renderDates.push(start);
+                }
             }
-        };
-        Month.prototype.getEndDateFromStartDate = function (start) {
-            return util.addDays(new Date(start.getTime()), 1);
-        };
-        Month.prototype.getDateRangeText = function () {
-            if (this.parent.isAdaptive || ej2_base_1.isNullOrUndefined(this.parent.activeViewOptions.dateFormat)) {
-                if (this.parent.activeViewOptions.interval > 1) {
-                    var endDate = util.addMonths(util.lastDateOfMonth(this.parent.selectedDate), this.parent.activeViewOptions.interval - 1);
-                    if (this.parent.selectedDate.getFullYear() === endDate.getFullYear()) {
-                        var monthNames = (this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM' }))
-                            + ' - ' + (this.parent.globalize.formatDate(endDate, { format: 'MMMM ' })) + endDate.getFullYear();
-                        return monthNames;
-                    }
-                    return (this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM' })) + ' ' +
-                        this.parent.selectedDate.getFullYear() + ' - ' + (this.parent.globalize.formatDate(endDate, { format: 'MMMM ' })) +
-                        endDate.getFullYear();
+            start = util.addDays(start, 1);
+        } while (start.getTime() <= monthEnd.getTime());
+        if (!workDays) {
+            this.renderDates = renderDates;
+        }
+        return renderDates;
+    };
+    Month.prototype.getNextPreviousDate = function (type) {
+        if (type === 'next') {
+            return util.addMonths(this.parent.selectedDate, this.parent.activeViewOptions.interval);
+        }
+        else {
+            return util.addMonths(this.parent.selectedDate, -(this.parent.activeViewOptions.interval));
+        }
+    };
+    Month.prototype.getEndDateFromStartDate = function (start) {
+        return util.addDays(new Date(start.getTime()), 1);
+    };
+    Month.prototype.getDateRangeText = function () {
+        if (this.parent.isAdaptive || isNullOrUndefined(this.parent.activeViewOptions.dateFormat)) {
+            if (this.parent.activeViewOptions.interval > 1) {
+                var endDate = util.addMonths(util.lastDateOfMonth(this.parent.selectedDate), this.parent.activeViewOptions.interval - 1);
+                if (this.parent.selectedDate.getFullYear() === endDate.getFullYear()) {
+                    var monthNames = (this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM' }))
+                        + ' - ' + (this.parent.globalize.formatDate(endDate, { format: 'MMMM ' })) + endDate.getFullYear();
+                    return monthNames;
                 }
-                return this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM y' });
+                return (this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM' })) + ' ' +
+                    this.parent.selectedDate.getFullYear() + ' - ' + (this.parent.globalize.formatDate(endDate, { format: 'MMMM ' })) +
+                    endDate.getFullYear();
             }
-            return this.formatDateRange(this.parent.selectedDate);
-        };
-        Month.prototype.getLabelText = function (view) {
-            return this.parent.localeObj.getConstant(view) + ' of ' +
-                this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM y' });
-        };
-        Month.prototype.getModuleName = function () {
-            return 'month';
-        };
-        Month.prototype.destroy = function () {
-            if (this.parent.isDestroyed) {
-                return;
+            return this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM y' });
+        }
+        return this.formatDateRange(this.parent.selectedDate);
+    };
+    Month.prototype.getLabelText = function (view) {
+        return this.parent.localeObj.getConstant(view) + ' of ' +
+            this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM y' });
+    };
+    /**
+     * Get module name.
+     */
+    Month.prototype.getModuleName = function () {
+        return 'month';
+    };
+    /**
+     * To destroy the month.
+     * @return {void}
+     * @private
+     */
+    Month.prototype.destroy = function () {
+        if (this.parent.isDestroyed) {
+            return;
+        }
+        if (this.element) {
+            if (this.parent.resourceBase) {
+                this.parent.resourceBase.destroy();
             }
-            if (this.element) {
-                if (this.parent.resourceBase) {
-                    this.parent.resourceBase.destroy();
-                }
-                ej2_base_2.remove(this.element);
-                this.element = null;
-                if (this.parent.scheduleTouchModule) {
-                    this.parent.scheduleTouchModule.resetValues();
-                }
+            remove(this.element);
+            this.element = null;
+            if (this.parent.scheduleTouchModule) {
+                this.parent.scheduleTouchModule.resetValues();
             }
-        };
-        return Month;
-    }(view_base_1.ViewBase));
-    exports.Month = Month;
-});
+        }
+    };
+    return Month;
+}(ViewBase));
+export { Month };

src/schedule/renderer/renderer.js

@@ -1,95 +0,106 @@
-define(["require", "exports", "@syncfusion/ej2-base", "../base/constant", "../base/css-constant"], function (require, exports, ej2_base_1, events, cls) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var Render = (function () {
-        function Render(parent) {
-            this.parent = parent;
+import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';
+import * as events from '../base/constant';
+import * as cls from '../base/css-constant';
+/**
+ * Schedule DOM rendering
+ */
+var Render = /** @class */ (function () {
+    /**
+     * Constructor for render
+     */
+    function Render(parent) {
+        this.parent = parent;
+    }
+    Render.prototype.render = function (viewName, isDataRefresh) {
+        if (isDataRefresh === void 0) { isDataRefresh = true; }
+        this.initializeLayout(viewName);
+        if (isDataRefresh) {
+            this.refreshDataManager();
         }
-        Render.prototype.render = function (viewName, isDataRefresh) {
-            if (isDataRefresh === void 0) { isDataRefresh = true; }
-            this.initializeLayout(viewName);
-            if (isDataRefresh) {
-                this.refreshDataManager();
-            }
-        };
-        Render.prototype.initializeLayout = function (viewName) {
-            if (this.parent.activeView) {
-                this.parent.activeView.removeEventListener();
-                this.parent.activeView.destroy();
-            }
-            switch (viewName) {
-                case 'Day':
-                    this.parent.activeView = this.parent.dayModule;
-                    break;
-                case 'Week':
-                    this.parent.activeView = this.parent.weekModule;
-                    break;
-                case 'WorkWeek':
-                    this.parent.activeView = this.parent.workWeekModule;
-                    break;
-                case 'Month':
-                    this.parent.activeView = this.parent.monthModule;
-                    break;
-                case 'Agenda':
-                    this.parent.activeView = this.parent.agendaModule;
-                    break;
-                case 'MonthAgenda':
-                    this.parent.activeView = this.parent.monthAgendaModule;
-                    break;
-            }
-            if (ej2_base_1.isNullOrUndefined(this.parent.activeView)) {
-                var firstView = this.parent.viewCollections[0].option;
-                if (firstView) {
-                    this.parent.setProperties({ currentView: firstView }, true);
-                    if (this.parent.headerModule) {
-                        this.parent.headerModule.updateActiveView();
-                        this.parent.headerModule.setCalendarView();
-                    }
-                    return this.initializeLayout(firstView);
+    };
+    Render.prototype.initializeLayout = function (viewName) {
+        if (this.parent.activeView) {
+            this.parent.activeView.removeEventListener();
+            this.parent.activeView.destroy();
+        }
+        switch (viewName) {
+            case 'Day':
+                this.parent.activeView = this.parent.dayModule;
+                break;
+            case 'Week':
+                this.parent.activeView = this.parent.weekModule;
+                break;
+            case 'WorkWeek':
+                this.parent.activeView = this.parent.workWeekModule;
+                break;
+            case 'Month':
+                this.parent.activeView = this.parent.monthModule;
+                break;
+            case 'Agenda':
+                this.parent.activeView = this.parent.agendaModule;
+                break;
+            // case 'weekAgenda':
+            //     this.parent.activeView = this.parent.weekAgendaModule;
+            //     break;
+            // case 'workWeekAgenda':
+            //     this.parent.activeView = this.parent.workWeekAgendaModule;
+            //     break;
+            case 'MonthAgenda':
+                this.parent.activeView = this.parent.monthAgendaModule;
+                break;
+        }
+        if (isNullOrUndefined(this.parent.activeView)) {
+            var firstView = this.parent.viewCollections[0].option;
+            if (firstView) {
+                this.parent.setProperties({ currentView: firstView }, true);
+                if (this.parent.headerModule) {
+                    this.parent.headerModule.updateActiveView();
+                    this.parent.headerModule.setCalendarView();
                 }
-                throw Error('Inject required modules');
+                return this.initializeLayout(firstView);
             }
-            this.updateLabelText(viewName);
-            this.parent.activeView.addEventListener();
-            this.parent.activeView.getRenderDates();
-            this.parent.uiStateValues.isGroupAdaptive = this.parent.isAdaptive && this.parent.activeViewOptions.group.resources.length > 0 &&
-                this.parent.activeViewOptions.group.enableCompactView;
-            this.parent.activeView.renderLayout(cls.CURRENT_PANEL_CLASS);
-            if (this.parent.headerModule) {
-                this.parent.headerModule.updateDateRange(this.parent.activeView.getDateRangeText());
-            }
-        };
-        Render.prototype.updateLabelText = function (view) {
-            var content = this.parent.activeView.getLabelText(view);
-            this.parent.element.setAttribute('role', 'main');
-            this.parent.element.setAttribute('aria-label', content);
-        };
-        Render.prototype.refreshDataManager = function () {
-            var _this = this;
-            var start = this.parent.activeView.startDate();
-            var end = this.parent.activeView.endDate();
-            var dataManager = this.parent.dataModule.getData(this.parent.dataModule.generateQuery(start, end));
-            dataManager.then(function (e) { return _this.dataManagerSuccess(e); }).catch(function (e) { return _this.dataManagerFailure(e); });
-        };
-        Render.prototype.dataManagerSuccess = function (e) {
-            if (this.parent.isDestroyed) {
-                return;
-            }
-            this.parent.trigger(events.dataBinding, e);
-            this.parent.eventsData = ej2_base_1.extend([], e.result, null, true);
-            var processed = this.parent.eventBase.processData(this.parent.eventsData);
-            this.parent.notify(events.dataReady, { processedData: processed });
-            this.parent.trigger(events.dataBound);
-            this.parent.hideSpinner();
-        };
-        Render.prototype.dataManagerFailure = function (e) {
-            if (this.parent.isDestroyed) {
-                return;
-            }
-            this.parent.trigger(events.actionFailure, { error: e });
-            this.parent.hideSpinner();
-        };
-        return Render;
-    }());
-    exports.Render = Render;
-});
+            throw Error('Inject required modules');
+        }
+        this.updateLabelText(viewName);
+        this.parent.activeView.addEventListener();
+        this.parent.activeView.getRenderDates();
+        this.parent.uiStateValues.isGroupAdaptive = this.parent.isAdaptive && this.parent.activeViewOptions.group.resources.length > 0 &&
+            this.parent.activeViewOptions.group.enableCompactView;
+        this.parent.activeView.renderLayout(cls.CURRENT_PANEL_CLASS);
+        if (this.parent.headerModule) {
+            this.parent.headerModule.updateDateRange(this.parent.activeView.getDateRangeText());
+        }
+    };
+    Render.prototype.updateLabelText = function (view) {
+        var content = this.parent.activeView.getLabelText(view);
+        this.parent.element.setAttribute('role', 'main');
+        this.parent.element.setAttribute('aria-label', content);
+    };
+    Render.prototype.refreshDataManager = function () {
+        var _this = this;
+        var start = this.parent.activeView.startDate();
+        var end = this.parent.activeView.endDate();
+        var dataManager = this.parent.dataModule.getData(this.parent.dataModule.generateQuery(start, end));
+        dataManager.then(function (e) { return _this.dataManagerSuccess(e); }).catch(function (e) { return _this.dataManagerFailure(e); });
+    };
+    Render.prototype.dataManagerSuccess = function (e) {
+        if (this.parent.isDestroyed) {
+            return;
+        }
+        this.parent.trigger(events.dataBinding, e);
+        this.parent.eventsData = extend([], e.result, null, true);
+        var processed = this.parent.eventBase.processData(this.parent.eventsData);
+        this.parent.notify(events.dataReady, { processedData: processed });
+        this.parent.trigger(events.dataBound);
+        this.parent.hideSpinner();
+    };
+    Render.prototype.dataManagerFailure = function (e) {
+        if (this.parent.isDestroyed) {
+            return;
+        }
+        this.parent.trigger(events.actionFailure, { error: e });
+        this.parent.hideSpinner();
+    };
+    return Render;
+}());
+export { Render };

src/schedule/renderer/vertical-view.js

@@ -11,620 +11,641 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../actions/work-cells", "./view-base", "../event-renderer/vertical-view", "../event-renderer/month", "../base/util", "../base/constant", "../base/css-constant"], function (require, exports, ej2_base_1, ej2_base_2, work_cells_1, view_base_1, vertical_view_1, month_1, util, event, cls) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var DATE_HEADER_TEMPLATE = '<div class="e-header-day">${getDayName(date)}</div>' +
-        '<div class="e-header-date e-navigate" role="link">${getDate(date)}</div>';
-    var MAJOR_SLOT_TEMPLATE = '<span>${getTime(date)}</span>';
-    var MINOR_SLOT_TEMPLATE = '&nbsp;';
-    var VerticalView = (function (_super) {
-        __extends(VerticalView, _super);
-        function VerticalView(parent) {
-            var _this = _super.call(this, parent) || this;
-            _this.viewClass = 'e-day-view';
-            _this.isInverseTableSelect = true;
-            _this.workCellAction = new work_cells_1.WorkCellInteraction(parent);
-            return _this;
+import { compile, isNullOrUndefined, extend, EventHandler, formatUnit } from '@syncfusion/ej2-base';
+import { createElement, remove, addClass, removeClass, append, prepend } from '@syncfusion/ej2-base';
+import { WorkCellInteraction } from '../actions/work-cells';
+import { ViewBase } from './view-base';
+import { VerticalEvent } from '../event-renderer/vertical-view';
+import { MonthEvent } from '../event-renderer/month';
+import * as util from '../base/util';
+import * as event from '../base/constant';
+import * as cls from '../base/css-constant';
+var DATE_HEADER_TEMPLATE = '<div class="e-header-day">${getDayName(date)}</div>' +
+    '<div class="e-header-date e-navigate" role="link">${getDate(date)}</div>';
+var MAJOR_SLOT_TEMPLATE = '<span>${getTime(date)}</span>';
+var MINOR_SLOT_TEMPLATE = '&nbsp;';
+/**
+ * vertical view
+ */
+var VerticalView = /** @class */ (function (_super) {
+    __extends(VerticalView, _super);
+    /**
+     * Constructor for vertical view
+     */
+    function VerticalView(parent) {
+        var _this = _super.call(this, parent) || this;
+        _this.viewClass = 'e-day-view';
+        _this.isInverseTableSelect = true;
+        _this.workCellAction = new WorkCellInteraction(parent);
+        return _this;
+    }
+    VerticalView.prototype.addEventListener = function () {
+        this.parent.on(event.scrollUiUpdate, this.scrollUiUpdate, this);
+        this.parent.on(event.dataReady, this.renderEvents, this);
+    };
+    VerticalView.prototype.removeEventListener = function () {
+        this.parent.off(event.scrollUiUpdate, this.scrollUiUpdate);
+        this.parent.off(event.dataReady, this.renderEvents);
+    };
+    VerticalView.prototype.renderEvents = function () {
+        if (this.parent.activeViewOptions.timeScale.enable) {
+            var appointment = new VerticalEvent(this.parent);
+            appointment.renderAppointments();
         }
-        VerticalView.prototype.addEventListener = function () {
-            this.parent.on(event.scrollUiUpdate, this.scrollUiUpdate, this);
-            this.parent.on(event.dataReady, this.renderEvents, this);
-        };
-        VerticalView.prototype.removeEventListener = function () {
-            this.parent.off(event.scrollUiUpdate, this.scrollUiUpdate);
-            this.parent.off(event.dataReady, this.renderEvents);
-        };
-        VerticalView.prototype.renderEvents = function () {
+        else {
+            var appointment = new MonthEvent(this.parent);
+            appointment.renderAppointments();
+        }
+    };
+    VerticalView.prototype.onContentScroll = function (e) {
+        var target = e.target;
+        if (this.parent.activeViewOptions.timeScale.enable) {
+            this.getTimeCellsElement().scrollTop = target.scrollTop;
+        }
+        this.getDatesHeaderElement().firstChild.scrollLeft = target.scrollLeft;
+        this.parent.uiStateValues.top = target.scrollTop;
+        this.parent.uiStateValues.left = target.scrollLeft;
+        this.parent.quickPopup.quickPopupHide();
+    };
+    VerticalView.prototype.scrollUiUpdate = function (args) {
+        var headerBarHeight = 0;
+        if (this.parent.headerModule) {
+            headerBarHeight += this.parent.headerModule.getHeaderElement().offsetHeight;
+        }
+        if (this.parent.uiStateValues.isGroupAdaptive) {
+            headerBarHeight += this.parent.element.querySelector('.' + cls.RESOURCE_HEADER_TOOLBAR).offsetHeight;
+        }
+        var timecells = this.getTimeCellsElement();
+        var content = this.getScrollableElement();
+        var header = this.getDatesHeaderElement();
+        var scrollerHeight = formatUnit(this.parent.element.offsetHeight - headerBarHeight - header.offsetHeight - 2);
+        if (this.parent.isAdaptive) {
+            content.style.height = scrollerHeight;
+        }
+        else {
             if (this.parent.activeViewOptions.timeScale.enable) {
-                var appointment = new vertical_view_1.VerticalEvent(this.parent);
-                appointment.renderAppointments();
+                timecells.style.height = scrollerHeight;
             }
-            else {
-                var appointment = new month_1.MonthEvent(this.parent);
-                appointment.renderAppointments();
+            content.style.height = scrollerHeight;
+        }
+        var scrollBarWidth = util.getScrollBarWidth();
+        // tslint:disable:no-any
+        if (content.offsetWidth - content.clientWidth > 0) {
+            header.firstChild.style[args.cssProperties.border] = scrollBarWidth > 0 ? '1px' : '0px';
+            header.style[args.cssProperties.padding] = scrollBarWidth > 0 ? scrollBarWidth - 1 + 'px' : '0px';
+        }
+        else {
+            header.firstChild.style[args.cssProperties.border] = '';
+            header.style[args.cssProperties.padding] = '';
+        }
+        // tslint:enable:no-any
+        if (this.parent.activeViewOptions.timeScale.enable) {
+            timecells.style.paddingBottom = (content.offsetHeight - content.clientHeight > 0) ? formatUnit(scrollBarWidth) : '';
+        }
+        if (this.parent.uiStateValues.isInitial) {
+            this.scrollToWorkHour();
+            this.parent.uiStateValues.isInitial = false;
+        }
+        else {
+            this.getScrollableElement().scrollTop = this.parent.uiStateValues.top;
+        }
+    };
+    VerticalView.prototype.scrollToWorkHour = function () {
+        if (this.parent.workHours.highlight) {
+            var firstWorkHourCell = this.element.querySelector('.' + cls.WORK_HOURS_CLASS);
+            if (firstWorkHourCell) {
+                this.getScrollableElement().scrollTop = firstWorkHourCell.offsetTop;
+                this.parent.uiStateValues.top = firstWorkHourCell.offsetTop;
+                this.parent.uiStateValues.left = 0;
             }
-        };
-        VerticalView.prototype.onContentScroll = function (e) {
-            var target = e.target;
-            if (this.parent.activeViewOptions.timeScale.enable) {
-                this.getTimeCellsElement().scrollTop = target.scrollTop;
-            }
-            this.getDatesHeaderElement().firstChild.scrollLeft = target.scrollLeft;
-            this.parent.uiStateValues.top = target.scrollTop;
-            this.parent.uiStateValues.left = target.scrollLeft;
-            this.parent.quickPopup.quickPopupHide();
-        };
-        VerticalView.prototype.scrollUiUpdate = function (args) {
-            var headerBarHeight = 0;
-            if (this.parent.headerModule) {
-                headerBarHeight += this.parent.headerModule.getHeaderElement().offsetHeight;
-            }
+        }
+    };
+    VerticalView.prototype.scrollToHour = function (hour) {
+        var date = this.parent.globalize.parseDate(hour, { skeleton: 'Hm' });
+        if (isNullOrUndefined(date)) {
+            return;
+        }
+        this.getScrollableElement().scrollTop = this.getTopFromDateTime(date);
+    };
+    VerticalView.prototype.generateColumnLevels = function () {
+        var level = this.getDateSlots(this.renderDates, this.parent.activeViewOptions.workDays);
+        var columnLevels = [];
+        if (this.parent.activeViewOptions.group.resources.length > 0) {
+            columnLevels = this.parent.resourceBase.generateResourceLevels(level);
             if (this.parent.uiStateValues.isGroupAdaptive) {
-                headerBarHeight += this.parent.element.querySelector('.' + cls.RESOURCE_HEADER_TOOLBAR).offsetHeight;
+                var resourceLevel = this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex];
+                var resStartHour = resourceLevel.resourceData[resourceLevel.resource.startHourField];
+                var resEndHour = resourceLevel.resourceData[resourceLevel.resource.endHourField];
+                var dateSlots = this.getDateSlots(resourceLevel.renderDates, resourceLevel.workDays, resStartHour, resEndHour);
+                columnLevels = [dateSlots];
             }
-            var timecells = this.getTimeCellsElement();
-            var content = this.getScrollableElement();
-            var header = this.getDatesHeaderElement();
-            var scrollerHeight = ej2_base_1.formatUnit(this.parent.element.offsetHeight - headerBarHeight - header.offsetHeight - 2);
-            if (this.parent.isAdaptive) {
-                content.style.height = scrollerHeight;
+        }
+        else {
+            columnLevels.push(level);
+        }
+        this.colLevels = columnLevels;
+        return columnLevels;
+    };
+    VerticalView.prototype.getDateSlots = function (renderDates, workDays, workStartHour, workEndHour) {
+        if (workStartHour === void 0) { workStartHour = this.parent.workHours.start; }
+        if (workEndHour === void 0) { workEndHour = this.parent.workHours.end; }
+        var dateCol = [];
+        var start = this.parent.globalize.parseDate(workStartHour, { skeleton: 'Hm' });
+        var end = this.parent.globalize.parseDate(workEndHour, { skeleton: 'Hm' });
+        for (var _i = 0, renderDates_1 = renderDates; _i < renderDates_1.length; _i++) {
+            var col = renderDates_1[_i];
+            var classList = [cls.HEADER_CELLS_CLASS];
+            if (this.isCurrentDate(col)) {
+                classList.push(cls.CURRENT_DAY_CLASS);
             }
-            else {
-                if (this.parent.activeViewOptions.timeScale.enable) {
-                    timecells.style.height = scrollerHeight;
+            dateCol.push({
+                date: col, type: 'dateHeader', className: classList, colSpan: 1,
+                workDays: workDays, startHour: new Date(+start), endHour: new Date(+end)
+            });
+        }
+        return dateCol;
+    };
+    VerticalView.prototype.isWorkHourRange = function (date) {
+        return (this.getStartHour().getTime() <= date.getTime()) && (this.getEndHour().getTime() >= date.getTime());
+    };
+    VerticalView.prototype.highlightCurrentTime = function () {
+        var _this = this;
+        if (this.parent.showTimeIndicator && this.isWorkHourRange(new Date())) {
+            var currentDateIndex = this.getCurrentTimeIndicatorIndex();
+            if (currentDateIndex.length > 0) {
+                this.changeCurrentTimePosition();
+                if (isNullOrUndefined(this.currentTimeIndicatorTimer)) {
+                    this.currentTimeIndicatorTimer = window.setInterval(function () { _this.changeCurrentTimePosition(); }, util.MS_PER_MINUTE);
                 }
-                content.style.height = scrollerHeight;
             }
-            var scrollBarWidth = util.getScrollBarWidth();
-            if (content.offsetWidth - content.clientWidth > 0) {
-                header.firstChild.style[args.cssProperties.border] = scrollBarWidth > 0 ? '1px' : '0px';
-                header.style[args.cssProperties.padding] = scrollBarWidth > 0 ? scrollBarWidth - 1 + 'px' : '0px';
-            }
             else {
-                header.firstChild.style[args.cssProperties.border] = '';
-                header.style[args.cssProperties.padding] = '';
+                this.clearCurrentTimeIndicatorTimer();
             }
-            if (this.parent.activeViewOptions.timeScale.enable) {
-                timecells.style.paddingBottom = (content.offsetHeight - content.clientHeight > 0) ? ej2_base_1.formatUnit(scrollBarWidth) : '';
-            }
-            if (this.parent.uiStateValues.isInitial) {
-                this.scrollToWorkHour();
-                this.parent.uiStateValues.isInitial = false;
-            }
-            else {
-                this.getScrollableElement().scrollTop = this.parent.uiStateValues.top;
-            }
-        };
-        VerticalView.prototype.scrollToWorkHour = function () {
-            if (this.parent.workHours.highlight) {
-                var firstWorkHourCell = this.element.querySelector('.' + cls.WORK_HOURS_CLASS);
-                if (firstWorkHourCell) {
-                    this.getScrollableElement().scrollTop = firstWorkHourCell.offsetTop;
-                    this.parent.uiStateValues.top = firstWorkHourCell.offsetTop;
-                    this.parent.uiStateValues.left = 0;
+        }
+        else {
+            this.clearCurrentTimeIndicatorTimer();
+        }
+    };
+    VerticalView.prototype.getCurrentTimeIndicatorIndex = function () {
+        var currentDateIndex = [];
+        if (!isNullOrUndefined(this.parent.resourceBase) && (this.parent.activeViewOptions.group.resources.length > 0) &&
+            !this.parent.uiStateValues.isGroupAdaptive) {
+            var count = 0;
+            for (var _i = 0, _a = this.parent.resourceBase.lastResourceLevel; _i < _a.length; _i++) {
+                var resource = _a[_i];
+                var index = this.parent.getIndexOfDate(resource.renderDates, util.resetTime(new Date()));
+                if (index >= 0) {
+                    var resIndex = this.parent.activeViewOptions.group.byDate ?
+                        (this.parent.resourceBase.lastResourceLevel.length * index) + count : count + index;
+                    currentDateIndex.push(resIndex);
                 }
+                count += this.parent.activeViewOptions.group.byDate ? 1 : resource.renderDates.length;
             }
-        };
-        VerticalView.prototype.scrollToHour = function (hour) {
-            var date = this.parent.globalize.parseDate(hour, { skeleton: 'Hm' });
-            if (ej2_base_1.isNullOrUndefined(date)) {
-                return;
+        }
+        else {
+            var renderDates = (this.parent.uiStateValues.isGroupAdaptive) ?
+                this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex].renderDates : this.renderDates;
+            var index = this.parent.getIndexOfDate(renderDates, util.resetTime(new Date()));
+            if (index >= 0) {
+                currentDateIndex.push(index);
             }
-            this.getScrollableElement().scrollTop = this.getTopFromDateTime(date);
-        };
-        VerticalView.prototype.generateColumnLevels = function () {
-            var level = this.getDateSlots(this.renderDates, this.parent.activeViewOptions.workDays);
-            var columnLevels = [];
-            if (this.parent.activeViewOptions.group.resources.length > 0) {
-                columnLevels = this.parent.resourceBase.generateResourceLevels(level);
-                if (this.parent.uiStateValues.isGroupAdaptive) {
-                    var resourceLevel = this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex];
-                    var resStartHour = resourceLevel.resourceData[resourceLevel.resource.startHourField];
-                    var resEndHour = resourceLevel.resourceData[resourceLevel.resource.endHourField];
-                    var dateSlots = this.getDateSlots(resourceLevel.renderDates, resourceLevel.workDays, resStartHour, resEndHour);
-                    columnLevels = [dateSlots];
+        }
+        return currentDateIndex;
+    };
+    VerticalView.prototype.clearCurrentTimeIndicatorTimer = function () {
+        if (!isNullOrUndefined(this.currentTimeIndicatorTimer)) {
+            window.clearInterval(this.currentTimeIndicatorTimer);
+            this.currentTimeIndicatorTimer = null;
+            this.removeCurrentTimeIndicatorElements();
+        }
+    };
+    VerticalView.prototype.removeCurrentTimeIndicatorElements = function () {
+        var queryString = '.' + cls.PREVIOUS_TIMELINE_CLASS + ',.' + cls.CURRENT_TIMELINE_CLASS + ',.' + cls.CURRENT_TIME_CLASS;
+        var timeIndicator = [].slice.call(this.element.querySelectorAll(queryString));
+        timeIndicator.forEach(function (indicator) { return remove(indicator); });
+    };
+    VerticalView.prototype.changeCurrentTimePosition = function () {
+        if (this.parent.isDestroyed) {
+            return;
+        }
+        this.removeCurrentTimeIndicatorElements();
+        var currentDateIndex = this.getCurrentTimeIndicatorIndex();
+        var firstRow = this.parent.getContentTable().rows[0];
+        var top = this.getTopFromDateTime(new Date());
+        var topInPx = formatUnit(top);
+        var rowIndex = Math.floor(top / firstRow.cells[0].offsetHeight);
+        if (isNullOrUndefined(rowIndex)) {
+            return;
+        }
+        var curTimeWrap = this.element.querySelectorAll('.' + cls.TIMELINE_WRAPPER_CLASS);
+        for (var i = 0, length_1 = currentDateIndex[0]; i < length_1; i++) {
+            curTimeWrap[i].appendChild(createElement('div', { className: cls.PREVIOUS_TIMELINE_CLASS, styles: 'top:' + topInPx }));
+        }
+        for (var _i = 0, currentDateIndex_1 = currentDateIndex; _i < currentDateIndex_1.length; _i++) {
+            var day = currentDateIndex_1[_i];
+            curTimeWrap[day].appendChild(createElement('div', { className: cls.CURRENT_TIMELINE_CLASS, styles: 'top:' + topInPx }));
+        }
+        var currentTimeEle = createElement('div', {
+            innerHTML: this.parent.getTimeString(new Date()),
+            className: cls.CURRENT_TIME_CLASS,
+            styles: 'top:' + topInPx
+        });
+        var timeCellsWrap = this.getTimeCellsElement();
+        removeClass(timeCellsWrap.querySelectorAll('.' + cls.HIDE_CHILDS_CLASS), cls.HIDE_CHILDS_CLASS);
+        addClass([timeCellsWrap.querySelectorAll('tr')[rowIndex].lastChild], cls.HIDE_CHILDS_CLASS);
+        prepend([currentTimeEle], timeCellsWrap);
+        currentTimeEle.style.top = formatUnit(currentTimeEle.offsetTop - (currentTimeEle.offsetHeight / 2));
+    };
+    VerticalView.prototype.getTopFromDateTime = function (date) {
+        var startHour = this.getStartHour();
+        var diffInMinutes = ((date.getHours() - startHour.getHours()) * 60) + (date.getMinutes() - startHour.getMinutes());
+        return (diffInMinutes * this.getWorkCellHeight() * this.parent.activeViewOptions.timeScale.slotCount) /
+            this.parent.activeViewOptions.timeScale.interval;
+    };
+    VerticalView.prototype.getWorkCellHeight = function () {
+        return this.element.querySelector('.e-work-cells').offsetHeight;
+    };
+    VerticalView.prototype.getTdContent = function (date, type, groupIndex) {
+        var cntEle;
+        switch (type) {
+            case 'dateHeader':
+                if (this.parent.activeViewOptions.dateHeaderTemplate) {
+                    var args = { date: date, type: type };
+                    cntEle = this.parent.getDateHeaderTemplate()(args);
                 }
-            }
-            else {
-                columnLevels.push(level);
-            }
-            this.colLevels = columnLevels;
-            return columnLevels;
-        };
-        VerticalView.prototype.getDateSlots = function (renderDates, workDays, workStartHour, workEndHour) {
-            if (workStartHour === void 0) { workStartHour = this.parent.workHours.start; }
-            if (workEndHour === void 0) { workEndHour = this.parent.workHours.end; }
-            var dateCol = [];
-            var start = this.parent.globalize.parseDate(workStartHour, { skeleton: 'Hm' });
-            var end = this.parent.globalize.parseDate(workEndHour, { skeleton: 'Hm' });
-            for (var _i = 0, renderDates_1 = renderDates; _i < renderDates_1.length; _i++) {
-                var col = renderDates_1[_i];
-                var classList = [cls.HEADER_CELLS_CLASS];
-                if (this.isCurrentDate(col)) {
-                    classList.push(cls.CURRENT_DAY_CLASS);
+                else {
+                    cntEle = compile(DATE_HEADER_TEMPLATE, this.customHelper)({ date: date });
                 }
-                dateCol.push({
-                    date: col, type: 'dateHeader', className: classList, colSpan: 1,
-                    workDays: workDays, startHour: new Date(+start), endHour: new Date(+end)
-                });
-            }
-            return dateCol;
-        };
-        VerticalView.prototype.isWorkHourRange = function (date) {
-            return (this.getStartHour().getTime() <= date.getTime()) && (this.getEndHour().getTime() >= date.getTime());
-        };
-        VerticalView.prototype.highlightCurrentTime = function () {
-            var _this = this;
-            if (this.parent.showTimeIndicator && this.isWorkHourRange(new Date())) {
-                var currentDateIndex = this.getCurrentTimeIndicatorIndex();
-                if (currentDateIndex.length > 0) {
-                    this.changeCurrentTimePosition();
-                    if (ej2_base_1.isNullOrUndefined(this.currentTimeIndicatorTimer)) {
-                        this.currentTimeIndicatorTimer = window.setInterval(function () { _this.changeCurrentTimePosition(); }, util.MS_PER_MINUTE);
-                    }
+                break;
+            case 'majorSlot':
+                if (this.parent.activeViewOptions.timeScale.majorSlotTemplate) {
+                    var args = { date: date, type: type };
+                    cntEle = this.parent.getMajorSlotTemplate()(args);
                 }
                 else {
-                    this.clearCurrentTimeIndicatorTimer();
+                    cntEle = compile(MAJOR_SLOT_TEMPLATE, this.customHelper)({ date: date });
                 }
-            }
-            else {
-                this.clearCurrentTimeIndicatorTimer();
-            }
-        };
-        VerticalView.prototype.getCurrentTimeIndicatorIndex = function () {
-            var currentDateIndex = [];
-            if (!ej2_base_1.isNullOrUndefined(this.parent.resourceBase) && (this.parent.activeViewOptions.group.resources.length > 0) &&
-                !this.parent.uiStateValues.isGroupAdaptive) {
-                var count = 0;
-                for (var _i = 0, _a = this.parent.resourceBase.lastResourceLevel; _i < _a.length; _i++) {
-                    var resource = _a[_i];
-                    var index = this.parent.getIndexOfDate(resource.renderDates, util.resetTime(new Date()));
-                    if (index >= 0) {
-                        var resIndex = this.parent.activeViewOptions.group.byDate ?
-                            (this.parent.resourceBase.lastResourceLevel.length * index) + count : count + index;
-                        currentDateIndex.push(resIndex);
-                    }
-                    count += this.parent.activeViewOptions.group.byDate ? 1 : resource.renderDates.length;
+                break;
+            case 'minorSlot':
+                if (this.parent.activeViewOptions.timeScale.minorSlotTemplate) {
+                    var args = { date: date, type: type };
+                    cntEle = this.parent.getMinorSlotTemplate()(args);
                 }
-            }
-            else {
-                var renderDates = (this.parent.uiStateValues.isGroupAdaptive) ?
-                    this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex].renderDates : this.renderDates;
-                var index = this.parent.getIndexOfDate(renderDates, util.resetTime(new Date()));
-                if (index >= 0) {
-                    currentDateIndex.push(index);
+                else {
+                    cntEle = compile(MINOR_SLOT_TEMPLATE, this.customHelper)({ date: date });
                 }
-            }
-            return currentDateIndex;
-        };
-        VerticalView.prototype.clearCurrentTimeIndicatorTimer = function () {
-            if (!ej2_base_1.isNullOrUndefined(this.currentTimeIndicatorTimer)) {
-                window.clearInterval(this.currentTimeIndicatorTimer);
-                this.currentTimeIndicatorTimer = null;
-                this.removeCurrentTimeIndicatorElements();
-            }
-        };
-        VerticalView.prototype.removeCurrentTimeIndicatorElements = function () {
-            var queryString = '.' + cls.PREVIOUS_TIMELINE_CLASS + ',.' + cls.CURRENT_TIMELINE_CLASS + ',.' + cls.CURRENT_TIME_CLASS;
-            var timeIndicator = [].slice.call(this.element.querySelectorAll(queryString));
-            timeIndicator.forEach(function (indicator) { return ej2_base_2.remove(indicator); });
-        };
-        VerticalView.prototype.changeCurrentTimePosition = function () {
-            if (this.parent.isDestroyed) {
-                return;
-            }
-            this.removeCurrentTimeIndicatorElements();
-            var currentDateIndex = this.getCurrentTimeIndicatorIndex();
-            var firstRow = this.parent.getContentTable().rows[0];
-            var top = this.getTopFromDateTime(new Date());
-            var topInPx = ej2_base_1.formatUnit(top);
-            var rowIndex = Math.floor(top / firstRow.cells[0].offsetHeight);
-            if (ej2_base_1.isNullOrUndefined(rowIndex)) {
-                return;
-            }
-            var curTimeWrap = this.element.querySelectorAll('.' + cls.TIMELINE_WRAPPER_CLASS);
-            for (var i = 0, length_1 = currentDateIndex[0]; i < length_1; i++) {
-                curTimeWrap[i].appendChild(ej2_base_2.createElement('div', { className: cls.PREVIOUS_TIMELINE_CLASS, styles: 'top:' + topInPx }));
-            }
-            for (var _i = 0, currentDateIndex_1 = currentDateIndex; _i < currentDateIndex_1.length; _i++) {
-                var day = currentDateIndex_1[_i];
-                curTimeWrap[day].appendChild(ej2_base_2.createElement('div', { className: cls.CURRENT_TIMELINE_CLASS, styles: 'top:' + topInPx }));
-            }
-            var currentTimeEle = ej2_base_2.createElement('div', {
-                innerHTML: this.parent.getTimeString(new Date()),
-                className: cls.CURRENT_TIME_CLASS,
-                styles: 'top:' + topInPx
-            });
-            var timeCellsWrap = this.getTimeCellsElement();
-            ej2_base_2.removeClass(timeCellsWrap.querySelectorAll('.' + cls.HIDE_CHILDS_CLASS), cls.HIDE_CHILDS_CLASS);
-            ej2_base_2.addClass([timeCellsWrap.querySelectorAll('tr')[rowIndex].lastChild], cls.HIDE_CHILDS_CLASS);
-            ej2_base_2.prepend([currentTimeEle], timeCellsWrap);
-            currentTimeEle.style.top = ej2_base_1.formatUnit(currentTimeEle.offsetTop - (currentTimeEle.offsetHeight / 2));
-        };
-        VerticalView.prototype.getTopFromDateTime = function (date) {
-            var startHour = this.getStartHour();
-            var diffInMinutes = ((date.getHours() - startHour.getHours()) * 60) + (date.getMinutes() - startHour.getMinutes());
-            return (diffInMinutes * this.getWorkCellHeight() * this.parent.activeViewOptions.timeScale.slotCount) /
-                this.parent.activeViewOptions.timeScale.interval;
-        };
-        VerticalView.prototype.getWorkCellHeight = function () {
-            return this.element.querySelector('.e-work-cells').offsetHeight;
-        };
-        VerticalView.prototype.getTdContent = function (date, type, groupIndex) {
-            var cntEle;
-            switch (type) {
-                case 'dateHeader':
-                    if (this.parent.activeViewOptions.dateHeaderTemplate) {
-                        var args = { date: date, type: type };
-                        cntEle = this.parent.getDateHeaderTemplate()(args);
-                    }
-                    else {
-                        cntEle = ej2_base_1.compile(DATE_HEADER_TEMPLATE, this.customHelper)({ date: date });
-                    }
-                    break;
-                case 'majorSlot':
-                    if (this.parent.activeViewOptions.timeScale.majorSlotTemplate) {
-                        var args = { date: date, type: type };
-                        cntEle = this.parent.getMajorSlotTemplate()(args);
-                    }
-                    else {
-                        cntEle = ej2_base_1.compile(MAJOR_SLOT_TEMPLATE, this.customHelper)({ date: date });
-                    }
-                    break;
-                case 'minorSlot':
-                    if (this.parent.activeViewOptions.timeScale.minorSlotTemplate) {
-                        var args = { date: date, type: type };
-                        cntEle = this.parent.getMinorSlotTemplate()(args);
-                    }
-                    else {
-                        cntEle = ej2_base_1.compile(MINOR_SLOT_TEMPLATE, this.customHelper)({ date: date });
-                    }
-                    break;
-                case 'alldayCells':
-                    if (this.parent.cellTemplate) {
-                        var args = { date: date, type: type, groupIndex: groupIndex };
-                        cntEle = this.parent.getCellTemplate()(args);
-                    }
-                    break;
-            }
-            return cntEle;
-        };
-        VerticalView.prototype.renderLayout = function (type) {
-            this.setPanel(ej2_base_2.createElement('div', { className: cls.TABLE_WRAP_CLASS }));
-            var clsList = ['e-vertical-view', this.viewClass];
-            clsList.push(type);
-            if (this.parent.activeViewOptions.group.byDate) {
-                clsList.push('e-by-date');
-            }
-            if (!this.parent.activeViewOptions.timeScale.enable) {
-                ej2_base_2.addClass([this.element], [cls.TIMESCALE_DISABLE, this.viewClass]);
-            }
-            this.renderPanel(type);
-            ej2_base_2.addClass([this.element], clsList);
-            this.element.appendChild(this.createTableLayout(cls.OUTER_TABLE_CLASS));
-            this.colLevels = this.generateColumnLevels();
-            this.renderHeader();
-            this.renderContent();
+                break;
+            case 'alldayCells':
+                if (this.parent.cellTemplate) {
+                    var args = { date: date, type: type, groupIndex: groupIndex };
+                    cntEle = this.parent.getCellTemplate()(args);
+                }
+                break;
+        }
+        return cntEle;
+    };
+    VerticalView.prototype.renderLayout = function (type) {
+        this.setPanel(createElement('div', { className: cls.TABLE_WRAP_CLASS }));
+        var clsList = ['e-vertical-view', this.viewClass];
+        clsList.push(type);
+        if (this.parent.activeViewOptions.group.byDate) {
+            clsList.push('e-by-date');
+        }
+        if (!this.parent.activeViewOptions.timeScale.enable) {
+            addClass([this.element], [cls.TIMESCALE_DISABLE, this.viewClass]);
+        }
+        this.renderPanel(type);
+        addClass([this.element], clsList);
+        this.element.appendChild(this.createTableLayout(cls.OUTER_TABLE_CLASS));
+        this.colLevels = this.generateColumnLevels();
+        this.renderHeader();
+        this.renderContent();
+        if (this.parent.activeViewOptions.timeScale.enable) {
+            this.highlightCurrentTime();
+        }
+        if (this.parent.uiStateValues.isGroupAdaptive && !this.parent.element.querySelector('.' + cls.RESOURCE_TOOLBAR_CONTAINER)) {
+            this.renderResourceMobileLayout();
+        }
+        this.parent.notify(event.contentReady, {});
+    };
+    VerticalView.prototype.renderHeader = function () {
+        var tr = createElement('tr');
+        var dateTd = createElement('td');
+        dateTd.appendChild(this.renderDatesHeader());
+        if (this.parent.activeViewOptions.timeScale.enable) {
+            var indentTd = createElement('td', { className: cls.LEFT_INDENT_CLASS });
+            indentTd.appendChild(this.renderLeftIndent());
+            tr.appendChild(indentTd);
+        }
+        tr.appendChild(dateTd);
+        prepend([tr], this.element.querySelector('tbody'));
+    };
+    VerticalView.prototype.renderContent = function () {
+        var tr = createElement('tr');
+        var workTd = createElement('td');
+        if (this.parent.isAdaptive) {
+            workTd.setAttribute('colspan', (this.parent.activeViewOptions.timeScale.enable ? '2' : '1'));
+            var scrollContainer = createElement('div', { className: cls.SCROLL_CONTAINER_CLASS });
             if (this.parent.activeViewOptions.timeScale.enable) {
-                this.highlightCurrentTime();
+                scrollContainer.appendChild(this.renderTimeCells());
             }
-            if (this.parent.uiStateValues.isGroupAdaptive && !this.parent.element.querySelector('.' + cls.RESOURCE_TOOLBAR_CONTAINER)) {
-                this.renderResourceMobileLayout();
-            }
-            this.parent.notify(event.contentReady, {});
-        };
-        VerticalView.prototype.renderHeader = function () {
-            var tr = ej2_base_2.createElement('tr');
-            var dateTd = ej2_base_2.createElement('td');
-            dateTd.appendChild(this.renderDatesHeader());
+            scrollContainer.appendChild(this.renderContentArea());
+            workTd.appendChild(scrollContainer);
+            tr.appendChild(workTd);
+        }
+        else {
+            workTd.appendChild(this.renderContentArea());
             if (this.parent.activeViewOptions.timeScale.enable) {
-                var indentTd = ej2_base_2.createElement('td', { className: cls.LEFT_INDENT_CLASS });
-                indentTd.appendChild(this.renderLeftIndent());
-                tr.appendChild(indentTd);
+                var timesTd = createElement('td');
+                timesTd.appendChild(this.renderTimeCells());
+                tr.appendChild(timesTd);
             }
-            tr.appendChild(dateTd);
-            ej2_base_2.prepend([tr], this.element.querySelector('tbody'));
-        };
-        VerticalView.prototype.renderContent = function () {
-            var tr = ej2_base_2.createElement('tr');
-            var workTd = ej2_base_2.createElement('td');
-            if (this.parent.isAdaptive) {
-                workTd.setAttribute('colspan', (this.parent.activeViewOptions.timeScale.enable ? '2' : '1'));
-                var scrollContainer = ej2_base_2.createElement('div', { className: cls.SCROLL_CONTAINER_CLASS });
-                if (this.parent.activeViewOptions.timeScale.enable) {
-                    scrollContainer.appendChild(this.renderTimeCells());
-                }
-                scrollContainer.appendChild(this.renderContentArea());
-                workTd.appendChild(scrollContainer);
-                tr.appendChild(workTd);
+            tr.appendChild(workTd);
+        }
+        this.element.querySelector('tbody').appendChild(tr);
+    };
+    VerticalView.prototype.renderLeftIndent = function () {
+        var wrap = createElement('div', { className: cls.LEFT_INDENT_WRAP_CLASS });
+        var tbl = this.createTableLayout();
+        var trEle = createElement('tr');
+        var rowCount = this.colLevels.length;
+        for (var i = 0; i < rowCount; i++) {
+            var ntr_1 = trEle.cloneNode();
+            var data_1 = { className: [this.colLevels[i][0].className[0]], type: 'emptyCells' };
+            ntr_1.appendChild(this.createTd(data_1));
+            tbl.querySelector('tbody').appendChild(ntr_1);
+        }
+        var ntr = trEle.cloneNode();
+        var appointmentExpandCollapse = createElement('div', {
+            attrs: { 'tabindex': '0', title: 'Expand-all-day-section', 'aria-disabled': 'false', 'aria-label': 'Expand section' },
+            className: cls.ALLDAY_APPOINTMENT_SECTION_CLASS + ' ' + cls.APPOINTMENT_ROW_EXPAND_CLASS + ' ' +
+                cls.ICON + ' ' + cls.DISABLE_CLASS,
+        });
+        var data = { className: [cls.ALLDAY_CELLS_CLASS], type: 'emptyCells' };
+        var nth = this.createTd(data);
+        nth.appendChild(appointmentExpandCollapse);
+        ntr.appendChild(nth);
+        tbl.querySelector('tbody').appendChild(ntr);
+        wrap.appendChild(tbl);
+        return wrap;
+    };
+    VerticalView.prototype.renderDatesHeader = function () {
+        var container = createElement('div', { className: cls.DATE_HEADER_CONTAINER_CLASS });
+        var wrap = createElement('div', { className: cls.DATE_HEADER_WRAP_CLASS });
+        container.appendChild(wrap);
+        var tbl = this.createTableLayout();
+        var trEle = createElement('tr');
+        var rowCount = this.colLevels.length;
+        var lastLevel = this.colLevels[rowCount - 1];
+        var colGroupEle = createElement('colgroup');
+        for (var i = 0; i < lastLevel.length; i++) {
+            colGroupEle.appendChild(createElement('col'));
+        }
+        tbl.appendChild(colGroupEle);
+        for (var i = 0; i < rowCount; i++) {
+            var ntr_2 = trEle.cloneNode();
+            addClass([ntr_2], cls.HEADER_ROW_CLASS);
+            var level = this.colLevels[i];
+            for (var j = 0; j < level.length; j++) {
+                ntr_2.appendChild(this.createTd(level[j]));
             }
-            else {
-                workTd.appendChild(this.renderContentArea());
-                if (this.parent.activeViewOptions.timeScale.enable) {
-                    var timesTd = ej2_base_2.createElement('td');
-                    timesTd.appendChild(this.renderTimeCells());
-                    tr.appendChild(timesTd);
-                }
-                tr.appendChild(workTd);
+            tbl.querySelector('tbody').appendChild(ntr_2);
+        }
+        var ntr = trEle.cloneNode();
+        addClass([ntr], cls.ALLDAY_ROW_CLASS);
+        for (var j = 0; j < lastLevel.length; j++) {
+            var td = extend({}, lastLevel[j]);
+            td.className = [cls.ALLDAY_CELLS_CLASS];
+            td.type = 'alldayCells';
+            var ntd = this.createTd(td);
+            ntd.setAttribute('data-date', td.date.getTime().toString());
+            if (!isNullOrUndefined(td.groupIndex)) {
+                ntd.setAttribute('data-group-index', '' + td.groupIndex);
             }
-            this.element.querySelector('tbody').appendChild(tr);
-        };
-        VerticalView.prototype.renderLeftIndent = function () {
-            var wrap = ej2_base_2.createElement('div', { className: cls.LEFT_INDENT_WRAP_CLASS });
-            var tbl = this.createTableLayout();
-            var trEle = ej2_base_2.createElement('tr');
-            var rowCount = this.colLevels.length;
-            for (var i = 0; i < rowCount; i++) {
-                var ntr_1 = trEle.cloneNode();
-                var data_1 = { className: [this.colLevels[i][0].className[0]], type: 'emptyCells' };
-                ntr_1.appendChild(this.createTd(data_1));
-                tbl.querySelector('tbody').appendChild(ntr_1);
+            this.wireCellEvents(ntd);
+            ntr.appendChild(ntd);
+        }
+        tbl.querySelector('tbody').appendChild(ntr);
+        var thead = createElement('thead');
+        thead.appendChild(this.createEventWrapper('allDay'));
+        prepend([thead], tbl);
+        wrap.appendChild(tbl);
+        return container;
+    };
+    VerticalView.prototype.createTd = function (td) {
+        var tdEle = createElement('th');
+        if (td.colSpan) {
+            tdEle.setAttribute('colspan', td.colSpan.toString());
+        }
+        if (td.className) {
+            addClass([tdEle], td.className);
+        }
+        if (td.date && td.type) {
+            var ele = this.getTdContent(td.date, td.type, td.groupIndex);
+            if (ele && ele.length) {
+                append([].slice.call(ele), tdEle);
             }
-            var ntr = trEle.cloneNode();
-            var appointmentExpandCollapse = ej2_base_2.createElement('div', {
-                attrs: { 'tabindex': '0', title: 'Expand-all-day-section', 'aria-disabled': 'false', 'aria-label': 'Expand section' },
-                className: cls.ALLDAY_APPOINTMENT_SECTION_CLASS + ' ' + cls.APPOINTMENT_ROW_EXPAND_CLASS + ' ' +
-                    cls.ICON + ' ' + cls.DISABLE_CLASS,
-            });
-            var data = { className: [cls.ALLDAY_CELLS_CLASS], type: 'emptyCells' };
-            var nth = this.createTd(data);
-            nth.appendChild(appointmentExpandCollapse);
-            ntr.appendChild(nth);
-            tbl.querySelector('tbody').appendChild(ntr);
-            wrap.appendChild(tbl);
-            return wrap;
-        };
-        VerticalView.prototype.renderDatesHeader = function () {
-            var container = ej2_base_2.createElement('div', { className: cls.DATE_HEADER_CONTAINER_CLASS });
-            var wrap = ej2_base_2.createElement('div', { className: cls.DATE_HEADER_WRAP_CLASS });
-            container.appendChild(wrap);
-            var tbl = this.createTableLayout();
-            var trEle = ej2_base_2.createElement('tr');
-            var rowCount = this.colLevels.length;
-            var lastLevel = this.colLevels[rowCount - 1];
-            var colGroupEle = ej2_base_2.createElement('colgroup');
-            for (var i = 0; i < lastLevel.length; i++) {
-                colGroupEle.appendChild(ej2_base_2.createElement('col'));
+        }
+        if (td.type === 'resourceHeader') {
+            this.setResourceHeaderContent(tdEle, td);
+        }
+        if (td.type === 'dateHeader' && td.className.indexOf(cls.HEADER_CELLS_CLASS) >= 0) {
+            tdEle.setAttribute('data-date', td.date.getTime().toString());
+            if (!isNullOrUndefined(td.groupIndex)) {
+                tdEle.setAttribute('data-group-index', '' + td.groupIndex);
             }
-            tbl.appendChild(colGroupEle);
-            for (var i = 0; i < rowCount; i++) {
-                var ntr_2 = trEle.cloneNode();
-                ej2_base_2.addClass([ntr_2], cls.HEADER_ROW_CLASS);
-                var level = this.colLevels[i];
-                for (var j = 0; j < level.length; j++) {
-                    ntr_2.appendChild(this.createTd(level[j]));
-                }
-                tbl.querySelector('tbody').appendChild(ntr_2);
-            }
+            EventHandler.add(tdEle, 'click', this.workCellAction.cellClick, this);
+            EventHandler.add(tdEle, 'dblclick', this.workCellAction.cellDblClick, this);
+        }
+        var args = { elementType: td.type, element: tdEle, date: td.date, groupIndex: td.groupIndex };
+        this.parent.trigger(event.renderCell, args);
+        return tdEle;
+    };
+    VerticalView.prototype.wireCellEvents = function (element) {
+        EventHandler.add(element, 'mousedown', this.workCellAction.cellMouseDown, this);
+        EventHandler.add(element, 'click', this.workCellAction.cellClick, this);
+        EventHandler.add(element, 'dblclick', this.workCellAction.cellDblClick, this);
+    };
+    VerticalView.prototype.renderTimeCells = function () {
+        var _this = this;
+        var wrap = createElement('div', { className: cls.TIME_CELLS_WRAP_CLASS });
+        var tbl = this.createTableLayout();
+        var trEle = createElement('tr');
+        var handler = function (r) {
+            r.type = r.first ? 'majorSlot' : 'minorSlot';
+            r.className = r.last ? [cls.TIME_CELLS_CLASS] : [];
             var ntr = trEle.cloneNode();
-            ej2_base_2.addClass([ntr], cls.ALLDAY_ROW_CLASS);
-            for (var j = 0; j < lastLevel.length; j++) {
-                var td = ej2_base_1.extend({}, lastLevel[j]);
-                td.className = [cls.ALLDAY_CELLS_CLASS];
-                td.type = 'alldayCells';
-                var ntd = this.createTd(td);
-                ntd.setAttribute('data-date', td.date.getTime().toString());
-                if (!ej2_base_1.isNullOrUndefined(td.groupIndex)) {
-                    ntd.setAttribute('data-group-index', '' + td.groupIndex);
-                }
-                this.wireCellEvents(ntd);
-                ntr.appendChild(ntd);
-            }
+            var data = { date: r.date, type: r.type, className: r.className };
+            ntr.appendChild(_this.createTd(data));
             tbl.querySelector('tbody').appendChild(ntr);
-            var thead = ej2_base_2.createElement('thead');
-            thead.appendChild(this.createEventWrapper('allDay'));
-            ej2_base_2.prepend([thead], tbl);
-            wrap.appendChild(tbl);
-            return container;
+            return r;
         };
-        VerticalView.prototype.createTd = function (td) {
-            var tdEle = ej2_base_2.createElement('th');
-            if (td.colSpan) {
-                tdEle.setAttribute('colspan', td.colSpan.toString());
-            }
-            if (td.className) {
-                ej2_base_2.addClass([tdEle], td.className);
-            }
-            if (td.date && td.type) {
-                var ele = this.getTdContent(td.date, td.type, td.groupIndex);
-                if (ele && ele.length) {
-                    ej2_base_2.append([].slice.call(ele), tdEle);
+        this.getTimeSlotRows(handler);
+        wrap.appendChild(tbl);
+        return wrap;
+    };
+    VerticalView.prototype.renderContentArea = function () {
+        var _this = this;
+        var wrap = createElement('div', { className: cls.CONTENT_WRAP_CLASS });
+        var tbl = this.createTableLayout(cls.CONTENT_TABLE_CLASS);
+        var tr = createElement('tr', { attrs: { role: 'row' } });
+        var td = createElement('td', { attrs: { role: 'gridcell', 'aria-selected': 'false' } });
+        var tbody = tbl.querySelector('tbody');
+        var colGroupEle = createElement('colgroup');
+        for (var _i = 0, _a = this.colLevels.slice(-1)[0]; _i < _a.length; _i++) {
+            var col = _a[_i];
+            colGroupEle.appendChild(createElement('col'));
+        }
+        tbl.appendChild(colGroupEle);
+        var handler = function (r) {
+            var ntr = tr.cloneNode();
+            for (var _i = 0, _a = _this.colLevels[_this.colLevels.length - 1]; _i < _a.length; _i++) {
+                var tdData = _a[_i];
+                var ntd = td.cloneNode();
+                var clsName = r.last ? [cls.WORK_CELLS_CLASS] : [cls.WORK_CELLS_CLASS, cls.ALTERNATE_CELLS_CLASS];
+                var cellDate = util.resetTime(new Date('' + tdData.date));
+                util.setTime(cellDate, util.getDateInMs(r.date));
+                if (_this.parent.workHours.highlight && ((_this.parent.activeViewOptions.timeScale.enable &&
+                    _this.isWorkHour(cellDate, tdData.startHour, tdData.endHour, tdData.workDays)) ||
+                    (!_this.parent.activeViewOptions.timeScale.enable && _this.isWorkDay(cellDate, tdData.workDays)))) {
+                    clsName.push(cls.WORK_HOURS_CLASS);
                 }
-            }
-            if (td.type === 'resourceHeader') {
-                this.setResourceHeaderContent(tdEle, td);
-            }
-            if (td.type === 'dateHeader' && td.className.indexOf(cls.HEADER_CELLS_CLASS) >= 0) {
-                tdEle.setAttribute('data-date', td.date.getTime().toString());
-                if (!ej2_base_1.isNullOrUndefined(td.groupIndex)) {
-                    tdEle.setAttribute('data-group-index', '' + td.groupIndex);
+                addClass([ntd], clsName);
+                if (_this.parent.cellTemplate) {
+                    var args_1 = { date: cellDate, type: 'workCells', groupIndex: tdData.groupIndex };
+                    append([].slice.call(_this.parent.getCellTemplate()(args_1)), ntd);
                 }
-                ej2_base_1.EventHandler.add(tdEle, 'click', this.workCellAction.cellClick, this);
-                ej2_base_1.EventHandler.add(tdEle, 'dblclick', this.workCellAction.cellDblClick, this);
-            }
-            var args = { elementType: td.type, element: tdEle, date: td.date, groupIndex: td.groupIndex };
-            this.parent.trigger(event.renderCell, args);
-            return tdEle;
-        };
-        VerticalView.prototype.wireCellEvents = function (element) {
-            ej2_base_1.EventHandler.add(element, 'mousedown', this.workCellAction.cellMouseDown, this);
-            ej2_base_1.EventHandler.add(element, 'click', this.workCellAction.cellClick, this);
-            ej2_base_1.EventHandler.add(element, 'dblclick', this.workCellAction.cellDblClick, this);
-        };
-        VerticalView.prototype.renderTimeCells = function () {
-            var _this = this;
-            var wrap = ej2_base_2.createElement('div', { className: cls.TIME_CELLS_WRAP_CLASS });
-            var tbl = this.createTableLayout();
-            var trEle = ej2_base_2.createElement('tr');
-            var handler = function (r) {
-                r.type = r.first ? 'majorSlot' : 'minorSlot';
-                r.className = r.last ? [cls.TIME_CELLS_CLASS] : [];
-                var ntr = trEle.cloneNode();
-                var data = { date: r.date, type: r.type, className: r.className };
-                ntr.appendChild(_this.createTd(data));
-                tbl.querySelector('tbody').appendChild(ntr);
-                return r;
-            };
-            this.getTimeSlotRows(handler);
-            wrap.appendChild(tbl);
-            return wrap;
-        };
-        VerticalView.prototype.renderContentArea = function () {
-            var _this = this;
-            var wrap = ej2_base_2.createElement('div', { className: cls.CONTENT_WRAP_CLASS });
-            var tbl = this.createTableLayout(cls.CONTENT_TABLE_CLASS);
-            var tr = ej2_base_2.createElement('tr', { attrs: { role: 'row' } });
-            var td = ej2_base_2.createElement('td', { attrs: { role: 'gridcell', 'aria-selected': 'false' } });
-            var tbody = tbl.querySelector('tbody');
-            var colGroupEle = ej2_base_2.createElement('colgroup');
-            for (var _i = 0, _a = this.colLevels.slice(-1)[0]; _i < _a.length; _i++) {
-                var col = _a[_i];
-                colGroupEle.appendChild(ej2_base_2.createElement('col'));
-            }
-            tbl.appendChild(colGroupEle);
-            var handler = function (r) {
-                var ntr = tr.cloneNode();
-                for (var _i = 0, _a = _this.colLevels[_this.colLevels.length - 1]; _i < _a.length; _i++) {
-                    var tdData = _a[_i];
-                    var ntd = td.cloneNode();
-                    var clsName = r.last ? [cls.WORK_CELLS_CLASS] : [cls.WORK_CELLS_CLASS, cls.ALTERNATE_CELLS_CLASS];
-                    var cellDate = util.resetTime(new Date('' + tdData.date));
-                    util.setTime(cellDate, util.getDateInMs(r.date));
-                    if (_this.parent.workHours.highlight && ((_this.parent.activeViewOptions.timeScale.enable &&
-                        _this.isWorkHour(cellDate, tdData.startHour, tdData.endHour, tdData.workDays)) ||
-                        (!_this.parent.activeViewOptions.timeScale.enable && _this.isWorkDay(cellDate, tdData.workDays)))) {
-                        clsName.push(cls.WORK_HOURS_CLASS);
-                    }
-                    ej2_base_2.addClass([ntd], clsName);
-                    if (_this.parent.cellTemplate) {
-                        var args_1 = { date: cellDate, type: 'workCells', groupIndex: tdData.groupIndex };
-                        ej2_base_2.append([].slice.call(_this.parent.getCellTemplate()(args_1)), ntd);
-                    }
-                    ntd.setAttribute('data-date', cellDate.getTime().toString());
-                    if (!ej2_base_1.isNullOrUndefined(tdData.groupIndex) || _this.parent.uiStateValues.isGroupAdaptive) {
-                        var groupIndex = _this.parent.uiStateValues.isGroupAdaptive ? _this.parent.uiStateValues.groupIndex :
-                            tdData.groupIndex;
-                        ntd.setAttribute('data-group-index', '' + groupIndex);
-                    }
-                    _this.wireCellEvents(ntd);
-                    var args = { elementType: 'workCells', element: ntd, date: cellDate, groupIndex: tdData.groupIndex };
-                    _this.parent.trigger(event.renderCell, args);
-                    ntr.appendChild(ntd);
+                ntd.setAttribute('data-date', cellDate.getTime().toString());
+                if (!isNullOrUndefined(tdData.groupIndex) || _this.parent.uiStateValues.isGroupAdaptive) {
+                    var groupIndex = _this.parent.uiStateValues.isGroupAdaptive ? _this.parent.uiStateValues.groupIndex :
+                        tdData.groupIndex;
+                    ntd.setAttribute('data-group-index', '' + groupIndex);
                 }
-                tbody.appendChild(ntr);
-                return r;
-            };
-            this.getTimeSlotRows(handler);
-            var thead = ej2_base_2.createElement('thead');
-            thead.appendChild(this.createEventWrapper());
-            if (this.parent.activeViewOptions.timeScale.enable) {
-                thead.appendChild(this.createEventWrapper('timeIndicator'));
+                _this.wireCellEvents(ntd);
+                var args = { elementType: 'workCells', element: ntd, date: cellDate, groupIndex: tdData.groupIndex };
+                _this.parent.trigger(event.renderCell, args);
+                ntr.appendChild(ntd);
             }
-            ej2_base_2.prepend([thead], tbl);
-            wrap.appendChild(tbl);
-            ej2_base_1.EventHandler.add(wrap, 'scroll', this.onContentScroll, this);
-            return wrap;
+            tbody.appendChild(ntr);
+            return r;
         };
-        VerticalView.prototype.createEventWrapper = function (type) {
-            if (type === void 0) { type = ''; }
-            var tr = ej2_base_2.createElement('tr', { attrs: { role: 'row' } });
-            this.colLevels.slice(-1)[0].forEach(function (col, day) {
-                var appointmentWrap = ej2_base_2.createElement('td', {
-                    className: (type === 'allDay') ? cls.ALLDAY_APPOINTMENT_WRAPPER_CLASS : (type === 'timeIndicator') ?
-                        cls.TIMELINE_WRAPPER_CLASS : cls.DAY_WRAPPER_CLASS,
-                    attrs: { role: 'gridcell', 'aria-selected': 'false' }
-                });
-                if (!ej2_base_1.isNullOrUndefined(col.groupIndex)) {
-                    appointmentWrap.setAttribute('data-group-index', col.groupIndex.toString());
-                }
-                if (type === '') {
-                    var innerWrapper = ej2_base_2.createElement('div', {
-                        id: cls.APPOINTMENT_WRAPPER_CLASS + '-' + day.toString(),
-                        className: cls.APPOINTMENT_WRAPPER_CLASS
-                    });
-                    appointmentWrap.appendChild(innerWrapper);
-                }
-                tr.appendChild(appointmentWrap);
+        this.getTimeSlotRows(handler);
+        var thead = createElement('thead');
+        thead.appendChild(this.createEventWrapper());
+        if (this.parent.activeViewOptions.timeScale.enable) {
+            thead.appendChild(this.createEventWrapper('timeIndicator'));
+        }
+        prepend([thead], tbl);
+        wrap.appendChild(tbl);
+        EventHandler.add(wrap, 'scroll', this.onContentScroll, this);
+        return wrap;
+    };
+    VerticalView.prototype.createEventWrapper = function (type) {
+        if (type === void 0) { type = ''; }
+        var tr = createElement('tr', { attrs: { role: 'row' } });
+        this.colLevels.slice(-1)[0].forEach(function (col, day) {
+            var appointmentWrap = createElement('td', {
+                className: (type === 'allDay') ? cls.ALLDAY_APPOINTMENT_WRAPPER_CLASS : (type === 'timeIndicator') ?
+                    cls.TIMELINE_WRAPPER_CLASS : cls.DAY_WRAPPER_CLASS,
+                attrs: { role: 'gridcell', 'aria-selected': 'false' }
             });
-            return tr;
-        };
-        VerticalView.prototype.getScrollableElement = function () {
-            if (this.parent.isAdaptive) {
-                return this.element.querySelector('.' + cls.SCROLL_CONTAINER_CLASS);
+            if (!isNullOrUndefined(col.groupIndex)) {
+                appointmentWrap.setAttribute('data-group-index', col.groupIndex.toString());
             }
-            else {
-                return this.getContentAreaElement();
+            if (type === '') {
+                var innerWrapper = createElement('div', {
+                    id: cls.APPOINTMENT_WRAPPER_CLASS + '-' + day.toString(),
+                    className: cls.APPOINTMENT_WRAPPER_CLASS
+                });
+                appointmentWrap.appendChild(innerWrapper);
             }
-        };
-        VerticalView.prototype.getDatesHeaderElement = function () {
-            return this.element.querySelector('.' + cls.DATE_HEADER_CONTAINER_CLASS);
-        };
-        VerticalView.prototype.getTimeCellsElement = function () {
-            return this.element.querySelector('.' + cls.TIME_CELLS_WRAP_CLASS);
-        };
-        VerticalView.prototype.getContentAreaElement = function () {
-            return this.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
-        };
-        VerticalView.prototype.getEndDateFromStartDate = function (start) {
-            var msMajorInterval = this.parent.activeViewOptions.timeScale.interval * util.MS_PER_MINUTE;
-            var msInterval = msMajorInterval / this.parent.activeViewOptions.timeScale.slotCount;
-            var end = new Date(start.getTime());
-            end.setMilliseconds(end.getMilliseconds() + msInterval);
-            return end;
-        };
-        VerticalView.prototype.getTimeSlotRows = function (handler) {
-            var rows = [];
-            var startHour = this.getStartHour();
-            var endHour = this.getEndHour();
-            var msMajorInterval = this.parent.activeViewOptions.timeScale.interval * util.MS_PER_MINUTE;
-            var msInterval = msMajorInterval / this.parent.activeViewOptions.timeScale.slotCount;
-            var length = Math.round(util.MS_PER_DAY / msInterval);
-            var msStartHour = startHour.getTime();
-            var msEndHour = endHour.getTime();
-            if (msStartHour !== msEndHour) {
-                length = Math.round((msEndHour - msStartHour) / msInterval);
+            tr.appendChild(appointmentWrap);
+        });
+        return tr;
+    };
+    VerticalView.prototype.getScrollableElement = function () {
+        if (this.parent.isAdaptive) {
+            return this.element.querySelector('.' + cls.SCROLL_CONTAINER_CLASS);
+        }
+        else {
+            return this.getContentAreaElement();
+        }
+    };
+    VerticalView.prototype.getDatesHeaderElement = function () {
+        return this.element.querySelector('.' + cls.DATE_HEADER_CONTAINER_CLASS);
+    };
+    VerticalView.prototype.getTimeCellsElement = function () {
+        return this.element.querySelector('.' + cls.TIME_CELLS_WRAP_CLASS);
+    };
+    VerticalView.prototype.getContentAreaElement = function () {
+        return this.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
+    };
+    VerticalView.prototype.getEndDateFromStartDate = function (start) {
+        var msMajorInterval = this.parent.activeViewOptions.timeScale.interval * util.MS_PER_MINUTE;
+        var msInterval = msMajorInterval / this.parent.activeViewOptions.timeScale.slotCount;
+        var end = new Date(start.getTime());
+        end.setMilliseconds(end.getMilliseconds() + msInterval);
+        return end;
+    };
+    VerticalView.prototype.getTimeSlotRows = function (handler) {
+        var rows = [];
+        var startHour = this.getStartHour();
+        var endHour = this.getEndHour();
+        var msMajorInterval = this.parent.activeViewOptions.timeScale.interval * util.MS_PER_MINUTE;
+        var msInterval = msMajorInterval / this.parent.activeViewOptions.timeScale.slotCount;
+        var length = Math.round(util.MS_PER_DAY / msInterval);
+        var msStartHour = startHour.getTime();
+        var msEndHour = endHour.getTime();
+        if (msStartHour !== msEndHour) {
+            length = Math.round((msEndHour - msStartHour) / msInterval);
+        }
+        if (!this.parent.activeViewOptions.timeScale.enable) {
+            length = 1;
+        }
+        var dt = new Date(msStartHour);
+        for (var i = 0; i < length; i++) {
+            var majorTickDivider = i % (msMajorInterval / msInterval);
+            var row = {
+                date: new Date('' + dt),
+                first: (majorTickDivider === 0),
+                middle: (majorTickDivider < this.parent.activeViewOptions.timeScale.slotCount - 1),
+                last: (majorTickDivider === this.parent.activeViewOptions.timeScale.slotCount - 1),
+                type: ''
+            };
+            if (handler) {
+                handler(row);
             }
-            if (!this.parent.activeViewOptions.timeScale.enable) {
-                length = 1;
+            rows.push(row);
+            dt.setMilliseconds(msInterval);
+        }
+        return rows;
+    };
+    /**
+     * Get module name.
+     */
+    VerticalView.prototype.getModuleName = function () {
+        return 'verticalView';
+    };
+    /**
+     * To destroy the vertical view.
+     * @return {void}
+     * @private
+     */
+    VerticalView.prototype.destroy = function () {
+        if (this.parent.isDestroyed) {
+            return;
+        }
+        this.clearCurrentTimeIndicatorTimer();
+        if (this.element) {
+            EventHandler.remove(this.getContentAreaElement(), 'scroll', this.onContentScroll);
+            if (this.parent.resourceBase) {
+                this.parent.resourceBase.destroy();
             }
-            var dt = new Date(msStartHour);
-            for (var i = 0; i < length; i++) {
-                var majorTickDivider = i % (msMajorInterval / msInterval);
-                var row = {
-                    date: new Date('' + dt),
-                    first: (majorTickDivider === 0),
-                    middle: (majorTickDivider < this.parent.activeViewOptions.timeScale.slotCount - 1),
-                    last: (majorTickDivider === this.parent.activeViewOptions.timeScale.slotCount - 1),
-                    type: ''
-                };
-                if (handler) {
-                    handler(row);
-                }
-                rows.push(row);
-                dt.setMilliseconds(msInterval);
+            remove(this.element);
+            this.element = null;
+            if (this.parent.scheduleTouchModule) {
+                this.parent.scheduleTouchModule.resetValues();
             }
-            return rows;
-        };
-        VerticalView.prototype.getModuleName = function () {
-            return 'verticalView';
-        };
-        VerticalView.prototype.destroy = function () {
-            if (this.parent.isDestroyed) {
-                return;
-            }
-            this.clearCurrentTimeIndicatorTimer();
-            if (this.element) {
-                ej2_base_1.EventHandler.remove(this.getContentAreaElement(), 'scroll', this.onContentScroll);
-                if (this.parent.resourceBase) {
-                    this.parent.resourceBase.destroy();
-                }
-                ej2_base_2.remove(this.element);
-                this.element = null;
-                if (this.parent.scheduleTouchModule) {
-                    this.parent.scheduleTouchModule.resetValues();
-                }
-            }
-        };
-        return VerticalView;
-    }(view_base_1.ViewBase));
-    exports.VerticalView = VerticalView;
-});
+        }
+    };
+    return VerticalView;
+}(ViewBase));
+export { VerticalView };

src/schedule/renderer/view-base.js

@@ -1,176 +0,182 @@
-define(["require", "exports", "@syncfusion/ej2-base", "../base/util", "../base/css-constant", "../base/util"], function (require, exports, ej2_base_1, util_1, cls, util) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var ViewBase = (function () {
-        function ViewBase(parent) {
-            var _this = this;
-            this.customHelper = {
-                getDayName: function (dt) {
-                    return _this.parent.getDayNames('abbreviated')[dt.getDay()];
-                },
-                getDate: function (dt) {
-                    return _this.parent.globalize.formatDate(dt, { format: 'd' });
-                },
-                getTime: function (dt) {
-                    if (_this.parent.isAdaptive) {
-                        return _this.parent.globalize.formatDate(dt, { skeleton: 'h' });
-                    }
-                    return _this.parent.getTimeString(dt);
+import { createElement, append, prepend, isNullOrUndefined, getValue, getDefaultDateObject, cldrData } from '@syncfusion/ej2-base';
+import { getDateInMs, addDays, resetTime, WEEK_LENGTH } from '../base/util';
+import * as cls from '../base/css-constant';
+import * as util from '../base/util';
+/**
+ * view base
+ */
+var ViewBase = /** @class */ (function () {
+    /**
+     * Constructor
+     */
+    function ViewBase(parent) {
+        var _this = this;
+        this.customHelper = {
+            getDayName: function (dt) {
+                return _this.parent.getDayNames('abbreviated')[dt.getDay()];
+            },
+            getDate: function (dt) {
+                return _this.parent.globalize.formatDate(dt, { format: 'd' });
+            },
+            getTime: function (dt) {
+                if (_this.parent.isAdaptive) {
+                    return _this.parent.globalize.formatDate(dt, { skeleton: 'h' });
                 }
-            };
-            this.parent = parent;
-        }
-        ViewBase.prototype.createTableLayout = function (className) {
-            var clsName = className || '';
-            var table = ej2_base_1.createElement('table', { className: cls.SCHEDULE_TABLE_CLASS + ' ' + clsName });
-            var tbody = ej2_base_1.createElement('tbody');
-            table.appendChild(tbody);
-            return table;
-        };
-        ViewBase.prototype.renderPanel = function (type) {
-            if (type === cls.PREVIOUS_PANEL_CLASS) {
-                ej2_base_1.prepend([this.element], this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS));
+                return _this.parent.getTimeString(dt);
             }
-            else {
-                this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS).appendChild(this.element);
-            }
         };
-        ViewBase.prototype.setPanel = function (panel) {
-            this.element = panel;
-        };
-        ViewBase.prototype.getPanel = function () {
-            return this.element;
-        };
-        ViewBase.prototype.adjustEventWrapper = function () {
-        };
-        ViewBase.prototype.getDateSlots = function (renderDates, workDays) {
-            return [];
-        };
-        ViewBase.prototype.generateColumnLevels = function () {
-            return [];
-        };
-        ViewBase.prototype.highlightCurrentTime = function () {
-        };
-        ViewBase.prototype.startDate = function () {
-            return this.renderDates[0];
-        };
-        ViewBase.prototype.endDate = function () {
-            return util_1.addDays(this.renderDates[this.renderDates.length - 1], 1);
-        };
-        ViewBase.prototype.getStartHour = function () {
-            var startHour = this.parent.globalize.parseDate(this.parent.activeViewOptions.startHour, { skeleton: 'Hm' });
-            if (ej2_base_1.isNullOrUndefined(startHour)) {
-                startHour = new Date(2000, 0, 0, 0);
-            }
-            return startHour;
-        };
-        ViewBase.prototype.getEndHour = function () {
-            var endHour = this.parent.globalize.parseDate(this.parent.activeViewOptions.endHour, { skeleton: 'Hm' });
-            if (ej2_base_1.isNullOrUndefined(endHour)) {
-                endHour = new Date(2000, 0, 0, 0);
-            }
-            return endHour;
-        };
-        ViewBase.prototype.isCurrentDate = function (date) {
-            return date.setHours(0, 0, 0, 0) === new Date().setHours(0, 0, 0, 0);
-        };
-        ViewBase.prototype.isCurrentMonth = function (date) {
-            return date.getFullYear() === new Date().getFullYear() && date.getMonth() === new Date().getMonth();
-        };
-        ViewBase.prototype.isWorkDay = function (date, workDays) {
-            if (workDays === void 0) { workDays = this.parent.activeViewOptions.workDays; }
-            if (workDays.indexOf(date.getDay()) >= 0) {
-                return true;
-            }
+        this.parent = parent;
+    }
+    ViewBase.prototype.createTableLayout = function (className) {
+        var clsName = className || '';
+        var table = createElement('table', { className: cls.SCHEDULE_TABLE_CLASS + ' ' + clsName });
+        var tbody = createElement('tbody');
+        table.appendChild(tbody);
+        return table;
+    };
+    ViewBase.prototype.renderPanel = function (type) {
+        if (type === cls.PREVIOUS_PANEL_CLASS) {
+            prepend([this.element], this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS));
+        }
+        else {
+            this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS).appendChild(this.element);
+        }
+    };
+    ViewBase.prototype.setPanel = function (panel) {
+        this.element = panel;
+    };
+    ViewBase.prototype.getPanel = function () {
+        return this.element;
+    };
+    ViewBase.prototype.adjustEventWrapper = function () {
+        // Here adjust the events wrapper width based in work cells
+    };
+    ViewBase.prototype.getDateSlots = function (renderDates, workDays) {
+        // Here getDateSlots only need in vertical and month views
+        return [];
+    };
+    ViewBase.prototype.generateColumnLevels = function () {
+        // Here generateColumnLevels only need in vertical and month views
+        return [];
+    };
+    ViewBase.prototype.highlightCurrentTime = function () {
+        // Here showTimeIndicator functionalities
+    };
+    ViewBase.prototype.startDate = function () {
+        return this.renderDates[0];
+    };
+    ViewBase.prototype.endDate = function () {
+        return addDays(this.renderDates[this.renderDates.length - 1], 1);
+    };
+    ViewBase.prototype.getStartHour = function () {
+        var startHour = this.parent.globalize.parseDate(this.parent.activeViewOptions.startHour, { skeleton: 'Hm' });
+        if (isNullOrUndefined(startHour)) {
+            startHour = new Date(2000, 0, 0, 0);
+        }
+        return startHour;
+    };
+    ViewBase.prototype.getEndHour = function () {
+        var endHour = this.parent.globalize.parseDate(this.parent.activeViewOptions.endHour, { skeleton: 'Hm' });
+        if (isNullOrUndefined(endHour)) {
+            endHour = new Date(2000, 0, 0, 0);
+        }
+        return endHour;
+    };
+    ViewBase.prototype.isCurrentDate = function (date) {
+        return date.setHours(0, 0, 0, 0) === new Date().setHours(0, 0, 0, 0);
+    };
+    ViewBase.prototype.isCurrentMonth = function (date) {
+        return date.getFullYear() === new Date().getFullYear() && date.getMonth() === new Date().getMonth();
+    };
+    ViewBase.prototype.isWorkDay = function (date, workDays) {
+        if (workDays === void 0) { workDays = this.parent.activeViewOptions.workDays; }
+        if (workDays.indexOf(date.getDay()) >= 0) {
+            return true;
+        }
+        return false;
+    };
+    ViewBase.prototype.isWorkHour = function (date, startHour, endHour, workDays) {
+        if (isNullOrUndefined(startHour) || isNullOrUndefined(endHour)) {
             return false;
-        };
-        ViewBase.prototype.isWorkHour = function (date, startHour, endHour, workDays) {
-            if (ej2_base_1.isNullOrUndefined(startHour) || ej2_base_1.isNullOrUndefined(endHour)) {
-                return false;
-            }
-            startHour.setMilliseconds(0);
-            endHour.setMilliseconds(0);
-            if (util_1.getDateInMs(date) < util_1.getDateInMs(startHour) || util_1.getDateInMs(date) >= util_1.getDateInMs(endHour) || !this.isWorkDay(date, workDays)) {
-                return false;
-            }
-            return true;
-        };
-        ViewBase.prototype.getRenderDates = function (workDays) {
-            var renderDates = [];
-            for (var i = 0, length_1 = this.parent.activeViewOptions.interval; i < length_1; i++) {
-                renderDates.push(util.addDays(util_1.resetTime(this.parent.selectedDate), i));
-            }
-            if (!workDays) {
-                this.renderDates = renderDates;
-            }
-            return renderDates;
-        };
-        ViewBase.prototype.getNextPreviousDate = function (type) {
-            if (type === 'next') {
-                return util_1.addDays(this.parent.selectedDate, util_1.WEEK_LENGTH * this.parent.activeViewOptions.interval);
-            }
-            else {
-                return util_1.addDays(this.parent.selectedDate, -util_1.WEEK_LENGTH * this.parent.activeViewOptions.interval);
-            }
-        };
-        ViewBase.prototype.getLabelText = function (view) {
-            return this.parent.localeObj.getConstant(view) + ' of ' +
-                this.parent.globalize.formatDate(this.parent.selectedDate, { skeleton: 'long' });
-        };
-        ViewBase.prototype.getDateRangeText = function () {
-            if (this.parent.isAdaptive) {
-                return this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM y' });
-            }
-            return this.formatDateRange(this.renderDates[0], this.renderDates[this.renderDates.length - 1]);
-        };
-        ViewBase.prototype.formatDateRange = function (startDate, endDate) {
-            var globalize = this.parent.globalize;
-            if (!ej2_base_1.isNullOrUndefined(this.parent.activeViewOptions.dateFormat)) {
-                if (!endDate) {
-                    return globalize.formatDate(startDate, { format: this.parent.activeViewOptions.dateFormat });
-                }
-                return globalize.formatDate(startDate, { format: this.parent.activeViewOptions.dateFormat }) + ' - ' +
-                    globalize.formatDate(endDate, { format: this.parent.activeViewOptions.dateFormat });
-            }
-            var formattedStr;
-            var longDateFormat;
-            if (this.parent.locale === 'en' || this.parent.locale === 'en-US') {
-                longDateFormat = ej2_base_1.getValue('dateFormats.long', ej2_base_1.getDefaultDateObject());
-            }
-            else {
-                longDateFormat = ej2_base_1.getValue('main.' + '' + this.parent.locale + '.dates.calendars.gregorian.dateFormats.long', ej2_base_1.cldrData);
-            }
+        }
+        startHour.setMilliseconds(0);
+        endHour.setMilliseconds(0);
+        if (getDateInMs(date) < getDateInMs(startHour) || getDateInMs(date) >= getDateInMs(endHour) || !this.isWorkDay(date, workDays)) {
+            return false;
+        }
+        return true;
+    };
+    ViewBase.prototype.getRenderDates = function (workDays) {
+        var renderDates = [];
+        for (var i = 0, length_1 = this.parent.activeViewOptions.interval; i < length_1; i++) {
+            renderDates.push(util.addDays(resetTime(this.parent.selectedDate), i));
+        }
+        if (!workDays) {
+            this.renderDates = renderDates;
+        }
+        return renderDates;
+    };
+    ViewBase.prototype.getNextPreviousDate = function (type) {
+        if (type === 'next') {
+            return addDays(this.parent.selectedDate, WEEK_LENGTH * this.parent.activeViewOptions.interval);
+        }
+        else {
+            return addDays(this.parent.selectedDate, -WEEK_LENGTH * this.parent.activeViewOptions.interval);
+        }
+    };
+    ViewBase.prototype.getLabelText = function (view) {
+        return this.parent.localeObj.getConstant(view) + ' of ' +
+            this.parent.globalize.formatDate(this.parent.selectedDate, { skeleton: 'long' });
+    };
+    ViewBase.prototype.getDateRangeText = function () {
+        if (this.parent.isAdaptive) {
+            return this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM y' });
+        }
+        return this.formatDateRange(this.renderDates[0], this.renderDates[this.renderDates.length - 1]);
+    };
+    ViewBase.prototype.formatDateRange = function (startDate, endDate) {
+        var globalize = this.parent.globalize;
+        if (!isNullOrUndefined(this.parent.activeViewOptions.dateFormat)) {
             if (!endDate) {
-                return globalize.formatDate(startDate, { format: longDateFormat });
+                return globalize.formatDate(startDate, { format: this.parent.activeViewOptions.dateFormat });
             }
-            var dateFormat = longDateFormat.trim().toLocaleLowerCase();
-            if (dateFormat.substr(0, 1) === 'd') {
-                if (startDate.getFullYear() === endDate.getFullYear()) {
-                    if (startDate.getMonth() === endDate.getMonth()) {
-                        formattedStr = globalize.formatDate(startDate, { format: 'dd' }) + ' - ' +
-                            globalize.formatDate(endDate, { format: 'dd MMMM yyyy' });
-                    }
-                    else {
-                        formattedStr = globalize.formatDate(startDate, { format: 'dd MMM' }) + ' - ' +
-                            globalize.formatDate(endDate, { format: 'dd MMM yyyy' });
-                    }
+            return globalize.formatDate(startDate, { format: this.parent.activeViewOptions.dateFormat }) + ' - ' +
+                globalize.formatDate(endDate, { format: this.parent.activeViewOptions.dateFormat });
+        }
+        var formattedStr;
+        var longDateFormat;
+        if (this.parent.locale === 'en' || this.parent.locale === 'en-US') {
+            longDateFormat = getValue('dateFormats.long', getDefaultDateObject());
+        }
+        else {
+            longDateFormat = getValue('main.' + '' + this.parent.locale + '.dates.calendars.gregorian.dateFormats.long', cldrData);
+        }
+        if (!endDate) {
+            return globalize.formatDate(startDate, { format: longDateFormat });
+        }
+        var dateFormat = longDateFormat.trim().toLocaleLowerCase();
+        if (dateFormat.substr(0, 1) === 'd') {
+            if (startDate.getFullYear() === endDate.getFullYear()) {
+                if (startDate.getMonth() === endDate.getMonth()) {
+                    formattedStr = globalize.formatDate(startDate, { format: 'dd' }) + ' - ' +
+                        globalize.formatDate(endDate, { format: 'dd MMMM yyyy' });
                 }
                 else {
-                    formattedStr = globalize.formatDate(startDate, { format: 'dd MMM yyyy' }) + ' - ' +
+                    formattedStr = globalize.formatDate(startDate, { format: 'dd MMM' }) + ' - ' +
                         globalize.formatDate(endDate, { format: 'dd MMM yyyy' });
                 }
             }
-            else if (dateFormat.substr(0, 1) === 'm') {
-                if (startDate.getFullYear() === endDate.getFullYear()) {
-                    if (startDate.getMonth() === endDate.getMonth()) {
-                        formattedStr = globalize.formatDate(startDate, { format: 'MMMM dd' }) + ' - ' +
-                            globalize.formatDate(endDate, { format: 'dd, yyyy' });
-                    }
-                    else {
-                        formattedStr = globalize.formatDate(startDate, { format: 'MMM dd' }) + ' - ' +
-                            globalize.formatDate(endDate, { format: 'MMM dd, yyyy' });
-                    }
+            else {
+                formattedStr = globalize.formatDate(startDate, { format: 'dd MMM yyyy' }) + ' - ' +
+                    globalize.formatDate(endDate, { format: 'dd MMM yyyy' });
+            }
+        }
+        else if (dateFormat.substr(0, 1) === 'm') {
+            if (startDate.getFullYear() === endDate.getFullYear()) {
+                if (startDate.getMonth() === endDate.getMonth()) {
+                    formattedStr = globalize.formatDate(startDate, { format: 'MMMM dd' }) + ' - ' +
+                        globalize.formatDate(endDate, { format: 'dd, yyyy' });
                 }
                 else {
-                    formattedStr = globalize.formatDate(startDate, { format: 'MMM dd, yyyy' }) + ' - ' +
+                    formattedStr = globalize.formatDate(startDate, { format: 'MMM dd' }) + ' - ' +
                         globalize.formatDate(endDate, { format: 'MMM dd, yyyy' });
@@ -180,41 +186,45 @@ }
             else {
-                formattedStr = globalize.formatDate(startDate, { format: longDateFormat }) + ' - ' +
-                    globalize.formatDate(endDate, { format: longDateFormat });
+                formattedStr = globalize.formatDate(startDate, { format: 'MMM dd, yyyy' }) + ' - ' +
+                    globalize.formatDate(endDate, { format: 'MMM dd, yyyy' });
             }
-            return formattedStr;
-        };
-        ViewBase.prototype.getMobileDateElement = function (date, className) {
-            var wrap = ej2_base_1.createElement('div', {
-                className: className,
-                innerHTML: '<div class="e-m-date">' + this.parent.globalize.formatDate(date, { format: 'd' }) + '</div>' +
-                    '<div class="e-m-day">' + this.parent.globalize.formatDate(date, { format: 'E' }) + '</div>'
-            });
-            return wrap;
-        };
-        ViewBase.prototype.setResourceHeaderContent = function (tdElement, tdData, className) {
-            if (className === void 0) { className = 'e-text-ellipsis'; }
-            if (this.parent.activeViewOptions.resourceHeaderTemplate) {
-                var cntEle = void 0;
-                var data = {
-                    resource: tdData.resource,
-                    resourceData: tdData.resourceData
-                };
-                cntEle = this.parent.getResourceHeaderTemplate()(data);
-                if (cntEle && cntEle.length) {
-                    ej2_base_1.append([].slice.call(cntEle), tdElement);
-                }
+        }
+        else {
+            formattedStr = globalize.formatDate(startDate, { format: longDateFormat }) + ' - ' +
+                globalize.formatDate(endDate, { format: longDateFormat });
+        }
+        return formattedStr;
+    };
+    ViewBase.prototype.getMobileDateElement = function (date, className) {
+        var wrap = createElement('div', {
+            className: className,
+            innerHTML: '<div class="e-m-date">' + this.parent.globalize.formatDate(date, { format: 'd' }) + '</div>' +
+                '<div class="e-m-day">' + this.parent.globalize.formatDate(date, { format: 'E' }) + '</div>'
+        });
+        return wrap;
+    };
+    ViewBase.prototype.setResourceHeaderContent = function (tdElement, tdData, className) {
+        if (className === void 0) { className = 'e-text-ellipsis'; }
+        if (this.parent.activeViewOptions.resourceHeaderTemplate) {
+            var cntEle = void 0;
+            var data = {
+                resource: tdData.resource,
+                resourceData: tdData.resourceData
+            };
+            cntEle = this.parent.getResourceHeaderTemplate()(data);
+            if (cntEle && cntEle.length) {
+                append([].slice.call(cntEle), tdElement);
             }
-            else {
-                tdElement.appendChild(ej2_base_1.createElement('div', {
-                    className: className, innerHTML: tdData.resourceData[tdData.resource.textField]
-                }));
-            }
-        };
-        ViewBase.prototype.renderResourceMobileLayout = function () {
-            this.parent.resourceBase.renderResourceHeader();
-            this.parent.resourceBase.renderResourceTree();
-        };
-        return ViewBase;
-    }());
-    exports.ViewBase = ViewBase;
-});
+        }
+        else {
+            tdElement.appendChild(createElement('div', {
+                className: className, innerHTML: tdData.resourceData[tdData.resource.textField]
+            }));
+        }
+    };
+    ViewBase.prototype.renderResourceMobileLayout = function () {
+        this.parent.resourceBase.renderResourceHeader();
+        this.parent.resourceBase.renderResourceTree();
+    };
+    return ViewBase;
+}());
+export { ViewBase };

src/schedule/renderer/week.js

@@ -11,38 +11,45 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "./vertical-view", "../base/util"], function (require, exports, vertical_view_1, util) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var Week = (function (_super) {
-        __extends(Week, _super);
-        function Week(parent) {
-            var _this = _super.call(this, parent) || this;
-            _this.viewClass = 'e-week-view';
-            return _this;
-        }
-        Week.prototype.getRenderDates = function (workDays) {
-            var renderDates = [];
-            var selectedDate = util.resetTime(this.parent.selectedDate);
-            var start = util.getWeekFirstDate(selectedDate, this.parent.firstDayOfWeek);
-            for (var i = 0, length_1 = util.WEEK_LENGTH * this.parent.activeViewOptions.interval; i < length_1; i++) {
-                if (this.parent.activeViewOptions.showWeekend) {
+import { VerticalView } from './vertical-view';
+import * as util from '../base/util';
+/**
+ * week view
+ */
+var Week = /** @class */ (function (_super) {
+    __extends(Week, _super);
+    /**
+     * Constructor for week view
+     */
+    function Week(parent) {
+        var _this = _super.call(this, parent) || this;
+        _this.viewClass = 'e-week-view';
+        return _this;
+    }
+    Week.prototype.getRenderDates = function (workDays) {
+        var renderDates = [];
+        var selectedDate = util.resetTime(this.parent.selectedDate);
+        var start = util.getWeekFirstDate(selectedDate, this.parent.firstDayOfWeek);
+        for (var i = 0, length_1 = util.WEEK_LENGTH * this.parent.activeViewOptions.interval; i < length_1; i++) {
+            if (this.parent.activeViewOptions.showWeekend) {
+                renderDates.push(start);
+            }
+            else {
+                if (this.isWorkDay(start, workDays)) {
                     renderDates.push(start);
                 }
-                else {
-                    if (this.isWorkDay(start, workDays)) {
-                        renderDates.push(start);
-                    }
-                }
-                start = util.addDays(start, 1);
             }
-            if (!workDays) {
-                this.renderDates = renderDates;
-            }
-            return renderDates;
-        };
-        Week.prototype.getModuleName = function () {
-            return 'week';
-        };
-        return Week;
-    }(vertical_view_1.VerticalView));
-    exports.Week = Week;
-});
+            start = util.addDays(start, 1);
+        }
+        if (!workDays) {
+            this.renderDates = renderDates;
+        }
+        return renderDates;
+    };
+    /**
+     * Get module name.
+     */
+    Week.prototype.getModuleName = function () {
+        return 'week';
+    };
+    return Week;
+}(VerticalView));
+export { Week };

src/schedule/renderer/work-week.js

@@ -11,32 +11,39 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "./vertical-view", "../base/util"], function (require, exports, vertical_view_1, util) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var WorkWeek = (function (_super) {
-        __extends(WorkWeek, _super);
-        function WorkWeek(par) {
-            var _this = _super.call(this, par) || this;
-            _this.viewClass = 'e-work-week-view';
-            return _this;
+import { VerticalView } from './vertical-view';
+import * as util from '../base/util';
+/**
+ * work week view
+ */
+var WorkWeek = /** @class */ (function (_super) {
+    __extends(WorkWeek, _super);
+    /**
+     * Constructor for work week view
+     */
+    function WorkWeek(par) {
+        var _this = _super.call(this, par) || this;
+        _this.viewClass = 'e-work-week-view';
+        return _this;
+    }
+    WorkWeek.prototype.getRenderDates = function (workDays) {
+        var renderDates = [];
+        var start = util.getWeekFirstDate(util.resetTime(this.parent.selectedDate), this.parent.firstDayOfWeek);
+        for (var i = 0, length_1 = util.WEEK_LENGTH * this.parent.activeViewOptions.interval; i < length_1; i++) {
+            if (this.isWorkDay(start, workDays)) {
+                renderDates.push(start);
+            }
+            start = util.addDays(start, 1);
         }
-        WorkWeek.prototype.getRenderDates = function (workDays) {
-            var renderDates = [];
-            var start = util.getWeekFirstDate(util.resetTime(this.parent.selectedDate), this.parent.firstDayOfWeek);
-            for (var i = 0, length_1 = util.WEEK_LENGTH * this.parent.activeViewOptions.interval; i < length_1; i++) {
-                if (this.isWorkDay(start, workDays)) {
-                    renderDates.push(start);
-                }
-                start = util.addDays(start, 1);
-            }
-            if (!workDays) {
-                this.renderDates = renderDates;
-            }
-            return renderDates;
-        };
-        WorkWeek.prototype.getModuleName = function () {
-            return 'workWeek';
-        };
-        return WorkWeek;
-    }(vertical_view_1.VerticalView));
-    exports.WorkWeek = WorkWeek;
-});
+        if (!workDays) {
+            this.renderDates = renderDates;
+        }
+        return renderDates;
+    };
+    /**
+     * Get module name.
+     */
+    WorkWeek.prototype.getModuleName = function () {
+        return 'workWeek';
+    };
+    return WorkWeek;
+}(VerticalView));
+export { WorkWeek };

src/schedule/timezone/timezone.js

@@ -1,298 +0,297 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var Timezone = (function () {
-        function Timezone() {
+/**
+ * Time zone
+ */
+var Timezone = /** @class */ (function () {
+    function Timezone() {
+    }
+    Timezone.prototype.offset = function (date, timezone) {
+        var localOffset = date.getTimezoneOffset();
+        try {
+            var convertedDate = new Date(date.toLocaleString('en-US', { timeZone: timezone }));
+            if (!isNaN(convertedDate.getTime())) {
+                return ((date.getTime() - convertedDate.getTime()) / 60000) + localOffset;
+            }
+            return 0;
         }
-        Timezone.prototype.offset = function (date, timezone) {
-            var localOffset = date.getTimezoneOffset();
-            try {
-                var convertedDate = new Date(date.toLocaleString('en-US', { timeZone: timezone }));
-                if (!isNaN(convertedDate.getTime())) {
-                    return ((date.getTime() - convertedDate.getTime()) / 60000) + localOffset;
-                }
-                return 0;
-            }
-            catch (error) {
-                return 0;
-            }
-        };
-        Timezone.prototype.convert = function (date, fromOffset, toOffset) {
-            if (typeof fromOffset === 'string') {
-                fromOffset = this.offset(date, fromOffset);
-            }
-            if (typeof toOffset === 'string') {
-                toOffset = this.offset(date, toOffset);
-            }
-            var fromLocalOffset = date.getTimezoneOffset();
-            date = new Date(date.getTime() + (fromOffset - toOffset) * 60000);
-            var toLocalOffset = date.getTimezoneOffset();
-            return new Date(date.getTime() + (toLocalOffset - fromLocalOffset) * 60000);
-        };
-        Timezone.prototype.add = function (date, timezone) {
-            return this.convert(date, date.getTimezoneOffset(), timezone);
-        };
-        Timezone.prototype.remove = function (date, timezone) {
-            return this.convert(date, timezone, date.getTimezoneOffset());
-        };
-        Timezone.prototype.removeLocalOffset = function (date) {
-            return new Date(+date - (date.getTimezoneOffset() * 60000));
-        };
-        return Timezone;
-    }());
-    exports.Timezone = Timezone;
-    exports.localTimezoneName = Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
-    exports.timezoneData = [
-        { Value: 'Pacific/Niue', Text: '(UTC-11:00) Niue' },
-        { Value: 'Pacific/Pago_Pago', Text: '(UTC-11:00) Pago Pago' },
-        { Value: 'Pacific/Honolulu', Text: '(UTC-10:00) Hawaii Time' },
-        { Value: 'Pacific/Rarotonga', Text: '(UTC-10:00) Rarotonga' },
-        { Value: 'Pacific/Tahiti', Text: '(UTC-10:00) Tahiti' },
-        { Value: 'Pacific/Marquesas', Text: '(UTC-09:30) Marquesas' },
-        { Value: 'America/Anchorage', Text: '(UTC-09:00) Alaska Time' },
-        { Value: 'Pacific/Gambier', Text: '(UTC-09:00) Gambier' },
-        { Value: 'America/Los_Angeles', Text: '(UTC-08:00) Pacific Time' },
-        { Value: 'America/Tijuana', Text: '(UTC-08:00) Pacific Time - Tijuana' },
-        { Value: 'America/Vancouver', Text: '(UTC-08:00) Pacific Time - Vancouver' },
-        { Value: 'America/Whitehorse', Text: '(UTC-08:00) Pacific Time - Whitehorse' },
-        { Value: 'Pacific/Pitcairn', Text: '(UTC-08:00) Pitcairn' },
-        { Value: 'America/Denver', Text: '(UTC-07:00) Mountain Time' },
-        { Value: 'America/Phoenix', Text: '(UTC-07:00) Mountain Time - Arizona' },
-        { Value: 'America/Mazatlan', Text: '(UTC-07:00) Mountain Time - Chihuahua, Mazatlan' },
-        { Value: 'America/Dawson_Creek', Text: '(UTC-07:00) Mountain Time - Dawson Creek' },
-        { Value: 'America/Edmonton', Text: '(UTC-07:00) Mountain Time - Edmonton' },
-        { Value: 'America/Hermosillo', Text: '(UTC-07:00) Mountain Time - Hermosillo' },
-        { Value: 'America/Yellowknife', Text: '(UTC-07:00) Mountain Time - Yellowknife' },
-        { Value: 'America/Belize', Text: '(UTC-06:00) Belize' },
-        { Value: 'America/Chicago', Text: '(UTC-06:00) Central Time' },
-        { Value: 'America/Mexico_City', Text: '(UTC-06:00) Central Time - Mexico City' },
-        { Value: 'America/Regina', Text: '(UTC-06:00) Central Time - Regina' },
-        { Value: 'America/Tegucigalpa', Text: '(UTC-06:00) Central Time - Tegucigalpa' },
-        { Value: 'America/Winnipeg', Text: '(UTC-06:00) Central Time - Winnipeg' },
-        { Value: 'America/Costa_Rica', Text: '(UTC-06:00) Costa Rica' },
-        { Value: 'America/El_Salvador', Text: '(UTC-06:00) El Salvador' },
-        { Value: 'Pacific/Galapagos', Text: '(UTC-06:00) Galapagos' },
-        { Value: 'America/Guatemala', Text: '(UTC-06:00) Guatemala' },
-        { Value: 'America/Managua', Text: '(UTC-06:00) Managua' },
-        { Value: 'America/Cancun', Text: '(UTC-05:00) America Cancun' },
-        { Value: 'America/Bogota', Text: '(UTC-05:00) Bogota' },
-        { Value: 'Pacific/Easter', Text: '(UTC-05:00) Easter Island' },
-        { Value: 'America/New_York', Text: '(UTC-05:00) Eastern Time' },
-        { Value: 'America/Iqaluit', Text: '(UTC-05:00) Eastern Time - Iqaluit' },
-        { Value: 'America/Toronto', Text: '(UTC-05:00) Eastern Time - Toronto' },
-        { Value: 'America/Guayaquil', Text: '(UTC-05:00) Guayaquil' },
-        { Value: 'America/Havana', Text: '(UTC-05:00) Havana' },
-        { Value: 'America/Jamaica', Text: '(UTC-05:00) Jamaica' },
-        { Value: 'America/Lima', Text: '(UTC-05:00) Lima' },
-        { Value: 'America/Nassau', Text: '(UTC-05:00) Nassau' },
-        { Value: 'America/Panama', Text: '(UTC-05:00) Panama' },
-        { Value: 'America/Port-au-Prince', Text: '(UTC-05:00) Port-au-Prince' },
-        { Value: 'America/Rio_Branco', Text: '(UTC-05:00) Rio Branco' },
-        { Value: 'America/Halifax', Text: '(UTC-04:00) Atlantic Time - Halifax' },
-        { Value: 'America/Barbados', Text: '(UTC-04:00) Barbados' },
-        { Value: 'Atlantic/Bermuda', Text: '(UTC-04:00) Bermuda' },
-        { Value: 'America/Boa_Vista', Text: '(UTC-04:00) Boa Vista' },
-        { Value: 'America/Caracas', Text: '(UTC-04:00) Caracas' },
-        { Value: 'America/Curacao', Text: '(UTC-04:00) Curacao' },
-        { Value: 'America/Grand_Turk', Text: '(UTC-04:00) Grand Turk' },
-        { Value: 'America/Guyana', Text: '(UTC-04:00) Guyana' },
-        { Value: 'America/La_Paz', Text: '(UTC-04:00) La Paz' },
-        { Value: 'America/Manaus', Text: '(UTC-04:00) Manaus' },
-        { Value: 'America/Martinique', Text: '(UTC-04:00) Martinique' },
-        { Value: 'America/Port_of_Spain', Text: '(UTC-04:00) Port of Spain' },
-        { Value: 'America/Porto_Velho', Text: '(UTC-04:00) Porto Velho' },
-        { Value: 'America/Puerto_Rico', Text: '(UTC-04:00) Puerto Rico' },
-        { Value: 'America/Santo_Domingo', Text: '(UTC-04:00) Santo Domingo' },
-        { Value: 'America/Thule', Text: '(UTC-04:00) Thule' },
-        { Value: 'America/St_Johns', Text: '(UTC-03:30) Newfoundland Time - St. Johns' },
-        { Value: 'America/Araguaina', Text: '(UTC-03:00) Araguaina' },
-        { Value: 'America/Asuncion', Text: '(UTC-03:00) Asuncion' },
-        { Value: 'America/Belem', Text: '(UTC-03:00) Belem' },
-        { Value: 'America/Argentina/Buenos_Aires', Text: '(UTC-03:00) Buenos Aires' },
-        { Value: 'America/Campo_Grande', Text: '(UTC-03:00) Campo Grande' },
-        { Value: 'America/Cayenne', Text: '(UTC-03:00) Cayenne' },
-        { Value: 'America/Cuiaba', Text: '(UTC-03:00) Cuiaba' },
-        { Value: 'America/Fortaleza', Text: '(UTC-03:00) Fortaleza' },
-        { Value: 'America/Godthab', Text: '(UTC-03:00) Godthab' },
-        { Value: 'America/Maceio', Text: '(UTC-03:00) Maceio' },
-        { Value: 'America/Miquelon', Text: '(UTC-03:00) Miquelon' },
-        { Value: 'America/Montevideo', Text: '(UTC-03:00) Montevideo' },
-        { Value: 'Antarctica/Palmer', Text: '(UTC-03:00) Palmer' },
-        { Value: 'America/Paramaribo', Text: '(UTC-03:00) Paramaribo' },
-        { Value: 'America/Punta_Arenas', Text: '(UTC-03:00) Punta Arenas' },
-        { Value: 'America/Recife', Text: '(UTC-03:00) Recife' },
-        { Value: 'Antarctica/Rothera', Text: '(UTC-03:00) Rothera' },
-        { Value: 'America/Bahia', Text: '(UTC-03:00) Salvador' },
-        { Value: 'America/Santiago', Text: '(UTC-03:00) Santiago' },
-        { Value: 'Atlantic/Stanley', Text: '(UTC-03:00) Stanley' },
-        { Value: 'America/Noronha', Text: '(UTC-02:00) Noronha' },
-        { Value: 'America/Sao_Paulo', Text: '(UTC-02:00) Sao Paulo' },
-        { Value: 'Atlantic/South_Georgia', Text: '(UTC-02:00) South Georgia' },
-        { Value: 'Atlantic/Azores', Text: '(UTC-01:00) Azores' },
-        { Value: 'Atlantic/Cape_Verde', Text: '(UTC-01:00) Cape Verde' },
-        { Value: 'America/Scoresbysund', Text: '(UTC-01:00) Scoresbysund' },
-        { Value: 'Africa/Abidjan', Text: '(UTC+00:00) Abidjan' },
-        { Value: 'Africa/Accra', Text: '(UTC+00:00) Accra' },
-        { Value: 'Africa/Bissau', Text: '(UTC+00:00) Bissau' },
-        { Value: 'Atlantic/Canary', Text: '(UTC+00:00) Canary Islands' },
-        { Value: 'Africa/Casablanca', Text: '(UTC+00:00) Casablanca' },
-        { Value: 'America/Danmarkshavn', Text: '(UTC+00:00) Danmarkshavn' },
-        { Value: 'Europe/Dublin', Text: '(UTC+00:00) Dublin' },
-        { Value: 'Africa/El_Aaiun', Text: '(UTC+00:00) El Aaiun' },
-        { Value: 'Atlantic/Faroe', Text: '(UTC+00:00) Faeroe' },
-        { Value: 'Etc/UTC', Text: '(UTC+00:00) UTC (no daylight saving)' },
-        { Value: 'Europe/Lisbon', Text: '(UTC+00:00) Lisbon' },
-        { Value: 'Europe/London', Text: '(UTC+00:00) London' },
-        { Value: 'Africa/Monrovia', Text: '(UTC+00:00) Monrovia' },
-        { Value: 'Atlantic/Reykjavik', Text: '(UTC+00:00) Reykjavik' },
-        { Value: 'UTC', Text: 'UTC' },
-        { Value: 'Africa/Algiers', Text: '(UTC+01:00) Algiers' },
-        { Value: 'Europe/Amsterdam', Text: '(UTC+01:00) Amsterdam' },
-        { Value: 'Europe/Andorra', Text: '(UTC+01:00) Andorra' },
-        { Value: 'Europe/Berlin', Text: '(UTC+01:00) Berlin' },
-        { Value: 'Europe/Brussels', Text: '(UTC+01:00) Brussels' },
-        { Value: 'Europe/Budapest', Text: '(UTC+01:00) Budapest' },
-        { Value: 'Europe/Belgrade', Text: '(UTC+01:00) Central European Time - Belgrade' },
-        { Value: 'Europe/Prague', Text: '(UTC+01:00) Central European Time - Prague' },
-        { Value: 'Africa/Ceuta', Text: '(UTC+01:00) Ceuta' },
-        { Value: 'Europe/Copenhagen', Text: '(UTC+01:00) Copenhagen' },
-        { Value: 'Europe/Gibraltar', Text: '(UTC+01:00) Gibraltar' },
-        { Value: 'Africa/Lagos', Text: '(UTC+01:00) Lagos' },
-        { Value: 'Europe/Luxembourg', Text: '(UTC+01:00) Luxembourg' },
-        { Value: 'Europe/Madrid', Text: '(UTC+01:00) Madrid' },
-        { Value: 'Europe/Malta', Text: '(UTC+01:00) Malta' },
-        { Value: 'Europe/Monaco', Text: '(UTC+01:00) Monaco' },
-        { Value: 'Africa/Ndjamena', Text: '(UTC+01:00) Ndjamena' },
-        { Value: 'Europe/Oslo', Text: '(UTC+01:00) Oslo' },
-        { Value: 'Europe/Paris', Text: '(UTC+01:00) Paris' },
-        { Value: 'Europe/Rome', Text: '(UTC+01:00) Rome' },
-        { Value: 'Europe/Stockholm', Text: '(UTC+01:00) Stockholm' },
-        { Value: 'Europe/Tirane', Text: '(UTC+01:00) Tirane' },
-        { Value: 'Africa/Tunis', Text: '(UTC+01:00) Tunis' },
-        { Value: 'Europe/Vienna', Text: '(UTC+01:00) Vienna' },
-        { Value: 'Europe/Warsaw', Text: '(UTC+01:00) Warsaw' },
-        { Value: 'Europe/Zurich', Text: '(UTC+01:00) Zurich' },
-        { Value: 'Asia/Amman', Text: '(UTC+02:00) Amman' },
-        { Value: 'Europe/Athens', Text: '(UTC+02:00) Athens' },
-        { Value: 'Asia/Beirut', Text: '(UTC+02:00) Beirut' },
-        { Value: 'Europe/Bucharest', Text: '(UTC+02:00) Bucharest' },
-        { Value: 'Africa/Cairo', Text: '(UTC+02:00) Cairo' },
-        { Value: 'Europe/Chisinau', Text: '(UTC+02:00) Chisinau' },
-        { Value: 'Asia/Damascus', Text: '(UTC+02:00) Damascus' },
-        { Value: 'Asia/Gaza', Text: '(UTC+02:00) Gaza' },
-        { Value: 'Europe/Helsinki', Text: '(UTC+02:00) Helsinki' },
-        { Value: 'Asia/Jerusalem', Text: '(UTC+02:00) Jerusalem' },
-        { Value: 'Africa/Johannesburg', Text: '(UTC+02:00) Johannesburg' },
-        { Value: 'Africa/Khartoum', Text: '(UTC+02:00) Khartoum' },
-        { Value: 'Europe/Kiev', Text: '(UTC+02:00) Kiev' },
-        { Value: 'Africa/Maputo', Text: '(UTC+02:00) Maputo' },
-        { Value: 'Europe/Kaliningrad', Text: '(UTC+02:00) Moscow-01 - Kaliningrad' },
-        { Value: 'Asia/Nicosia', Text: '(UTC+02:00) Nicosia' },
-        { Value: 'Europe/Riga', Text: '(UTC+02:00) Riga' },
-        { Value: 'Europe/Sofia', Text: '(UTC+02:00) Sofia' },
-        { Value: 'Europe/Tallinn', Text: '(UTC+02:00) Tallinn' },
-        { Value: 'Africa/Tripoli', Text: '(UTC+02:00) Tripoli' },
-        { Value: 'Europe/Vilnius', Text: '(UTC+02:00) Vilnius' },
-        { Value: 'Africa/Windhoek', Text: '(UTC+02:00) Windhoek' },
-        { Value: 'Asia/Baghdad', Text: '(UTC+03:00) Baghdad' },
-        { Value: 'Europe/Istanbul', Text: '(UTC+03:00) Istanbul' },
-        { Value: 'Europe/Minsk', Text: '(UTC+03:00) Minsk' },
-        { Value: 'Europe/Moscow', Text: '(UTC+03:00) Moscow+00 - Moscow' },
-        { Value: 'Africa/Nairobi', Text: '(UTC+03:00) Nairobi' },
-        { Value: 'Asia/Qatar', Text: '(UTC+03:00) Qatar' },
-        { Value: 'Asia/Riyadh', Text: '(UTC+03:00) Riyadh' },
-        { Value: 'Antarctica/Syowa', Text: '(UTC+03:00) Syowa' },
-        { Value: 'Asia/Tehran', Text: '(UTC+03:30) Tehran' },
-        { Value: 'Asia/Baku', Text: '(UTC+04:00) Baku' },
-        { Value: 'Asia/Dubai', Text: '(UTC+04:00) Dubai' },
-        { Value: 'Indian/Mahe', Text: '(UTC+04:00) Mahe' },
-        { Value: 'Indian/Mauritius', Text: '(UTC+04:00) Mauritius' },
-        { Value: 'Europe/Samara', Text: '(UTC+04:00) Moscow+01 - Samara' },
-        { Value: 'Indian/Reunion', Text: '(UTC+04:00) Reunion' },
-        { Value: 'Asia/Tbilisi', Text: '(UTC+04:00) Tbilisi' },
-        { Value: 'Asia/Yerevan', Text: '(UTC+04:00) Yerevan' },
-        { Value: 'Asia/Kabul', Text: '(UTC+04:30) Kabul' },
-        { Value: 'Asia/Aqtau', Text: '(UTC+05:00) Aqtau' },
-        { Value: 'Asia/Aqtobe', Text: '(UTC+05:00) Aqtobe' },
-        { Value: 'Asia/Ashgabat', Text: '(UTC+05:00) Ashgabat' },
-        { Value: 'Asia/Dushanbe', Text: '(UTC+05:00) Dushanbe' },
-        { Value: 'Asia/Karachi', Text: '(UTC+05:00) Karachi' },
-        { Value: 'Indian/Kerguelen', Text: '(UTC+05:00) Kerguelen' },
-        { Value: 'Indian/Maldives', Text: '(UTC+05:00) Maldives' },
-        { Value: 'Antarctica/Mawson', Text: '(UTC+05:00) Mawson' },
-        { Value: 'Asia/Yekaterinburg', Text: '(UTC+05:00) Moscow+02 - Yekaterinburg' },
-        { Value: 'Asia/Tashkent', Text: '(UTC+05:00) Tashkent' },
-        { Value: 'Asia/Colombo', Text: '(UTC+05:30) Colombo' },
-        { Value: 'Asia/Kolkata', Text: '(UTC+05:30) India Standard Time' },
-        { Value: 'Asia/Katmandu', Text: '(UTC+05:45) Katmandu' },
-        { Value: 'Asia/Almaty', Text: '(UTC+06:00) Almaty' },
-        { Value: 'Asia/Bishkek', Text: '(UTC+06:00) Bishkek' },
-        { Value: 'Indian/Chagos', Text: '(UTC+06:00) Chagos' },
-        { Value: 'Asia/Dhaka', Text: '(UTC+06:00) Dhaka' },
-        { Value: 'Asia/Omsk', Text: '(UTC+06:00) Moscow+03 - Omsk' },
-        { Value: 'Asia/Thimphu', Text: '(UTC+06:00) Thimphu' },
-        { Value: 'Antarctica/Vostok', Text: '(UTC+06:00) Vostok' },
-        { Value: 'Indian/Cocos', Text: '(UTC+06:30) Cocos' },
-        { Value: 'Asia/Yangon', Text: '(UTC+06:30) Rangoon' },
-        { Value: 'Asia/Bangkok', Text: '(UTC+07:00) Bangkok' },
-        { Value: 'Indian/Christmas', Text: '(UTC+07:00) Christmas' },
-        { Value: 'Antarctica/Davis', Text: '(UTC+07:00) Davis' },
-        { Value: 'Asia/Saigon', Text: '(UTC+07:00) Hanoi' },
-        { Value: 'Asia/Hovd', Text: '(UTC+07:00) Hovd' },
-        { Value: 'Asia/Jakarta', Text: '(UTC+07:00) Jakarta' },
-        { Value: 'Asia/Krasnoyarsk', Text: '(UTC+07:00) Moscow+04 - Krasnoyarsk' },
-        { Value: 'Asia/Brunei', Text: '(UTC+08:00) Brunei' },
-        { Value: 'Asia/Shanghai', Text: '(UTC+08:00) China Time - Beijing' },
-        { Value: 'Asia/Choibalsan', Text: '(UTC+08:00) Choibalsan' },
-        { Value: 'Asia/Hong_Kong', Text: '(UTC+08:00) Hong Kong' },
-        { Value: 'Asia/Kuala_Lumpur', Text: '(UTC+08:00) Kuala Lumpur' },
-        { Value: 'Asia/Macau', Text: '(UTC+08:00) Macau' },
-        { Value: 'Asia/Makassar', Text: '(UTC+08:00) Makassar' },
-        { Value: 'Asia/Manila', Text: '(UTC+08:00) Manila' },
-        { Value: 'Asia/Irkutsk', Text: '(UTC+08:00) Moscow+05 - Irkutsk' },
-        { Value: 'Asia/Singapore', Text: '(UTC+08:00) Singapore' },
-        { Value: 'Asia/Taipei', Text: '(UTC+08:00) Taipei' },
-        { Value: 'Asia/Ulaanbaatar', Text: '(UTC+08:00) Ulaanbaatar' },
-        { Value: 'Australia/Perth', Text: '(UTC+08:00) Western Time - Perth' },
-        { Value: 'Asia/Pyongyang', Text: '(UTC+08:30) Pyongyang' },
-        { Value: 'Asia/Dili', Text: '(UTC+09:00) Dili' },
-        { Value: 'Asia/Jayapura', Text: '(UTC+09:00) Jayapura' },
-        { Value: 'Asia/Yakutsk', Text: '(UTC+09:00) Moscow+06 - Yakutsk' },
-        { Value: 'Pacific/Palau', Text: '(UTC+09:00) Palau' },
-        { Value: 'Asia/Seoul', Text: '(UTC+09:00) Seoul' },
-        { Value: 'Asia/Tokyo', Text: '(UTC+09:00) Tokyo' },
-        { Value: 'Australia/Darwin', Text: '(UTC+09:30) Central Time - Darwin' },
-        { Value: 'Antarctica/DumontDUrville', Text: '(UTC+10:00) Dumont D"Urville' },
-        { Value: 'Australia/Brisbane', Text: '(UTC+10:00) Eastern Time - Brisbane' },
-        { Value: 'Pacific/Guam', Text: '(UTC+10:00) Guam' },
-        { Value: 'Asia/Vladivostok', Text: '(UTC+10:00) Moscow+07 - Vladivostok' },
-        { Value: 'Pacific/Port_Moresby', Text: '(UTC+10:00) Port Moresby' },
-        { Value: 'Pacific / Chuuk', Text: '(UTC+10:00) Truk' },
-        { Value: 'Australia/Adelaide', Text: '(UTC+10:30) Central Time - Adelaide' },
-        { Value: 'Antarctica/Casey', Text: '(UTC+11:00) Casey' },
-        { Value: 'Australia/Hobart', Text: '(UTC+11:00) Eastern Time - Hobart' },
-        { Value: 'Australia/Sydney', Text: '(UTC+11:00) Eastern Time - Melbourne, Sydney' },
-        { Value: 'Pacific/Efate', Text: '(UTC+11:00) Efate' },
-        { Value: 'Pacific/Guadalcanal', Text: '(UTC+11:00) Guadalcanal' },
-        { Value: 'Pacific/Kosrae', Text: '(UTC+11:00) Kosrae' },
-        { Value: 'Asia/Magadan', Text: '(UTC+11:00) Moscow+08 - Magadan' },
-        { Value: 'Pacific / Norfolk', Text: '(UTC+11:00) Norfolk' },
-        { Value: 'Pacific/Noumea', Text: '(UTC+11:00) Noumea' },
-        { Value: 'Pacific/Pohnpei', Text: '(UTC+11:00) Ponape' },
-        { Value: 'Pacific/Funafuti', Text: '(UTC+12:00) Funafuti' },
-        { Value: 'Pacific/Kwajalein', Text: '(UTC+12:00) Kwajalein' },
-        { Value: 'Pacific/Majuro', Text: '(UTC+12:00) Majuro' },
-        { Value: 'Asia/Kamchatka', Text: '(UTC+12:00) Moscow+09 - Petropavlovsk - Kamchatskiy' },
-        { Value: 'Pacific / Nauru', Text: '(UTC+12:00) Nauru' },
-        { Value: 'Pacific/Tarawa', Text: '(UTC+12:00) Tarawa' },
-        { Value: 'Pacific/Wake', Text: '(UTC+12:00) Wake' },
-        { Value: 'Pacific/Wallis', Text: '(UTC+12:00) Wallis' },
-        { Value: 'Pacific/Auckland', Text: '(UTC+13:00) Auckland' },
-        { Value: 'Pacific/Enderbury', Text: '(UTC+13:00) Enderbury' },
-        { Value: 'Pacific/Fakaofo', Text: '(UTC+13:00) Fakaofo' },
-        { Value: 'Pacific/Fiji', Text: '(UTC+13:00) Fiji' },
-        { Value: 'Pacific/Tongatapu', Text: '(UTC+13:00) Tongatapu' },
-        { Value: 'Pacific/Apia', Text: '(UTC+14:00) Apia' },
-        { Value: 'Pacific/Kiritimati', Text: '(UTC+14:00) Kiritimati' }
-    ];
-});
+        catch (error) {
+            return 0;
+        }
+    };
+    Timezone.prototype.convert = function (date, fromOffset, toOffset) {
+        if (typeof fromOffset === 'string') {
+            fromOffset = this.offset(date, fromOffset);
+        }
+        if (typeof toOffset === 'string') {
+            toOffset = this.offset(date, toOffset);
+        }
+        var fromLocalOffset = date.getTimezoneOffset();
+        date = new Date(date.getTime() + (fromOffset - toOffset) * 60000);
+        var toLocalOffset = date.getTimezoneOffset();
+        return new Date(date.getTime() + (toLocalOffset - fromLocalOffset) * 60000);
+    };
+    Timezone.prototype.add = function (date, timezone) {
+        return this.convert(date, date.getTimezoneOffset(), timezone);
+    };
+    Timezone.prototype.remove = function (date, timezone) {
+        return this.convert(date, timezone, date.getTimezoneOffset());
+    };
+    Timezone.prototype.removeLocalOffset = function (date) {
+        return new Date(+date - (date.getTimezoneOffset() * 60000));
+    };
+    return Timezone;
+}());
+export { Timezone };
+export var localTimezoneName = Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
+export var timezoneData = [
+    { Value: 'Pacific/Niue', Text: '(UTC-11:00) Niue' },
+    { Value: 'Pacific/Pago_Pago', Text: '(UTC-11:00) Pago Pago' },
+    { Value: 'Pacific/Honolulu', Text: '(UTC-10:00) Hawaii Time' },
+    { Value: 'Pacific/Rarotonga', Text: '(UTC-10:00) Rarotonga' },
+    { Value: 'Pacific/Tahiti', Text: '(UTC-10:00) Tahiti' },
+    { Value: 'Pacific/Marquesas', Text: '(UTC-09:30) Marquesas' },
+    { Value: 'America/Anchorage', Text: '(UTC-09:00) Alaska Time' },
+    { Value: 'Pacific/Gambier', Text: '(UTC-09:00) Gambier' },
+    { Value: 'America/Los_Angeles', Text: '(UTC-08:00) Pacific Time' },
+    { Value: 'America/Tijuana', Text: '(UTC-08:00) Pacific Time - Tijuana' },
+    { Value: 'America/Vancouver', Text: '(UTC-08:00) Pacific Time - Vancouver' },
+    { Value: 'America/Whitehorse', Text: '(UTC-08:00) Pacific Time - Whitehorse' },
+    { Value: 'Pacific/Pitcairn', Text: '(UTC-08:00) Pitcairn' },
+    { Value: 'America/Denver', Text: '(UTC-07:00) Mountain Time' },
+    { Value: 'America/Phoenix', Text: '(UTC-07:00) Mountain Time - Arizona' },
+    { Value: 'America/Mazatlan', Text: '(UTC-07:00) Mountain Time - Chihuahua, Mazatlan' },
+    { Value: 'America/Dawson_Creek', Text: '(UTC-07:00) Mountain Time - Dawson Creek' },
+    { Value: 'America/Edmonton', Text: '(UTC-07:00) Mountain Time - Edmonton' },
+    { Value: 'America/Hermosillo', Text: '(UTC-07:00) Mountain Time - Hermosillo' },
+    { Value: 'America/Yellowknife', Text: '(UTC-07:00) Mountain Time - Yellowknife' },
+    { Value: 'America/Belize', Text: '(UTC-06:00) Belize' },
+    { Value: 'America/Chicago', Text: '(UTC-06:00) Central Time' },
+    { Value: 'America/Mexico_City', Text: '(UTC-06:00) Central Time - Mexico City' },
+    { Value: 'America/Regina', Text: '(UTC-06:00) Central Time - Regina' },
+    { Value: 'America/Tegucigalpa', Text: '(UTC-06:00) Central Time - Tegucigalpa' },
+    { Value: 'America/Winnipeg', Text: '(UTC-06:00) Central Time - Winnipeg' },
+    { Value: 'America/Costa_Rica', Text: '(UTC-06:00) Costa Rica' },
+    { Value: 'America/El_Salvador', Text: '(UTC-06:00) El Salvador' },
+    { Value: 'Pacific/Galapagos', Text: '(UTC-06:00) Galapagos' },
+    { Value: 'America/Guatemala', Text: '(UTC-06:00) Guatemala' },
+    { Value: 'America/Managua', Text: '(UTC-06:00) Managua' },
+    { Value: 'America/Cancun', Text: '(UTC-05:00) America Cancun' },
+    { Value: 'America/Bogota', Text: '(UTC-05:00) Bogota' },
+    { Value: 'Pacific/Easter', Text: '(UTC-05:00) Easter Island' },
+    { Value: 'America/New_York', Text: '(UTC-05:00) Eastern Time' },
+    { Value: 'America/Iqaluit', Text: '(UTC-05:00) Eastern Time - Iqaluit' },
+    { Value: 'America/Toronto', Text: '(UTC-05:00) Eastern Time - Toronto' },
+    { Value: 'America/Guayaquil', Text: '(UTC-05:00) Guayaquil' },
+    { Value: 'America/Havana', Text: '(UTC-05:00) Havana' },
+    { Value: 'America/Jamaica', Text: '(UTC-05:00) Jamaica' },
+    { Value: 'America/Lima', Text: '(UTC-05:00) Lima' },
+    { Value: 'America/Nassau', Text: '(UTC-05:00) Nassau' },
+    { Value: 'America/Panama', Text: '(UTC-05:00) Panama' },
+    { Value: 'America/Port-au-Prince', Text: '(UTC-05:00) Port-au-Prince' },
+    { Value: 'America/Rio_Branco', Text: '(UTC-05:00) Rio Branco' },
+    { Value: 'America/Halifax', Text: '(UTC-04:00) Atlantic Time - Halifax' },
+    { Value: 'America/Barbados', Text: '(UTC-04:00) Barbados' },
+    { Value: 'Atlantic/Bermuda', Text: '(UTC-04:00) Bermuda' },
+    { Value: 'America/Boa_Vista', Text: '(UTC-04:00) Boa Vista' },
+    { Value: 'America/Caracas', Text: '(UTC-04:00) Caracas' },
+    { Value: 'America/Curacao', Text: '(UTC-04:00) Curacao' },
+    { Value: 'America/Grand_Turk', Text: '(UTC-04:00) Grand Turk' },
+    { Value: 'America/Guyana', Text: '(UTC-04:00) Guyana' },
+    { Value: 'America/La_Paz', Text: '(UTC-04:00) La Paz' },
+    { Value: 'America/Manaus', Text: '(UTC-04:00) Manaus' },
+    { Value: 'America/Martinique', Text: '(UTC-04:00) Martinique' },
+    { Value: 'America/Port_of_Spain', Text: '(UTC-04:00) Port of Spain' },
+    { Value: 'America/Porto_Velho', Text: '(UTC-04:00) Porto Velho' },
+    { Value: 'America/Puerto_Rico', Text: '(UTC-04:00) Puerto Rico' },
+    { Value: 'America/Santo_Domingo', Text: '(UTC-04:00) Santo Domingo' },
+    { Value: 'America/Thule', Text: '(UTC-04:00) Thule' },
+    { Value: 'America/St_Johns', Text: '(UTC-03:30) Newfoundland Time - St. Johns' },
+    { Value: 'America/Araguaina', Text: '(UTC-03:00) Araguaina' },
+    { Value: 'America/Asuncion', Text: '(UTC-03:00) Asuncion' },
+    { Value: 'America/Belem', Text: '(UTC-03:00) Belem' },
+    { Value: 'America/Argentina/Buenos_Aires', Text: '(UTC-03:00) Buenos Aires' },
+    { Value: 'America/Campo_Grande', Text: '(UTC-03:00) Campo Grande' },
+    { Value: 'America/Cayenne', Text: '(UTC-03:00) Cayenne' },
+    { Value: 'America/Cuiaba', Text: '(UTC-03:00) Cuiaba' },
+    { Value: 'America/Fortaleza', Text: '(UTC-03:00) Fortaleza' },
+    { Value: 'America/Godthab', Text: '(UTC-03:00) Godthab' },
+    { Value: 'America/Maceio', Text: '(UTC-03:00) Maceio' },
+    { Value: 'America/Miquelon', Text: '(UTC-03:00) Miquelon' },
+    { Value: 'America/Montevideo', Text: '(UTC-03:00) Montevideo' },
+    { Value: 'Antarctica/Palmer', Text: '(UTC-03:00) Palmer' },
+    { Value: 'America/Paramaribo', Text: '(UTC-03:00) Paramaribo' },
+    { Value: 'America/Punta_Arenas', Text: '(UTC-03:00) Punta Arenas' },
+    { Value: 'America/Recife', Text: '(UTC-03:00) Recife' },
+    { Value: 'Antarctica/Rothera', Text: '(UTC-03:00) Rothera' },
+    { Value: 'America/Bahia', Text: '(UTC-03:00) Salvador' },
+    { Value: 'America/Santiago', Text: '(UTC-03:00) Santiago' },
+    { Value: 'Atlantic/Stanley', Text: '(UTC-03:00) Stanley' },
+    { Value: 'America/Noronha', Text: '(UTC-02:00) Noronha' },
+    { Value: 'America/Sao_Paulo', Text: '(UTC-02:00) Sao Paulo' },
+    { Value: 'Atlantic/South_Georgia', Text: '(UTC-02:00) South Georgia' },
+    { Value: 'Atlantic/Azores', Text: '(UTC-01:00) Azores' },
+    { Value: 'Atlantic/Cape_Verde', Text: '(UTC-01:00) Cape Verde' },
+    { Value: 'America/Scoresbysund', Text: '(UTC-01:00) Scoresbysund' },
+    { Value: 'Africa/Abidjan', Text: '(UTC+00:00) Abidjan' },
+    { Value: 'Africa/Accra', Text: '(UTC+00:00) Accra' },
+    { Value: 'Africa/Bissau', Text: '(UTC+00:00) Bissau' },
+    { Value: 'Atlantic/Canary', Text: '(UTC+00:00) Canary Islands' },
+    { Value: 'Africa/Casablanca', Text: '(UTC+00:00) Casablanca' },
+    { Value: 'America/Danmarkshavn', Text: '(UTC+00:00) Danmarkshavn' },
+    { Value: 'Europe/Dublin', Text: '(UTC+00:00) Dublin' },
+    { Value: 'Africa/El_Aaiun', Text: '(UTC+00:00) El Aaiun' },
+    { Value: 'Atlantic/Faroe', Text: '(UTC+00:00) Faeroe' },
+    { Value: 'Etc/UTC', Text: '(UTC+00:00) UTC (no daylight saving)' },
+    { Value: 'Europe/Lisbon', Text: '(UTC+00:00) Lisbon' },
+    { Value: 'Europe/London', Text: '(UTC+00:00) London' },
+    { Value: 'Africa/Monrovia', Text: '(UTC+00:00) Monrovia' },
+    { Value: 'Atlantic/Reykjavik', Text: '(UTC+00:00) Reykjavik' },
+    { Value: 'UTC', Text: 'UTC' },
+    { Value: 'Africa/Algiers', Text: '(UTC+01:00) Algiers' },
+    { Value: 'Europe/Amsterdam', Text: '(UTC+01:00) Amsterdam' },
+    { Value: 'Europe/Andorra', Text: '(UTC+01:00) Andorra' },
+    { Value: 'Europe/Berlin', Text: '(UTC+01:00) Berlin' },
+    { Value: 'Europe/Brussels', Text: '(UTC+01:00) Brussels' },
+    { Value: 'Europe/Budapest', Text: '(UTC+01:00) Budapest' },
+    { Value: 'Europe/Belgrade', Text: '(UTC+01:00) Central European Time - Belgrade' },
+    { Value: 'Europe/Prague', Text: '(UTC+01:00) Central European Time - Prague' },
+    { Value: 'Africa/Ceuta', Text: '(UTC+01:00) Ceuta' },
+    { Value: 'Europe/Copenhagen', Text: '(UTC+01:00) Copenhagen' },
+    { Value: 'Europe/Gibraltar', Text: '(UTC+01:00) Gibraltar' },
+    { Value: 'Africa/Lagos', Text: '(UTC+01:00) Lagos' },
+    { Value: 'Europe/Luxembourg', Text: '(UTC+01:00) Luxembourg' },
+    { Value: 'Europe/Madrid', Text: '(UTC+01:00) Madrid' },
+    { Value: 'Europe/Malta', Text: '(UTC+01:00) Malta' },
+    { Value: 'Europe/Monaco', Text: '(UTC+01:00) Monaco' },
+    { Value: 'Africa/Ndjamena', Text: '(UTC+01:00) Ndjamena' },
+    { Value: 'Europe/Oslo', Text: '(UTC+01:00) Oslo' },
+    { Value: 'Europe/Paris', Text: '(UTC+01:00) Paris' },
+    { Value: 'Europe/Rome', Text: '(UTC+01:00) Rome' },
+    { Value: 'Europe/Stockholm', Text: '(UTC+01:00) Stockholm' },
+    { Value: 'Europe/Tirane', Text: '(UTC+01:00) Tirane' },
+    { Value: 'Africa/Tunis', Text: '(UTC+01:00) Tunis' },
+    { Value: 'Europe/Vienna', Text: '(UTC+01:00) Vienna' },
+    { Value: 'Europe/Warsaw', Text: '(UTC+01:00) Warsaw' },
+    { Value: 'Europe/Zurich', Text: '(UTC+01:00) Zurich' },
+    { Value: 'Asia/Amman', Text: '(UTC+02:00) Amman' },
+    { Value: 'Europe/Athens', Text: '(UTC+02:00) Athens' },
+    { Value: 'Asia/Beirut', Text: '(UTC+02:00) Beirut' },
+    { Value: 'Europe/Bucharest', Text: '(UTC+02:00) Bucharest' },
+    { Value: 'Africa/Cairo', Text: '(UTC+02:00) Cairo' },
+    { Value: 'Europe/Chisinau', Text: '(UTC+02:00) Chisinau' },
+    { Value: 'Asia/Damascus', Text: '(UTC+02:00) Damascus' },
+    { Value: 'Asia/Gaza', Text: '(UTC+02:00) Gaza' },
+    { Value: 'Europe/Helsinki', Text: '(UTC+02:00) Helsinki' },
+    { Value: 'Asia/Jerusalem', Text: '(UTC+02:00) Jerusalem' },
+    { Value: 'Africa/Johannesburg', Text: '(UTC+02:00) Johannesburg' },
+    { Value: 'Africa/Khartoum', Text: '(UTC+02:00) Khartoum' },
+    { Value: 'Europe/Kiev', Text: '(UTC+02:00) Kiev' },
+    { Value: 'Africa/Maputo', Text: '(UTC+02:00) Maputo' },
+    { Value: 'Europe/Kaliningrad', Text: '(UTC+02:00) Moscow-01 - Kaliningrad' },
+    { Value: 'Asia/Nicosia', Text: '(UTC+02:00) Nicosia' },
+    { Value: 'Europe/Riga', Text: '(UTC+02:00) Riga' },
+    { Value: 'Europe/Sofia', Text: '(UTC+02:00) Sofia' },
+    { Value: 'Europe/Tallinn', Text: '(UTC+02:00) Tallinn' },
+    { Value: 'Africa/Tripoli', Text: '(UTC+02:00) Tripoli' },
+    { Value: 'Europe/Vilnius', Text: '(UTC+02:00) Vilnius' },
+    { Value: 'Africa/Windhoek', Text: '(UTC+02:00) Windhoek' },
+    { Value: 'Asia/Baghdad', Text: '(UTC+03:00) Baghdad' },
+    { Value: 'Europe/Istanbul', Text: '(UTC+03:00) Istanbul' },
+    { Value: 'Europe/Minsk', Text: '(UTC+03:00) Minsk' },
+    { Value: 'Europe/Moscow', Text: '(UTC+03:00) Moscow+00 - Moscow' },
+    { Value: 'Africa/Nairobi', Text: '(UTC+03:00) Nairobi' },
+    { Value: 'Asia/Qatar', Text: '(UTC+03:00) Qatar' },
+    { Value: 'Asia/Riyadh', Text: '(UTC+03:00) Riyadh' },
+    { Value: 'Antarctica/Syowa', Text: '(UTC+03:00) Syowa' },
+    { Value: 'Asia/Tehran', Text: '(UTC+03:30) Tehran' },
+    { Value: 'Asia/Baku', Text: '(UTC+04:00) Baku' },
+    { Value: 'Asia/Dubai', Text: '(UTC+04:00) Dubai' },
+    { Value: 'Indian/Mahe', Text: '(UTC+04:00) Mahe' },
+    { Value: 'Indian/Mauritius', Text: '(UTC+04:00) Mauritius' },
+    { Value: 'Europe/Samara', Text: '(UTC+04:00) Moscow+01 - Samara' },
+    { Value: 'Indian/Reunion', Text: '(UTC+04:00) Reunion' },
+    { Value: 'Asia/Tbilisi', Text: '(UTC+04:00) Tbilisi' },
+    { Value: 'Asia/Yerevan', Text: '(UTC+04:00) Yerevan' },
+    { Value: 'Asia/Kabul', Text: '(UTC+04:30) Kabul' },
+    { Value: 'Asia/Aqtau', Text: '(UTC+05:00) Aqtau' },
+    { Value: 'Asia/Aqtobe', Text: '(UTC+05:00) Aqtobe' },
+    { Value: 'Asia/Ashgabat', Text: '(UTC+05:00) Ashgabat' },
+    { Value: 'Asia/Dushanbe', Text: '(UTC+05:00) Dushanbe' },
+    { Value: 'Asia/Karachi', Text: '(UTC+05:00) Karachi' },
+    { Value: 'Indian/Kerguelen', Text: '(UTC+05:00) Kerguelen' },
+    { Value: 'Indian/Maldives', Text: '(UTC+05:00) Maldives' },
+    { Value: 'Antarctica/Mawson', Text: '(UTC+05:00) Mawson' },
+    { Value: 'Asia/Yekaterinburg', Text: '(UTC+05:00) Moscow+02 - Yekaterinburg' },
+    { Value: 'Asia/Tashkent', Text: '(UTC+05:00) Tashkent' },
+    { Value: 'Asia/Colombo', Text: '(UTC+05:30) Colombo' },
+    { Value: 'Asia/Kolkata', Text: '(UTC+05:30) India Standard Time' },
+    { Value: 'Asia/Katmandu', Text: '(UTC+05:45) Katmandu' },
+    { Value: 'Asia/Almaty', Text: '(UTC+06:00) Almaty' },
+    { Value: 'Asia/Bishkek', Text: '(UTC+06:00) Bishkek' },
+    { Value: 'Indian/Chagos', Text: '(UTC+06:00) Chagos' },
+    { Value: 'Asia/Dhaka', Text: '(UTC+06:00) Dhaka' },
+    { Value: 'Asia/Omsk', Text: '(UTC+06:00) Moscow+03 - Omsk' },
+    { Value: 'Asia/Thimphu', Text: '(UTC+06:00) Thimphu' },
+    { Value: 'Antarctica/Vostok', Text: '(UTC+06:00) Vostok' },
+    { Value: 'Indian/Cocos', Text: '(UTC+06:30) Cocos' },
+    { Value: 'Asia/Yangon', Text: '(UTC+06:30) Rangoon' },
+    { Value: 'Asia/Bangkok', Text: '(UTC+07:00) Bangkok' },
+    { Value: 'Indian/Christmas', Text: '(UTC+07:00) Christmas' },
+    { Value: 'Antarctica/Davis', Text: '(UTC+07:00) Davis' },
+    { Value: 'Asia/Saigon', Text: '(UTC+07:00) Hanoi' },
+    { Value: 'Asia/Hovd', Text: '(UTC+07:00) Hovd' },
+    { Value: 'Asia/Jakarta', Text: '(UTC+07:00) Jakarta' },
+    { Value: 'Asia/Krasnoyarsk', Text: '(UTC+07:00) Moscow+04 - Krasnoyarsk' },
+    { Value: 'Asia/Brunei', Text: '(UTC+08:00) Brunei' },
+    { Value: 'Asia/Shanghai', Text: '(UTC+08:00) China Time - Beijing' },
+    { Value: 'Asia/Choibalsan', Text: '(UTC+08:00) Choibalsan' },
+    { Value: 'Asia/Hong_Kong', Text: '(UTC+08:00) Hong Kong' },
+    { Value: 'Asia/Kuala_Lumpur', Text: '(UTC+08:00) Kuala Lumpur' },
+    { Value: 'Asia/Macau', Text: '(UTC+08:00) Macau' },
+    { Value: 'Asia/Makassar', Text: '(UTC+08:00) Makassar' },
+    { Value: 'Asia/Manila', Text: '(UTC+08:00) Manila' },
+    { Value: 'Asia/Irkutsk', Text: '(UTC+08:00) Moscow+05 - Irkutsk' },
+    { Value: 'Asia/Singapore', Text: '(UTC+08:00) Singapore' },
+    { Value: 'Asia/Taipei', Text: '(UTC+08:00) Taipei' },
+    { Value: 'Asia/Ulaanbaatar', Text: '(UTC+08:00) Ulaanbaatar' },
+    { Value: 'Australia/Perth', Text: '(UTC+08:00) Western Time - Perth' },
+    { Value: 'Asia/Pyongyang', Text: '(UTC+08:30) Pyongyang' },
+    { Value: 'Asia/Dili', Text: '(UTC+09:00) Dili' },
+    { Value: 'Asia/Jayapura', Text: '(UTC+09:00) Jayapura' },
+    { Value: 'Asia/Yakutsk', Text: '(UTC+09:00) Moscow+06 - Yakutsk' },
+    { Value: 'Pacific/Palau', Text: '(UTC+09:00) Palau' },
+    { Value: 'Asia/Seoul', Text: '(UTC+09:00) Seoul' },
+    { Value: 'Asia/Tokyo', Text: '(UTC+09:00) Tokyo' },
+    { Value: 'Australia/Darwin', Text: '(UTC+09:30) Central Time - Darwin' },
+    { Value: 'Antarctica/DumontDUrville', Text: '(UTC+10:00) Dumont D"Urville' },
+    { Value: 'Australia/Brisbane', Text: '(UTC+10:00) Eastern Time - Brisbane' },
+    { Value: 'Pacific/Guam', Text: '(UTC+10:00) Guam' },
+    { Value: 'Asia/Vladivostok', Text: '(UTC+10:00) Moscow+07 - Vladivostok' },
+    { Value: 'Pacific/Port_Moresby', Text: '(UTC+10:00) Port Moresby' },
+    { Value: 'Pacific / Chuuk', Text: '(UTC+10:00) Truk' },
+    { Value: 'Australia/Adelaide', Text: '(UTC+10:30) Central Time - Adelaide' },
+    { Value: 'Antarctica/Casey', Text: '(UTC+11:00) Casey' },
+    { Value: 'Australia/Hobart', Text: '(UTC+11:00) Eastern Time - Hobart' },
+    { Value: 'Australia/Sydney', Text: '(UTC+11:00) Eastern Time - Melbourne, Sydney' },
+    { Value: 'Pacific/Efate', Text: '(UTC+11:00) Efate' },
+    { Value: 'Pacific/Guadalcanal', Text: '(UTC+11:00) Guadalcanal' },
+    { Value: 'Pacific/Kosrae', Text: '(UTC+11:00) Kosrae' },
+    { Value: 'Asia/Magadan', Text: '(UTC+11:00) Moscow+08 - Magadan' },
+    { Value: 'Pacific / Norfolk', Text: '(UTC+11:00) Norfolk' },
+    { Value: 'Pacific/Noumea', Text: '(UTC+11:00) Noumea' },
+    { Value: 'Pacific/Pohnpei', Text: '(UTC+11:00) Ponape' },
+    { Value: 'Pacific/Funafuti', Text: '(UTC+12:00) Funafuti' },
+    { Value: 'Pacific/Kwajalein', Text: '(UTC+12:00) Kwajalein' },
+    { Value: 'Pacific/Majuro', Text: '(UTC+12:00) Majuro' },
+    { Value: 'Asia/Kamchatka', Text: '(UTC+12:00) Moscow+09 - Petropavlovsk - Kamchatskiy' },
+    { Value: 'Pacific / Nauru', Text: '(UTC+12:00) Nauru' },
+    { Value: 'Pacific/Tarawa', Text: '(UTC+12:00) Tarawa' },
+    { Value: 'Pacific/Wake', Text: '(UTC+12:00) Wake' },
+    { Value: 'Pacific/Wallis', Text: '(UTC+12:00) Wallis' },
+    { Value: 'Pacific/Auckland', Text: '(UTC+13:00) Auckland' },
+    { Value: 'Pacific/Enderbury', Text: '(UTC+13:00) Enderbury' },
+    { Value: 'Pacific/Fakaofo', Text: '(UTC+13:00) Fakaofo' },
+    { Value: 'Pacific/Fiji', Text: '(UTC+13:00) Fiji' },
+    { Value: 'Pacific/Tongatapu', Text: '(UTC+13:00) Tongatapu' },
+    { Value: 'Pacific/Apia', Text: '(UTC+14:00) Apia' },
+    { Value: 'Pacific/Kiritimati', Text: '(UTC+14:00) Kiritimati' }
+];

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

165

increased by0.61%

Lines of code

271836

increased by0.83%

Number of lines in readme file

72

increased by213.04%

Worsened metrics

Total package byte prevSize

21883903

decreased by-0.84%

Dependency changes

• Updated@syncfusion/ej2-base@~16.2.46

• Updated@syncfusion/ej2-buttons@~16.2.46

• Updated@syncfusion/ej2-calendars@~16.2.46

• Updated@syncfusion/ej2-data@~16.2.46

• Updated@syncfusion/ej2-dropdowns@~16.2.46

• Updated@syncfusion/ej2-inputs@~16.2.46

• Updated@syncfusion/ej2-lists@~16.2.46

• Updated@syncfusion/ej2-navigations@~16.2.46

• Updated@syncfusion/ej2-popups@~16.2.46