@syncfusion/ej2-schedule - npm Package Compare versions

Comparing version 16.1.37 to 16.2.41

CHANGELOG.md

@@ -7,7 +7,36 @@ # Changelog
 
+#### New Features
+
+- Distinct time interval option with customizable major and minor slots has been introduced to view the appointments clearly and accurately.
+- An enhancement has been made to extend the default view range with customized intervals, to display 'n' number of days, weeks and months.
+- Validation support on recurrence appointment(s) has been added.
+- Multiple resources support has been added with the following options.
+- **Group By Child** - To group the same child resource(s) under different parent resource(s).
+- **Group By Date** -  To group the resource(s) on day basis.
+- **Group Editing** - To edit all resource events simultaneously.
+- **Custom Work Days** - To display the custom work days for each resource.
+- Provided public methods to add or remove the resources dynamically.
+
 #### Bug Fixes
 
+- An issue with time format not displaying according to the given culture issue has been fixed.
+- A script error occurring while enabling or disabling the time indicator option in Agenda view issue has been fixed.
+- An issue with event not displayed in day and week views, when set with same start and end time has been fixed.
+- An issue with displaying yearly recurrence event has been fixed.
+
+##### Breaking Changes
+
+- Type of `id` property within the `eventSettings.field` has been changed from `object` type to `string`.
+- Appearance enhancement has been done on `quick popup` that opens, when single clicked on cells and events. Also, the same `popup` opens on single tap of events on mobile mode.
+
+## 16.1.37 (2018-04-24)
+
+### Schedule
+
+#### Bug Fixes
+
 - An issue with recurrence events created with UNTIL rule, which doesn't rendered on day view is fixed.
+- An issue with buttons of quick window not getting disabled, while setting `readonly` property has been fixed.
 
-## 16.1.28-preview (2018-03-09)
+## 16.1.28 (2018-03-09)
 
@@ -37,2 +66,2 @@ ### Schedule
 - **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.
+- **RTL** - Supports displaying the component to display in the direction from right to left.

dist/global/index.d.ts

@@ -1,10 +0,1 @@
-/*!
-*  filename: index.d.ts
-*  version : 16.1.37
-*  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';
@@ -11,0 +2,0 @@ import * as _base from '@syncfusion/ej2-base';

package.json

 {
   "name": "@syncfusion/ej2-schedule",
-  "version": "16.1.37",
+  "version": "16.2.41",
   "description": "Essential JS 2 Schedule Component",
@@ -11,14 +11,15 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "~16.1.37",
-    "@syncfusion/ej2-data": "~16.1.37",
-    "@syncfusion/ej2-popups": "~16.1.37",
-    "@syncfusion/ej2-calendars": "~16.1.37",
-    "@syncfusion/ej2-navigations": "~16.1.37",
-    "@syncfusion/ej2-dropdowns": "~16.1.37",
-    "@syncfusion/ej2-buttons": "~16.1.37",
-    "@syncfusion/ej2-inputs": "~16.1.37",
-    "@syncfusion/ej2-lists": "~16.1.37"
+    "@syncfusion/ej2-base": "~16.2.41",
+    "@syncfusion/ej2-data": "~16.2.41",
+    "@syncfusion/ej2-popups": "~16.2.41",
+    "@syncfusion/ej2-calendars": "~16.2.41",
+    "@syncfusion/ej2-navigations": "~16.2.41",
+    "@syncfusion/ej2-dropdowns": "~16.2.41",
+    "@syncfusion/ej2-buttons": "~16.2.41",
+    "@syncfusion/ej2-inputs": "~16.2.41",
+    "@syncfusion/ej2-lists": "~16.2.41"
   },
   "devDependencies": {
     "@types/chai": "^3.4.28",
+    "@types/es6-promise": "0.0.28",
     "@types/jasmine": "^2.2.29",
@@ -25,0 +26,0 @@ "@types/jasmine-ajax": "^3.1.27",

src/recurrence-editor/date-generator.js

@@ -360,6 +360,6 @@ define(["require", "exports", "@syncfusion/ej2-base", "../schedule/base/util"], function (require, exports, ej2_base_1, util_1) {
             else {
-                while (tempDate.getMonth() === month) {
-                    monthCollection.push([tempDate.getTime()]);
-                    tempDate.setDate(tempDate.getDate()
-                        + (7));
+                var currentMonthDate = new Date(tempDate.getTime());
+                while (currentMonthDate.getMonth() === month) {
+                    monthCollection.push([currentMonthDate.getTime()]);
+                    currentMonthDate.setDate(currentMonthDate.getDate() + (7));
                 }
@@ -366,0 +366,0 @@ }

src/recurrence-editor/recurrence-editor-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, Property, NotifyPropertyChanges, INotifyPropertyChanged, Event, Browser } from '@syncfusion/ej2-base';import { EmitType, getDefaultDateObject, getValue, cldrData, L10n } from '@syncfusion/ej2-base';import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';import { NumericTextBox } from '@syncfusion/ej2-inputs';import { DatePicker, ChangedEventArgs } from '@syncfusion/ej2-calendars';import { Button, RadioButton } from '@syncfusion/ej2-buttons';import { EventHandler, MouseEventArgs } from '@syncfusion/ej2-base';import { EJ2Instance } from '../schedule/base/interface';import { RecRule, extractObjectFromRule, generate, generateSummary, getRecurrenceStringFromDate } from './date-generator';
+import { Component, Property, NotifyPropertyChanges, INotifyPropertyChanged, Event, Browser } from '@syncfusion/ej2-base';import { EmitType, getDefaultDateObject, getValue, cldrData, L10n, isNullOrUndefined } from '@syncfusion/ej2-base';import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';import { NumericTextBox } from '@syncfusion/ej2-inputs';import { DatePicker, ChangedEventArgs } from '@syncfusion/ej2-calendars';import { Button, RadioButton } from '@syncfusion/ej2-buttons';import { EventHandler, MouseEventArgs, classList } from '@syncfusion/ej2-base';import { EJ2Instance } from '../schedule/base/interface';import { RecRule, extractObjectFromRule, generate, generateSummary, getRecurrenceStringFromDate } from './date-generator';
 import {RepeatType,RecurrenceEditorChangeEventArgs} from "./recurrence-editor";
@@ -42,3 +42,3 @@ import {ComponentModel} from '@syncfusion/ej2-base';
      * Allows styling with custom class names.
-     * @default ''
+     * @default null
      */
@@ -55,3 +55,3 @@ cssClass?: string;
      * Sets the recurrence rule as its output values.
-     * @default ''
+     * @default null
      */
@@ -58,0 +58,0 @@ value?: String;

src/recurrence-editor/recurrence-editor.d.ts

@@ -44,3 +44,3 @@ import { Component, INotifyPropertyChanged } from '@syncfusion/ej2-base';
      * Allows styling with custom class names.
-     * @default ''
+     * @default null
      */
@@ -55,3 +55,3 @@ cssClass: string;
      * Sets the recurrence rule as its output values.
-     * @default ''
+     * @default null
      */
@@ -120,3 +120,2 @@ value: String;
     private getPopupWidth();
-    private monthDayRendering();
     private renderDatePickers();
@@ -123,0 +122,0 @@ private dayButtonRender();

src/recurrence-editor/recurrence-editor.js

@@ -32,2 +32,3 @@ var __extends = (this && this.__extends) || (function () {
     var MONETHEXPANDERWRAPPER = 'e-month-expander';
+    var MONETHEXPANDWRAPPER = 'e-month-expand-wrapper';
     var MONTHEXPANDERELEMENT = 'e-month-expander-element';
@@ -58,2 +59,3 @@ var MONTHEXPANDERCHECKBOXWRAPPER = 'e-month-expander-checkbox-wrapper';
     var REPEATCONTENT = 'e-repeat-content';
+    var REPEATCONTENTWRAPPER = 'e-repeat-content-wrapper';
     var NONE = 'none';
@@ -175,2 +177,7 @@ var DAILY = 'daily';
                 summaryYear: 'year(s)',
+                monthWeek: 'Month Week',
+                monthPosition: 'Month Position',
+                monthExpander: 'Month Expander',
+                yearExpander: 'Year Expander',
+                repeatInterval: 'Repeat Interval'
             };
@@ -203,2 +210,5 @@ _this.renderStatus = false;
             this.renderComponent();
+            if (!ej2_base_2.isNullOrUndefined(this.value)) {
+                this.setRecurrenceRule(this.value);
+            }
             this.startState(this.repeatType.value.toString().toUpperCase(), NEVER, this.startDate);
@@ -227,4 +237,3 @@ this.updateForm(this.repeatType.value.toString());
             this.rotateArray(days, this.firstDayOfWeek);
-            var element = this.element.querySelector('.' +
-                DAYWRAPPER + ' button[data-index="' + days.indexOf(dayIndex) + '"]');
+            var element = this.element.querySelector('.' + DAYWRAPPER + ' button[data-index="' + days.indexOf(dayIndex) + '"]');
             if (element) {
@@ -260,2 +269,9 @@ element.classList.add(ACTIVE);
             this.repeatType.setProperties({ value: state });
+            var end = this.element.querySelector('.e-end-on');
+            if (state === DAILY) {
+                ej2_base_3.classList(end, [FORMLEFT], [FORMRIGHT]);
+            }
+            else {
+                ej2_base_3.classList(end, [FORMRIGHT], [FORMLEFT]);
+            }
             switch (state) {
@@ -336,2 +352,3 @@ case NONE:
         RecurrenceEditor.prototype.renderDropdowns = function () {
+            var _this = this;
             var self = this;
@@ -348,2 +365,3 @@ this.repeatType = new ej2_dropdowns_1.DropDownList({
                 placeholder: this.localeObj.getConstant(REPEAT),
+                htmlAttributes: { 'title': this.localeObj.getConstant(REPEAT) },
                 change: function (args) {
@@ -354,3 +372,4 @@ if (self.destroyStatus) {
                     self.setProperties({ selectedType: args.value }, false);
-                    self.element.querySelector('.' + REPEATCONTENT).innerHTML = self.localeObj.getConstant(contentType[args.value]);
+                    self.element.querySelector('.' + REPEATCONTENT).innerHTML =
+                        self.localeObj.getConstant(contentType[args.value]);
                     self.showFormElement();
@@ -383,6 +402,28 @@ self.updateForm(args.value);
             this.endType.appendTo(this.element.querySelector('.' + ENDONELEMENT));
-            this.monthWeekPos = new ej2_dropdowns_1.DropDownList({
-                dataSource: this.getMonthPosData(),
-                popupWidth: this.getPopupWidth(),
-                enableRtl: this.enableRtl,
+            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) {
+                        if (self.destroyStatus) {
+                            return;
+                        }
+                        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: {
@@ -392,3 +433,5 @@ text: TEXTFIELD,
                 },
-                index: 1,
+                floatLabelType: 'Always',
+                enableRtl: this.enableRtl,
+                index: 7,
                 change: function (args) {
@@ -403,3 +446,3 @@ if (self.destroyStatus) {
             });
-            this.monthDayRendering();
+            this.monthValue.appendTo(this.element.querySelector('.' + YEAREXPANDERELEMENT));
         };
@@ -462,43 +505,2 @@ RecurrenceEditor.prototype.setDefaultValue = function () {
         };
-        RecurrenceEditor.prototype.monthDayRendering = function () {
-            var self = this;
-            this.monthWeekPos.appendTo(this.element.querySelector('.' + MONTHPOS));
-            this.monthWeekDays = new ej2_dropdowns_1.DropDownList({
-                dataSource: this.getDayData('wide'),
-                popupWidth: this.getPopupWidth(),
-                enableRtl: this.enableRtl,
-                fields: {
-                    text: TEXTFIELD,
-                    value: VALUEFIELD
-                },
-                index: 1,
-                change: function (args) {
-                    if (self.destroyStatus) {
-                        return;
-                    }
-                    self.onWeekDay.setProperties({ checked: true });
-                    self.resetFormValues();
-                    self.triggerChangeEvent();
-                }
-            });
-            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) {
-                    if (self.destroyStatus) {
-                        return;
-                    }
-                    self.resetFormValues();
-                    self.triggerChangeEvent();
-                }
-            });
-            this.monthValue.appendTo(this.element.querySelector('.' + YEAREXPANDERELEMENT));
-        };
         RecurrenceEditor.prototype.renderDatePickers = function () {
@@ -720,38 +722,42 @@ var self = this;
                 '<div class="' + INPUTWARAPPER + ' ' + FORMLEFT + '">' +
-                '<input type="text" tabindex="0" class="' + REPEATELEMENT + '" />' +
+                '<input type="text" tabindex="0" class="' + REPEATELEMENT +
+                '"label="' + REPEATELEMENT.substr(2) + '" />' +
                 '</div><div class="' + INPUTWARAPPER + ' ' +
-                INTERVALCLASS + ' ' + FORMRIGHT + '"><table  class="' + RECURRENCETABLE + '"><tr>' +
-                '<td><input type="text" tabindex="0" class="' + REPEATINTERVAL + '" /></td>' +
+                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" data-index="0">' + dayData[0].text + '</button>' +
-                '<button type="button" data-index="1">' + dayData[1].text + '</button>' +
-                '<button type="button" data-index="2">' + dayData[2].text + '</button>' +
-                '<button type="button" data-index="3">' + dayData[3].text + '</button>' +
-                '<button type="button" data-index="4">' + dayData[4].text + '</button>' +
-                '<button type="button" data-index="5">' + dayData[5].text + '</button>' +
-                '<button type="button" data-index="6">' + dayData[6].text + '</button></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" />' +
+                '<input class="' + YEAREXPANDERELEMENT + '" type="text" tabindex="0" title="' +
+                this.localeObj.getConstant('yearExpander') + '"/>' +
                 '</div>' +
                 '<div class="' + MONETHEXPANDERWRAPPER + '">' +
-                '<table class="' + RECURRENCETABLE + '"><tr><td>' +
+                '<table class="' + RECURRENCETABLE + ' ' + MONETHEXPANDWRAPPER + '"><tr><td>' +
                 '<div class="' + INPUTWARAPPER + ' ' + MONTHEXPANDERCHECKBOXWRAPPER + '">' +
-                '<input class="' + MONTHEXPANDERELEMENT + '" type="radio">' +
+                '<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 + '" />' +
+                '<input type="text" tabindex="0" class="' + MONTHDAYWRAPPER + '"title="' +
+                this.localeObj.getConstant('monthExpander') + '" />' +
                 '</div></td></tr>' +
                 '<tr><td>' +
-                '<div class="' + INPUTWARAPPER + '" style="min-width: 30px;">' +
-                '<input class="' + MONTHEXPANNDERELEM + '" type="radio">' +
+                '<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 + '" />' +
+                '<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 + '" />' +
+                '<input type="text" tabindex="0" class="' + MONTHWEEK + '"title="' + this.localeObj.getConstant('monthWeek') + '" />' +
                 '</div></td></tr></table>' +
@@ -762,9 +768,9 @@ '</div></div>' +
                 '<div class="' + INPUTWARAPPER + ' ' + ENDONLEFT + '">' +
-                '<input type="text" tabindex="0" class="' + ENDONELEMENT + '" />' +
+                '<input type="text" tabindex="0" class="' + ENDONELEMENT + '"title="' + this.localeObj.getConstant(END) + '" />' +
                 '</div>' +
                 '<div class="' + INPUTWARAPPER + ' ' + ENDONDATE + '" >' +
-                '<input type="text" tabindex="0" class="' + UNTILDATE + '" />' +
+                '<input type="text" tabindex="0" class="' + UNTILDATE + '"title="' + this.localeObj.getConstant(UNTIL) + '" />' +
                 '</div>' +
                 '<div class="' + INPUTWARAPPER + ' ' + ENDONCOUNTWRAPPER + '">' +
-                '<input type="text" tabindex="0" class="' + ENDONCOUNT + '" />' +
+                '<input type="text" tabindex="0" class="' + ENDONCOUNT + '"title="' + this.localeObj.getConstant(COUNT) + '" />' +
                 '</div></div>' +
@@ -863,17 +869,37 @@ '</div></div>';
         RecurrenceEditor.prototype.destroyComponents = function () {
-            this.recurrenceCount.destroy();
-            this.monthDate.destroy();
-            this.repeatInterval.destroy();
-            this.untilDateObj.destroy();
-            this.repeatType.destroy();
-            this.endType.destroy();
-            this.monthWeekPos.destroy();
-            this.monthWeekDays.destroy();
-            this.monthValue.destroy();
+            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) {
                 element.destroy();
             });
+            this.dayButtons = [];
             this.monthButtons.forEach(function (element) {
                 element.destroy();
             });
+            this.monthButtons = [];
         };
@@ -889,3 +915,3 @@ RecurrenceEditor.prototype.resetFields = function () {
         RecurrenceEditor.prototype.getRecurrenceDates = function (startDate, rule, excludeDate, maximumCount, viewDate) {
-            if (viewDate === void 0) { viewDate = this.startDate; }
+            viewDate = ej2_base_2.isNullOrUndefined(viewDate) ? this.startDate : viewDate;
             return date_generator_1.generate(startDate, rule, excludeDate, this.firstDayOfWeek, maximumCount, viewDate);
@@ -903,11 +929,6 @@ };
                 case MONTHLY:
-                    ruleData += RULEMONTHLY +
-                        SEMICOLON +
-                        this.getSelectedMonthData();
+                    ruleData += RULEMONTHLY + SEMICOLON + this.getSelectedMonthData();
                     break;
                 case YEARLY:
-                    ruleData += RULEYEARLY +
-                        SEMICOLON +
-                        this.getSelectedMonthData() +
-                        this.getYearMonthRuleData();
+                    ruleData += RULEYEARLY + SEMICOLON + this.getSelectedMonthData() + this.getYearMonthRuleData();
                     break;
@@ -994,2 +1015,12 @@ case NONE:
                         break;
+                    case 'value':
+                        if (this.getRecurrenceRule() !== this.value) {
+                            this.setRecurrenceRule(this.value);
+                        }
+                        break;
+                    case 'locale':
+                    case 'frequencies':
+                    case 'firstDayOfWeek':
+                        this.refresh();
+                        break;
                 }
@@ -1008,3 +1039,3 @@ }
         __decorate([
-            ej2_base_1.Property('null')
+            ej2_base_1.Property()
         ], RecurrenceEditor.prototype, "dateFormat", void 0);
@@ -1015,3 +1046,3 @@ __decorate([
         __decorate([
-            ej2_base_1.Property('')
+            ej2_base_1.Property()
         ], RecurrenceEditor.prototype, "cssClass", void 0);
@@ -1022,3 +1053,3 @@ __decorate([
         __decorate([
-            ej2_base_1.Property('')
+            ej2_base_1.Property()
         ], RecurrenceEditor.prototype, "value", void 0);
@@ -1025,0 +1056,0 @@ __decorate([

src/schedule/actions/crud.js

@@ -44,3 +44,7 @@ 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) {
             var editParms = { addedRecords: [], changedRecords: [], deletedRecords: [] };
-            var args = { requestType: 'eventCreate', cancel: false, data: eventData };
+            var args = {
+                cancel: false,
+                data: (eventData instanceof Array) ? eventData : [eventData],
+                requestType: 'eventCreate'
+            };
             this.parent.trigger(events.actionBegin, args);
@@ -187,4 +191,4 @@ if (args.cancel) {
                             var app = recEvent_1[_b];
-                            var predicate = new ej2_data_1.Predicate(fields.id, 'equal', app[fields.recurrenceID]).
-                                or(new ej2_data_1.Predicate(fields.recurrenceID, 'equal', app[fields.recurrenceID]));
+                            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));
@@ -191,0 +195,0 @@ for (var _c = 0, delApp_2 = delApp; _c < delApp_2.length; _c++) {

src/schedule/actions/keyboard.d.ts

@@ -42,2 +42,5 @@ import { Schedule } from '../base/schedule';
     private processLeft(e, isMultiple);
+    private calculateNextPrevDate(currentCell, target, type);
+    private getFocusableElements(container);
+    private processTabOnPopup(e, popupElement);
     private processTab(e, isReverse);
@@ -44,0 +47,0 @@ private processDelete(e);

src/schedule/actions/keyboard.js

@@ -147,3 +147,21 @@ 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) {
         KeyboardInteraction.prototype.processEnter = function (e) {
+            if (this.parent.activeViewOptions.readonly) {
+                return;
+            }
             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;
+            }
             if (target.classList.contains(cls.WORK_CELLS_CLASS) || target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
@@ -223,7 +241,31 @@ if (this.selectedCells.length > 1) {
             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]);
+                        }
+                    }
+                    selectedCells = resourceSelectedCells;
+                }
                 this.selectedCells = selectedCells;
                 if (selectedCells.length > 2 && !target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
-                    selectedCells = selectedCells.concat(this.getAllDayCells(selectedCells));
+                    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);
@@ -262,2 +304,3 @@ }
                 nextAppEle.focus();
+                ej2_base_2.addClass([nextAppEle], cls.AGENDA_SELECTED_CELL);
             }
@@ -332,4 +375,4 @@ };
             if (index < this.parent.views.length) {
-                var view = this.parent.viewOptions[Object.keys(this.parent.viewOptions)[index]].option;
-                this.parent.changeView(view, e);
+                var view = this.parent.viewCollections[index].option;
+                this.parent.changeView(view, e, undefined, index);
                 if (this.parent.headerModule) {
@@ -348,2 +391,3 @@ this.parent.headerModule.element.querySelector('.e-active-view button').focus();
             var moreEventWrapper = this.parent.element.querySelector('.' + cls.MORE_POPUP_WRAPPER_CLASS);
+            var quickPopupWrapper = this.parent.element.querySelector('.' + cls.POPUP_WRAPPER_CLASS);
             if (selectedElements.length > 0 && !e.target.classList.contains(cls.WORK_CELLS_CLASS)) {
@@ -353,2 +397,3 @@ 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) {
@@ -360,3 +405,3 @@ target = this.getWorkCellFromAppointmentElement(selectedEventElements[selectedEventElements.length - 1]);
                 var tableEle = this.parent.getContentTable();
-                var curRowIndex = target.parentNode.rowIndex;
+                var curRowIndex = target.parentNode.sectionRowIndex;
                 if (curRowIndex > 0 && curRowIndex < tableEle.rows.length) {
@@ -378,2 +423,3 @@ this.selectCells(isMultiple, tableEle.rows[curRowIndex - 1].cells[target.cellIndex]);
             var moreEventWrapper = this.parent.element.querySelector('.' + cls.MORE_POPUP_WRAPPER_CLASS);
+            var quickPopupWrapper = this.parent.element.querySelector('.' + cls.POPUP_WRAPPER_CLASS);
             if (selectedCells.length > 0 && !e.target.classList.contains(cls.WORK_CELLS_CLASS)) {
@@ -383,2 +429,3 @@ 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) {
@@ -390,3 +437,3 @@ target = this.getWorkCellFromAppointmentElement(selectedElements[selectedElements.length - 1]);
             if (target.classList.contains(cls.WORK_CELLS_CLASS) && !this.parent.element.querySelector('.' + cls.POPUP_OPEN)) {
-                var curRowIndex = target.parentNode.rowIndex;
+                var curRowIndex = target.parentNode.sectionRowIndex;
                 if (curRowIndex >= 0 && curRowIndex < tableEle.rows.length - 1) {
@@ -402,3 +449,3 @@ this.selectCells(isMultiple, tableEle.rows[curRowIndex + 1].cells[target.cellIndex]);
             var tableEle = this.parent.getContentTable();
-            var curRowIndex = target.parentNode.rowIndex;
+            var curRowIndex = target.parentNode.sectionRowIndex;
             var key = {
@@ -417,3 +464,4 @@ element: tableEle,
             var moreEventWrapper = this.parent.element.querySelector('.' + cls.MORE_POPUP_WRAPPER_CLASS);
-            if (moreEventWrapper.classList.contains(cls.POPUP_OPEN)) {
+            var quickPopupWrapper = this.parent.element.querySelector('.' + cls.POPUP_WRAPPER_CLASS);
+            if (moreEventWrapper.classList.contains(cls.POPUP_OPEN) || quickPopupWrapper.classList.contains(cls.POPUP_OPEN)) {
                 return true;
@@ -428,2 +476,3 @@ }
             var selectedCells = this.parent.getSelectedElements();
+            var targetCell;
             var selectedAppointments = this.parent.eventBase.getSelectedAppointments();
@@ -442,7 +491,13 @@ var target = (e.target);
                 if (key.columnIndex >= 0 && key.columnIndex < key.maxIndex - 1) {
-                    this.selectCells(isMultiple, key.element.rows[key.rowIndex].cells[target.cellIndex + 1]);
+                    targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex].cells[target.cellIndex + 1], 'right');
+                    if (!ej2_base_2.isNullOrUndefined(targetCell)) {
+                        this.selectCells(isMultiple, targetCell);
+                    }
                 }
                 else if (key.columnIndex === key.maxIndex - 1) {
                     if (!this.isInverseTableSelect() && key.rowIndex < key.element.rows.length - 1) {
-                        this.selectCells(isMultiple, key.element.rows[key.rowIndex + 1].cells[0]);
+                        targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex + 1].cells[0], 'right');
+                        if (!ej2_base_2.isNullOrUndefined(targetCell)) {
+                            this.selectCells(isMultiple, targetCell);
+                        }
                     }
@@ -477,2 +532,3 @@ else if (!isMultiple) {
             var selectedCells = this.parent.getSelectedElements();
+            var targetCell;
             if (selectedCells.length > 0 && !target.classList.contains(cls.WORK_CELLS_CLASS) &&
@@ -487,10 +543,17 @@ !target.classList.contains(cls.ALLDAY_CELLS_CLASS)) {
             }
+            var initialId = this.initialTarget.getAttribute('data-group-index');
             if (target.classList.contains(cls.WORK_CELLS_CLASS)) {
                 var key = this.processLeftRight(target, isMultiple);
                 if (key.columnIndex > 0 && key.columnIndex < key.maxIndex) {
-                    this.selectCells(isMultiple, key.element.rows[key.rowIndex].cells[target.cellIndex - 1]);
+                    targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex].cells[target.cellIndex - 1], 'left');
+                    if (!ej2_base_2.isNullOrUndefined(targetCell)) {
+                        this.selectCells(isMultiple, targetCell);
+                    }
                 }
                 else if (key.columnIndex === 0) {
                     if (!this.isInverseTableSelect() && key.rowIndex > 0) {
-                        this.selectCells(isMultiple, key.element.rows[key.rowIndex - 1].cells[key.maxIndex - 1]);
+                        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);
+                        }
                     }
@@ -519,46 +582,63 @@ else if (!isMultiple) {
         };
+        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];
+                }
+            }
+            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();
+            }
+            if (!ej2_base_2.isNullOrUndefined(firstEle) && document.activeElement === firstEle && e.shiftKey) {
+                e.preventDefault();
+                lastEle.focus();
+            }
+        };
         KeyboardInteraction.prototype.processTab = function (e, isReverse) {
             var target = e.target;
-            var selectedAppointments = this.parent.eventBase.getSelectedAppointments();
-            var moreEventWrapper = this.parent.element.querySelector('.' + cls.MORE_POPUP_WRAPPER_CLASS);
             if (ej2_base_1.closest(target, '.' + cls.MORE_POPUP_WRAPPER_CLASS)) {
+                var moreEventWrapper = this.parent.element.querySelector('.' + cls.MORE_POPUP_WRAPPER_CLASS);
                 if (ej2_base_2.isNullOrUndefined(moreEventWrapper) || !moreEventWrapper.classList.contains(cls.POPUP_OPEN)) {
                     return;
                 }
-                var moreEventList = [].slice.call(moreEventWrapper.querySelector('.' + cls.MORE_EVENT_WRAPPER_CLASS).children);
-                var focusElement = moreEventList[moreEventList.length - 1];
-                if (selectedAppointments.length > 0) {
-                    target = selectedAppointments[selectedAppointments.length - 1];
+                this.parent.eventBase.removeSelectedAppointmentClass();
+                this.processTabOnPopup(e, moreEventWrapper);
+                return;
+            }
+            if (ej2_base_1.closest(target, '.' + cls.POPUP_WRAPPER_CLASS)) {
+                var quickPopupWrapper = this.parent.element.querySelector('.' + cls.POPUP_WRAPPER_CLASS);
+                if (ej2_base_2.isNullOrUndefined(quickPopupWrapper) || !quickPopupWrapper.classList.contains(cls.POPUP_OPEN)) {
+                    return;
                 }
-                if (target.classList.contains(cls.MORE_EVENT_CLOSE_CLASS) && !isReverse) {
-                    moreEventWrapper.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS).focus();
-                }
-                else if (target.classList.contains(cls.MORE_EVENT_HEADER_DATE_CLASS) && !isReverse) {
-                    this.selectAppointment(isReverse, target, true);
-                }
-                else if (target.classList.contains(cls.MORE_EVENT_HEADER_DATE_CLASS) && isReverse) {
-                    moreEventWrapper.querySelector('.' + cls.MORE_EVENT_CLOSE_CLASS).focus();
-                }
-                else if (target.classList.contains(cls.MORE_EVENT_CLOSE_CLASS) && isReverse) {
-                    this.parent.eventBase.removeSelectedAppointmentClass();
-                    this.parent.eventBase.addSelectedAppointments([focusElement], focusElement);
-                    focusElement.focus();
-                }
-                else if (target.classList.contains(cls.APPOINTMENT_CLASS)) {
-                    if (isReverse && (target.getAttribute('data-guid') === (moreEventList[0]).getAttribute('data-guid'))) {
-                        this.parent.eventBase.removeSelectedAppointmentClass();
-                        moreEventWrapper.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS).focus();
-                    }
-                    else if (!isReverse && (target.getAttribute('data-guid') === (focusElement).getAttribute('data-guid'))) {
-                        this.parent.eventBase.removeSelectedAppointmentClass();
-                        moreEventWrapper.querySelector('.' + cls.MORE_EVENT_CLOSE_CLASS).focus();
-                    }
-                    else {
-                        this.selectAppointment(isReverse, target, true);
-                    }
-                }
-                e.preventDefault();
+                this.processTabOnPopup(e, quickPopupWrapper);
                 return;
             }
-            var appointments = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));
             if (target.classList.contains(cls.ROOT)) {
@@ -569,2 +649,4 @@ this.parent.eventBase.removeSelectedAppointmentClass();
             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) {
@@ -598,3 +680,2 @@ target = selectedAppointments[selectedAppointments.length - 1];
             }
-            this.parent.quickPopup.morePopup.hide();
         };
@@ -601,0 +682,0 @@ KeyboardInteraction.prototype.processEscape = function () {

src/schedule/actions/touch.js

@@ -79,3 +79,3 @@ 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) {
                 var time = Date.now() - this.timeStampStart;
-                var offsetDist = (e.distanceX * 1.66);
+                var offsetDist = (e.distanceX * (ej2_base_1.Browser.isDevice ? 6 : 1.66));
                 if (offsetDist > time || (e.distanceX > (this.parent.element.offsetWidth / 2))) {
@@ -102,11 +102,13 @@ this.swapPanels(e.swipeDirection);
             if (!ej2_base_2.isNullOrUndefined(target)) {
-                this.parent.quickPopup.eventHold(e.originalEvent);
+                var event_1 = e.originalEvent;
+                this.parent.notify(events.tapHoldReady, { event: event_1 });
                 return;
             }
-            target = ej2_base_2.closest(e.originalEvent.target, '.' + cls.WORK_CELLS_CLASS) ||
-                ej2_base_2.closest(e.originalEvent.target, '.' + cls.ALLDAY_CELLS_CLASS) ||
-                ej2_base_2.closest(e.originalEvent.target, '.' + cls.HEADER_CELLS_CLASS);
+            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);
-                this.parent.eventWindow.openEditor(this.parent.activeCellsData, 'Add');
+                if (!this.parent.activeViewOptions.readonly) {
+                    this.parent.eventWindow.openEditor(this.parent.activeCellsData, 'Add');
+                }
                 return;
@@ -174,2 +176,3 @@ }
             this.parent.activeView.getRenderDates();
+            this.parent.activeView.generateColumnLevels();
             ej2_base_1.addClass([this.element], cls.TRANSLATE_CLASS);
@@ -176,0 +179,0 @@ var prevWidth = this.previousPanel ? this.previousPanel.element.offsetWidth : 0;

src/schedule/actions/work-cells.js

@@ -18,2 +18,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "../base/constant", "../base/css-constant"], function (require, exports, ej2_base_1, event, cls) {
                 if (this.parent.activeViewOptions.readonly) {
+                    this.parent.quickPopup.quickPopupHide();
                     return;
@@ -20,0 +21,0 @@ }

src/schedule/base/constant.d.ts

@@ -49,1 +49,3 @@ /**
 export declare const cellMouseDown: string;
+/** @hidden */
+export declare const tapHoldReady: string;

src/schedule/base/constant.js

@@ -25,2 +25,3 @@ define(["require", "exports"], function (require, exports) {
     exports.cellMouseDown = 'cell-mouse-down';
+    exports.tapHoldReady = 'tap-hold-ready';
 });

src/schedule/base/css-constant.d.ts

@@ -9,3 +9,3 @@ /**
 /** @hidden */
-export declare const DEVICE: string;
+export declare const DEVICE_CLASS: string;
 /** @hidden */
@@ -52,8 +52,2 @@ export declare const ICON: string;
 /** @hidden */
-export declare const EXPANDED_CELL_CLASS: string;
-/** @hidden */
-export declare const APPOINTMENT_ROW_CLASS: string;
-/** @hidden */
-export declare const APPOINTMENT_CELL_CLASS: string;
-/** @hidden */
 export declare const CURRENT_PANEL_CLASS: string;
@@ -97,4 +91,8 @@ /** @hidden */
 /** @hidden */
+export declare const RESOURCE_TOOLBAR_CONTAINER: string;
+/** @hidden */
 export declare const HEADER_TOOLBAR: string;
 /** @hidden */
+export declare const RESOURCE_HEADER_TOOLBAR: string;
+/** @hidden */
 export declare const SELECTED_CELL_CLASS: string;
@@ -104,2 +102,4 @@ /** @hidden */
 /** @hidden */
+export declare const WRAPPER_CONTAINER_CLASS: string;
+/** @hidden */
 export declare const APPOINTMENT_CONTAINER_CLASS: string;
@@ -113,10 +113,8 @@ /** @hidden */
 /** @hidden */
-export declare const APPOINTMENT_SUBJECT_WRAP: string;
+export declare const SUBJECT_WRAP: string;
 /** @hidden */
-export declare const APPOINTMENT_SUBJECT: string;
+export declare const RESOURCE_NAME: string;
 /** @hidden */
 export declare const APPOINTMENT_TIME: string;
 /** @hidden */
-export declare const APPOINTMENT_LOCATION: string;
-/** @hidden */
 export declare const TABLE_WRAP_CLASS: string;
@@ -132,4 +130,12 @@ /** @hidden */
 /** @hidden */
+export declare const AGENDA_SELECTED_CELL: string;
+/** @hidden */
+export declare const AGENDA_MONTH_HEADER_CLASS: string;
+/** @hidden */
 export declare const AGENDA_HEADER_CLASS: string;
 /** @hidden */
+export declare const AGENDA_RESOURCE_CLASS: string;
+/** @hidden */
+export declare const AGENDA_DATE_CLASS: string;
+/** @hidden */
 export declare const NAVIGATE_CLASS: string;
@@ -147,4 +153,10 @@ /** @hidden */
 /** @hidden */
-export declare const AGENDA_DATETIME_CLASS: string;
+export declare const DATE_BORDER_CLASS: string;
 /** @hidden */
+export declare const AGENDA_DAY_PADDING_CLASS: string;
+/** @hidden */
+export declare const DATE_TIME_CLASS: string;
+/** @hidden */
+export declare const DATE_TIME_WRAPPER_CLASS: string;
+/** @hidden */
 export declare const AGENDA_EMPTY_EVENT_CLASS: string;
@@ -176,4 +188,2 @@ /** @hidden */
 /** @hidden */
-export declare const ALLDAY_WRAPPER_CLASS: string;
-/** @hidden */
 export declare const EVENT_COUNT_CLASS: string;
@@ -191,6 +201,2 @@ /** @hidden */
 /** @hidden */
-export declare const APPOINTMENT_SELECTION_CLASS: string;
-/** @hidden */
-export declare const APPOINTMENT_CELL_SELECT_CLASS: string;
-/** @hidden */
 export declare const SCHEDULE_INNER_CLASS: string;
@@ -200,46 +206,32 @@ /** @hidden */
 /** @hidden */
-export declare const QUICK_POPUP_CLASS: string;
+export declare const CELL_POPUP_CLASS: string;
 /** @hidden */
-export declare const QUICK_POPUP_SUBJECT_CLASS: string;
+export declare const EVENT_POPUP_CLASS: string;
 /** @hidden */
-export declare const QUICK_POPUP_TABLE_CLASS: string;
+export declare const MULTIPLE_EVENT_POPUP_CLASS: string;
 /** @hidden */
-export declare const QUICK_POPUP_ICON_CLASS: string;
+export declare const POPUP_HEADER_CLASS: string;
 /** @hidden */
-export declare const QUICK_POPUP_CLOSE_ICON_CLASS: string;
+export declare const POPUP_HEADER_ICON_WRAPPER: string;
 /** @hidden */
-export declare const QUICK_POPUP_EDIT_ICON_CLASS: string;
+export declare const POPUP_CONTENT_CLASS: string;
 /** @hidden */
-export declare const QUICK_POPUP_CONTENT_CLASS: string;
+export declare const POPUP_FOOTER_CLASS: string;
 /** @hidden */
-export declare const QUICK_POPUP_RIGHT_FIELDS_CLASS: string;
+export declare const DATE_TIME_DETAILS_CLASS: string;
 /** @hidden */
-export declare const QUICK_POPUP_DATE_TIME_DETAILS_CLASS: string;
+export declare const RECURRENCE_SUMMARY_CLASS: string;
 /** @hidden */
-export declare const DEVICE_DATE_TIME_DETAILS_CLASS: string;
-/** @hidden */
-export declare const DEVICE_RECURRENCE_SUMMARY_CLASS: string;
-/** @hidden */
-export declare const QUICK_POPUP_LOCATION_DETAILS_CLASS: string;
-/** @hidden */
-export declare const QUICK_POPUP_FOOTER_CLASS: string;
-/** @hidden */
 export declare const QUICK_POPUP_EVENT_DETAILS_CLASS: string;
 /** @hidden */
-export declare const QUICK_POPUP_EVENT_TITLE_CLASS: string;
+export declare const EVENT_CREATE_CLASS: string;
 /** @hidden */
-export declare const QUICK_POPUP_EVENT_CREATE_CLASS: string;
+export declare const EDIT_EVENT_CLASS: string;
 /** @hidden */
-export declare const QUICK_POPUP_EDIT_EVENT_CLASS: string;
+export declare const DELETE_EVENT_CLASS: string;
 /** @hidden */
-export declare const TOOLTIP_CLOSE_CLASS: string;
+export declare const TEXT_ELLIPSIS: string;
 /** @hidden */
-export declare const QUICK_POPUP_DELETE_EVENT_CLASS: string;
-/** @hidden */
-export declare const QUICK_POPUP_TEXT_ALIGN_CLASS: string;
-/** @hidden */
 export declare const MORE_POPUP_WRAPPER_CLASS: string;
 /** @hidden */
-export declare const SELECT_POPUP_WRAPPER_CLASS: string;
-/** @hidden */
 export declare const MORE_EVENT_POPUP_CLASS: string;
@@ -257,4 +249,2 @@ /** @hidden */
 /** @hidden */
-export declare const MORE_EVENT_CLOSE_ICON_CLASS: string;
-/** @hidden */
 export declare const MORE_EVENT_CONTENT_CLASS: string;
@@ -278,12 +268,8 @@ /** @hidden */
 /** @hidden */
-export declare const QUICK_DIALOG_HIDE_BTN_CLASS: string;
-/** @hidden */
 export declare const EVENT_WINDOW_DIALOG_CLASS: string;
 /** @hidden */
-export declare const EVENT_WINDOW_DEVICE_CLASS: string;
+export declare const FORM_CONTAINER_CLASS: string;
 /** @hidden */
-export declare const EVENT_WINDOW_FORM_DIV_CLASS: string;
+export declare const FORM_CLASS: string;
 /** @hidden */
-export declare const EVENT_WINDOW_FORM_CLASS: string;
-/** @hidden */
 export declare const EVENT_WINDOW_ALLDAY_TZ_DIV_CLASS: string;
@@ -293,4 +279,8 @@ /** @hidden */
 /** @hidden */
-export declare const EVENT_WINDOW_TZ_CLASS: string;
+export declare const TIME_ZONE_CLASS: string;
 /** @hidden */
+export declare const TIME_ZONE_ICON_CLASS: string;
+/** @hidden */
+export declare const TIME_ZONE_DETAILS_CLASS: string;
+/** @hidden */
 export declare const EVENT_WINDOW_REPEAT_DIV_CLASS: string;
@@ -302,6 +292,10 @@ /** @hidden */
 /** @hidden */
-export declare const EVENT_WINDOW_TITLE_CLASS: string;
+export declare const SUBJECT_CLASS: string;
 /** @hidden */
-export declare const EVENT_WINDOW_LOCATION_CLASS: string;
+export declare const LOCATION_CLASS: string;
 /** @hidden */
+export declare const LOCATION_ICON_CLASS: string;
+/** @hidden */
+export declare const LOCATION_DETAILS_CLASS: string;
+/** @hidden */
 export declare const EVENT_WINDOW_START_END_DIV_CLASS: string;
@@ -313,4 +307,10 @@ /** @hidden */
 /** @hidden */
-export declare const EVENT_WINDOW_DESCRIPTION_CLASS: string;
+export declare const EVENT_WINDOW_RESOURCES_DIV_CLASS: string;
 /** @hidden */
+export declare const DESCRIPTION_CLASS: string;
+/** @hidden */
+export declare const DESCRIPTION_ICON_CLASS: string;
+/** @hidden */
+export declare const DESCRIPTION_DETAILS_CLASS: string;
+/** @hidden */
 export declare const EVENT_WINDOW_TIME_ZONE_DIV_CLASS: string;
@@ -338,34 +338,48 @@ /** @hidden */
 /** @hidden */
-export declare const SELECTED_EVENT_EDIT_CLASS: string;
+export declare const EDIT_CLASS: string;
 /** @hidden */
-export declare const SELECTED_EVENT_DELETE_CLASS: string;
+export declare const EDIT_ICON_CLASS: string;
 /** @hidden */
-export declare const SELECTED_DATE_TIME_CLASS: string;
+export declare const DELETE_CLASS: string;
 /** @hidden */
-export declare const SELECTED_CALENDER_CLASS: string;
+export declare const DELETE_ICON_CLASS: string;
 /** @hidden */
-export declare const SELECTED_EVENT_TITLE_CLASS: string;
+export declare const CLOSE_CLASS: string;
 /** @hidden */
-export declare const SELECTED_EVENT_CONTAINER_CLASS: string;
+export declare const CLOSE_ICON_CLASS: string;
 /** @hidden */
-export declare const SELECTED_EVENT_CLOSE_CLASS: string;
+export declare const ERROR_VALIDATION_CLASS: string;
 /** @hidden */
-export declare const EVENT_TIME_ZONE_CLASS: string;
+export declare const EVENT_TOOLTIP_ROOT_CLASS: string;
 /** @hidden */
-export declare const EVENT_ZONE_DETAILS_CLASS: string;
+export declare const ALLDAY_ROW_ANIMATE_CLASS: string;
 /** @hidden */
-export declare const EVENT_DETAILS_CLASS: string;
+export declare const TIMESCALE_DISABLE: string;
 /** @hidden */
-export declare const EVENT_NOTE_CLASS: string;
+export declare const DISABLE_DATE: string;
 /** @hidden */
-export declare const EVENT_NOTE_DETAILS_CLASS: string;
+export declare const HIDDEN_CLASS: string;
 /** @hidden */
-export declare const EVENT_DISABLE_CLASS: string;
+export declare const POPUP_WRAPPER_CLASS: string;
 /** @hidden */
-export declare const EVENT_EDIT_DISABLE_CLASS: string;
+export declare const POPUP_TABLE_CLASS: string;
 /** @hidden */
-export declare const ERROR_VALIDATION_CLASS: string;
+export declare const RESOURCE_MENU: string;
 /** @hidden */
-export declare const EVENT_TOOLTIP_ROOT_CLASS: string;
+export declare const RESOURCE_MENU_ICON: string;
 /** @hidden */
-export declare const ALLDAY_ROW_ANIMATE_CLASS: string;
+export declare const RESOURCE_LEVEL_TITLE: string;
+/** @hidden */
+export declare const RESOURCE_TREE: string;
+/** @hidden */
+export declare const RESOURCE_TREE_POPUP_OVERLAY: string;
+/** @hidden */
+export declare const RESOURCE_TREE_POPUP: string;
+/** @hidden */
+export declare const RESOURCE_CLASS: string;
+/** @hidden */
+export declare const RESOURCE_ICON_CLASS: string;
+/** @hidden */
+export declare const RESOURCE_DETAILS_CLASS: string;
+/** @hidden */
+export declare const DATE_TIME_ICON_CLASS: string;

src/schedule/base/css-constant.js

@@ -6,3 +6,3 @@ define(["require", "exports"], function (require, exports) {
     exports.RTL = 'e-rtl';
-    exports.DEVICE = 'e-device';
+    exports.DEVICE_CLASS = 'e-device';
     exports.ICON = 'e-icons';
@@ -28,5 +28,2 @@ exports.ENABLE_CLASS = 'e-enable';
     exports.CURRENTDATE_CLASS = 'e-current-date';
-    exports.EXPANDED_CELL_CLASS = 'e-expanded';
-    exports.APPOINTMENT_ROW_CLASS = 'e-appointment-detail-row';
-    exports.APPOINTMENT_CELL_CLASS = 'e-appointment-detail-td';
     exports.CURRENT_PANEL_CLASS = 'e-current-panel';
@@ -51,5 +48,8 @@ exports.PREVIOUS_PANEL_CLASS = 'e-previous-panel';
     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';
@@ -59,6 +59,5 @@ exports.APPOINTMENT_CLASS = 'e-appointment';
     exports.APPOINTMENT_DETAILS = 'e-appointment-details';
-    exports.APPOINTMENT_SUBJECT_WRAP = 'e-subject-wrap';
-    exports.APPOINTMENT_SUBJECT = 'e-subject';
+    exports.SUBJECT_WRAP = 'e-subject-wrap';
+    exports.RESOURCE_NAME = 'e-resource-name';
     exports.APPOINTMENT_TIME = 'e-time';
-    exports.APPOINTMENT_LOCATION = 'e-location';
     exports.TABLE_WRAP_CLASS = 'e-table-wrap';
@@ -69,3 +68,7 @@ exports.OUTER_TABLE_CLASS = 'e-outer-table';
     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';
@@ -77,3 +80,6 @@ exports.DATE_HEADER_CLASS = 'e-date-header';
     exports.AGENDA_DAY_BORDER_CLASS = 'e-day-border';
-    exports.AGENDA_DATETIME_CLASS = 'e-date-time';
+    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';
@@ -92,3 +98,2 @@ exports.AGENDA_NO_EVENT_CLASS = 'e-no-event';
     exports.ALLDAY_APPOINTMENT_CLASS = 'e-all-day-appointment';
-    exports.ALLDAY_WRAPPER_CLASS = 'e-all-day-wrapper';
     exports.EVENT_COUNT_CLASS = 'e-appointment-hide';
@@ -100,28 +105,19 @@ exports.ROW_COUNT_WRAPPER_CLASS = 'e-row-count-wrapper';
     exports.MORE_INDICATOR_CLASS = 'e-more-indicator';
-    exports.APPOINTMENT_SELECTION_CLASS = 'e-appointment-selection';
-    exports.APPOINTMENT_CELL_SELECT_CLASS = 'e-appointment-cell-select';
     exports.SCHEDULE_INNER_CLASS = 'e-schedule-inner';
     exports.QUICK_POPUP_ROOT_CLASS = 'e-schedule-quick-popup';
-    exports.QUICK_POPUP_CLASS = 'e-quick-popup';
-    exports.QUICK_POPUP_SUBJECT_CLASS = 'e-quick-subject';
-    exports.QUICK_POPUP_TABLE_CLASS = 'e-quick-popup-table';
-    exports.QUICK_POPUP_ICON_CLASS = 'e-quick-popup-icon-container';
-    exports.QUICK_POPUP_CLOSE_ICON_CLASS = 'e-close-icon-container';
-    exports.QUICK_POPUP_EDIT_ICON_CLASS = 'e-edit-icon-container';
-    exports.QUICK_POPUP_CONTENT_CLASS = 'e-quick-content';
-    exports.QUICK_POPUP_RIGHT_FIELDS_CLASS = 'e-right-fields';
-    exports.QUICK_POPUP_DATE_TIME_DETAILS_CLASS = 'e-quick-date-time-details';
-    exports.DEVICE_DATE_TIME_DETAILS_CLASS = 'e-device-date-time-details';
-    exports.DEVICE_RECURRENCE_SUMMARY_CLASS = 'e-device-recurrence-summary';
-    exports.QUICK_POPUP_LOCATION_DETAILS_CLASS = 'e-quick-location-details';
-    exports.QUICK_POPUP_FOOTER_CLASS = 'e-quick-footer';
+    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.QUICK_POPUP_EVENT_TITLE_CLASS = 'e-event-title';
-    exports.QUICK_POPUP_EVENT_CREATE_CLASS = 'e-event-create';
-    exports.QUICK_POPUP_EDIT_EVENT_CLASS = 'e-event-edit';
-    exports.TOOLTIP_CLOSE_CLASS = 'e-tooltip-close';
-    exports.QUICK_POPUP_DELETE_EVENT_CLASS = 'e-event-delete';
-    exports.QUICK_POPUP_TEXT_ALIGN_CLASS = 'e-text-ellipsis';
-    exports.MORE_POPUP_WRAPPER_CLASS = 'e-more-event-popup-wrapper';
-    exports.SELECT_POPUP_WRAPPER_CLASS = 'e-select-event-popup-wrapper';
+    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';
@@ -133,3 +129,2 @@ exports.MORE_EVENT_HEADER_CLASS = 'e-more-event-header';
     exports.MORE_EVENT_CLOSE_CLASS = 'e-more-event-close';
-    exports.MORE_EVENT_CLOSE_ICON_CLASS = 'e-close-icon';
     exports.MORE_EVENT_CONTENT_CLASS = 'e-more-event-content';
@@ -144,19 +139,24 @@ exports.MORE_EVENT_WRAPPER_CLASS = 'e-more-appointment-wrapper';
     exports.QUICK_DIALOG_ALERT_BTN_CLASS = 'e-quick-dialog-alert-btn';
-    exports.QUICK_DIALOG_HIDE_BTN_CLASS = 'e-quick-dialog-hide-btn';
     exports.EVENT_WINDOW_DIALOG_CLASS = 'e-schedule-dialog';
-    exports.EVENT_WINDOW_DEVICE_CLASS = 'e-device';
-    exports.EVENT_WINDOW_FORM_DIV_CLASS = 'e-schedule-form-container';
-    exports.EVENT_WINDOW_FORM_CLASS = 'e-schedule-form';
+    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.EVENT_WINDOW_TZ_CLASS = 'e-time-zone';
+    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.EVENT_WINDOW_TITLE_CLASS = 'e-subject';
-    exports.EVENT_WINDOW_LOCATION_CLASS = 'e-location';
+    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_DESCRIPTION_CLASS = 'e-description';
+    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';
@@ -173,19 +173,26 @@ exports.EVENT_WINDOW_START_TZ_CLASS = 'e-start-time-zone';
     exports.EVENT_WINDOW_ICON_DISABLE_CLASS = 'e-icon-disable';
-    exports.SELECTED_EVENT_EDIT_CLASS = 'e-edit-icon';
-    exports.SELECTED_EVENT_DELETE_CLASS = 'e-delete-icon';
-    exports.SELECTED_DATE_TIME_CLASS = 'e-date-time-icon';
-    exports.SELECTED_CALENDER_CLASS = 'e-calendar-icon';
-    exports.SELECTED_EVENT_TITLE_CLASS = 'e-dialog-title';
-    exports.SELECTED_EVENT_CONTAINER_CLASS = 'e-event-container';
-    exports.SELECTED_EVENT_CLOSE_CLASS = 'e-event-close';
-    exports.EVENT_TIME_ZONE_CLASS = 'e-event-zone-icon';
-    exports.EVENT_ZONE_DETAILS_CLASS = 'e-event-zone-details';
-    exports.EVENT_DETAILS_CLASS = 'e-event-details';
-    exports.EVENT_NOTE_CLASS = 'e-event-note-icon';
-    exports.EVENT_NOTE_DETAILS_CLASS = 'e-event-note-details';
-    exports.EVENT_DISABLE_CLASS = 'e-event-disable';
-    exports.EVENT_EDIT_DISABLE_CLASS = 'e-event-edit-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';
 });

src/schedule/base/interface.d.ts

 import { BaseEventArgs } from '@syncfusion/ej2-base';
 import { ItemModel } from '@syncfusion/ej2-navigations';
 import { PopupType } from './type';
+import { ResourcesModel } from '../models/models';
 /**
@@ -10,2 +11,5 @@ * Interface
     date?: Date;
+    renderDates?: Date[];
+    groupOrder?: string[];
+    groupIndex?: number;
     className?: string[];
@@ -16,2 +20,11 @@ colSpan?: number;
     text?: string;
+    resourceLevelIndex?: number;
+    resource?: ResourcesModel;
+    resourceData?: {
+        [key: string]: Object;
+    };
+    startHour?: Date;
+    endHour?: Date;
+    workDays?: number[];
+    cssClass?: string;
 }
@@ -32,3 +45,3 @@ /** @hidden */
     /** Returns the appropriate data based on the action. */
-    data?: object;
+    data?: Object;
 }
@@ -54,2 +67,4 @@ export interface ToolbarActionArgs extends BaseEventArgs {
     event?: Event;
+    /** Returns the group index of the cell. */
+    groupIndex?: number;
 }
@@ -77,2 +92,4 @@ export interface EventClickArgs extends BaseEventArgs {
     element: HTMLElement;
+    /** Defines the cancel option. */
+    cancel: boolean;
 }
@@ -90,2 +107,7 @@ export interface PopupOpenEventArgs extends BaseEventArgs {
     cancel: boolean;
+    /** Allows to specify the time duration to be used on editor window,
+     *  based on which the start and end time fields will display the time values. By default, it
+     *  will be processed based on the `interval` value within the `timeScale` property.
+     */
+    duration?: number;
 }
@@ -113,2 +135,4 @@ export interface NavigatingEventArgs extends BaseEventArgs {
     date?: Date;
+    /** Returns the group index of the cell. */
+    groupIndex?: number;
 }
@@ -126,3 +150,12 @@ /** @hidden */
     type: string;
+    groupIndex?: number;
 }
+export interface ResourceDetails {
+    /** Returns the resource model data such as the field mapping options used within it. */
+    resource: ResourcesModel;
+    /** Returns the child resource data. */
+    resourceData: {
+        [key: string]: Object;
+    };
+}
 /** @hidden */
@@ -138,2 +171,3 @@ export interface CrudArgs extends ActionEventArgs {
     isInverseTableSelect: boolean;
+    isCurrentDate(date: Date): boolean;
     startDate(): Date;
@@ -150,8 +184,11 @@ endDate(): Date;
     removeEventListener?(): void;
-    getRenderDates?(): void;
+    getRenderDates?(workDays?: number[]): Date[];
+    getDateSlots(renderDates: Date[], workDays: number[]): TdData[];
     getNextPreviousDate?(type: string): Date;
     renderLayout(type: string): void;
+    renderResourceMobileLayout(): void;
     setPanel(panel: HTMLElement): void;
     getPanel(): HTMLElement;
     adjustEventWrapper(): void;
+    generateColumnLevels(): TdData[][];
     destroy(): void;
@@ -212,5 +249,7 @@ }
     day: number;
+    dayIndex: number;
     record: {
         [key: string]: Object;
     };
+    resource: number;
 }
@@ -229,2 +268,10 @@ /** @hidden */
     top?: number;
+    isGroupAdaptive?: boolean;
+    groupIndex?: number;
 }
+/** @hidden */
+export interface TreeViewArgs {
+    resourceChild?: TreeViewArgs[];
+    resourceId?: string;
+    resourceName?: string;
+}

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

@@ -1,2 +0,2 @@
-import { Component, ModuleDeclaration, Property, Event, Animation } 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, remove, createElement } from '@syncfusion/ej2-base';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 { Crud } from '../actions/crud';import { WorkHoursModel, ViewsModel, EventSettingsModel } from '../models/models';import { EventSettings } from '../models/event-settings';import { IRenderer, ActionEventArgs, NavigatingEventArgs, CellClickEventArgs, RenderCellEventArgs, ScrollCss } from '../base/interface';import { EventFieldsMapping, EventClickArgs, EventRenderedArgs, PopupOpenEventArgs, UIStateArgs, NotifyEventArgs } from '../base/interface';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, remove, createElement } 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, NotifyEventArgs } 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';
@@ -91,3 +91,3 @@
      *  this property. It usually accepts the integer values, whereby 0 is always denoted as Sunday, 1 as Monday and so on.
-     * @default '0'
+     * @default 0
      */
@@ -100,2 +100,3 @@ firstDayOfWeek?: number;
      * @default '[1, 2, 3, 4, 5]'
+     * @aspType int[]
      */
@@ -126,2 +127,9 @@ workDays?: number[];
     /**
+     * Allows to set different time duration on Schedule along with the customized grid count. It also has template option to
+     *  customize the time slots with required time values in its own format.
+     * @default { enable: true, interval: 60, slotCount: 2, majorSlotTemplate: null, minorSlotTemplate: null }
+     */
+    timeScale?: TimeScaleModel;
+
+    /**
      * When set to `true`, allows the keyboard interaction to take place on Schedule.
@@ -170,3 +178,3 @@ * @default true
      *  the number of days will be fetched on each scroll-end based on this count.
-     * @default '7'
+     * @default 7
      */
@@ -200,2 +208,24 @@ agendaDaysCount?: number;
     /**
+     * Template option to customize the resource header bar. Here, the template accepts either
+     *  the string or HTMLElement as template design and then the parsed design is displayed onto the resource header cells.
+     *  All the resource fields can be accessible via template.
+     * @default null
+     */
+    resourceHeaderTemplate?: string;
+
+    /**
+     * Allows defining the group related settings of multiple resources. When this property is non-empty, it means
+     *  that the resources will be grouped on the schedule layout based on the provided resource names.
+     * @default {}
+     */
+    group?: GroupModel;
+
+    /**
+     * Allows defining the collection of resources to be displayed on the Schedule. The resource collection needs to be defined
+     *  with unique resource names to identify it along with the respective dataSource and field mapping options.
+     * @default []
+     */
+    resources?: ResourcesModel[];
+
+    /**
      * It is used to customize the Schedule which accepts custom CSS class names that defines specific user-defined styles and themes
@@ -275,3 +305,3 @@ *  to be applied on the Schedule element.
     /**
-     * Triggers after each of the event gets rendered on the Schedule user interface.
+     * Triggers before each of the event getting rendered on the Schedule user interface.
      * @event
@@ -278,0 +308,0 @@ */

src/schedule/base/schedule.d.ts

@@ -23,5 +23,7 @@ import { Component, ModuleDeclaration } from '@syncfusion/ej2-base';
 import { Crud } from '../actions/crud';
-import { WorkHoursModel, ViewsModel, EventSettingsModel } from '../models/models';
+import { WorkHoursModel, ViewsModel, EventSettingsModel, GroupModel, ResourcesModel, TimeScaleModel } from '../models/models';
 import { IRenderer, ActionEventArgs, NavigatingEventArgs, CellClickEventArgs, RenderCellEventArgs } from '../base/interface';
 import { EventFieldsMapping, EventClickArgs, EventRenderedArgs, PopupOpenEventArgs, UIStateArgs } from '../base/interface';
+import { ResourceDetails } from '../base/interface';
+import { ResourceBase } from '../base/resource';
 /**
@@ -57,7 +59,11 @@ * Represents the Schedule component that displays a list of events scheduled against specific date and timings,
     eventBase: EventBase;
+    resourceBase: ResourceBase;
     private cellTemplateFn;
     private dateHeaderTemplateFn;
+    private majorSlotTemplateFn;
+    private minorSlotTemplateFn;
     private appointmentTemplateFn;
     private eventTooltipTemplateFn;
     private editorTemplateFn;
+    private resourceHeaderTemplateFn;
     private defaultLocale;
@@ -71,6 +77,9 @@ dayModule: Day;
     viewOptions: {
-        [key: string]: ViewsModel;
+        [key: string]: ViewsModel[];
     };
+    viewCollections: ViewsModel[];
+    viewIndex: number;
     activeViewOptions: ViewsModel;
     eventFields: EventFieldsMapping;
+    editorTitles: EventFieldsMapping;
     eventsData: Object[];
@@ -82,2 +91,3 @@ eventsProcessed: Object[];
     uiStateValues: UIStateArgs;
+    timeFormat: string;
     /**
@@ -156,3 +166,3 @@ * Sets the `width` of the Schedule component, accepting both string and number values.
      *  this property. It usually accepts the integer values, whereby 0 is always denoted as Sunday, 1 as Monday and so on.
-     * @default '0'
+     * @default 0
      */
@@ -164,2 +174,3 @@ firstDayOfWeek: number;
      * @default '[1, 2, 3, 4, 5]'
+     * @aspType int[]
      */
@@ -186,2 +197,8 @@ workDays: number[];
     /**
+     * Allows to set different time duration on Schedule along with the customized grid count. It also has template option to
+     *  customize the time slots with required time values in its own format.
+     * @default { enable: true, interval: 60, slotCount: 2, majorSlotTemplate: null, minorSlotTemplate: null }
+     */
+    timeScale: TimeScaleModel;
+    /**
      * When set to `true`, allows the keyboard interaction to take place on Schedule.
@@ -224,3 +241,3 @@ * @default true
      *  the number of days will be fetched on each scroll-end based on this count.
-     * @default '7'
+     * @default 7
      */
@@ -250,2 +267,21 @@ agendaDaysCount: number;
     /**
+     * Template option to customize the resource header bar. Here, the template accepts either
+     *  the string or HTMLElement as template design and then the parsed design is displayed onto the resource header cells.
+     *  All the resource fields can be accessible via template.
+     * @default null
+     */
+    resourceHeaderTemplate: string;
+    /**
+     * Allows defining the group related settings of multiple resources. When this property is non-empty, it means
+     *  that the resources will be grouped on the schedule layout based on the provided resource names.
+     * @default {}
+     */
+    group: GroupModel;
+    /**
+     * Allows defining the collection of resources to be displayed on the Schedule. The resource collection needs to be defined
+     *  with unique resource names to identify it along with the respective dataSource and field mapping options.
+     * @default []
+     */
+    resources: ResourcesModel[];
+    /**
      * It is used to customize the Schedule which accepts custom CSS class names that defines specific user-defined styles and themes
@@ -313,3 +349,3 @@ *  to be applied on the Schedule element.
     /**
-     * Triggers after each of the event gets rendered on the Schedule user interface.
+     * Triggers before each of the event getting rendered on the Schedule user interface.
      * @event
@@ -343,3 +379,6 @@ */
     render(): void;
+    private initializeResources(isSetModel?);
+    renderElements(isLayoutOnly: boolean): void;
     private validateDate();
+    private getViewIndex(viewName);
     private setViewOptions(isModuleLoad?);
@@ -352,3 +391,5 @@ private getActiveViewOptions(viewName);
     getDayNames(type: string): string[];
-    changeView(view: View, event?: Event, muteOnChange?: boolean): void;
+    private setCldrTimeFormat();
+    getTimeString(date: Date): string;
+    changeView(view: View, event?: Event, muteOnChange?: boolean, index?: number): void;
     changeDate(selectedDate: Date, event?: Event): void;
@@ -385,5 +426,8 @@ isSelectedDate(date: Date): boolean;
     getDateHeaderTemplate(): Function;
+    getMajorSlotTemplate(): Function;
+    getMinorSlotTemplate(): Function;
     getAppointmentTemplate(): Function;
     getEventTooltipTemplate(): Function;
     getEditorTemplate(): Function;
+    getResourceHeaderTemplate(): Function;
     private onDocumentClick(args);
@@ -415,2 +459,10 @@ private onScheduleResize(args);
     /**
+     * Allows to show the spinner on schedule at the required scenarios.
+     */
+    showSpinner(): void;
+    /**
+     * When the spinner is shown manually using `showSpinner` method, it can be hidden using this `hideSpinner` method.
+     */
+    hideSpinner(): void;
+    /**
      * Sets different working hours on the required working days by accepting the required start and end time as well as the date collection
@@ -422,5 +474,6 @@ *  as its parameters.
      * @param {string} end Defines the work end hour.
+     * @param {number} groupIndex Defines the resource index from last level.
      * @returns {void}
      */
-    setWorkHours(dates: Date[], start: string, end: string): void;
+    setWorkHours(dates: Date[], start: string, end: string, groupIndex?: number): void;
     /**
@@ -435,2 +488,8 @@ * Retrieves the start and end time information of the specific cell element.
     /**
+     * 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.
+     */
+    getResourcesByIndex(index: number): ResourceDetails;
+    /**
      * Scrolls the Schedule content area to the specified time.
@@ -499,2 +558,8 @@ * @method scrollTo
     /**
+     * Retrieves the dates that lies on active view of Schedule.
+     * @method getCurrentViewDates
+     * @returns {Date[]} Returns the collection of dates.
+     */
+    getCurrentViewDates(): Object[];
+    /**
      * Retrieves the events that lies on the current date range of the active view of Schedule.
@@ -506,3 +571,3 @@ * @method getCurrentViewEvents
     /**
-     * Refreshes the event dataSource. This method may be useful when the events alone in the Schedule needs to be re-rendered.
+     * Refreshes the event dataSource. This method may be useful when the events alone in the schedule needs to be re-rendered.
      * @method refreshEvents
@@ -513,3 +578,3 @@ * @returns {void}
     /**
-     * To get the appointment object from element.
+     * To retrieve the appointment object from element.
      * @method getEventDetails
@@ -525,5 +590,6 @@ * @param {Element} element Denotes the event UI element on the Schedule.
      * @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.
      */
-    isSlotAvailable(startTime: Date, endTime: Date): boolean;
+    isSlotAvailable(startTime: Date, endTime: Date, groupIndex?: number): boolean;
     /**
@@ -547,2 +613,15 @@ * To manually open the event editor on specific time or on certain events.
     /**
+     * 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.
+     */
+    addResource(resources: Object, name: string, index: number): void;
+    /**
+     * 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.
+     */
+    removeResource(resourceId: string | number, name: string): void;
+    /**
      * Destroys the Schedule component.
@@ -549,0 +628,0 @@ * @method destroy

src/schedule/base/schedule.js

@@ -17,3 +17,3 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../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", "../actions/crud", "../models/event-settings", "../base/constant", "../base/css-constant", "../base/util"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_base_4, 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, crud_1, event_settings_1, events, cls, util) {
+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";
@@ -35,6 +35,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
             if (this.isAdaptive) {
-                ej2_base_4.addClass([this.element], cls.DEVICE);
+                ej2_base_4.addClass([this.element], cls.DEVICE_CLASS);
             }
             else {
-                ej2_base_4.removeClass([this.element], cls.DEVICE);
+                ej2_base_4.removeClass([this.element], cls.DEVICE_CLASS);
             }
@@ -47,5 +47,27 @@ if (this.cssClass) {
             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) {
@@ -58,5 +80,2 @@ this.headerModule = new header_renderer_1.HeaderRenderer(this);
             }
-            this.renderModule = new renderer_1.Render(this);
-            this.eventBase = new event_base_1.EventBase(this);
-            this.initializeDataModule();
             this.initializeView(this.currentView);
@@ -69,7 +88,19 @@ this.initializePopups();
         };
+        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++) {
@@ -80,2 +111,6 @@ var view = _a[_i];
                     viewName = view;
+                    if (this.currentView === viewName) {
+                        selectedView = viewName;
+                        this.viewIndex = count;
+                    }
                 }
@@ -86,2 +121,3 @@ else {
                         selectedView = viewName;
+                        this.viewIndex = count;
                     }
@@ -91,3 +127,10 @@ }
                 var fieldViewName = viewName.charAt(0).toLowerCase() + viewName.slice(1);
-                this.viewOptions[fieldViewName] = obj;
+                this.viewCollections.push(obj);
+                if (ej2_base_3.isNullOrUndefined(this.viewOptions[fieldViewName])) {
+                    this.viewOptions[fieldViewName] = [obj];
+                }
+                else {
+                    this.viewOptions[fieldViewName].push(obj);
+                }
+                count++;
             }
@@ -97,4 +140,22 @@ if (!isModuleLoad && selectedView) {
             }
+            if (this.viewIndex === -1) {
+                var currentIndex = this.getViewIndex(this.currentView);
+                this.viewIndex = (currentIndex === -1) ? 0 : currentIndex;
+            }
         };
         Schedule.prototype.getActiveViewOptions = function (viewName) {
+            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 = {
@@ -111,10 +172,15 @@ dateFormat: this.dateFormat,
                 dateHeaderTemplate: this.dateHeaderTemplate,
+                resourceHeaderTemplate: this.resourceHeaderTemplate,
                 workDays: this.workDays,
-                showWeekend: this.showWeekend
+                showWeekend: this.showWeekend,
+                displayName: null,
+                interval: 1,
+                timeScale: timeScale,
+                group: group
             };
-            return ej2_base_3.extend(scheduleOptions, this.viewOptions[viewName.charAt(0).toLowerCase() + viewName.slice(1)]);
+            return ej2_base_3.extend(scheduleOptions, this.viewCollections[this.viewIndex], undefined, true);
         };
         Schedule.prototype.initializeDataModule = function () {
             this.eventFields = {
-                id: this.eventSettings.fields.id.name,
+                id: this.eventSettings.fields.id,
                 subject: this.eventSettings.fields.subject.name,
@@ -130,4 +196,15 @@ startTime: this.eventSettings.fields.startTime.name,
                 recurrenceRule: this.eventSettings.fields.recurrenceRule.name,
-                recurrenceException: this.eventSettings.fields.recurrenceException.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);
@@ -137,3 +214,7 @@ this.crudModule = new crud_1.Crud(this);
         Schedule.prototype.initializeView = function (viewName) {
+            this.showSpinner();
             this.activeViewOptions = this.getActiveViewOptions(viewName);
+            if (this.resourceBase) {
+                this.resourceBase.setResourceCollection();
+            }
             this.initializeTemplates();
@@ -145,3 +226,6 @@ this.renderModule.render(viewName);
             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);
         };
@@ -170,6 +254,21 @@ Schedule.prototype.initializePopups = function () {
         };
-        Schedule.prototype.changeView = function (view, event, muteOnChange) {
-            if (!muteOnChange && view === this.currentView) {
+        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));
+            }
+        };
+        Schedule.prototype.getTimeString = function (date) {
+            return this.globalize.formatDate(date, { format: this.timeFormat, type: 'time' });
+        };
+        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 };
@@ -238,4 +337,5 @@ this.trigger(events.actionBegin, args);
             this.globalize = new ej2_base_2.Internationalization(this.locale);
-            this.uiStateValues = { expand: false, isInitial: true, left: 0, top: 0 };
+            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 = {
@@ -252,2 +352,3 @@ day: 'Day',
                 noEvents: 'No events',
+                emptyContainer: 'There are no events scheduled on this day.',
                 allDay: 'All day',
@@ -262,2 +363,3 @@ start: 'Start',
                 deleteEvent: 'Delete Event',
+                deleteMultipleEvent: 'Delete Multiple Events',
                 selectedItems: 'Items selected',
@@ -276,2 +378,3 @@ deleteSeries: 'Delete 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',
@@ -289,2 +392,10 @@ title: 'Title',
                 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',
@@ -295,5 +406,10 @@ repeats: 'Repeats',
                 invalidDateError: 'The entered date value is invalid.',
-                ok: 'Ok'
+                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 = [];
@@ -342,3 +458,3 @@ this.eventsProcessed = [];
         Schedule.prototype.getContentTable = function () {
-            return this.element.querySelector('.' + cls.CONTENT_TABLE_CLASS);
+            return this.element.querySelector('.' + cls.CONTENT_TABLE_CLASS + ' tbody');
         };
@@ -353,3 +469,3 @@ Schedule.prototype.getWorkCellElements = function () {
             if (this.currentView === 'Month' || td.classList.contains(cls.ALLDAY_CELLS_CLASS) ||
-                td.classList.contains(cls.HEADER_CELLS_CLASS)) {
+                td.classList.contains(cls.HEADER_CELLS_CLASS) || !this.activeViewOptions.timeScale.enable) {
                 return true;
@@ -372,2 +488,8 @@ }
         };
+        Schedule.prototype.getMajorSlotTemplate = function () {
+            return this.majorSlotTemplateFn;
+        };
+        Schedule.prototype.getMinorSlotTemplate = function () {
+            return this.minorSlotTemplateFn;
+        };
         Schedule.prototype.getAppointmentTemplate = function () {
@@ -382,2 +504,5 @@ return this.appointmentTemplateFn;
         };
+        Schedule.prototype.getResourceHeaderTemplate = function () {
+            return this.resourceHeaderTemplateFn;
+        };
         Schedule.prototype.onDocumentClick = function (args) {
@@ -387,5 +512,9 @@ this.notify(events.documentClick, { event: args });
         Schedule.prototype.onScheduleResize = function (args) {
+            if (this.quickPopup) {
+                this.quickPopup.onClosePopup();
+            }
             if (this.currentView === 'Month') {
                 this.notify(events.dataReady, {});
             }
+            this.adjustEventWrapper();
         };
@@ -409,3 +538,3 @@ Schedule.prototype.templateParser = function (template) {
             ej2_base_2.EventHandler.remove(window, resize, this.onScheduleResize);
-            ej2_base_2.EventHandler.remove(document, 'click', this.onDocumentClick);
+            ej2_base_2.EventHandler.remove(document, ej2_base_2.Browser.touchStartEvent, this.onDocumentClick);
             if (this.keyboardInteractionModule) {
@@ -474,2 +603,3 @@ this.keyboardInteractionModule.destroy();
                     case 'locale':
+                        this.setCldrTimeFormat();
                         this.refresh();
@@ -484,3 +614,5 @@ break;
                     case 'showTimeIndicator':
-                        this.activeView.highlightCurrentTime();
+                        if (this.activeViewOptions.timeScale.enable) {
+                            this.activeView.highlightCurrentTime();
+                        }
                         break;
@@ -497,5 +629,2 @@ case 'cellTemplate':
                         break;
-                    case 'eventSettings':
-                        this.onEventSettingsPropertyChanged(newProp.eventSettings, oldProp.eventSettings);
-                        break;
                     case 'timezone':
@@ -540,2 +669,5 @@ this.eventBase.timezonePropertyChange(oldProp.timezone);
                     break;
+                case 'eventSettings':
+                    this.onEventSettingsPropertyChanged(newProp.eventSettings, oldProp.eventSettings);
+                    break;
                 case 'allowKeyboardInteraction':
@@ -556,2 +688,14 @@ if (this.keyboardInteractionModule) {
                     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;
             }
@@ -587,2 +731,8 @@ };
                         break;
+                    case 'resourceColorField':
+                        if (this.resourceBase) {
+                            this.resourceBase.setResourceCollection();
+                        }
+                        requireRefresh = true;
+                        break;
                 }
@@ -594,3 +744,9 @@ }
         };
-        Schedule.prototype.setWorkHours = function (dates, start, end) {
+        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' });
@@ -611,4 +767,4 @@ var endHour = this.globalize.parseDate(end, { skeleton: 'Hm' });
             }
-            var msMajorInterval = 60 * util.MS_PER_MINUTE;
-            var msInterval = msMajorInterval / 2;
+            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);
@@ -620,6 +776,16 @@ var endIndex = Math.ceil((util.getDateInMs(endHour) - util.getDateInMs(viewStartHour)) / msInterval);
                 util.resetTime(date);
-                var colIndex = this.getIndexOfDate(this.activeView.renderDates, date);
+                var renderDates = this.activeView.renderDates;
+                if (!ej2_base_3.isNullOrUndefined(groupIndex) && this.resourceBase) {
+                    renderDates = this.resourceBase.lastResourceLevel[groupIndex].renderDates;
+                }
+                var colIndex = this.getIndexOfDate(renderDates, date);
                 if (colIndex >= 0) {
                     for (var i = startIndex; i < endIndex; i++) {
-                        cells.push(tableEle.rows[i].cells[colIndex]);
+                        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]);
+                        }
                     }
@@ -632,4 +798,8 @@ }
             var startTime = this.getDateFromElement(td);
+            if (ej2_base_3.isNullOrUndefined(startTime)) {
+                return undefined;
+            }
             var endTime;
-            if (td.classList.contains(cls.ALLDAY_CELLS_CLASS) || td.classList.contains(cls.HEADER_CELLS_CLASS)) {
+            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);
@@ -646,4 +816,18 @@ }
             };
+            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 data = this.resourceBase.lastResourceLevel[index];
+                return { resource: data.resource, resourceData: data.resourceData };
+            }
+            return undefined;
+        };
         Schedule.prototype.scrollTo = function (hour) {
@@ -674,2 +858,5 @@ if (this.activeView.scrollToHour) {
         };
+        Schedule.prototype.getCurrentViewDates = function () {
+            return this.activeView.renderDates;
+        };
         Schedule.prototype.getCurrentViewEvents = function () {
@@ -688,5 +875,8 @@ return this.eventsProcessed;
         };
-        Schedule.prototype.isSlotAvailable = function (startTime, endTime) {
-            var getAvailableObject = this.eventBase.filterEvents(startTime, endTime);
-            return (getAvailableObject.length) ? false : true;
+        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;
         };
@@ -699,8 +889,16 @@ Schedule.prototype.openEditor = function (data, action) {
         };
+        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;
             }
@@ -714,2 +912,3 @@ this.unwireEvents();
                 this.scrollModule.destroy();
+                this.scrollModule = null;
             }
@@ -723,2 +922,3 @@ if (this.activeView) {
                 this.scheduleTouchModule.destroy();
+                this.scheduleTouchModule = null;
             }
@@ -772,2 +972,5 @@ _super.prototype.destroy.call(this);
         __decorate([
+            ej2_base_3.Complex({}, time_scale_1.TimeScale)
+        ], Schedule.prototype, "timeScale", void 0);
+        __decorate([
             ej2_base_1.Property(true)
@@ -804,2 +1007,11 @@ ], Schedule.prototype, "allowKeyboardInteraction", void 0);
             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);
@@ -806,0 +1018,0 @@ __decorate([

src/schedule/base/type.d.ts

 /**
  * types
  */
+/**
+ * An enum type that denotes the view mode of the schedule. Available options are as follows
+ * * Day
+ * * Week
+ * * WorkWeek
+ * * Month
+ * * Agenda
+ * * MonthAgenda
+ */
 export declare type View = 'Day' | 'Week' | 'WorkWeek' | 'Month' | 'Agenda' | 'MonthAgenda';
@@ -11,2 +20,2 @@ export declare type CurrentAction = 'Add' | 'Save' | 'Delete' | 'DeleteOccurrence' | 'DeleteSeries' | 'EditOccurrence' | 'EditSeries';
 };
-export declare type PopupType = 'Editor' | 'EventContainer' | 'QuickInfo' | 'RecurrenceAlert' | 'DeleteAlert' | 'ViewEventInfo' | 'EditEventInfo' | 'ValidationAlert';
+export declare type PopupType = 'Editor' | 'EventContainer' | 'QuickInfo' | 'RecurrenceAlert' | 'DeleteAlert' | 'ViewEventInfo' | 'EditEventInfo' | 'ValidationAlert' | 'RecurrenceValidationAlert';

src/schedule/base/util.d.ts

@@ -22,3 +22,7 @@ /**
 export declare function getDaysCount(startDate: number, endDate: number): number;
+export declare function getDateFromString(date: string): Date;
 /** @hidden */
 export declare function getScrollBarWidth(): number;
+export declare function findIndexInData(data: {
+    [key: string]: Object;
+}[], property: string, value: string): number;

src/schedule/base/util.js

@@ -96,2 +96,7 @@ define(["require", "exports"], function (require, exports) {
     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;
@@ -111,2 +116,11 @@ function getScrollBarWidth() {
     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;
 });

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

@@ -1,9 +0,6 @@
-import { L10n } from '@syncfusion/ej2-base';
+import { ViewBase } from '../renderer/view-base';
 import { Schedule } from '../base/schedule';
-/**
- * AgendaBase for event rendering
- */
 export declare class AgendaBase {
     parent: Schedule;
-    l10n: L10n;
+    viewBase: ViewBase;
     /**
@@ -15,3 +12,3 @@ * Constructor for AgendaBase
         [key: string]: Object;
-    }[], aTd: Element): Element;
+    }[], aTd: Element, groupOrder?: string[], groupIndex?: number): Element;
     createAppointment(event: {
@@ -22,2 +19,7 @@ [key: string]: Object;
     wireEventActions(): void;
+    calculateResourceTableElement(tBody: Element, noOfDays: number, agendaDate: Date): void;
+    private createResourceTableRow(tContent, tBody);
+    createDateHeaderElement(date: Date): Element;
+    renderEmptyContent(tBody: Element, agendaDate: Date): void;
+    createTableRowElement(date: Date, type: string): Element;
 }

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

@@ -1,2 +0,2 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-lists", "../base/util", "../base/css-constant", "../base/constant"], function (require, exports, ej2_base_1, ej2_lists_1, util, cls, event) {
+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";
@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
             this.parent = parent;
-            this.l10n = this.parent.localeObj;
+            this.viewBase = new view_base_1.ViewBase(parent);
         }
-        AgendaBase.prototype.createAgendaContentElement = function (type, listData, aTd) {
+        AgendaBase.prototype.createAgendaContentElement = function (type, listData, aTd, groupOrder, groupIndex) {
             var listElement;
             if (type === 'noEvents') {
-                var noEvents = [{ 'subject': this.l10n.getConstant('noEvents') }];
+                var noEvents = [{ 'subject': this.parent.localeObj.getConstant('noEvents') }];
                 listElement = ej2_lists_1.ListBase.createList(noEvents, {
@@ -37,6 +37,10 @@ moduleName: 'agenda',
                             'aria-grabbed': 'true',
-                            'aria-label': ej2_base_1.isNullOrUndefined(listData[li][this.parent.eventFields.subject]) ?
-                                this.parent.eventSettings.fields.subject.default : listData[li][this.parent.eventFields.subject]
+                            '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;
@@ -51,8 +55,14 @@ if (!ej2_base_1.isNullOrUndefined(this.parent.activeViewOptions.eventTemplate)) {
                     listElement.children[li].innerHTML = appWrapper.outerHTML;
-                    var args = { data: listData[li], element: listElement.children[li] };
+                    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]);
+                    }
                 }
             }
             aTd.appendChild(listElement);
-            ej2_base_1.addClass([aTd], cls.AGENDA_DAY_BORDER_CLASS);
+            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;
@@ -62,5 +72,5 @@ };
             var fieldMapping = this.parent.eventFields;
-            var recordSubject = ej2_base_1.isNullOrUndefined(event[fieldMapping.subject]) ?
-                this.parent.eventSettings.fields.subject.default : event[fieldMapping.subject];
-            var appSubjectWrap = ej2_base_1.createElement('div', { className: cls.APPOINTMENT_SUBJECT_WRAP });
+            var recordSubject = (event[fieldMapping.subject] || this.parent.eventSettings.fields.subject.default ||
+                this.parent.localeObj.getConstant('addTitle'));
+            var appSubjectWrap = ej2_base_1.createElement('div', { className: cls.SUBJECT_WRAP });
             if (!ej2_base_1.isNullOrUndefined(event[fieldMapping.location]) && event[fieldMapping.location] !== '') {
@@ -70,3 +80,3 @@ recordSubject += ',';
             appSubjectWrap.appendChild(ej2_base_1.createElement('div', {
-                className: cls.APPOINTMENT_SUBJECT,
+                className: cls.SUBJECT_CLASS,
                 innerHTML: recordSubject
@@ -76,3 +86,3 @@ }));
                 appSubjectWrap.appendChild(ej2_base_1.createElement('div', {
-                    className: cls.APPOINTMENT_LOCATION,
+                    className: cls.LOCATION_CLASS,
                     innerHTML: event[fieldMapping.location]
@@ -89,12 +99,11 @@ }));
             var isAllDay = event[fieldMapping.isAllDay];
-            var allDayStr = this.l10n.getConstant('allDay');
-            var timeStr = this.parent.globalize.formatDate(strDate, { skeleton: 'hm' }) + ' - ' +
-                this.parent.globalize.formatDate(endDate, { skeleton: 'hm' });
+            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.l10n.getConstant('day') + ' ' + event.data.index + '/' +
-                    event.data.count + ')';
+                allDayStr = eventString + ' (' + this.parent.localeObj.getConstant('day') + ' '
+                    + event.data.index + '/' + event.data.count + ')';
             }
             var appDateTime = ej2_base_1.createElement('div', {
-                className: cls.AGENDA_DATETIME_CLASS,
+                className: cls.DATE_TIME_CLASS,
                 innerHTML: (!ej2_base_1.isNullOrUndefined(event.data) || isAllDay) ? allDayStr : timeStr
@@ -125,2 +134,225 @@ });
         };
+        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++;
+                                }
+                                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;
+                                }
+                            }
+                        }
+                    }
+                    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;
+                                }
+                            }
+                        }
+                    }
+                    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);
+            }
+        };
+        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]);
+                }
+                if (parentCollection.length > 0) {
+                    level = 'parentColumnLevel_' + parentCollection.length.toString();
+                }
+                else {
+                    level = '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;
+                }
+            }
+            for (var row = 0; row < tContent.length; row++) {
+                ntr = tr.cloneNode();
+                for (var col = tContent[row].length - 1; col >= 0; col--) {
+                    var className = void 0;
+                    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));
+                        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);
+                    }
+                    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') {
+                            className = [cls.AGENDA_CELLS_CLASS, cls.AGENDA_DAY_PADDING_CLASS];
+                            ej2_base_1.addClass([ntd], className);
+                        }
+                        ntr.appendChild(ntd);
+                    }
+                    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);
+                    }
+                }
+                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));
+                    var className = [cls.AGENDA_CELLS_CLASS, cls.AGENDA_DATE_CLASS, cls.DATE_BORDER_CLASS];
+                    ej2_base_1.addClass([ntd], className);
+                    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="' +
+                        parseInt(ntr.getAttribute('aria-rowindex'), 10) + '"]')) {
+                        break;
+                    }
+                    ntr.insertBefore(ntd, ntr.childNodes[0]);
+                }
+                tBody.appendChild(ntr);
+            }
+        };
+        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);
+            }
+            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 = 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;
@@ -127,0 +359,0 @@ }());

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

@@ -1,2 +0,2 @@
-import { EventClickArgs } from '../base/interface';
+import { EventClickArgs, TdData } from '../base/interface';
 import { Timezone } from '../timezone/timezone';
@@ -11,2 +11,4 @@ import { Schedule } from '../base/schedule';
     slots: Object[];
+    cssClass: string;
+    groupOrder: string[];
     /**
@@ -22,3 +24,4 @@ * Constructor for EventBase
     private processTimezone(event);
-    filterEvents(startDate: Date, endDate: Date, collection?: Object[]): Object[];
+    filterEvents(startDate: Date, endDate: Date, appointments?: Object[], resourceTdData?: TdData): Object[];
+    filterEventsByResource(resourceTdData: TdData, appointments?: Object[]): Object[];
     sortByTime(appointments: Object[]): Object[];
@@ -44,2 +47,5 @@ sortByDateTime(appointments: Object[]): Object[];
     selectWorkCellByTime(eventsData: Object[]): Element;
+    getGroupIndexFromEvent(eventData: {
+        [key: string]: Object;
+    }): number;
     isAllDayAppointment(event: {
@@ -67,2 +73,5 @@ [key: string]: Object;
     getOccurrencesByRange(startTime: Date, endTime: Date): Object[];
+    applyResourceColor(element: HTMLElement, eventData: {
+        [key: string]: Object;
+    }, type: string, groupOrder?: string[], alpha?: string): void;
 }

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

@@ -26,2 +26,8 @@ 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) {
                 }
+                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) {
@@ -81,4 +87,4 @@ this.processTimezoneChange(event_1, oldTimezone);
         };
-        EventBase.prototype.filterEvents = function (startDate, endDate, collection) {
-            var appointments = !ej2_base_1.isNullOrUndefined(collection) ? collection : this.parent.eventsProcessed;
+        EventBase.prototype.filterEvents = function (startDate, endDate, appointments, resourceTdData) {
+            if (appointments === void 0) { appointments = this.parent.eventsProcessed; }
             var fieldMapping = this.parent.eventFields;
@@ -91,4 +97,19 @@ var predicate = new ej2_data_1.Predicate(fieldMapping.startTime, 'greaterthanorequal', 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);
+            }
             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;
+            }
+            return new ej2_data_1.DataManager({ json: appointments }).executeLocal(new ej2_data_1.Query().where(predicate));
+        };
         EventBase.prototype.sortByTime = function (appointments) {
@@ -189,3 +210,4 @@ var fieldMapping = this.parent.eventFields;
                     }
-                    if (this.parent.activeViewOptions.showWeekend && this.parent.currentView !== 'WorkWeek') {
+                    if (!this.parent.activeViewOptions.group.byDate && this.parent.activeViewOptions.showWeekend &&
+                        this.parent.currentView !== 'WorkWeek') {
                         var startIndex = slot.indexOf(cStart);
@@ -214,6 +236,13 @@ if (startIndex !== -1) {
                             if (availSlot.length > 0) {
-                                var cnt = availSlot.length;
-                                var isLeft = (availSlot[0] !== orgStart);
-                                var isRight = (availSlot[availSlot.length - 1] !== orgEnd);
-                                ranges.push(this.cloneEventObject(event, availSlot[0], availSlot[availSlot.length - 1], cnt, isLeft, isRight));
+                                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)));
+                                    }
+                                }
                             }
@@ -293,2 +322,5 @@ }
             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);
+            }
         };
@@ -341,3 +373,7 @@ EventBase.prototype.addSelectedAppointments = function (cells, focusCell) {
                 }
-                target = targetArea.querySelector('[data-date="' + nearestTime + '"]');
+                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) {
@@ -353,2 +389,24 @@ this.parent.activeCellsData = this.parent.getCellDetails(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) {
@@ -380,2 +438,3 @@ var fieldMapping = this.parent.eventFields;
             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));
@@ -393,7 +452,9 @@ this.parent.keyboardInteractionModule.onAppointmentSelection(eventData);
             }
+            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.quickPopup.animation = { close: { effect: 'None' } };
-            this.parent.quickPopup.quickPopup.close();
+            this.parent.quickPopup.quickPopupHide(true);
             if (e.type === 'touchstart') {
@@ -450,3 +511,17 @@ this.activeEventData(e);
             var currentViewDate = ej2_base_1.isNullOrUndefined(viewDate) ? this.parent.activeView.startDate() : viewDate;
-            var dates = date_generator_1.generate(startDate, event[fields.recurrenceRule], event[fields.recurrenceException], this.parent.firstDayOfWeek, undefined, currentViewDate);
+            var eventRule = event[fields.recurrenceRule];
+            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]) };
+                }
+                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]);
+                    }
+                }
+            }
             var date = dates.shift();
@@ -497,2 +572,18 @@ var duration = endDate.getTime() - startDate.getTime();
         };
+        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;
@@ -499,0 +590,0 @@ }());

src/schedule/event-renderer/month.d.ts

@@ -23,6 +23,8 @@ import { Schedule } from '../base/schedule';
     private getOuterHeight(element);
-    private createAppointmentElement(record);
-    private renderAppointmentMonth(event);
+    private createAppointmentElement(record, resIndex);
+    private appendEventIcons(record, appointmentDetails);
+    private renderAppointmentMonth(event, resIndex);
+    private getFilteredEvents(startDate, endDate, groupIndex);
     private getIndex(record, date);
     private moreIndicatorClick(event);
 }

src/schedule/event-renderer/month.js

@@ -26,2 +26,3 @@ var __extends = (this && this.__extends) || (function () {
         MonthEvent.prototype.renderAppointments = function () {
+            var _this = this;
             var appointmentWrapper = [].slice.call(this.element.querySelectorAll('.' + cls.APPOINTMENT_WRAPPER_CLASS));
@@ -32,25 +33,60 @@ for (var _i = 0, appointmentWrapper_1 = appointmentWrapper; _i < appointmentWrapper_1.length; _i++) {
             }
-            this.renderedEvents = [];
-            this.dateRender = this.parent.activeView.renderDates;
-            this.workCells = [].slice.call(this.element.querySelectorAll('.' + cls.WORK_CELLS_CLASS));
-            this.cellWidth = this.workCells[0].offsetWidth;
-            this.cellHeight = this.workCells[0].offsetHeight;
             this.eventHeight = this.getElementHeightFromClass(this.element, cls.APPOINTMENT_CLASS);
-            this.monthHeaderHeight = this.getOuterHeight(this.workCells[0].querySelector('.' + cls.DATE_HEADER_CLASS));
-            var eventsList = this.parent.eventsProcessed;
-            this.sortByDateTime(eventsList);
-            var dates = this.dateRender.map(function (date) { return +date; });
-            this.slots = [];
-            var noOfDays = this.parent.activeViewOptions.showWeekend ? util.WEEK_LENGTH : this.parent.activeViewOptions.workDays.length;
-            while (dates.length > 0) {
-                this.slots.push(dates.splice(0, noOfDays));
+            if (this.parent.currentView === 'Month') {
+                this.monthHeaderHeight = this.getOuterHeight(this.element.querySelector('.' + cls.DATE_HEADER_CLASS));
             }
-            for (var _a = 0, eventsList_1 = eventsList; _a < eventsList_1.length; _a++) {
-                var event_1 = eventsList_1[_a];
-                var splittedEvents = this.splitEvent(event_1, this.dateRender);
-                for (var _b = 0, splittedEvents_1 = splittedEvents; _b < splittedEvents_1.length; _b++) {
-                    var event_2 = splittedEvents_1[_b];
-                    this.renderAppointmentMonth(event_2);
+            else {
+                this.monthHeaderHeight = 0;
+            }
+            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 + '"]'));
                 }
+                else {
+                    eventsList = _this.parent.eventsProcessed;
+                    _this.workCells = [].slice.call(_this.element.querySelectorAll('.' + cls.WORK_CELLS_CLASS));
+                }
+                _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);
+            }
         };
@@ -71,3 +107,5 @@ MonthEvent.prototype.getElementHeightFromClass = function (container, elementClass) {
         };
-        MonthEvent.prototype.createAppointmentElement = function (record) {
+        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', {
@@ -77,14 +115,15 @@ id: 'Appointment_' + record[this.fields.id],
                 attrs: {
-                    'data-guid': record.Guid,
-                    'role': 'button',
-                    'tabindex': '0',
-                    'aria-readonly': 'false',
-                    'aria-selected': 'false',
-                    'aria-grabbed': 'true',
-                    'aria-label': ej2_base_2.isNullOrUndefined(record[this.fields.subject]) ?
-                        this.parent.eventSettings.fields.subject.default : record[this.fields.subject]
+                    '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);
+            }
             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());
+            }
             var templateElement;
@@ -96,40 +135,63 @@ var eventData = record.data;
             else {
-                var eventSubject = ej2_base_2.isNullOrUndefined(record[this.fields.subject]) ?
-                    this.parent.eventSettings.fields.subject.default : record[this.fields.subject];
-                var eventLocation = ej2_base_2.isNullOrUndefined(record[this.fields.location]) ?
-                    this.parent.eventSettings.fields.location.default : record[this.fields.location];
+                var eventLocation = (record[this.fields.location] || this.parent.eventSettings.fields.location.default || '');
                 var appointmentSubject = ej2_base_1.createElement('div', {
-                    className: cls.APPOINTMENT_SUBJECT,
-                    innerHTML: eventSubject + (eventLocation ? (';&nbsp' + eventLocation) : '')
+                    className: cls.SUBJECT_CLASS,
+                    innerHTML: (eventSubject ? eventSubject + (eventLocation ? ';&nbsp' : '') : '') + (eventLocation ? eventLocation : '')
                 });
                 var appointmentStartTime = ej2_base_1.createElement('div', {
-                    className: cls.APPOINTMENT_TIME,
-                    innerHTML: this.parent.globalize.formatDate(eventData[this.fields.startTime], { skeleton: 'hm' }),
-                    styles: 'display:' + (this.parent.isAdaptive ? 'none' : 'block')
+                    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,
-                    innerHTML: this.parent.globalize.formatDate(eventData[this.fields.endTime], { skeleton: 'hm' }),
-                    styles: 'display:' + (this.parent.isAdaptive ? 'none' : 'block')
+                    className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''),
+                    innerHTML: this.parent.getTimeString(eventData[this.fields.endTime])
                 });
-                if (record[this.fields.isAllDay]) {
-                    templateElement = [appointmentSubject];
-                    ej2_base_1.addClass([appointmentSubject], 'e-text-center');
+                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);
+                        }
+                    }
                 }
-                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);
+                    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.push(appointmentSubject);
-                    if (!eventData.isRight) {
-                        templateElement.push(appointmentEndTime);
+                    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: eventData[this.fields.location]
+                        });
+                        innerElement = [appointmentSubject, appTime, appLocation];
                     }
+                    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])) {
@@ -139,4 +201,3 @@ var iconClass = (record[this.fields.id] === record[this.fields.recurrenceID]) ?
                 appointmentDetails.appendChild(ej2_base_1.createElement('div', {
-                    className: cls.ICON + ' ' + iconClass,
-                    styles: 'display:' + (this.parent.isAdaptive ? 'none' : 'block')
+                    className: cls.ICON + ' ' + iconClass + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : '')
                 }));
@@ -156,5 +217,4 @@ }
             }
-            return appointmentWrapper;
         };
-        MonthEvent.prototype.renderAppointmentMonth = function (event) {
+        MonthEvent.prototype.renderAppointmentMonth = function (event, resIndex) {
             var startTime = event[this.fields.startTime];
@@ -168,4 +228,2 @@ var endTime = event[this.fields.endTime];
             event.Index = overlapCount;
-            var appWidth;
-            var appTop = 0;
             var moreIndicatorHeight = 19;
@@ -176,9 +234,16 @@ var appHeight = this.eventHeight;
             if (startTime.getTime() <= endTime.getTime()) {
-                var appWidth_1 = (diffInDays * this.cellWidth) - 1;
+                var appWidth = (diffInDays * this.cellWidth) - 1;
                 var cellTd = this.workCells[day];
-                appTop = (overlapCount * (appHeight + EVENT_GAP));
+                var appTop = (overlapCount * (appHeight + EVENT_GAP));
                 if (this.cellHeight > this.monthHeaderHeight + ((overlapCount + 1) * (appHeight + EVENT_GAP)) + moreIndicatorHeight) {
-                    var appointmentElement = this.createAppointmentElement(event);
+                    var appointmentElement = this.createAppointmentElement(event, resIndex);
+                    this.applyResourceColor(appointmentElement, event, 'backgroundColor', this.groupOrder);
                     this.wireAppointmentEvents(appointmentElement);
-                    ej2_base_2.setStyleAttribute(appointmentElement, { 'width': appWidth_1 + 'px', 'height': appHeight + 'px', 'top': appTop + 'px' });
+                    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)) {
@@ -192,4 +257,2 @@ cellTd.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS).appendChild(appointmentElement);
                     }
-                    var args = { data: event, element: appointmentElement };
-                    this.parent.trigger(events.eventRendered, args);
                 }
@@ -200,5 +263,6 @@ else {
                         if (cellTd_1 && ej2_base_2.isNullOrUndefined(cellTd_1.querySelector('.' + cls.MORE_INDICATOR_CLASS))) {
-                            var startDateTime = new Date(this.dateRender[day + i].getTime());
-                            var endDateTime = util.addDays(this.dateRender[day + i], 1);
-                            var filterEvents = this.filterEvents(startDateTime, endDateTime, this.parent.eventsProcessed);
+                            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;
@@ -212,7 +276,11 @@ var renderedAppCount = Math.floor(appArea / (appHeight + EVENT_GAP));
                                     'tabindex': '0',
-                                    'data-start-date': startDateTime.getTime().toString(),
-                                    'data-end-date': endDateTime.getTime().toString()
+                                    'data-start-date': startDate.getTime().toString(),
+                                    'data-end-date': endDate.getTime().toString()
                                 }
                             });
+                            if (!ej2_base_2.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)) {
@@ -232,2 +300,13 @@ cellTd_1.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS).appendChild(moreIndicatorElement);
         };
+        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 (record, date) {
@@ -253,5 +332,2 @@ var appIndex = -1;
             var startDate = new Date(parseInt(target.getAttribute('data-start-date'), 10));
-            var endDate = new Date(parseInt(target.getAttribute('data-end-date'), 10));
-            var filteredEvents = this.filterEvents(startDate, endDate, this.parent.eventsProcessed);
-            var moreEventArgs = { date: startDate, event: filteredEvents, element: event.target };
             if (!ej2_base_2.isNullOrUndefined(startDate) && this.parent.isAdaptive) {
@@ -262,3 +338,7 @@ this.parent.setProperties({ selectedDate: startDate }, true);
             else {
-                this.parent.quickPopup.moreEventClick(moreEventArgs);
+                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);
             }
@@ -265,0 +345,0 @@ };

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

@@ -6,3 +6,3 @@ import { Schedule } from '../base/schedule';
  */
-export declare class AppointmentRendering extends EventBase {
+export declare class VerticalEvent extends EventBase {
     private dateRender;
@@ -14,4 +14,5 @@ private renderedEvents;
     private overlapList;
-    private minorSlotCount;
-    private majorSlot;
+    private allDayEvents;
+    private slotCount;
+    private interval;
     private allDayLevel;
@@ -25,2 +26,3 @@ private startHour;
     private cellHeight;
+    private resources;
     /**
@@ -31,11 +33,14 @@ * Constructor for vertical view
     renderAppointments(): void;
-    private createAppointmentElement(record, isAllDay, data);
+    private renderEvents(eventType);
+    private setValues(event, resourceIndex);
+    private getResourceList();
+    private createAppointmentElement(record, isAllDay, data, resource);
     private createMoreIndicator(allDayRow, count, currentDay);
     private renderSpannedIcon(element, spanEvent, isAllDay);
-    private isSpannedEvent(record, day);
-    private renderAllDayEvents(event);
-    private renderVerticalEvents(eventObj, day);
-    private getTopValue(date, day);
+    private isSpannedEvent(record, day, resource);
+    private renderAllDayEvents(eventObj, dayIndex, resource, dayCount);
+    private renderNormalEvents(eventObj, dayIndex, resource, dayCount);
+    private getTopValue(date, day, resource);
     private getAppointmentHeight(cellHeight, startDate, endDate);
-    private getOverlapIndex(record, day, isAllDay);
+    private getOverlapIndex(record, day, isAllDay, resource);
     private adjustOverlapElements(args);
@@ -42,0 +47,0 @@ private setAllDayRowHeight(height);

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

@@ -11,9 +11,10 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "./event-base", "../base/util", "../base/constant", "../base/css-constant"], function (require, exports, ej2_base_1, ej2_base_2, event_base_1, util, events, cls) {
+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 AppointmentRendering = (function (_super) {
-        __extends(AppointmentRendering, _super);
-        function AppointmentRendering(parent) {
+    var VerticalEvent = (function (_super) {
+        __extends(VerticalEvent, _super);
+        function VerticalEvent(parent) {
             var _this = _super.call(this, parent) || this;
+            _this.dateRender = [];
             _this.renderedEvents = [];
@@ -23,4 +24,6 @@ _this.renderedAllDayEvents = [];
             _this.moreEvents = [];
-            _this.minorSlotCount = 2;
-            _this.majorSlot = 60;
+            _this.overlapList = [];
+            _this.allDayEvents = [];
+            _this.slotCount = _this.parent.activeViewOptions.timeScale.slotCount;
+            _this.interval = _this.parent.activeViewOptions.timeScale.interval;
             _this.allDayLevel = 0;
@@ -35,53 +38,92 @@ _this.startHour = _this.parent.activeView.getStartHour();
         }
-        AppointmentRendering.prototype.renderAppointments = function () {
+        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);
-            var appointmentWrapper = [].slice.call(this.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));
-            for (var _i = 0, appointmentWrapper_1 = appointmentWrapper; _i < appointmentWrapper_1.length; _i++) {
-                var wrap = appointmentWrapper_1[_i];
-                ej2_base_2.remove(wrap);
-            }
-            var alldayCountWrapper = [].slice.call(this.element.querySelectorAll('.' + cls.ROW_COUNT_WRAPPER_CLASS));
-            for (var _a = 0, alldayCountWrapper_1 = alldayCountWrapper; _a < alldayCountWrapper_1.length; _a++) {
-                var wrap = alldayCountWrapper_1[_a];
-                ej2_base_2.remove(wrap);
-            }
-            this.allDayElement = [].slice.call(this.element.querySelectorAll('.' + cls.ALLDAY_CELLS_CLASS + ':first-child'));
-            this.setAllDayRowHeight(0);
             this.renderedEvents = [];
             this.renderedAllDayEvents = [];
-            var allDayEvents = [];
-            this.dateRender = this.parent.activeView.renderDates;
+            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;
-            var eventsList = this.parent.eventsProcessed;
-            if (eventsList.length > 0) {
-                for (var day = 0, length_1 = this.dateRender.length; day < length_1; day++) {
+            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 startDateTime = new Date(this.dateRender[day].getTime());
-                    var endDateTime = util.addDays(this.dateRender[day], 1);
-                    var filterEvents = this.filterEvents(startDateTime, endDateTime);
-                    for (var count = 0, length1 = filterEvents.length; count < length1; count++) {
-                        var event_1 = filterEvents[count];
-                        if (this.isAllDayAppointment(event_1)) {
-                            allDayEvents.push(ej2_base_1.extend({}, event_1, null, true));
+                    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 {
-                            this.renderVerticalEvents(event_1, day);
+                            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.cssClass = null;
+                        this.groupOrder = null;
                     }
+                    dateCount += 1;
                 }
-                if (allDayEvents.length > 0) {
-                    allDayEvents = 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.renderAllDayEvents(this.sortByDateTime(allDayEvents));
-                }
-                this.parent.notify(events.contentReady, {});
-                ej2_base_2.addClass(this.allDayElement, cls.ALLDAY_ROW_ANIMATE_CLASS);
             }
         };
-        AppointmentRendering.prototype.createAppointmentElement = function (record, isAllDay, data) {
+        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 = ej2_base_1.createElement('div', {
@@ -97,4 +139,3 @@ id: 'Appointment_' + record[fieldMapping.id],
                     'aria-grabbed': 'true',
-                    'aria-label': ej2_base_2.isNullOrUndefined(record[fieldMapping.subject]) ?
-                        this.parent.eventSettings.fields.subject.default : record[fieldMapping.subject]
+                    'aria-label': recordSubject
                 }
@@ -104,2 +145,6 @@ });
             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;
@@ -111,8 +156,3 @@ var eventData = data;
             else {
-                var recordSubject = ej2_base_2.isNullOrUndefined(record[fieldMapping.subject]) ?
-                    this.parent.eventSettings.fields.subject.default : record[fieldMapping.subject];
-                var appointmentSubject = ej2_base_1.createElement('div', {
-                    className: cls.APPOINTMENT_SUBJECT,
-                    innerHTML: recordSubject
-                });
+                var appointmentSubject = ej2_base_1.createElement('div', { className: cls.SUBJECT_CLASS, innerHTML: recordSubject });
                 if (isAllDay) {
@@ -126,7 +166,7 @@ if (record[fieldMapping.isAllDay]) {
                             className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''),
-                            innerHTML: this.parent.globalize.formatDate(record[fieldMapping.startTime], { skeleton: 'hm' })
+                            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.globalize.formatDate(record[fieldMapping.endTime], { skeleton: 'hm' }),
+                            innerHTML: this.parent.getTimeString(record[fieldMapping.endTime]),
                         });
@@ -144,4 +184,4 @@ ej2_base_2.addClass([appointmentSubject], 'e-text-center');
                 else {
-                    var timeStr = this.parent.globalize.formatDate(record[fieldMapping.startTime], { skeleton: 'hm' }) + ' - ' +
-                        this.parent.globalize.formatDate(record[fieldMapping.endTime], { skeleton: 'hm' });
+                    var timeStr = this.parent.getTimeString(record[fieldMapping.startTime]) + ' - ' +
+                        this.parent.getTimeString(record[fieldMapping.endTime]);
                     var appointmentTime = ej2_base_1.createElement('div', {
@@ -152,3 +192,4 @@ className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''),
                     var appointmentLocation = ej2_base_1.createElement('div', {
-                        className: cls.APPOINTMENT_LOCATION, innerHTML: record[fieldMapping.location]
+                        className: cls.LOCATION_CLASS,
+                        innerHTML: (record[fieldMapping.location] || this.parent.eventSettings.fields.location.default || '')
                     });
@@ -173,5 +214,9 @@ templateElement = [appointmentSubject, appointmentTime, appointmentLocation];
             }
+            if (!ej2_base_2.isNullOrUndefined(this.cssClass)) {
+                ej2_base_2.addClass([appointmentWrapper], this.cssClass);
+            }
+            this.applyResourceColor(appointmentWrapper, record, 'backgroundColor', this.groupOrder);
             return appointmentWrapper;
         };
-        AppointmentRendering.prototype.createMoreIndicator = function (allDayRow, count, currentDay) {
+        VerticalEvent.prototype.createMoreIndicator = function (allDayRow, count, currentDay) {
             var countWrapper = allDayRow[currentDay + count];
@@ -200,3 +245,3 @@ if (countWrapper.childElementCount <= 0) {
         };
-        AppointmentRendering.prototype.renderSpannedIcon = function (element, spanEvent, isAllDay) {
+        VerticalEvent.prototype.renderSpannedIcon = function (element, spanEvent, isAllDay) {
             if (isAllDay) {
@@ -231,4 +276,4 @@ if (spanEvent.isLeft) {
         };
-        AppointmentRendering.prototype.isSpannedEvent = function (record, day) {
-            var currentDate = util.resetTime(this.dateRender[day]);
+        VerticalEvent.prototype.isSpannedEvent = function (record, day, resource) {
+            var currentDate = util.resetTime(this.dateRender[resource][day]);
             var fieldMapping = this.parent.eventFields;
@@ -248,73 +293,79 @@ var startEndHours = util.getStartEndHours(currentDate, this.startHour, this.endHour);
         };
-        AppointmentRendering.prototype.renderAllDayEvents = function (event) {
-            this.moreEvents = [];
-            this.overlapList = [];
-            this.allDayLevel = 0;
-            this.slots = [];
-            this.slots.push(this.dateRender.map(function (date) { return +date; }));
-            for (var day = 0, length_2 = this.dateRender.length; day < length_2; day++) {
-                var fieldMapping = this.parent.eventFields;
-                var filterEvents = this.filterEvents(new Date(this.dateRender[day].getTime()), util.addDays(this.dateRender[day], 1), event);
-                var allDayRowCell = this.element.querySelector('.' + cls.ALLDAY_CELLS_CLASS + ':first-child');
-                var eventWrapper = this.element.querySelector('.' + cls.ALLDAY_WRAPPER_CLASS + ':nth-child(' + (day + 1) + ')');
-                var _loop_1 = function (count, length1) {
-                    var eventObj = filterEvents[count];
-                    var record = this_1.splitEvent(eventObj, this_1.dateRender)[0];
-                    var cellTop = allDayRowCell.offsetTop;
-                    var eStart = new Date(record[fieldMapping.startTime].getTime());
-                    var eEnd = new Date(record[fieldMapping.endTime].getTime());
-                    var dates = this_1.dateRender;
-                    var appWidth = 0;
-                    var appLeft = '0%';
-                    var topValue = 1;
-                    var appLevel = 0;
-                    var isDateRange = dates[0].getTime() <= eStart.getTime() &&
-                        util.addDays(dates[dates.length - 1], 1).getTime() >= eStart.getTime();
-                    if (eStart <= eEnd && isDateRange) {
-                        var isAlreadyRendered = this_1.renderedAllDayEvents.filter(function (event) {
-                            return event.Guid === eventObj.Guid;
+        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 (isAlreadyRendered.length === 0) {
-                            var allDayDifference = record.data.count;
-                            var allDayIndex = this_1.getOverlapIndex(record, day, true);
-                            record.Index = allDayIndex;
-                            this_1.allDayLevel = (this_1.allDayLevel < allDayIndex) ? allDayIndex : this_1.allDayLevel;
-                            var widthAdjustment = record.data.isRight ? 0 :
-                                this_1.parent.currentView === 'Day' ? 4 : 7;
-                            if (allDayDifference >= 0) {
-                                appWidth = (allDayDifference * 100) - widthAdjustment;
-                            }
-                            this_1.renderedAllDayEvents.push(ej2_base_1.extend({}, record, null, true));
-                            var allDayRow = [].slice.call(this_1.element.querySelector('.' + cls.ALLDAY_ROW_CLASS).children);
-                            var appointmentElement = this_1.createAppointmentElement(eventObj, true, record.data);
-                            ej2_base_2.addClass([appointmentElement], cls.ALLDAY_APPOINTMENT_CLASS);
-                            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' });
-                            var args = { data: eventObj, element: appointmentElement };
-                            this_1.parent.trigger(events.eventRendered, args);
-                            if (allDayIndex > 1) {
-                                this_1.moreEvents.push(appointmentElement);
-                                for (var count_1 = 0, length_3 = allDayDifference; count_1 < length_3; count_1++) {
-                                    this_1.createMoreIndicator(allDayRow, count_1, day);
-                                }
-                            }
-                            allDayRowCell.setAttribute('data-count', this_1.allDayLevel.toString());
-                            var allDayRowHeight = ((!this_1.parent.uiStateValues.expand && this_1.allDayLevel > 2) ?
-                                (3 * appHeight) : ((this_1.allDayLevel + 1) * appHeight)) + 4;
-                            this_1.setAllDayRowHeight(allDayRowHeight);
-                            this_1.addOrRemoveClass();
-                            this_1.wireAppointmentEvents(appointmentElement);
+                    }
+                }
+                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] = [ej2_base_1.extend({}, record, null, true)];
+                    }
+                    else {
+                        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) {
+                        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);
                         }
                     }
-                };
-                var this_1 = this;
-                for (var count = 0, length1 = filterEvents.length; count < length1; count++) {
-                    _loop_1(count, length1);
+                    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);
                 }
             }
         };
-        AppointmentRendering.prototype.renderVerticalEvents = function (eventObj, day) {
-            var record = this.isSpannedEvent(eventObj, day);
+        VerticalEvent.prototype.renderNormalEvents = function (eventObj, dayIndex, resource, dayCount) {
+            var record = this.isSpannedEvent(eventObj, dayIndex, resource);
             var eStart = record[this.fields.startTime];
@@ -326,7 +377,8 @@ var eEnd = record[this.fields.endTime];
             var appLevel = 0;
-            var isDateRange = this.dateRender[0].getTime() <= eStart.getTime() &&
-                util.addDays(this.dateRender[this.dateRender.length - 1], 1).getTime() >= eStart.getTime();
-            if (eStart < eEnd && isDateRange) {
+            var currentDates = this.dateRender[resource];
+            var isDateRange = currentDates[0].getTime() <= eStart.getTime() &&
+                util.addDays(currentDates.slice(-1)[0], 1).getTime() >= eStart.getTime();
+            if (eStart <= eEnd && isDateRange) {
                 var appHeight = 0;
-                var startEndHours = util.getStartEndHours(util.resetTime(this.dateRender[day]), this.startHour, this.endHour);
+                var startEndHours = util.getStartEndHours(util.resetTime(currentDates[dayIndex]), this.startHour, this.endHour);
                 if (startEndHours.endHour.getTime() <= eEnd.getTime() && startEndHours.startHour.getTime() >= eStart.getTime()) {
@@ -342,9 +394,9 @@ appHeight = this.getAppointmentHeight(this.cellHeight, startEndHours.startHour, startEndHours.endHour);
                 else {
-                    appHeight = (eEnd.getTime() - eStart.getTime()) / (60 * 1000) * (this.cellHeight * this.minorSlotCount) / this.majorSlot;
+                    appHeight = (eEnd.getTime() - eStart.getTime()) / (60 * 1000) * (this.cellHeight * this.slotCount) / this.interval;
                 }
                 appHeight = (appHeight < this.cellHeight) ? this.cellHeight : appHeight;
                 if (eStart.getTime() > startEndHours.startHour.getTime()) {
-                    topValue = this.getTopValue(eStart, day);
+                    topValue = this.getTopValue(eStart, dayIndex, resource);
                 }
-                var appIndex = this.getOverlapIndex(record, day, false);
+                var appIndex = this.getOverlapIndex(record, dayIndex, false, resource);
                 record.Index = appIndex;
@@ -362,13 +414,21 @@ this.overlapList.push(record);
                 appWidth = ((width - this.overlapEvents.length) / this.overlapEvents.length) + '%';
-                var argsData = { index: appIndex, left: appLeft, width: appWidth, day: day, record: record };
+                var argsData = {
+                    index: appIndex, left: appLeft, width: appWidth,
+                    day: dayIndex, dayIndex: dayCount, record: record, resource: resource
+                };
                 var tempData = this.adjustOverlapElements(argsData);
                 appWidth = (tempData.appWidth);
-                this.renderedEvents.push(ej2_base_1.extend({}, record, null, true));
-                var appointmentWrap = [].slice.call(this.element.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS).children);
-                var appointmentElement = this.createAppointmentElement(eventObj, false, record.isSpanned);
+                if (ej2_base_2.isNullOrUndefined(this.renderedEvents[resource])) {
+                    this.renderedEvents[resource] = [ej2_base_1.extend({}, record, null, true)];
+                }
+                else {
+                    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;
-                if (!this.parent.isAdaptive && appointmentElement.querySelector('.' + cls.APPOINTMENT_SUBJECT)) {
-                    appointmentElement.querySelector('.' + cls.APPOINTMENT_SUBJECT).style.maxHeight = maxHeight + 'px';
+                if (!this.parent.isAdaptive && appointmentElement.querySelector('.' + cls.SUBJECT_CLASS)) {
+                    appointmentElement.querySelector('.' + cls.SUBJECT_CLASS).style.maxHeight = maxHeight + 'px';
                 }
@@ -381,41 +441,55 @@ if (this.parent.enableRtl) {
                 }
-                appointmentWrap[argsData.day].appendChild(appointmentElement);
-                var args = { data: eventObj, element: appointmentElement };
+                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) {
+                    appointmentWrap[index].appendChild(appointmentElement);
+                }
                 this.wireAppointmentEvents(appointmentElement);
             }
         };
-        AppointmentRendering.prototype.getTopValue = function (date, day) {
-            var startEndHours = util.getStartEndHours(util.resetTime(this.dateRender[day]), this.startHour, this.endHour);
+        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.minorSlotCount) / this.majorSlot;
+            return (diffInMinutes * this.cellHeight * this.slotCount) / this.interval;
         };
-        AppointmentRendering.prototype.getAppointmentHeight = function (cellHeight, startDate, endDate) {
-            return (((endDate.getTime() - startDate.getTime()) / (1000 * 60)) / (this.majorSlot / this.minorSlotCount)) * cellHeight;
+        VerticalEvent.prototype.getAppointmentHeight = function (cellHeight, startDate, endDate) {
+            return (((endDate.getTime() - startDate.getTime()) / (1000 * 60)) / (this.interval / this.slotCount)) * cellHeight;
         };
-        AppointmentRendering.prototype.getOverlapIndex = function (record, day, isAllDay) {
+        VerticalEvent.prototype.getOverlapIndex = function (record, day, isAllDay, resource) {
             var _this = this;
             var fieldMapping = this.parent.eventFields;
-            var eventsList;
+            var predicate;
+            var eventsList = [];
+            var appIndex = -1;
             this.overlapEvents = [];
             if (isAllDay) {
-                var date_1 = new Date(this.dateRender[day].getTime());
-                eventsList = this.renderedAllDayEvents.filter(function (app) {
-                    return ((util.resetTime(app[fieldMapping.startTime]).getTime() <= util.resetTime(date_1).getTime()) &&
-                        (util.resetTime(app[fieldMapping.endTime]).getTime() >= util.resetTime(date_1).getTime()));
-                });
+                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);
+                    }
+                }
             }
             else {
-                var appointmentList_1 = this.renderedEvents;
+                var appointmentList_1 = !ej2_base_2.isNullOrUndefined(this.renderedEvents[resource]) ? this.renderedEvents[resource] : [];
                 var appointment_1 = [];
-                this.overlapList = appointmentList_1.filter(function (obj) {
-                    return obj[fieldMapping.endTime] > record[fieldMapping.startTime] &&
-                        obj[fieldMapping.startTime] < record[fieldMapping.endTime];
-                });
+                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));
+                if (this.parent.activeViewOptions.group.resources.length > 0) {
+                    this.overlapList = this.filterEventsByResource(this.resources[resource], this.overlapList);
+                }
                 this.overlapList.forEach(function (obj) {
-                    var filterList = appointmentList_1.filter(function (list) {
-                        return list[fieldMapping.endTime] >= obj[fieldMapping.startTime] &&
-                            list[fieldMapping.startTime] <= obj[fieldMapping.endTime];
-                    });
+                    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; });
@@ -425,6 +499,3 @@ return appointment_1.concat(collection);
                 this.overlapList = this.overlapList.concat(appointment_1);
-                eventsList = this.overlapList.filter(function (obj) {
-                    return obj[fieldMapping.endTime] > record[fieldMapping.startTime] &&
-                        obj[fieldMapping.startTime] < record[fieldMapping.endTime];
-                });
+                eventsList = this.overlapList;
                 for (var _i = 0, eventsList_1 = eventsList; _i < eventsList_1.length; _i++) {
@@ -438,3 +509,2 @@ var event_2 = eventsList_1[_i];
             }
-            var appIndex;
             if (eventsList.length > 0) {
@@ -444,8 +514,5 @@ var appLevel = eventsList.map(function (obj) { return obj.Index; });
             }
-            else {
-                appIndex = -1;
-            }
             return (appIndex === -1) ? 0 : appIndex;
         };
-        AppointmentRendering.prototype.adjustOverlapElements = function (args) {
+        VerticalEvent.prototype.adjustOverlapElements = function (args) {
             var data = { appWidth: args.width, appLeft: args.left };
@@ -455,3 +522,5 @@ for (var i = 0, length1 = this.overlapEvents.length; i < length1; i++) {
                     for (var j = 0, length2 = this.overlapEvents[i].length; j < length2; j++) {
-                        var element = this.element.querySelector('#e-appointment-wrapper-' + args.day);
+                        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) {
@@ -484,3 +553,3 @@ var eleGuid = this.overlapEvents[i][j].Guid;
         };
-        AppointmentRendering.prototype.setAllDayRowHeight = function (height) {
+        VerticalEvent.prototype.setAllDayRowHeight = function (height) {
             for (var _i = 0, _a = this.allDayElement; _i < _a.length; _i++) {
@@ -492,3 +561,3 @@ var element = _a[_i];
         };
-        AppointmentRendering.prototype.addOrRemoveClass = function () {
+        VerticalEvent.prototype.addOrRemoveClass = function () {
             var _this = this;
@@ -521,5 +590,5 @@ this.moreEvents.filter(function (element) {
         };
-        AppointmentRendering.prototype.getEventHeight = function () {
+        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_WRAPPER_CLASS + ':first-child');
+            var eventWrapper = this.element.querySelector('.' + cls.ALLDAY_APPOINTMENT_WRAPPER_CLASS + ':first-child');
             eventWrapper.appendChild(eventElement);
@@ -530,3 +599,3 @@ var height = eventElement.offsetHeight;
         };
-        AppointmentRendering.prototype.rowExpandCollapse = function (event) {
+        VerticalEvent.prototype.rowExpandCollapse = function (event) {
             var target = this.element.querySelector('.' + cls.ALLDAY_APPOINTMENT_SECTION_CLASS);
@@ -549,8 +618,8 @@ this.parent.uiStateValues.expand = target.classList.contains(cls.APPOINTMENT_ROW_EXPAND_CLASS);
         };
-        AppointmentRendering.prototype.animationUiUpdate = function () {
+        VerticalEvent.prototype.animationUiUpdate = function () {
             this.parent.notify(events.contentReady, {});
         };
-        return AppointmentRendering;
+        return VerticalEvent;
     }(event_base_1.EventBase));
-    exports.AppointmentRendering = AppointmentRendering;
+    exports.VerticalEvent = VerticalEvent;
 });

src/schedule/models/event-settings-model.d.ts

@@ -52,2 +52,8 @@ import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';import { Query, DataManager } from '@syncfusion/ej2-data';import { Field } from './fields';import { FieldModel } from './fields-model';
 
+    /**
+     * Resource name need to be define to apply colored from the resource
+     * @default null
+     */
+    resourceColorField?: string;
+
 }

src/schedule/models/event-settings.d.ts

@@ -46,2 +46,7 @@ import { ChildProperty } from '@syncfusion/ej2-base';
     tooltipTemplate: string;
+    /**
+     * Resource name need to be define to apply colored from the resource
+     * @default null
+     */
+    resourceColorField: string;
 }

src/schedule/models/event-settings.js

@@ -43,2 +43,5 @@ var __extends = (this && this.__extends) || (function () {
         ], EventSettings.prototype, "tooltipTemplate", void 0);
+        __decorate([
+            ej2_base_1.Property()
+        ], EventSettings.prototype, "resourceColorField", void 0);
         return EventSettings;
@@ -45,0 +48,0 @@ }(ej2_base_1.ChildProperty));

src/schedule/models/field-options-model.d.ts

@@ -21,2 +21,8 @@ import { Property } from '@syncfusion/ej2-base';
     /**
+     * It assigns the label values to be displayed for the event editor fields.
+     * @default null
+     */
+    title?: string;
+
+    /**
      * It is mainly for defining the validation rules to be applied on the event fields within the event editor.
@@ -23,0 +29,0 @@ * @default {}

src/schedule/models/field-options.d.ts

@@ -16,2 +16,7 @@ /**
     /**
+     * It assigns the label values to be displayed for the event editor fields.
+     * @default null
+     */
+    title: string;
+    /**
      * It is mainly for defining the validation rules to be applied on the event fields within the event editor.
@@ -18,0 +23,0 @@ * @default {}

src/schedule/models/field-options.js

@@ -20,2 +20,5 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         __decorate([
+            ej2_base_1.Property()
+        ], FieldOptions.prototype, "title", void 0);
+        __decorate([
             ej2_base_1.Property({})
@@ -22,0 +25,0 @@ ], FieldOptions.prototype, "validation", void 0);

src/schedule/models/fields-model.d.ts

@@ -13,3 +13,3 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';import { FieldOptionsModel } from './field-options-model';
      */
-    id?: FieldOptionsModel;
+    id?: string;
 
@@ -16,0 +16,0 @@ /**

src/schedule/models/fields.d.ts

@@ -16,3 +16,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      */
-    id: FieldOptionsModel;
+    id: string;
     /**
@@ -19,0 +19,0 @@ * The `subject` field is optional, and usually assigns the subject text to each of the events.

src/schedule/models/fields.js

@@ -26,3 +26,3 @@ var __extends = (this && this.__extends) || (function () {
         __decorate([
-            ej2_base_1.Property({ name: 'Id' })
+            ej2_base_1.Property('Id')
         ], Field.prototype, "id", void 0);
@@ -29,0 +29,0 @@ __decorate([

src/schedule/models/models.d.ts

@@ -5,2 +5,3 @@ /**
 export * from './work-hours-model';
+export * from './time-scale-model';
 export * from './views-model';
@@ -10,1 +11,3 @@ export * from './event-settings-model';
 export * from './field-options-model';
+export * from './group-model';
+export * from './resources-model';

src/schedule/models/views-model.d.ts

@@ -1,2 +0,2 @@
-import { Property, ChildProperty } from '@syncfusion/ej2-base';import { View } from '../base/type';
+import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';import { View } from '../base/type';import { TimeScale } from '../models/time-scale';import { TimeScaleModel, GroupModel } from '../models/models';import { Group } from '../models/group';
 
@@ -92,9 +92,44 @@ /**
     /**
+     * When the same view is customized with different intervals, this property allows the user to set different display name
+     *  for each of the views.
+     * @default null
+     */
+    displayName?: string;
+
+    /**
+     * It accepts the number value denoting to include the number of days, weeks, workweeks or months on the defined view type.
+     * @default 1
+     */
+    interval?: number;
+
+    /**
      * It is used to set the working days on Schedule. The only days that are defined in this collection will be rendered on the
      *  `workWeek` view whereas on other views, it will display all the usual days and simply highlights the working days with different
      *  shade.
-     * @default '0'
+     * @default '[1, 2, 3, 4, 5]'
+     * @aspType int[]
      */
     workDays?: number[];
 
+    /**
+     * The template option which is used to render the customized header cells on the Schedule. Here, the
+     *  template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the header cells.
+     *  All the resource fields mapped within resources can be accessed within this template code.
+     *  It gets applied only to the view objects on which it is defined.
+     * @default null
+     */
+    resourceHeaderTemplate?: string;
+
+    /**
+     * Allows to set different timescale configuration on each applicable view modes such as day, week and work week.
+     * @default { enable: true, interval: 60, slotCount: 2, majorSlotTemplate: null, minorSlotTemplate: null }
+     */
+    timeScale?: TimeScaleModel;
+
+    /**
+     * Allows to set different resource grouping options on all available schedule view modes.
+     * @default { byDate: false, byGroupID: true, allowGroupEdit: false, resources:[]}
+     */
+    group?: GroupModel;
+
 }

src/schedule/models/views.d.ts

 import { ChildProperty } from '@syncfusion/ej2-base';
 import { View } from '../base/type';
+import { TimeScaleModel, GroupModel } from '../models/models';
 /**
@@ -80,8 +81,38 @@ * Configuration of view-specific settings on Schedule.
     /**
+     * When the same view is customized with different intervals, this property allows the user to set different display name
+     *  for each of the views.
+     * @default null
+     */
+    displayName: string;
+    /**
+     * It accepts the number value denoting to include the number of days, weeks, workweeks or months on the defined view type.
+     * @default 1
+     */
+    interval: number;
+    /**
      * It is used to set the working days on Schedule. The only days that are defined in this collection will be rendered on the
      *  `workWeek` view whereas on other views, it will display all the usual days and simply highlights the working days with different
      *  shade.
-     * @default '0'
+     * @default '[1, 2, 3, 4, 5]'
+     * @aspType int[]
      */
     workDays: number[];
+    /**
+     * The template option which is used to render the customized header cells on the Schedule. Here, the
+     *  template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the header cells.
+     *  All the resource fields mapped within resources can be accessed within this template code.
+     *  It gets applied only to the view objects on which it is defined.
+     * @default null
+     */
+    resourceHeaderTemplate: string;
+    /**
+     * Allows to set different timescale configuration on each applicable view modes such as day, week and work week.
+     * @default { enable: true, interval: 60, slotCount: 2, majorSlotTemplate: null, minorSlotTemplate: null }
+     */
+    timeScale: TimeScaleModel;
+    /**
+     * Allows to set different resource grouping options on all available schedule view modes.
+     * @default { byDate: false, byGroupID: true, allowGroupEdit: false, resources:[]}
+     */
+    group: GroupModel;
 }

src/schedule/models/views.js

@@ -17,3 +17,3 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "../models/time-scale", "../models/group"], function (require, exports, ej2_base_1, time_scale_1, group_1) {
     "use strict";
@@ -60,4 +60,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
         __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;
@@ -64,0 +79,0 @@ }(ej2_base_1.ChildProperty));

src/schedule/popups/event-tooltip.d.ts

@@ -8,3 +8,2 @@ import { Schedule } from '../base/schedule';
     private tooltipObj;
-    private l10n;
     constructor(parent: Schedule);
@@ -11,0 +10,0 @@ private onBeforeRender(args);

src/schedule/popups/event-tooltip.js

@@ -7,3 +7,2 @@ 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) {
             this.parent = parent;
-            this.l10n = this.parent.localeObj;
             this.tooltipObj = new ej2_popups_1.Tooltip({
@@ -15,3 +14,3 @@ content: 'No title',
                 showTipPointer: false,
-                cssClass: cls.EVENT_TOOLTIP_ROOT_CLASS,
+                cssClass: this.parent.cssClass + ' ' + cls.EVENT_TOOLTIP_ROOT_CLASS,
                 target: '.' + cls.APPOINTMENT_CLASS,
@@ -30,3 +29,5 @@ beforeRender: this.onBeforeRender.bind(this),
             if (!ej2_base_1.isNullOrUndefined(this.parent.eventSettings.tooltipTemplate)) {
-                content = this.parent.getEventTooltipTemplate()(record)[0];
+                var ele = document.createElement('div');
+                ej2_base_1.append([].slice.call(this.parent.getEventTooltipTemplate()(record)), ele);
+                content = ele.innerHTML;
             }
@@ -41,4 +42,4 @@ else {
                 var endDate = util.resetTime(new Date('' + eventEnd));
-                var tooltipSubject = ej2_base_1.isNullOrUndefined(record[fields.subject]) ? this.parent.eventSettings.fields.subject.default :
-                    record[fields.subject];
+                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] : '';
@@ -59,7 +60,8 @@ var startMonthDate = globalize.formatDate(eventStart, { type: 'date', skeleton: 'MMMd' });
                 }
-                var tooltipTime = (record[fields.isAllDay]) ? this.l10n.getConstant('allDay') : (startTime + ' - ' + endTime);
-                content = '<div class="e-subject">' + tooltipSubject + '</div>' +
+                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 class="e-all-day">' + tooltipTime + '</div></div>';
             }
@@ -66,0 +68,0 @@ this.tooltipObj.content = content;

src/schedule/popups/event-window.d.ts

@@ -21,2 +21,3 @@ import { Dialog } from '@syncfusion/ej2-popups';
     private repeatStatus;
+    private buttonObj;
     private repeatStartDate;
@@ -39,5 +40,12 @@ private cellClickAction;
     private createInputElement(className, fieldName, type?);
+    private getSlotDuration();
     private renderDateTimePicker(value, changeEvent?);
+    refreshDateTimePicker(duration?: number): void;
     private onTimeChange(args);
+    private renderMultiSelect(index);
     private renderDropDown(value);
+    private onMultiselectResourceChange(args);
+    private createInstance(index);
+    private onDropdownResourceChange(args);
+    private filterDatasource(index, groupId);
     private onTimezoneChange();
@@ -47,2 +55,3 @@ private renderCheckBox(value);
     private getFieldName(name);
+    private getFieldLabel(fieldName);
     private onChange(args);
@@ -59,2 +68,3 @@ private renderRepeatDialog();
     private showDetails(eventData);
+    private getColumnName(element);
     private onAllDayChange(allDayStatus);
@@ -64,2 +74,3 @@ private updateDateTime(allDayStatus, startObj, endObj);
     private onEventDetailsUpdate(eventObj);
+    refreshResourceDataSource(): void;
     private renderRecurrenceEditor();
@@ -70,3 +81,7 @@ private updateRepeatLabel(repeatRule);
     private resetFormFields();
-    private eventSave();
+    eventSave(alert?: string): void;
+    private recurrenceValidation(startDate, endDate, alert);
+    private getRecurrenceIndex(recColl, event);
+    private editOccurrenceValidation(eventId, eventObj);
+    private resourceSaveEvent(eventObj, action?, currentAction?);
     private getEventIdFromForm();
@@ -80,2 +95,3 @@ private getFormElements();
     getRecurrenceEditorInstance(): RecurrenceEditor;
+    private destroyComponents();
     /**
@@ -82,0 +98,0 @@ * To destroy the event window.

src/schedule/popups/form-validator.d.ts

@@ -1,2 +0,1 @@
-import { FormValidator } from '@syncfusion/ej2-inputs';
 import { Schedule } from '../base/schedule';
@@ -8,7 +7,8 @@ /**
     private parent;
-    formObj: FormValidator;
+    private formObj;
+    private element;
     constructor(parent: Schedule);
     renderFormValidator(form: HTMLFormElement, rules: {
         [key: string]: Object;
-    }): void;
+    }, element: HTMLElement): void;
     private validationComplete(args);
@@ -21,3 +21,3 @@ private errorPlacement(inputElement, error);
      */
-    destroyForm(): void;
+    destroy(): void;
 }

src/schedule/popups/form-validator.js

@@ -8,4 +8,5 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-inputs", "../base/css-constant"], function (require, exports, ej2_base_1, ej2_inputs_1, cls) {
         }
-        FieldValidator.prototype.renderFormValidator = function (form, rules) {
+        FieldValidator.prototype.renderFormValidator = function (form, rules, element) {
             var _this = this;
+            this.element = element;
             this.formObj = new ej2_inputs_1.FormValidator(form, {
@@ -22,10 +23,5 @@ customPlacement: function (inputElement, error) {
         FieldValidator.prototype.validationComplete = function (args) {
-            var elem = document.querySelector('#' + args.inputName + '_Error');
+            var elem = this.element.querySelector('#' + args.inputName + '_Error');
             if (elem) {
-                if (args.status === 'failure') {
-                    elem.style.display = '';
-                }
-                else {
-                    elem.style.display = 'none';
-                }
+                elem.style.display = (args.status === 'failure') ? '' : 'none';
             }
@@ -35,3 +31,3 @@ };
             var id = error.getAttribute('for');
-            var elem = document.querySelector('#' + id + '_Error');
+            var elem = this.element.querySelector('#' + id + '_Error');
             if (!elem) {
@@ -45,9 +41,8 @@ this.createTooltip(inputElement, error, id, '');
             var inputClient = element.getBoundingClientRect();
-            var quickPopupElement = document.querySelector('.' + cls.QUICK_POPUP_ROOT_CLASS);
-            if (quickPopupElement) {
-                dlgContent = quickPopupElement.querySelector('.' + cls.QUICK_POPUP_CLASS);
-                client = dlgContent.getBoundingClientRect();
+            if (this.element.classList.contains(cls.POPUP_WRAPPER_CLASS)) {
+                dlgContent = this.element;
+                client = this.element.getBoundingClientRect();
             }
             else {
-                dlgContent = document.querySelector('.e-schedule-dialog .e-dlg-content');
+                dlgContent = this.element.querySelector('.e-schedule-dialog .e-dlg-content');
                 client = dlgContent.getBoundingClientRect();
@@ -73,10 +68,14 @@ }
         FieldValidator.prototype.destroyToolTip = function () {
-            var elements = [].slice.call(document.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.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);
+                }
             }
-            this.formObj.reset();
+            if (this.formObj) {
+                this.formObj.reset();
+            }
         };
-        FieldValidator.prototype.destroyForm = function () {
+        FieldValidator.prototype.destroy = function () {
             if (this.formObj && !this.formObj.isDestroyed) {
@@ -83,0 +82,0 @@ this.formObj.destroy();

src/schedule/popups/quick-popups.d.ts

@@ -1,2 +0,2 @@
-import { Dialog, Popup, Tooltip } from '@syncfusion/ej2-popups';
+import { Dialog, Popup } from '@syncfusion/ej2-popups';
 import { Schedule } from '../base/schedule';
@@ -9,13 +9,8 @@ import { EventClickArgs } from '../base/interface';
     private l10n;
-    private flatButton;
-    private primaryButton;
     private parent;
     private crudAction;
-    private selectedEventPopup;
-    private multipleEventPopup;
     private isMultipleEventSelect;
     quickDialog: Dialog;
-    quickPopup: Tooltip;
+    quickPopup: Popup;
     morePopup: Popup;
-    eventPopup: Popup;
     private fieldValidator;
@@ -26,21 +21,21 @@ /**
     constructor(parent: Schedule);
-    render(): void;
+    private render();
     private renderQuickPopup();
+    private renderMorePopup();
     private renderQuickDialog();
-    private renderMoreEventPopup();
-    private dayNavigationClick(e);
-    renderEventPopup(): void;
+    private renderButton(className, iconName, isDisabled, element, clickEvent);
+    private quickDialogClass(action);
+    private applyFormValidation();
     openRecurrenceAlert(): void;
+    openRecurrenceValidationAlert(type: string): void;
     openDeleteAlert(): void;
     openValidationError(type: string): void;
     private showQuickDialog(popupType);
-    private createMoreEventList(events);
-    eventHold(args: Event): void;
+    private createMoreEventList(eventCollection, groupOrder, groupIndex);
+    private tapHoldEventPopup(args);
     private cellClick(args);
-    private applyFormValidation();
     private eventClick(events);
-    private deviceEventClick(events);
-    private showEventPopup(popupType);
+    private getResourceText(args, type);
     private getFormattedString(eventData, type);
-    moreEventClick(data: EventClickArgs): void;
+    moreEventClick(data: EventClickArgs, groupIndex?: string): void;
     private saveClick();
@@ -50,22 +45,25 @@ private detailsClick();
     deleteClick(): void;
+    private updateMoreEventContent();
     private closeClick();
     private dialogButtonClick(event);
-    private selectedEventDialog(target);
+    private updateTapHoldEventPopup(target);
     private getTimezone(event);
-    private getTimeDetails(event);
+    private getRecurrenceSummary(event);
     private getDateFormat(date, formatString);
-    private afterQuickPopupOpen(args);
-    private beforeQuickPopupOpen(args);
     private getDataFromTarget(target);
-    private beforeQuickPopupClose(args);
-    private beforeQuickDialogClose(args);
-    private keyPress(event);
-    private afterMorePopupOpen(event);
-    private afterMorePopupClose(event);
-    private afterQuickPopupClose(args);
-    private quickDialogClass(action);
+    private beforeQuickDialogClose();
+    private beforeQuickPopupOpen(target);
+    private applyEventColor();
+    private quickPopupOpen();
+    private quickPopupClose();
+    private morePopupOpen(event);
+    private morePopupClose(event);
+    quickPopupHide(hideAnimation?: Boolean): void;
+    private navigationClick(e);
     private documentClick(e);
     onClosePopup(): void;
-    addEventListener(): void;
+    private addEventListener();
+    private removeEventListner();
+    private destroyButtons();
     destroy(): void;
 }

src/schedule/popups/quick-popups.js

@@ -1,5 +0,4 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-popups", "@syncfusion/ej2-buttons", "@syncfusion/ej2-inputs", "../actions/crud", "../timezone/timezone", "./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, timezone_1, form_validator_1, event, cls, util) {
+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 moreEventHeight = 20;
     var QuickPopups = (function () {
@@ -17,29 +16,52 @@ function QuickPopups(parent) {
             this.renderQuickPopup();
+            this.renderMorePopup();
             this.renderQuickDialog();
-            this.renderMoreEventPopup();
-            this.renderEventPopup();
         };
         QuickPopups.prototype.renderQuickPopup = function () {
-            this.quickPopup = new ej2_popups_1.Tooltip({
-                animation: { open: { effect: 'FadeIn' }, close: { effect: 'FadeOut' } },
-                afterOpen: this.afterQuickPopupOpen.bind(this),
-                beforeOpen: this.beforeQuickPopupOpen.bind(this),
-                beforeClose: this.beforeQuickPopupClose.bind(this),
-                afterClose: this.afterQuickPopupClose.bind(this),
-                cssClass: cls.QUICK_POPUP_ROOT_CLASS,
-                enableRtl: this.parent.enableRtl, isSticky: true,
-                opensOn: 'Custom',
-                showTipPointer: false
+            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)
             });
-            this.quickPopup.appendTo(this.parent.element);
-            this.primaryButton = new ej2_buttons_1.Button({
-                cssClass: 'e-primary',
-                disabled: this.parent.activeViewOptions.readonly,
-                enableRtl: this.parent.enableRtl
+        };
+        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.flatButton = new ej2_buttons_1.Button({
-                cssClass: 'e-flat',
-                disabled: this.parent.activeViewOptions.readonly,
-                enableRtl: this.parent.enableRtl
+            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);
         };
@@ -50,4 +72,4 @@ QuickPopups.prototype.renderQuickDialog = function () {
                 buttons: [
-                    { buttonModel: { isPrimary: true }, click: this.dialogButtonClick.bind(this) },
-                    { buttonModel: { isPrimary: false }, click: this.dialogButtonClick.bind(this) }
+                    { 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) }
                 ],
@@ -68,135 +90,109 @@ cssClass: cls.QUICK_DIALOG_CLASS,
             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.renderMoreEventPopup = function () {
-            var moreEventWrapper = ej2_base_2.createElement('div', { className: cls.MORE_POPUP_WRAPPER_CLASS + ' e-popup-close' });
-            this.parent.element.appendChild(moreEventWrapper);
-            var moreEventHeader = '<div class="${classList[0]}"><div class="${classList[1]}">' +
-                '<div class="${classList[2]}" tabindex="0"><div class="${classList[3]}"></div>' +
-                '<div class="${classList[4]}" tabindex="0"></div></div>' +
-                '<div class="${classList[5]}" title="${l10n.close}" tabindex="0"></div></div></div>';
-            var moreEventArgs = {
-                classList: [
-                    cls.MORE_EVENT_POPUP_CLASS, cls.MORE_EVENT_HEADER_CLASS, cls.MORE_EVENT_DATE_HEADER_CLASS,
-                    cls.MORE_EVENT_HEADER_DAY_CLASS, cls.MORE_EVENT_HEADER_DATE_CLASS + ' ' + cls.NAVIGATE_CLASS, cls.MORE_EVENT_CLOSE_CLASS
-                ],
-                l10n: { close: this.l10n.getConstant('close'), noTitle: this.l10n.getConstant('noTitle') }
-            };
-            var moreEventContent = ej2_base_1.compile(moreEventHeader)(moreEventArgs)[0];
-            this.morePopup = new ej2_popups_1.Popup(moreEventWrapper, {
-                targetType: 'relative',
-                content: moreEventContent,
-                enableRtl: this.parent.enableRtl,
-                hideAnimation: { name: 'ZoomOut', duration: 300 },
-                showAnimation: { name: 'ZoomIn', duration: 300 },
-                open: this.afterMorePopupOpen.bind(this),
-                close: this.afterMorePopupClose.bind(this),
-                collision: { X: 'flip', Y: 'flip' },
-                viewPortElement: this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS),
-                zIndex: 10
-            });
-            var closeButton = new ej2_buttons_1.Button({ iconCss: 'e-icons e-close-icon', cssClass: 'e-round', isPrimary: false });
-            closeButton.appendTo(moreEventContent.querySelector('.' + cls.MORE_EVENT_CLOSE_CLASS));
-            ej2_base_1.EventHandler.add(moreEventContent.querySelector('.' + cls.MORE_EVENT_CLOSE_CLASS), 'click', this.closeClick, this);
-            ej2_base_1.EventHandler.add(moreEventContent.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS), 'click', this.dayNavigationClick, this);
+        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.dayNavigationClick = 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.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.renderEventPopup = function () {
-            var viewHeight = document.body.offsetHeight;
-            var toolBarHeight = this.parent.element.querySelector('.' + cls.TOOLBAR_CONTAINER);
-            var eventWrapper = ej2_base_2.createElement('div', {
-                className: cls.SELECT_POPUP_WRAPPER_CLASS + ' e-popup-close'
-            });
-            this.parent.element.appendChild(eventWrapper);
-            var eventTemplate = '<div id="${id}EventDetailsWindow" class="${classList[0]}">' +
-                '<div class="${classList[1]}">' +
-                '<div class="${classList[23]}"><div class="${classList[24]}">' +
-                '<div class="${classList[2]} ${classList[5]}" title="${l10n.close}" tabindex="0"></div></div>' +
-                '<div class="${classList[25]}"><div class="${classList[3]} ${classList[5]}" title="${l10n.editEvent}" tabindex="0"></div>' +
-                '<div class="${classList[4]} ${classList[5]}" title="${l10n.delete}" tabindex="0"></div></div></div>' +
-                '<div class="${classList[6]} ${classList[7]}"></div></div>' +
-                '<div class="${classList[9]}">' +
-                '<div class="${classList[11]}"><div class="${classList[10]} ${classList[5]}"></div>' +
-                '<div class="${classList[8]} ${classList[7]}">' +
-                '<div class="${classList[26]} ${classList[7]}"></div><div class="${classList[27]} ${classList[7]}"></div></div></div>' +
-                '<div class="${classList[14]}"><div class="${classList[15]} ${classList[5]}"></div>' +
-                '<div class="${classList[16]} ${classList[7]}"></div></div>' +
-                '<div class="${classList[17]}"><div class="${classList[18]} ${classList[5]}"></div>' +
-                '<div class="${classList[19]} ${classList[7]}"></div></div>' +
-                '<div class="${classList[20]}"><div class="${classList[21]} ${classList[5]}"></div>' +
-                '<div class="${classList[22]} ${classList[7]}"></div></div></div>';
-            var eventSelectTemplate = '<div id="${id}EventDetailsWindow" class="${classList[0]} ${classList[13]}">' +
-                '<div class="${classList[1]}"><tbody>' +
-                '<div class="${classList[2]} ${classList[5]}" title="${l10n.close}" tabindex="0"></div>' +
-                '<div class="${classList[12]}"></div>' +
-                '<div class="${classList[3]} ${classList[5]}" title="${l10n.editEvent}" tabindex="0"></div>' +
-                '<div class="${classList[4]} ${classList[5]}" title="${l10n.delete}" tabindex="0"></div></div>';
-            var eventArgs = {
-                classList: [
-                    cls.QUICK_POPUP_CLASS, cls.QUICK_POPUP_TABLE_CLASS, cls.SELECTED_EVENT_CLOSE_CLASS,
-                    cls.SELECTED_EVENT_EDIT_CLASS, cls.SELECTED_EVENT_DELETE_CLASS, cls.ICON,
-                    cls.QUICK_POPUP_EVENT_TITLE_CLASS, cls.QUICK_POPUP_TEXT_ALIGN_CLASS, cls.QUICK_POPUP_DATE_TIME_DETAILS_CLASS,
-                    cls.QUICK_POPUP_CONTENT_CLASS, cls.SELECTED_DATE_TIME_CLASS, cls.APPOINTMENT_TIME, cls.SELECTED_EVENT_TITLE_CLASS,
-                    cls.SELECTED_EVENT_CONTAINER_CLASS, cls.APPOINTMENT_LOCATION, cls.SELECTED_CALENDER_CLASS,
-                    cls.QUICK_POPUP_LOCATION_DETAILS_CLASS, cls.EVENT_WINDOW_TZ_CLASS, cls.EVENT_TIME_ZONE_CLASS,
-                    cls.EVENT_ZONE_DETAILS_CLASS, cls.EVENT_DETAILS_CLASS, cls.EVENT_NOTE_CLASS, cls.EVENT_NOTE_DETAILS_CLASS,
-                    cls.QUICK_POPUP_ICON_CLASS, cls.QUICK_POPUP_CLOSE_ICON_CLASS, cls.QUICK_POPUP_EDIT_ICON_CLASS,
-                    cls.DEVICE_DATE_TIME_DETAILS_CLASS, cls.DEVICE_RECURRENCE_SUMMARY_CLASS
-                ],
-                id: this.parent.element.id,
-                l10n: {
-                    close: this.l10n.getConstant('closeButton'),
-                    delete: this.l10n.getConstant('delete'),
-                    editSeries: this.l10n.getConstant('editSeries'),
-                    editEvent: this.l10n.getConstant('editEvent')
-                }
-            };
-            this.selectedEventPopup = ej2_base_1.compile(eventTemplate)(eventArgs)[0];
-            this.multipleEventPopup = ej2_base_1.compile(eventSelectTemplate)(eventArgs)[0];
-            this.eventPopup = new ej2_popups_1.Popup(eventWrapper, {
-                targetType: 'relative',
-                content: this.selectedEventPopup,
-                collision: { X: 'fit', Y: 'fit' },
-                enableRtl: this.parent.enableRtl,
-                hideAnimation: { name: 'ZoomOut' },
-                showAnimation: { name: 'ZoomIn' },
-                relateTo: document.body
-            });
-            eventWrapper.querySelector('.' + cls.QUICK_POPUP_TABLE_CLASS).style.height = ej2_base_1.formatUnit((viewHeight * 25) / 100);
-            eventWrapper.querySelector('.' + cls.QUICK_POPUP_CONTENT_CLASS).style.height = ej2_base_1.formatUnit((viewHeight * 75) / 100);
-            ej2_base_1.EventHandler.add(this.selectedEventPopup.querySelector('.' + cls.SELECTED_EVENT_CLOSE_CLASS), 'click', this.closeClick, this);
-            ej2_base_1.EventHandler.add(this.selectedEventPopup.querySelector('.' + cls.SELECTED_EVENT_EDIT_CLASS), 'click', this.editClick, this);
-            ej2_base_1.EventHandler.add(this.selectedEventPopup.querySelector('.' + cls.SELECTED_EVENT_DELETE_CLASS), 'click', this.deleteClick, this);
-            ej2_base_1.EventHandler.add(this.multipleEventPopup.querySelector('.' + cls.SELECTED_EVENT_CLOSE_CLASS), 'click', this.closeClick, this);
-            ej2_base_1.EventHandler.add(this.multipleEventPopup.querySelector('.' + cls.SELECTED_EVENT_EDIT_CLASS), 'click', this.editClick, this);
-            ej2_base_1.EventHandler.add(this.multipleEventPopup.querySelector('.' + cls.SELECTED_EVENT_DELETE_CLASS), 'click', this.deleteClick, this);
+        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 dialogFooter = this.quickDialog.element.querySelector('.' + cls.DIALOG_FOOTER_CONTENT_CLASS).children;
-            dialogFooter[0].innerHTML = (this.parent.currentAction === 'Delete') ? this.l10n.getConstant('deleteEvent') :
-                this.l10n.getConstant('editEvent');
-            dialogFooter[1].innerHTML = (this.parent.currentAction === 'Delete') ? this.l10n.getConstant('deleteSeries') :
-                this.l10n.getConstant('editSeries');
-            this.quickDialog.content = (this.parent.currentAction === 'Delete') ? this.l10n.getConstant('deleteRecurrenceContent') :
-                this.l10n.getConstant('editContent');
-            this.quickDialog.header = (this.parent.currentAction === 'Delete') ? this.l10n.getConstant('deleteEvent') :
-                this.l10n.getConstant('editEvent');
+            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);
+            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':
+                    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');
+        };
         QuickPopups.prototype.openDeleteAlert = function () {
-            var dialogFooter = this.quickDialog.element.querySelector('.' + cls.DIALOG_FOOTER_CONTENT_CLASS).children;
-            dialogFooter[0].innerHTML = this.l10n.getConstant('delete');
-            dialogFooter[1].innerHTML = this.l10n.getConstant('cancel');
-            this.quickDialog.content = this.l10n.getConstant('deleteContent');
-            this.quickDialog.header = this.l10n.getConstant('deleteEvent');
+            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');
@@ -208,5 +204,10 @@ this.showQuickDialog('DeleteAlert');
             this.quickDialog.content = this.l10n.getConstant(type);
-            var dialogFooter = this.quickDialog.element.querySelector('.' + cls.DIALOG_FOOTER_CONTENT_CLASS).children;
-            dialogFooter[0].innerHTML = this.l10n.getConstant('ok');
-            dialogFooter[1].innerHTML = this.l10n.getConstant('cancel');
+            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');
@@ -218,4 +219,3 @@ this.showQuickDialog('ValidationAlert');
             var eventProp = {
-                type: popupType, cancel: false, data: this.parent.activeEventData,
-                element: this.quickDialog.element
+                type: popupType, cancel: false, data: this.parent.activeEventData, element: this.quickDialog.element
             };
@@ -228,29 +228,34 @@ this.parent.trigger(event.popupOpen, eventProp);
         };
-        QuickPopups.prototype.createMoreEventList = function (events) {
+        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 });
-            for (var _i = 0, events_1 = events; _i < events_1.length; _i++) {
-                var event_1 = events_1[_i];
+            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 ||
+                    this.l10n.getConstant('noTitle'));
                 var appointmentEle = ej2_base_2.createElement('div', {
-                    id: '' + event_1[fields.id],
+                    id: '' + eventData[fields.id],
                     className: cls.APPOINTMENT_CLASS,
                     attrs: {
-                        'data-guid': event_1.Guid,
-                        'role': 'button', 'tabindex': '0', 'aria-readonly': 'false', 'aria-selected': 'false', 'aria-grabbed': 'true',
-                        'aria-label': ej2_base_1.isNullOrUndefined(event_1[fields.subject]) ?
-                            this.parent.eventSettings.fields.subject.default : event_1[fields.subject]
+                        '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.APPOINTMENT_SUBJECT,
-                    innerHTML: event_1[fields.subject] || this.parent.eventSettings.fields.subject.default
-                }));
-                if (!ej2_base_1.isNullOrUndefined(event_1[fields.recurrenceRule])) {
-                    var iconClass = (event_1[fields.id] === event_1[fields.recurrenceID]) ?
+                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 }));
                 }
-                this.parent.eventBase.wireAppointmentEvents(appointmentEle);
-                moreEventWrapperEle.appendChild(appointmentEle);
+                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);
+                }
             }
@@ -260,19 +265,35 @@ moreEventContentEle.appendChild(moreEventWrapperEle);
         };
-        QuickPopups.prototype.eventHold = function (args) {
-            var target = args.target;
+        QuickPopups.prototype.tapHoldEventPopup = function (args) {
+            var target = ej2_base_1.closest(args.event.target, '.' + cls.APPOINTMENT_CLASS);
             this.isMultipleEventSelect = false;
-            if (!ej2_base_1.isNullOrUndefined(ej2_base_1.closest(target, '.' + cls.APPOINTMENT_CLASS)) && this.parent.isAdaptive) {
-                target = ej2_base_1.closest(target, '.' + cls.APPOINTMENT_CLASS);
+            if (!ej2_base_1.isNullOrUndefined(target) && this.parent.isAdaptive) {
                 this.parent.selectedElements = [];
                 this.isMultipleEventSelect = true;
-                this.selectedEventDialog(target);
-                return;
+                var selectedElements = 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') {
+            if (!this.parent.showQuickInfo || this.parent.currentView === 'MonthAgenda' || this.parent.isAdaptive) {
+                this.quickPopupHide();
                 return;
             }
-            var target = ej2_base_1.closest(args.event.target, '.' + cls.WORK_CELLS_CLASS + ',.' +
-                cls.ALLDAY_CELLS_CLASS + ',.' + cls.HEADER_CELLS_CLASS);
+            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)) {
@@ -282,4 +303,4 @@ return;
             var timeDetails = this.parent.activeCellsData.isAllDay ? this.l10n.getConstant('allDay') :
-                this.getDateFormat(this.parent.activeCellsData.startTime, 'hm') + ' - ' +
-                    this.getDateFormat(this.parent.activeCellsData.endTime, 'hm');
+                this.parent.getTimeString(this.parent.activeCellsData.startTime) + ' - ' +
+                    this.parent.getTimeString(this.parent.activeCellsData.endTime);
             var temp = {};
@@ -290,32 +311,28 @@ temp[this.parent.eventFields.startTime] = this.parent.activeCellsData.startTime;
             var cellDetails = this.getFormattedString(temp, 'cell');
-            var cellTemplate = '<div id="${id}EventCreateWindow" class="${classList[0]}"><table class="${classList[1]}"><tbody>' +
-                '<tr><td><form class="${classList[2]}" onsubmit="return false;">' +
-                '<input class="${classList[3]}" type="text" name="Subject" /></form></td></tr>' +
-                '<tr><td><div class="${classList[4]} ${classList[8]}">' + cellDetails.details + '</div></td></tr>' +
-                '</tbody></table><div class="${classList[5]}">' +
-                '<div class="${classList[6]} ${classList[8]}" title="${l10n.moreDetails}" tabindex="0">${l10n.moreDetails}</div>' +
-                '<div class="${classList[7]} ${classList[8]}" title="${l10n.save}" tabindex="0">${l10n.save}</div></div></div>';
-            var cellArgs = {
-                classList: [
-                    cls.QUICK_POPUP_CLASS, cls.QUICK_POPUP_TABLE_CLASS, cls.EVENT_WINDOW_FORM_CLASS, cls.QUICK_POPUP_SUBJECT_CLASS,
-                    cls.QUICK_POPUP_DATE_TIME_DETAILS_CLASS, cls.QUICK_POPUP_FOOTER_CLASS, cls.QUICK_POPUP_EVENT_DETAILS_CLASS,
-                    cls.QUICK_POPUP_EVENT_CREATE_CLASS, cls.QUICK_POPUP_TEXT_ALIGN_CLASS
-                ],
-                id: this.parent.element.id,
-                l10n: {
-                    moreDetails: this.l10n.getConstant('moreDetails'),
-                    save: this.l10n.getConstant('save')
-                }
-            };
-            var quickCellPopup = ej2_base_1.compile(cellTemplate)(cellArgs)[0];
+            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.QUICK_POPUP_SUBJECT_CLASS),
+                element: quickCellPopup.querySelector('.' + cls.SUBJECT_CLASS),
                 properties: { placeholder: this.l10n.getConstant('addTitle') }
             });
-            this.flatButton.appendTo(quickCellPopup.querySelector('.' + cls.QUICK_POPUP_EVENT_DETAILS_CLASS));
-            this.primaryButton.appendTo(quickCellPopup.querySelector('.' + cls.QUICK_POPUP_EVENT_CREATE_CLASS));
-            ej2_base_1.EventHandler.add(quickCellPopup.querySelector('.' + cls.QUICK_POPUP_EVENT_CREATE_CLASS), 'click', this.saveClick, this);
-            ej2_base_1.EventHandler.add(quickCellPopup.querySelector('.' + cls.QUICK_POPUP_EVENT_DETAILS_CLASS), 'click', this.detailsClick, this);
+            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', '', this.parent.activeViewOptions.readonly, 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.target = '.' + cls.WORK_CELLS_CLASS;
             this.quickPopup.dataBind();
@@ -326,17 +343,11 @@ this.applyFormValidation();
             }
-            if (!this.parent.isAdaptive && target.getAttribute('data-tooltip-id') === null) {
-                this.quickPopup.close();
-                this.quickPopup.open(target);
+            var isSameTarget = this.quickPopup.relateTo === target;
+            this.quickPopup.relateTo = target;
+            if (!isSameTarget && !this.parent.isAdaptive) {
+                this.beforeQuickPopupOpen(target);
             }
             else {
-                quickCellPopup.querySelector('.' + cls.QUICK_POPUP_SUBJECT_CLASS).focus();
+                quickCellPopup.querySelector('.' + cls.SUBJECT_CLASS).focus();
             }
         };
-        QuickPopups.prototype.applyFormValidation = function () {
-            var form = this.quickPopup.content
-                .querySelector('.' + cls.EVENT_WINDOW_FORM_CLASS);
-            var rules = {};
-            rules[this.parent.eventSettings.fields.subject.name] = this.parent.eventSettings.fields.subject.validation;
-            this.fieldValidator.renderFormValidator(form, rules);
-        };
         QuickPopups.prototype.eventClick = function (events) {
@@ -349,9 +360,4 @@ if (this.parent.eventTooltip) {
             }
-            if (this.parent.isAdaptive) {
-                if (this.isMultipleEventSelect) {
-                    this.selectedEventDialog(ej2_base_1.closest(events.element, '.' + cls.APPOINTMENT_CLASS));
-                }
-                else {
-                    this.deviceEventClick(events);
-                }
+            if (this.parent.isAdaptive && this.isMultipleEventSelect) {
+                this.updateTapHoldEventPopup(ej2_base_1.closest(events.element, '.' + cls.APPOINTMENT_CLASS));
             }
@@ -361,27 +367,43 @@ else {
                 var args = this.getFormattedString(eventData, 'event');
-                var eventTemplate = '<div id="${id}EventDetailsWindow" class="${classList[0]}"><table class="${classList[1]}"><tbody>' +
-                    '<tr><td><div class="${classList[2]} ${classList[7]}">' + args.eventSubject + '</div></td></tr>' +
-                    '<tr><td><div class="${classList[3]} ${classList[7]}">' + args.details + '</div></td></tr>' +
-                    '</tbody></table><div class="${classList[4]}">' +
-                    '<div class="${classList[5]} ${classList[7]}" title="${l10n.delete}" tabindex="0">${l10n.delete}</div>' +
-                    '<div class="${classList[6]} ${classList[7]}" title="${l10n.edit}" tabindex="0">${l10n.edit}</div></div></div>';
-                var eventArgs = {
-                    classList: [
-                        cls.QUICK_POPUP_CLASS, cls.QUICK_POPUP_TABLE_CLASS, cls.QUICK_POPUP_EVENT_TITLE_CLASS,
-                        cls.QUICK_POPUP_DATE_TIME_DETAILS_CLASS, cls.QUICK_POPUP_FOOTER_CLASS, cls.QUICK_POPUP_DELETE_EVENT_CLASS,
-                        cls.QUICK_POPUP_EDIT_EVENT_CLASS, cls.QUICK_POPUP_TEXT_ALIGN_CLASS
-                    ],
-                    id: this.parent.element.id,
-                    l10n: {
-                        delete: this.l10n.getConstant('delete'),
-                        edit: this.l10n.getConstant('edit')
-                    }
-                };
-                var quickEventPopup = ej2_base_1.compile(eventTemplate)(eventArgs)[0];
-                this.flatButton.appendTo(quickEventPopup.querySelector('.' + cls.QUICK_POPUP_DELETE_EVENT_CLASS));
-                this.primaryButton.appendTo(quickEventPopup.querySelector('.' + cls.QUICK_POPUP_EDIT_EVENT_CLASS));
-                ej2_base_1.EventHandler.add(quickEventPopup.querySelector('.' + cls.QUICK_POPUP_DELETE_EVENT_CLASS), 'click', this.deleteClick, this);
-                ej2_base_1.EventHandler.add(quickEventPopup.querySelector('.' + cls.QUICK_POPUP_EDIT_EVENT_CLASS), 'click', this.editClick, this);
+                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);
+                }
                 this.quickPopup.content = quickEventPopup;
-                this.quickPopup.target = '.' + cls.APPOINTMENT_CLASS;
                 this.quickPopup.dataBind();
@@ -391,74 +413,70 @@ if (this.morePopup && !ej2_base_1.closest(events.element, '.' + cls.MORE_EVENT_WRAPPER_CLASS)) {
                 }
-                if (!this.parent.isAdaptive && events.element.getAttribute('data-tooltip-id') === null) {
-                    this.quickPopup.close();
-                    this.quickPopup.open(events.element);
+                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);
                 }
                 else {
-                    this.quickPopup.content.querySelector('.' + cls.QUICK_POPUP_EDIT_EVENT_CLASS).focus();
+                    editIcon.focus();
+                    if (!this.parent.isAdaptive) {
+                        var editButton = quickEventPopup.querySelector('.' + cls.EDIT_EVENT_CLASS);
+                        editButton.focus();
+                    }
+                    this.applyEventColor();
                 }
             }
         };
-        QuickPopups.prototype.deviceEventClick = function (events) {
-            var fields = this.parent.eventFields;
-            var eventData = events.event;
-            var eventSelectSubject = (ej2_base_1.isNullOrUndefined(eventData[fields.subject])) ?
-                this.l10n.getConstant('noTitle') : eventData[fields.subject];
-            var eventTimeDetails = (eventData[fields.isAllDay]) ? this.l10n.getConstant('allDay') :
-                this.getDateFormat(eventData[fields.startTime], 'hm') + ' - ' +
-                    this.getDateFormat(eventData[fields.endTime], 'hm');
-            var eventSelectDetails = this.getTimeDetails(eventData) + ' (' + eventTimeDetails + ')';
-            this.selectedEventPopup.querySelector('.' + cls.QUICK_POPUP_EVENT_TITLE_CLASS).innerHTML = eventSelectSubject;
-            this.selectedEventPopup.querySelector('.' + cls.DEVICE_DATE_TIME_DETAILS_CLASS).innerHTML = eventSelectDetails;
-            this.selectedEventPopup.querySelector('.' + cls.QUICK_POPUP_LOCATION_DETAILS_CLASS).innerHTML =
-                (!ej2_base_1.isNullOrUndefined(eventData[fields.location])) ? eventData[fields.location] : '';
-            this.selectedEventPopup.querySelector('.' + cls.EVENT_ZONE_DETAILS_CLASS).innerHTML = this.getTimezone(eventData);
-            this.selectedEventPopup.querySelector('.' + cls.EVENT_NOTE_DETAILS_CLASS).innerHTML =
-                (!ej2_base_1.isNullOrUndefined(eventData[fields.description])) ? eventData[fields.description] : '';
-            if (!ej2_base_1.isNullOrUndefined(eventData[fields.recurrenceRule])) {
-                var recurrenceEditor = this.parent.eventWindow.getRecurrenceEditorInstance();
-                var ruleSummary = recurrenceEditor.getRuleSummary(eventData[fields.recurrenceRule]);
-                this.selectedEventPopup.querySelector('.' + cls.DEVICE_RECURRENCE_SUMMARY_CLASS).innerHTML =
-                    ruleSummary.charAt(0).toUpperCase() + ruleSummary.slice(1);
+        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;
+                if (type === 'event') {
+                    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 {
-                this.selectedEventPopup.querySelector('.' + cls.DEVICE_RECURRENCE_SUMMARY_CLASS).innerHTML = '';
+                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 += ', ';
+                                }
+                            }
+                        });
+                    });
+                }
+                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];
+                }
             }
-            if (ej2_base_1.isNullOrUndefined(eventData[fields.location]) || eventData[fields.location] === '') {
-                ej2_base_2.addClass([this.selectedEventPopup.querySelector('.' + cls.APPOINTMENT_LOCATION)], cls.DISABLE_CLASS);
-            }
-            else {
-                ej2_base_2.removeClass([this.selectedEventPopup.querySelector('.' + cls.APPOINTMENT_LOCATION)], cls.DISABLE_CLASS);
-            }
-            if (ej2_base_1.isNullOrUndefined(eventData[fields.startTimezone]) && ej2_base_1.isNullOrUndefined(eventData[fields.endTimezone])) {
-                ej2_base_2.addClass([this.selectedEventPopup.querySelector('.' + cls.EVENT_WINDOW_TZ_CLASS)], cls.DISABLE_CLASS);
-            }
-            else {
-                ej2_base_2.removeClass([this.selectedEventPopup.querySelector('.' + cls.EVENT_WINDOW_TZ_CLASS)], cls.DISABLE_CLASS);
-            }
-            if (ej2_base_1.isNullOrUndefined(eventData[fields.description]) || eventData[fields.description] === '') {
-                ej2_base_2.addClass([this.selectedEventPopup.querySelector('.' + cls.EVENT_DETAILS_CLASS)], cls.DISABLE_CLASS);
-            }
-            else {
-                ej2_base_2.removeClass([this.selectedEventPopup.querySelector('.' + cls.EVENT_DETAILS_CLASS)], cls.DISABLE_CLASS);
-            }
-            this.eventPopup.content = this.selectedEventPopup;
-            if (this.eventPopup && !ej2_base_1.closest(events.element, '.' + cls.MORE_EVENT_WRAPPER_CLASS)) {
-                this.showEventPopup('ViewEventInfo');
-            }
+            return resourceValue;
         };
-        QuickPopups.prototype.showEventPopup = function (popupType) {
-            var eventProp = {
-                type: popupType, cancel: false, data: this.parent.activeEventData.event,
-                target: this.parent.activeEventData.element, element: this.eventPopup.element
-            };
-            this.parent.trigger(event.popupOpen, eventProp);
-            if (eventProp.cancel) {
-                return;
-            }
-            this.eventPopup.show();
-        };
         QuickPopups.prototype.getFormattedString = function (eventData, type) {
             var fields = this.parent.eventFields;
-            var eventSubject = ej2_base_1.isNullOrUndefined(eventData[fields.subject]) ? this.l10n.getConstant('noTitle') :
-                eventData[fields.subject];
+            var eventSubject = (eventData[fields.subject] || this.l10n.getConstant('noTitle'));
             var startDate = eventData[fields.startTime];
@@ -469,4 +487,4 @@ var endDate = eventData[fields.endTime];
                 this.getDateFormat(util.addDays(new Date(endDate.getTime()), -1), 'long') : this.getDateFormat(endDate, 'long');
-            var startTimeDetail = this.getDateFormat(startDate, 'hm');
-            var endTimeDetail = this.getDateFormat(endDate, 'hm');
+            var startTimeDetail = this.parent.getTimeString(startDate);
+            var endTimeDetail = this.parent.getTimeString(endDate);
             var details;
@@ -489,15 +507,25 @@ var allDayLength = (endDate.getTime() - startDate.getTime()) / util.MS_PER_DAY;
         };
-        QuickPopups.prototype.moreEventClick = function (data) {
-            if (!this.parent.showQuickInfo) {
-                return;
+        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);
             }
-            if (this.morePopup.element.querySelector('.' + cls.MORE_EVENT_CONTENT_CLASS)) {
-                this.morePopup.element.querySelector('.' + cls.MORE_EVENT_CONTENT_CLASS).remove();
-            }
-            this.morePopup.element.children[0].appendChild(this.createMoreEventList(data.event));
             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');
-            this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS).innerHTML = this.getDateFormat(data.date, 'd');
-            this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS).setAttribute('data-date', selectedDate);
+            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;
+            }
+            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);
+            }
             this.morePopup.relateTo = ej2_base_1.closest(target, '.' + cls.WORK_CELLS_CLASS);
@@ -512,20 +540,21 @@ var eventProp = { type: 'EventContainer', data: data, cancel: false, element: this.morePopup.element };
         QuickPopups.prototype.saveClick = function () {
-            if (!this.quickPopup.content.querySelector('.' + cls.EVENT_WINDOW_FORM_CLASS)
-                .ej2_instances[0].validate()) {
+            if (!this.quickPopup.element.querySelector('.' + cls.FORM_CLASS).ej2_instances[0].validate()) {
                 return;
             }
-            this.quickPopup.close();
             var fields = this.parent.eventFields;
             var saveObj = {};
             saveObj[fields.id] = this.parent.eventBase.getEventMaxId() + 1;
-            saveObj[fields.subject] =
-                this.quickPopup.content.querySelector('.' + cls.QUICK_POPUP_SUBJECT_CLASS).value ||
-                    this.parent.eventSettings.fields.subject.default;
+            saveObj[fields.subject] = this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS).value ||
+                this.parent.eventSettings.fields.subject.default || this.parent.localeObj.getConstant('addTitle');
             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.content.querySelector('.' + cls.QUICK_POPUP_SUBJECT_CLASS).value;
+            var subject = this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS).value;
             if (subject !== '') {
@@ -535,19 +564,9 @@ var args = ej2_base_2.extend(this.parent.activeCellsData, { subject: subject });
             this.fieldValidator.destroyToolTip();
-            this.quickPopup.close();
+            this.quickPopupHide();
             this.parent.eventWindow.openEditor(this.parent.activeCellsData, 'Add');
         };
         QuickPopups.prototype.editClick = function (event) {
-            this.quickPopup.close({ effect: 'None' });
-            this.morePopup.hide();
+            this.quickPopupHide(true);
             var data = this.parent.activeEventData.event;
             this.parent.currentAction = 'EditSeries';
-            if (this.parent.isAdaptive) {
-                this.eventPopup.hide();
-                this.isMultipleEventSelect = false;
-                if (!ej2_base_1.isNullOrUndefined(data[this.parent.eventFields.recurrenceRule])) {
-                    this.parent.currentAction = 'EditOccurrence';
-                    this.openRecurrenceAlert();
-                    return;
-                }
-            }
             if (!ej2_base_1.isNullOrUndefined(data[this.parent.eventFields.recurrenceRule])) {
@@ -562,8 +581,3 @@ this.parent.currentAction = 'EditOccurrence';
         QuickPopups.prototype.deleteClick = function () {
-            this.quickPopup.close({ effect: 'None' });
-            this.morePopup.hide();
-            if (this.parent.isAdaptive) {
-                this.eventPopup.hide();
-                this.isMultipleEventSelect = false;
-            }
+            this.quickPopupHide(true);
             this.parent.currentAction = 'Delete';
@@ -577,8 +591,44 @@ if (this.parent.activeEventData.event[this.parent.eventFields.recurrenceRule]) {
         };
+        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);
+            if (filteredEvents.length === 0) {
+                this.morePopup.element.children[0].appendChild(ej2_base_2.createElement('div', {
+                    className: cls.MORE_EVENT_CONTENT_CLASS,
+                    innerHTML: this.l10n.getConstant('emptyContainer')
+                }));
+            }
+            else {
+                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();
-            this.eventPopup.hide();
-            this.isMultipleEventSelect = false;
         };
         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.quickDialog.hide();
@@ -612,52 +662,34 @@ if (event.target.classList.contains(cls.QUICK_DIALOG_EDIT_EVENT_CLASS)) {
         };
-        QuickPopups.prototype.selectedEventDialog = function (target) {
+        QuickPopups.prototype.updateTapHoldEventPopup = function (target) {
             var selectedElements = this.parent.eventBase.getSelectedEventElements(target);
             this.parent.activeEventData = this.parent.eventBase.getSelectedEvents();
-            if (selectedElements.length === 1) {
-                this.multipleEventPopup.querySelector('.' + cls.SELECTED_EVENT_TITLE_CLASS).innerHTML =
-                    selectedElements[0].querySelector('.' + cls.APPOINTMENT_SUBJECT).textContent;
-                ej2_base_2.removeClass([this.multipleEventPopup.querySelector('.' + cls.SELECTED_EVENT_EDIT_CLASS)], cls.EVENT_EDIT_DISABLE_CLASS);
-                this.eventPopup.content = this.multipleEventPopup;
-                if (this.eventPopup && !ej2_base_1.closest(target, '.' + cls.MORE_EVENT_WRAPPER_CLASS)) {
-                    this.showEventPopup('EditEventInfo');
+            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 if (selectedElements.length <= 0) {
+            else {
                 this.parent.selectedElements = [];
-                this.isMultipleEventSelect = false;
-                this.eventPopup.hide();
+                this.quickPopupHide();
             }
-            else if (selectedElements.length > 1) {
-                this.multipleEventPopup.querySelector('.' + cls.SELECTED_EVENT_TITLE_CLASS).innerHTML =
-                    '(' + selectedElements.length.toString() + ')' + '&nbsp;' + this.l10n.getConstant('selectedItems');
-                ej2_base_2.addClass([this.multipleEventPopup.querySelector('.' + cls.SELECTED_EVENT_EDIT_CLASS)], cls.EVENT_EDIT_DISABLE_CLASS);
-            }
         };
         QuickPopups.prototype.getTimezone = function (event) {
-            var fields = this.parent.eventFields;
             var zoneDetails = '';
-            timezone_1.timezoneData.filter(function (zoneData) {
-                if (!ej2_base_1.isNullOrUndefined(event[fields.startTimezone]) && zoneData.Value === event[fields.startTimezone]) {
-                    zoneDetails = zoneData.Text.split(') ')[0] + ')' + zoneDetails;
-                }
-                if (!ej2_base_1.isNullOrUndefined(event[fields.endTimezone]) && zoneData.Value === event[fields.endTimezone]) {
-                    zoneDetails = zoneDetails + '&nbsp;' + zoneData.Text.split(') ')[0] + ')';
-                }
-            });
+            zoneDetails += event[this.parent.eventFields.startTimezone] || '';
+            zoneDetails += zoneDetails === '' ? '' : ' - ';
+            zoneDetails += event[this.parent.eventFields.endTimezone] || '';
             return zoneDetails;
         };
-        QuickPopups.prototype.getTimeDetails = function (event) {
-            var fields = this.parent.eventFields;
-            var startDate = event[fields.startTime];
-            var endDate = event[fields.endTime];
-            var allDayLength = (endDate.getTime() - startDate.getTime()) / util.MS_PER_DAY;
-            var timeDetails = '';
-            if (this.getDateFormat(startDate, 'yMd') === this.getDateFormat(endDate, 'yMd') || (event[fields.isAllDay] && allDayLength === 1)) {
-                timeDetails = this.parent.globalize.formatDate(startDate, { format: 'MMMM d, yyyy' });
-            }
-            else {
-                timeDetails = this.parent.globalize.formatDate(startDate, { format: 'MMM dd' }) + ' - ' +
-                    this.parent.globalize.formatDate(endDate, { format: 'MMM dd, yyyy' });
-            }
-            return timeDetails;
+        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);
         };
@@ -667,108 +699,116 @@ QuickPopups.prototype.getDateFormat = function (date, formatString) {
         };
-        QuickPopups.prototype.afterQuickPopupOpen = function (args) {
-            if (this.quickPopup.content.querySelector('.' + cls.QUICK_POPUP_SUBJECT_CLASS)) {
-                this.quickPopup.content.querySelector('.' + cls.QUICK_POPUP_SUBJECT_CLASS).focus();
+        QuickPopups.prototype.getDataFromTarget = function (target) {
+            if (target.classList.contains(cls.APPOINTMENT_CLASS)) {
+                return this.parent.activeEventData.event;
             }
-            if (this.quickPopup.content.querySelector('.' + cls.QUICK_POPUP_EDIT_EVENT_CLASS)) {
-                this.quickPopup.content.querySelector('.' + cls.QUICK_POPUP_EDIT_EVENT_CLASS).focus();
-            }
+            return this.parent.activeCellsData;
         };
-        QuickPopups.prototype.beforeQuickPopupOpen = function (args) {
-            args.element.querySelector('.' + cls.TOOLTIP_CLOSE_CLASS).setAttribute('title', this.l10n.getConstant('close'));
-            ej2_base_1.EventHandler.add(args.element, 'keydown', this.keyPress, this);
+        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: 'QuickInfo', cancel: false, data: this.getDataFromTarget(args.target),
-                target: args.target, element: args.element
+                type: popupType, cancel: false, data: this.getDataFromTarget(target),
+                target: target, element: this.quickPopup.element
             };
             this.parent.trigger(event.popupOpen, eventProp);
             if (eventProp.cancel) {
-                args.cancel = true;
+                this.destroyButtons();
+                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';
+                this.quickPopup.element.style.height = ej2_base_1.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.getDataFromTarget = function (target) {
-            if (target.classList.contains(cls.APPOINTMENT_CLASS)) {
-                return this.parent.activeEventData.event;
+        QuickPopups.prototype.applyEventColor = function () {
+            var color = this.parent.activeEventData.element.style.backgroundColor;
+            if (color === '') {
+                return;
             }
-            return this.parent.activeCellsData;
+            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.beforeQuickPopupClose = function (args) {
-            ej2_base_1.EventHandler.remove(args.element, 'keydown', this.keyPress);
-        };
-        QuickPopups.prototype.beforeQuickDialogClose = function (args) {
-            this.parent.eventBase.focusElement();
-        };
-        QuickPopups.prototype.keyPress = function (event) {
-            var popupElement = this.quickPopup.content;
-            if (event.keyCode === 9) {
-                var buttonObj = void 0;
-                if (event.target === popupElement.querySelector('.' + cls.QUICK_POPUP_EVENT_CREATE_CLASS) && !event.shiftKey) {
-                    event.preventDefault();
-                    (popupElement.querySelector('.' + cls.QUICK_POPUP_SUBJECT_CLASS)).focus();
+        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();
                 }
-                if (event.target === popupElement.querySelector('.' + cls.QUICK_POPUP_EDIT_EVENT_CLASS) && !event.shiftKey) {
-                    event.preventDefault();
-                    popupElement.querySelector('.' + cls.QUICK_POPUP_DELETE_EVENT_CLASS).focus();
-                }
-                if (event.target === popupElement.querySelector('.' + cls.QUICK_POPUP_SUBJECT_CLASS) && event.shiftKey) {
-                    event.preventDefault();
-                    popupElement.querySelector('.' + cls.QUICK_POPUP_EVENT_CREATE_CLASS).focus();
-                }
-                if (event.target === popupElement.querySelector('.' + cls.QUICK_POPUP_DELETE_EVENT_CLASS) && event.shiftKey) {
-                    event.preventDefault();
-                    popupElement.querySelector('.' + cls.QUICK_POPUP_EDIT_EVENT_CLASS).focus();
-                }
             }
-            if (event.keyCode === 13) {
-                if (event.target === popupElement.querySelector('.' + cls.QUICK_POPUP_EVENT_DETAILS_CLASS)) {
-                    event.target.click();
+            else {
+                var editElement = this.quickPopup.element.querySelector('.' + cls.EDIT_EVENT_CLASS);
+                if (editElement) {
+                    editElement.focus();
                 }
-                else if (event.target === popupElement.querySelector('.' + cls.QUICK_POPUP_EVENT_CREATE_CLASS) ||
-                    event.target === popupElement.querySelector('.' + cls.QUICK_POPUP_EDIT_EVENT_CLASS) ||
-                    event.target === popupElement.querySelector('.' + cls.QUICK_POPUP_DELETE_EVENT_CLASS)) {
-                    event.target.click();
+                var editIcon = this.quickPopup.element.querySelector('.' + cls.EDIT_CLASS);
+                if (editIcon) {
+                    editIcon.focus();
                 }
-                else if (event.target === popupElement.querySelector('.' + cls.QUICK_POPUP_SUBJECT_CLASS)) {
-                    popupElement.querySelector('.' + cls.QUICK_POPUP_EVENT_CREATE_CLASS).click();
-                    event.preventDefault();
-                }
             }
-            if (event.keyCode === 27) {
-                this.parent.quickPopup.onClosePopup();
-            }
         };
-        QuickPopups.prototype.afterMorePopupOpen = function (event) {
-            var moreEventWrapper = this.parent.element.querySelector('.' + cls.MORE_POPUP_WRAPPER_CLASS);
-            moreEventWrapper.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS).focus();
+        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 (event) {
+            this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS).focus();
             this.morePopup.refreshPosition();
         };
-        QuickPopups.prototype.afterMorePopupClose = function (event) {
-            if (!ej2_base_1.isNullOrUndefined(this.parent.element.querySelector('.' + cls.MORE_EVENT_WRAPPER_CLASS))) {
-                (this.parent.element.querySelector('.' + cls.MORE_EVENT_WRAPPER_CLASS)).remove();
+        QuickPopups.prototype.morePopupClose = function (event) {
+            var moreWrapper = this.parent.element.querySelector('.' + cls.MORE_EVENT_WRAPPER_CLASS);
+            if (moreWrapper) {
+                moreWrapper.remove();
             }
         };
-        QuickPopups.prototype.afterQuickPopupClose = function (args) {
-            this.parent.eventBase.focusElement();
+        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.quickDialogClass = function (action) {
-            var buttonElement = this.quickDialog.element.querySelector('.' + cls.DIALOG_FOOTER_CONTENT_CLASS).children;
-            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.QUICK_DIALOG_HIDE_BTN_CLASS
-            ];
-            ej2_base_2.removeClass(buttonElement, classList);
-            switch (action) {
-                case 'Recurrence':
-                    ej2_base_2.addClass([buttonElement[0]], cls.QUICK_DIALOG_EDIT_EVENT_CLASS);
-                    ej2_base_2.addClass([buttonElement[1]], cls.QUICK_DIALOG_EDIT_SERIES_CLASS);
-                    ej2_base_2.addClass([buttonElement[1]], 'e-flat');
-                    break;
-                case 'Delete':
-                    ej2_base_2.addClass([buttonElement[0]], cls.QUICK_DIALOG_DELETE_CLASS);
-                    ej2_base_2.addClass([buttonElement[1]], cls.QUICK_DIALOG_CANCEL_CLASS);
-                    ej2_base_2.removeClass([buttonElement[1]], 'e-flat');
-                    break;
-                case 'Alert':
-                    ej2_base_2.addClass([buttonElement[0]], cls.QUICK_DIALOG_ALERT_BTN_CLASS);
-                    ej2_base_2.addClass([buttonElement[1]], cls.QUICK_DIALOG_HIDE_BTN_CLASS);
-                    break;
+        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');
+                }
             }
@@ -778,6 +818,7 @@ };
             var target = e.event.target;
-            if (!ej2_base_1.closest(target, '.' + cls.QUICK_POPUP_ROOT_CLASS) && target.getAttribute('data-tooltip-id') === null) {
-                this.quickPopup.close();
+            if (!ej2_base_1.closest(target, '.' + cls.POPUP_WRAPPER_CLASS + ',.e-header-cells,.e-all-day-cells,.e-work-cells,.e-appointment')) {
+                this.quickPopupHide();
             }
-            if (!ej2_base_1.closest(target, '.' + cls.MORE_POPUP_WRAPPER_CLASS) && !target.classList.contains(cls.MORE_INDICATOR_CLASS)) {
+            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();
@@ -787,5 +828,3 @@ }
         QuickPopups.prototype.onClosePopup = function () {
-            this.quickPopup.close();
-            this.eventPopup.hide();
-            this.isMultipleEventSelect = false;
+            this.quickPopupHide();
             this.parent.eventBase.focusElement();
@@ -797,11 +836,33 @@ };
             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.getElementsByTagName('button'));
+            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();
-            this.eventPopup.destroy();
-            this.quickDialog.destroy();
-            ej2_base_2.remove(this.quickDialog.element);
-            this.quickDialog.element = null;
-            this.fieldValidator.destroyForm();
+            if (this.quickDialog.element) {
+                this.quickDialog.destroy();
+                ej2_base_2.remove(this.quickDialog.element);
+                this.quickDialog.element = null;
+            }
         };
@@ -808,0 +869,0 @@ return QuickPopups;

src/schedule/renderer/agenda.d.ts

@@ -18,2 +18,3 @@ import { IRenderer } from '../base/interface';
     agendaBase: AgendaBase;
+    dataSource: Object[];
     /**
@@ -29,6 +30,4 @@ * Constructor for agenda view
     private eventLoad(args);
+    private refreshEvent(refreshDate);
     renderContent(tBody: Element, agendaDate: Date): void;
-    private renderEmptyContent(tBody, agendaDate);
-    private createTableRowElement(date, type);
-    private createDateHeaderElement(date);
     private agendaScrolling(event);
@@ -35,0 +34,0 @@ private virtualScrolling(event);

src/schedule/renderer/agenda.js

@@ -46,10 +46,25 @@ var __extends = (this && this.__extends) || (function () {
             var agendaDate = util.resetTime(this.parent.selectedDate);
-            this.renderEmptyContent(tBody, agendaDate);
+            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.parent.eventsProcessed = this.agendaBase.processAgendaEvents(args.processedData);
+            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.element.querySelector('.' + cls.CONTENT_WRAP_CLASS + ' tbody');
+            var tBody = this.parent.getContentTable();
             tBody.innerHTML = '';
@@ -61,2 +76,15 @@ this.renderContent(tBody, agendaDate);
         };
+        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) {
@@ -80,2 +108,3 @@ var fieldMapping = this.parent.eventFields;
                 agendaDate = appoint[0][fieldMapping.startTime];
+                agendaDate = new Date(new Date(agendaDate.getTime()).setHours(0, 0, 0, 0));
                 this.updateHeaderText(appoint[0][fieldMapping.startTime]);
@@ -87,28 +116,46 @@ }
                     this.parent.agendaDaysCount < isObject.length) ? this.parent.agendaDaysCount : isObject.length;
-                for (var day = 0; day < noOfDays; day++) {
-                    var filterData = [];
-                    filterData = this.appointmentFiltering(agendaDate);
-                    var nTr = this.createTableRowElement(agendaDate, 'data');
-                    if (this.element.querySelector('tr[aria-rowindex="' + parseInt(nTr.getAttribute('aria-rowindex'), 10) + '"]')) {
-                        continue;
+                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');
+                        }
                     }
-                    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.createDateHeaderElement(agendaDate));
-                        nTr.appendChild(dTd);
-                        nTr.appendChild(this.agendaBase.createAgendaContentElement(elementType, filterData, aTd));
-                        tBody.appendChild(nTr);
+                    this.agendaBase.calculateResourceTableElement(tBody, this.parent.agendaDaysCount, date);
+                }
+                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;
+                        }
                     }
-                    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;
-                    }
                 }
@@ -118,3 +165,3 @@ endDate = new Date(agendaDate.getTime() - util.MS_PER_DAY);
             else {
-                this.renderEmptyContent(tBody, agendaDate);
+                this.agendaBase.renderEmptyContent(tBody, agendaDate);
                 endDate = util.addDays(agendaDate, this.parent.agendaDaysCount - 1);
@@ -124,47 +171,4 @@ }
         };
-        Agenda.prototype.renderEmptyContent = function (tBody, agendaDate) {
-            var eTr = this.createTableRowElement(agendaDate, 'noEvents');
-            var eTd = eTr.children[0];
-            var noEvents = ej2_base_2.createElement('div', {
-                className: cls.AGENDA_EMPTY_EVENT_CLASS,
-                innerHTML: this.l10n.getConstant('noEvents')
-            });
-            eTd.appendChild(noEvents);
-            tBody.appendChild(eTr);
-        };
-        Agenda.prototype.createTableRowElement = function (date, type) {
-            var daysCount = util.getDaysCount(this.parent.selectedDate.getTime(), date.getTime());
-            var tr = ej2_base_2.createElement('tr', { attrs: { 'role': 'row', 'aria-rowindex': daysCount.toString() } });
-            var td = ej2_base_2.createElement('td', {
-                attrs: {
-                    '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;
-        };
-        Agenda.prototype.createDateHeaderElement = function (date) {
-            var dateHeader;
-            if (this.parent.activeViewOptions.dateHeaderTemplate) {
-                dateHeader = ej2_base_2.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);
-            }
-            else {
-                dateHeader = this.getMobileDateElement(date, cls.AGENDA_HEADER_CLASS);
-            }
-            return dateHeader;
-        };
         Agenda.prototype.agendaScrolling = function (event) {
-            this.parent.quickPopup.quickPopup.close();
+            this.parent.quickPopup.quickPopupHide();
             if (this.parent.activeViewOptions.allowVirtualScrolling) {
@@ -258,6 +262,3 @@ this.virtualScrolling(event);
             if (this.parent.showHeaderBar) {
-                var dateRangeText = this.getDateRangeText(date);
-                var headerElement = this.parent.headerModule.element.querySelector('.e-date-range');
-                headerElement.setAttribute('aria-label', dateRangeText);
-                headerElement.querySelector('.e-tbar-btn-text').innerHTML = dateRangeText;
+                this.parent.headerModule.updateDateRange(this.getDateRangeText(date));
             }
@@ -295,2 +296,6 @@ };
             var filterData = this.parent.eventBase.filterEvents(dateStart, dateEnd);
+            if (filterData.length === 0) {
+                this.refreshEvent(startDate);
+                filterData = this.parent.eventBase.filterEvents(dateStart, dateEnd);
+            }
             return filterData;
@@ -386,10 +391,11 @@ };
                 if (this.parent.activeViewOptions.allowVirtualScrolling) {
-                    ej2_base_2.addClass(this.parent.headerModule.element.querySelectorAll('.e-prev,.e-next'), cls.AGENDA_HIDDEN_CLASS);
-                    ej2_base_2.addClass([this.parent.headerModule.element.querySelector('.e-date-range')], cls.AGENDA_ALIGN_CLASS);
+                    this.parent.headerModule.updateHeaderItems('add');
                 }
                 else {
-                    ej2_base_2.removeClass(this.parent.headerModule.element.querySelectorAll('.e-prev,.e-next'), cls.AGENDA_HIDDEN_CLASS);
-                    ej2_base_2.removeClass([this.parent.headerModule.element.querySelector('.e-date-range')], cls.AGENDA_ALIGN_CLASS);
+                    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);
@@ -404,7 +410,9 @@ contentArea.style.height = ej2_base_1.formatUnit(this.parent.element.offsetHeight - headerHeight);
                 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) {
-                    ej2_base_2.removeClass(this.parent.headerModule.element.querySelectorAll('.e-prev,.e-next'), cls.AGENDA_HIDDEN_CLASS);
-                    ej2_base_2.removeClass([this.parent.headerModule.element.querySelector('.e-date-range')], cls.AGENDA_ALIGN_CLASS);
+                    this.parent.headerModule.updateHeaderItems('remove');
                 }
@@ -411,0 +419,0 @@ }

src/schedule/renderer/day.js

@@ -22,3 +22,3 @@ var __extends = (this && this.__extends) || (function () {
         Day.prototype.getNextPreviousDate = function (type) {
-            var daysCount = (type === 'next') ? 1 : -1;
+            var daysCount = (type === 'next') ? this.parent.activeViewOptions.interval : -(this.parent.activeViewOptions.interval);
             if (this.parent.activeViewOptions.showWeekend) {
@@ -39,2 +39,5 @@ return util.addDays(this.parent.selectedDate, daysCount);
             }
+            if (this.parent.activeViewOptions.interval > 1) {
+                return this.formatDateRange(this.renderDates[0], this.renderDates[this.renderDates.length - 1]);
+            }
             return this.formatDateRange(this.parent.selectedDate);
@@ -41,0 +44,0 @@ };

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

@@ -35,7 +35,9 @@ import { CalendarView } from '@syncfusion/ej2-calendars';
     private getItems();
-    private getItemObject(viewName);
+    private getItemObject(viewName, displayName);
     private renderHeaderPopup();
     private calendarChange(args);
+    private calculateViewIndex(args);
     private toolbarClickHandler(args);
     getHeaderElement(): HTMLElement;
+    updateHeaderItems(classType: string): void;
     /**
@@ -42,0 +44,0 @@ * Get module name.

src/schedule/renderer/header-renderer.js

@@ -38,6 +38,6 @@ 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) {
             var items = this.getItems();
-            var args = ej2_base_1.extend({}, { requestType: 'toolbarItemRendering', items: items });
+            var args = { requestType: 'toolbarItemRendering', items: items };
             this.parent.trigger(events.actionBegin, args);
             this.toolbarObj = new ej2_navigations_1.Toolbar({
-                items: items,
+                items: args.items,
                 overflowMode: 'Popup',
@@ -49,4 +49,12 @@ clicked: this.toolbarClickHandler.bind(this),
             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: items });
+            this.parent.trigger(events.actionComplete, { requestType: 'toolBarItemRendered', items: this.toolbarObj.items });
         };
@@ -56,6 +64,10 @@ HeaderRenderer.prototype.updateItems = function () {
                 var items = this.getItems();
-                this.parent.trigger(events.actionBegin, { requestType: 'toolbarItemRendering', items: items });
-                this.toolbarObj.items = items;
+                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: items });
+                this.parent.trigger(events.actionComplete, {
+                    requestType: 'toolBarItemRendered',
+                    items: this.toolbarObj.items
+                });
             }
@@ -108,6 +120,7 @@ };
         HeaderRenderer.prototype.updateActiveView = function () {
-            var currentViewCls = '.e-' + this.parent.currentView.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-            var selEle = this.toolbarObj.element.querySelectorAll('.e-active-view');
+            var selEle = this.toolbarObj.element.querySelectorAll('.e-views');
             ej2_base_1.removeClass(selEle, ['e-active-view']);
-            ej2_base_1.addClass(this.toolbarObj.element.querySelectorAll(currentViewCls), ['e-active-view']);
+            if (selEle.length > 0 && selEle[this.parent.viewIndex]) {
+                ej2_base_1.addClass([selEle[this.parent.viewIndex]], ['e-active-view']);
+            }
         };
@@ -117,4 +130,7 @@ HeaderRenderer.prototype.updateDateRange = function (text) {
             var selEle = this.toolbarObj.element.querySelector('.e-date-range');
-            selEle.setAttribute('aria-label', text);
-            selEle.querySelector('.e-tbar-btn-text').innerHTML = text;
+            if (selEle) {
+                selEle.setAttribute('aria-label', text);
+                selEle.querySelector('.e-tbar-btn-text').innerHTML = text;
+                this.toolbarObj.refreshOverflow();
+            }
         };
@@ -163,4 +179,4 @@ HeaderRenderer.prototype.getDateRangeText = function () {
                     var item = _a[_i];
-                    typeof (item) === 'string' ? items.push(this.getItemObject(item.toLowerCase())) :
-                        items.push(this.getItemObject(item.option.toLowerCase()));
+                    typeof (item) === 'string' ? items.push(this.getItemObject(item.toLowerCase(), null)) :
+                        items.push(this.getItemObject(item.option.toLowerCase(), item.displayName));
                 }
@@ -170,3 +186,3 @@ }
         };
-        HeaderRenderer.prototype.getItemObject = function (viewName) {
+        HeaderRenderer.prototype.getItemObject = function (viewName, displayName) {
             var view;
@@ -177,4 +193,4 @@ var showInPopup = this.parent.isAdaptive;
                     view = {
-                        align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-day', text: this.l10n.getConstant('day'),
-                        cssClass: 'e-day'
+                        align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-day',
+                        text: displayName || this.l10n.getConstant('day'), cssClass: 'e-views e-day'
                     };
@@ -184,4 +200,4 @@ break;
                     view = {
-                        align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-week', text: this.l10n.getConstant('week'),
-                        cssClass: 'e-week'
+                        align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-week',
+                        text: displayName || this.l10n.getConstant('week'), cssClass: 'e-views e-week'
                     };
@@ -191,4 +207,4 @@ break;
                     view = {
-                        align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-workweek', text: this.l10n.getConstant('workWeek'),
-                        cssClass: 'e-work-week'
+                        align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-workweek',
+                        text: displayName || this.l10n.getConstant('workWeek'), cssClass: 'e-views e-work-week'
                     };
@@ -198,4 +214,4 @@ break;
                     view = {
-                        align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-month', text: this.l10n.getConstant('month'),
-                        cssClass: 'e-month'
+                        align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-month',
+                        text: displayName || this.l10n.getConstant('month'), cssClass: 'e-views e-month'
                     };
@@ -206,3 +222,3 @@ break;
                         align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-agenda', text: this.l10n.getConstant('agenda'),
-                        cssClass: 'e-agenda'
+                        cssClass: 'e-views e-agenda'
                     };
@@ -213,3 +229,3 @@ break;
                         align: 'Right', showAlwaysInPopup: showInPopup, prefixIcon: 'e-icon-month-agenda',
-                        text: this.l10n.getConstant('monthAgenda'), cssClass: 'e-month-agenda'
+                        text: this.l10n.getConstant('monthAgenda'), cssClass: 'e-views e-month-agenda'
                     };
@@ -251,2 +267,7 @@ break;
         };
+        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) {
@@ -256,3 +277,4 @@ if (!args.item) {
             }
-            switch (args.item.cssClass) {
+            var strClass = args.item.cssClass.replace('e-views ', '');
+            switch (strClass) {
                 case 'e-date-range':
@@ -270,18 +292,18 @@ if (!this.headerPopup) {
                 case 'e-day':
-                    this.parent.changeView('Day', args.originalEvent);
+                    this.parent.changeView('Day', args.originalEvent, undefined, this.calculateViewIndex(args));
                     break;
                 case 'e-week':
-                    this.parent.changeView('Week', args.originalEvent);
+                    this.parent.changeView('Week', args.originalEvent, undefined, this.calculateViewIndex(args));
                     break;
                 case 'e-work-week':
-                    this.parent.changeView('WorkWeek', args.originalEvent);
+                    this.parent.changeView('WorkWeek', args.originalEvent, undefined, this.calculateViewIndex(args));
                     break;
                 case 'e-month':
-                    this.parent.changeView('Month', args.originalEvent);
+                    this.parent.changeView('Month', args.originalEvent, undefined, this.calculateViewIndex(args));
                     break;
                 case 'e-agenda':
-                    this.parent.changeView('Agenda', args.originalEvent);
+                    this.parent.changeView('Agenda', args.originalEvent, undefined, this.calculateViewIndex(args));
                     break;
                 case 'e-month-agenda':
-                    this.parent.changeView('MonthAgenda', args.originalEvent);
+                    this.parent.changeView('MonthAgenda', args.originalEvent, undefined, this.calculateViewIndex(args));
                     break;
@@ -305,9 +327,7 @@ case 'e-today':
                     else {
-                        var today = new Date();
-                        var majorSlot = 60;
-                        var minorSlotCount = 2;
-                        var msMajorInterval = majorSlot * util.MS_PER_MINUTE;
-                        var msInterval = msMajorInterval / minorSlotCount;
+                        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(today.getHours(), (Math.round(startTime.getMinutes() / msInterval) * msInterval), 0);
+                        startTime.setHours(new Date().getHours(), (Math.round(startTime.getMinutes() / msInterval) * msInterval), 0);
                         var endTime = new Date(new Date(startTime.getTime()).setMilliseconds(startTime.getMilliseconds() + msInterval));
@@ -327,2 +347,16 @@ data = ej2_base_1.extend({ startTime: startTime, endTime: endTime, isAllDay: false }, { cancel: false, event: args.originalEvent });
         };
+        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.AGENDA_HIDDEN_CLASS) : ej2_base_1.removeClass([prevNavEle], cls.AGENDA_HIDDEN_CLASS);
+            }
+            if (nextNavEle) {
+                (classType === 'add') ? ej2_base_1.addClass([nextNavEle], cls.AGENDA_HIDDEN_CLASS) : ej2_base_1.removeClass([nextNavEle], cls.AGENDA_HIDDEN_CLASS);
+            }
+            if (dateRangeEle) {
+                (classType === 'add') ? ej2_base_1.addClass([dateRangeEle], cls.AGENDA_ALIGN_CLASS) : ej2_base_1.removeClass([dateRangeEle], cls.AGENDA_ALIGN_CLASS);
+            }
+        };
         HeaderRenderer.prototype.getModuleName = function () {
@@ -332,2 +366,8 @@ return 'headerbar';
         HeaderRenderer.prototype.destroy = function () {
+            if (this.headerPopup) {
+                this.headerPopup.destroy();
+            }
+            if (this.headerCalendar) {
+                this.headerCalendar.destroy();
+            }
             if (!this.toolbarObj.isDestroyed) {
@@ -334,0 +374,0 @@ this.toolbarObj.destroy();

src/schedule/renderer/month-agenda.d.ts

@@ -24,3 +24,3 @@ import { CellClickEventArgs, NotifyEventArgs } from '../base/interface';
     onCellClick(event: CellClickEventArgs): void;
-    private onEventRender(events);
+    private onEventRender(events, date?);
     private appointmentFiltering(date);
@@ -27,0 +27,0 @@ private clearElements();

src/schedule/renderer/month-agenda.js

@@ -26,4 +26,6 @@ var __extends = (this && this.__extends) || (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 });
-            contentArea.appendChild(appWrap);
+            wrapperContainer.appendChild(appWrap);
             this.appendAppContainer(appWrap);
@@ -40,7 +42,12 @@ this.setEventWrapperHeight();
             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);
-            eventWrapper.style.height = ej2_base_1.formatUnit(availableHeight);
+            wrapperContainer.style.height = eventWrapper.style.height = ej2_base_1.formatUnit(availableHeight);
         };
@@ -50,3 +57,8 @@ MonthAgenda.prototype.onDataReady = function (args) {
             this.clearElements();
-            this.parent.eventsProcessed = this.agendaBase.processAgendaEvents(args.processedData);
+            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;
@@ -62,3 +74,3 @@ for (var _i = 0, _a = this.renderDates; _i < _a.length; _i++) {
                     if (date.getTime() === util.resetTime(new Date(this.parent.selectedDate.getTime())).getTime()) {
-                        this.onEventRender(filterData);
+                        this.onEventRender(filterData, date);
                     }
@@ -70,15 +82,31 @@ }
         MonthAgenda.prototype.onCellClick = function (event) {
+            this.parent.quickPopup.quickPopupHide();
             var filterData = this.appointmentFiltering(event.startTime);
-            this.onEventRender(filterData);
+            this.onEventRender(filterData, event.startTime);
             this.parent.setProperties({ selectedDate: new Date('' + event.startTime) }, true);
         };
-        MonthAgenda.prototype.onEventRender = function (events) {
+        MonthAgenda.prototype.onEventRender = function (events, date) {
             var appWrap = this.element.querySelector('.' + cls.APPOINTMENT_WRAP_CLASS);
             appWrap.innerHTML = '';
-            if (events.length > 0) {
-                var appContainer = ej2_base_1.createElement('div', { className: cls.APPOINTMENT_CONTAINER_CLASS });
-                appWrap.appendChild(this.agendaBase.createAgendaContentElement('data', events, appContainer));
+            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 {
-                this.appendAppContainer(appWrap);
+                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);
+                }
             }
@@ -103,3 +131,3 @@ this.agendaBase.wireEventActions();
             ej2_base_1.addClass([app], cls.AGENDA_NO_EVENT_CLASS);
-            app.innerHTML = this.l10n.getConstant('noEvents');
+            app.innerHTML = this.parent.localeObj.getConstant('noEvents');
             appWrap.innerHTML = '';
@@ -106,0 +134,0 @@ appWrap.appendChild(app);

src/schedule/renderer/month.d.ts

@@ -13,2 +13,3 @@ import { IRenderer, TdData, NotifyEventArgs, CellClickEventArgs } from '../base/interface';
     private workCellAction;
+    private monthDates;
     /**
@@ -24,3 +25,4 @@ * Constructor for month view
     private onScrollUiUpdate(args);
-    private generateColLevels();
+    generateColumnLevels(): TdData[][];
+    getDateSlots(renderDates: Date[], workDays: number[]): TdData[];
     getDayNameFormat(): string;
@@ -39,3 +41,3 @@ renderLayout(type: string): void;
     private renderDateHeaderElement(data, ntd);
-    getRenderDates(): void;
+    getRenderDates(workDays?: number[]): Date[];
     getNextPreviousDate(type: string): Date;
@@ -42,0 +44,0 @@ getEndDateFromStartDate(start: Date): Date;

src/schedule/renderer/month.js

@@ -21,2 +21,3 @@ var __extends = (this && this.__extends) || (function () {
             _this.isInverseTableSelect = false;
+            _this.monthDates = {};
             _this.workCellAction = new work_cells_1.WorkCellInteraction(parent);
@@ -49,2 +50,5 @@ return _this;
             }
+            if (this.parent.uiStateValues.isGroupAdaptive && this.parent.currentView !== 'MonthAgenda') {
+                headerHeight += this.parent.element.querySelector('.' + cls.RESOURCE_HEADER_TOOLBAR).offsetHeight;
+            }
             var header = this.getDatesHeaderElement();
@@ -64,6 +68,24 @@ var content = this.getContentAreaElement();
         };
-        Month.prototype.generateColLevels = function () {
-            var count = this.parent.activeViewOptions.showWeekend ? util.WEEK_LENGTH : this.parent.activeViewOptions.workDays.length;
+        Month.prototype.generateColumnLevels = function () {
             var colLevels = [];
-            var level = [];
+            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)];
+                }
+            }
+            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++) {
@@ -74,9 +96,11 @@ var classList = [cls.HEADER_CELLS_CLASS];
                 }
-                level.push({ date: this.renderDates[col], type: 'monthHeader', className: classList });
+                dateSlots.push({
+                    date: this.renderDates[col], type: 'monthHeader', className: classList,
+                    colSpan: 1, workDays: workDays
+                });
             }
-            colLevels.push(level);
-            return colLevels;
+            return dateSlots;
         };
         Month.prototype.getDayNameFormat = function () {
-            if (this.parent.isAdaptive) {
+            if (this.parent.isAdaptive || this.parent.activeViewOptions.group.resources.length > 0) {
                 return 'abbreviated';
@@ -91,8 +115,15 @@ }
             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.generateColLevels();
+            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, {});
@@ -128,11 +159,12 @@ };
             var trEle = ej2_base_2.createElement('tr');
-            var rowsCount = this.colLevels.length;
-            var lastLevel = this.colLevels[rowsCount - 1];
-            for (var i = 0; i < rowsCount; i++) {
+            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();
-                var colspan = lastLevel.length / level.length;
                 for (var j = 0; j < level.length; j++) {
                     var td = level[j];
-                    td.colSpan = colspan;
                     ntr.appendChild(this.createHeaderCell(td));
@@ -147,2 +179,5 @@ }
             var tdEle = ej2_base_2.createElement('th');
+            if (td.colSpan) {
+                tdEle.setAttribute('colspan', td.colSpan.toString());
+            }
             if (td.className) {
@@ -155,3 +190,6 @@ ej2_base_2.addClass([tdEle], td.className);
             }
-            var args = { elementType: td.type, element: tdEle, date: td.date };
+            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);
@@ -161,3 +199,3 @@ return tdEle;
         Month.prototype.isOtherMonth = function (date) {
-            return this.parent.selectedDate.getMonth() !== date.getMonth();
+            return date.getTime() < this.monthDates.start.getTime() || date.getTime() > this.monthDates.end.getTime();
         };
@@ -170,10 +208,63 @@ Month.prototype.renderContentArea = function () {
             var td = ej2_base_2.createElement('td', { attrs: { role: 'gridcell', 'aria-selected': 'false' } });
-            var count = this.parent.activeViewOptions.showWeekend ? util.WEEK_LENGTH : this.parent.activeViewOptions.workDays.length;
-            var noOfRows = this.renderDates.length / count;
-            var startCol = 0;
-            var endCol = count;
-            for (var row = 0; row < noOfRows; row++) {
+            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);
+                        }
+                    }
+                }
+            }
+            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 (startCol = 0 + startCol; startCol < endCol; startCol++) {
-                    var data = { date: this.renderDates[startCol], type: 'monthCells', className: [cls.WORK_CELLS_CLASS] };
+                for (var col = 0; col < slotDatas[row].length; col++) {
+                    var data = slotDatas[row][col];
                     var ntd = td.cloneNode();
@@ -183,3 +274,3 @@ if (this.isOtherMonth(data.date)) {
                     }
-                    if (this.parent.workHours.highlight && this.isWorkDay(data.date)) {
+                    if (this.parent.workHours.highlight && this.isWorkDay(data.date, data.workDays)) {
                         data.className.push(cls.WORKDAY_CLASS);
@@ -195,14 +286,17 @@ }
                     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 };
+                        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 };
+                    var args = { elementType: data.type, element: ntd, date: data.date, groupIndex: data.groupIndex };
                     this.parent.trigger(event.renderCell, args);
                     ntr.appendChild(ntd);
                 }
-                endCol = endCol + count;
-                startCol = startCol + 0;
                 tbody.appendChild(ntr);
@@ -230,7 +324,8 @@ }
         };
-        Month.prototype.getRenderDates = function () {
-            this.renderDates = [];
+        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 lastWeekOfMonth = util.getWeekFirstDate(util.lastDateOfMonth(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);
@@ -240,7 +335,7 @@ var start = new Date(monthStart.getFullYear(), monthStart.getMonth(), monthStart.getDate());
                 if (this.parent.activeViewOptions.showWeekend) {
-                    this.renderDates.push(start);
+                    renderDates.push(start);
                 }
                 else {
-                    if (this.isWorkDay(start)) {
-                        this.renderDates.push(start);
+                    if (this.isWorkDay(start, workDays)) {
+                        renderDates.push(start);
                     }
@@ -250,9 +345,13 @@ }
             } 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, 1);
+                return util.addMonths(this.parent.selectedDate, this.parent.activeViewOptions.interval);
             }
             else {
-                return util.addMonths(this.parent.selectedDate, -1);
+                return util.addMonths(this.parent.selectedDate, -(this.parent.activeViewOptions.interval));
             }
@@ -265,2 +364,13 @@ };
             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();
+                }
                 return this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM y' });
@@ -282,2 +392,5 @@ }
             if (this.element) {
+                if (this.parent.resourceBase) {
+                    this.parent.resourceBase.destroy();
+                }
                 ej2_base_2.remove(this.element);
@@ -284,0 +397,0 @@ this.element = null;

src/schedule/renderer/renderer.d.ts

@@ -12,3 +12,3 @@ import { Schedule } from '../base/schedule';
     constructor(parent: Schedule);
-    render(viewName: View): void;
+    render(viewName: View, isDataRefresh?: boolean): void;
     private initializeLayout(viewName);
@@ -15,0 +15,0 @@ updateLabelText(view: string): void;

src/schedule/renderer/renderer.js

@@ -8,5 +8,8 @@ define(["require", "exports", "@syncfusion/ej2-base", "../base/constant", "../base/css-constant"], function (require, exports, ej2_base_1, events, cls) {
         }
-        Render.prototype.render = function (viewName) {
+        Render.prototype.render = function (viewName, isDataRefresh) {
+            if (isDataRefresh === void 0) { isDataRefresh = true; }
             this.initializeLayout(viewName);
-            this.refreshDataManager();
+            if (isDataRefresh) {
+                this.refreshDataManager();
+            }
         };
@@ -39,3 +42,3 @@ Render.prototype.initializeLayout = function (viewName) {
             if (ej2_base_1.isNullOrUndefined(this.parent.activeView)) {
-                var firstView = this.parent.viewOptions[Object.keys(this.parent.viewOptions)[0]].option;
+                var firstView = this.parent.viewCollections[0].option;
                 if (firstView) {
@@ -54,2 +57,4 @@ this.parent.setProperties({ currentView: firstView }, true);
             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);
@@ -59,6 +64,7 @@ if (this.parent.headerModule) {
             }
+            this.parent.adjustEventWrapper();
         };
         Render.prototype.updateLabelText = function (view) {
             var content = this.parent.activeView.getLabelText(view);
-            this.parent.element.setAttribute('role', 'presentation');
+            this.parent.element.setAttribute('role', 'main');
             this.parent.element.setAttribute('aria-label', content);
@@ -83,2 +89,3 @@ };
             this.parent.trigger(events.dataBound);
+            this.parent.hideSpinner();
         };
@@ -90,2 +97,3 @@ Render.prototype.dataManagerFailure = function (e) {
             this.parent.trigger(events.actionFailure, { error: e });
+            this.parent.hideSpinner();
         };
@@ -92,0 +100,0 @@ return Render;

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

@@ -10,5 +10,3 @@ import { Schedule } from '../base/schedule';
     currentTimeIndicatorTimer: number;
-    currentDateIndex: number;
-    minorSlotCount: number;
-    majorSlot: number;
+    private currentDateIndex;
     viewClass: string;
@@ -28,3 +26,4 @@ isInverseTableSelect: boolean;
     scrollToHour(hour: string): void;
-    private generateColLevels();
+    generateColumnLevels(): TdData[][];
+    getDateSlots(renderDates: Date[], workDays: number[], workStartHour?: string, workEndHour?: string): TdData[];
     private isWorkHourRange(date);
@@ -37,3 +36,3 @@ highlightCurrentTime(): void;
     private getWorkCellHeight();
-    private getTdContent(date, type);
+    private getTdContent(date, type, groupIndex?);
     renderLayout(type: string): void;
@@ -48,2 +47,3 @@ renderHeader(): void;
     private renderContentArea();
+    private createEventWrapper(type?);
     private getScrollableElement();
@@ -50,0 +50,0 @@ getDatesHeaderElement(): HTMLElement;

src/schedule/renderer/vertical-view.js

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../actions/work-cells", "./view-base", "../event-renderer/vertical-view", "../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, util, event, cls) {
+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";
@@ -23,5 +23,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
             var _this = _super.call(this, parent) || this;
-            _this.currentDateIndex = 0;
-            _this.minorSlotCount = 2;
-            _this.majorSlot = 60;
+            _this.currentDateIndex = [];
             _this.viewClass = 'e-day-view';
@@ -41,22 +39,33 @@ _this.isInverseTableSelect = true;
         VerticalView.prototype.renderEvents = function () {
-            var appointment = new vertical_view_1.AppointmentRendering(this.parent);
-            appointment.renderAppointments();
+            if (this.parent.activeViewOptions.timeScale.enable) {
+                var appointment = new vertical_view_1.VerticalEvent(this.parent);
+                appointment.renderAppointments();
+            }
+            else {
+                var appointment = new month_1.MonthEvent(this.parent);
+                appointment.renderAppointments();
+            }
         };
         VerticalView.prototype.onContentScroll = function (e) {
             var target = e.target;
-            this.getTimeCellsElement().scrollTop = target.scrollTop;
+            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.quickPopup.close();
+            this.parent.quickPopup.quickPopupHide();
         };
         VerticalView.prototype.scrollUiUpdate = function (args) {
-            var headerHeight = 0;
+            var headerBarHeight = 0;
             if (this.parent.headerModule) {
-                headerHeight += this.parent.headerModule.getHeaderElement().offsetHeight;
+                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 = ej2_base_1.formatUnit(this.parent.element.offsetHeight - headerHeight - header.offsetHeight - 2);
+            var scrollerHeight = ej2_base_1.formatUnit(this.parent.element.offsetHeight - headerBarHeight - header.offsetHeight - 2);
             if (this.parent.isAdaptive) {
@@ -66,3 +75,6 @@ content.style.height = scrollerHeight;
             else {
-                timecells.style.height = content.style.height = scrollerHeight;
+                if (this.parent.activeViewOptions.timeScale.enable) {
+                    timecells.style.height = scrollerHeight;
+                }
+                content.style.height = scrollerHeight;
             }
@@ -78,3 +90,5 @@ var scrollBarWidth = util.getScrollBarWidth();
             }
-            timecells.style.paddingBottom = (content.offsetHeight - content.clientHeight > 0) ? ej2_base_1.formatUnit(scrollBarWidth) : '';
+            if (this.parent.activeViewOptions.timeScale.enable) {
+                timecells.style.paddingBottom = (content.offsetHeight - content.clientHeight > 0) ? ej2_base_1.formatUnit(scrollBarWidth) : '';
+            }
             if (this.parent.uiStateValues.isInitial) {
@@ -105,8 +119,29 @@ this.scrollToWorkHour();
         };
-        VerticalView.prototype.generateColLevels = function () {
-            var columns = this.renderDates;
-            var colLevels = [];
-            var level = [];
-            for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {
-                var col = columns_1[_i];
+        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];
+                }
+            }
+            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];
@@ -116,6 +151,8 @@ if (this.isCurrentDate(col)) {
                 }
-                level.push({ date: col, type: 'dateHeader', className: classList });
+                dateCol.push({
+                    date: col, type: 'dateHeader', className: classList, colSpan: 1,
+                    workDays: workDays, startHour: new Date(+start), endHour: new Date(+end)
+                });
             }
-            colLevels.push(level);
-            return colLevels;
+            return dateCol;
         };
@@ -129,7 +166,25 @@ VerticalView.prototype.isWorkHourRange = function (date) {
                 var flag = false;
-                for (var i = 0; i < this.renderDates.length; i++) {
-                    if (this.isCurrentDate(this.renderDates[i])) {
+                this.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;
+                            this.currentDateIndex.push(resIndex);
+                            flag = true;
+                        }
+                        count += this.parent.activeViewOptions.group.byDate ? 1 : resource.renderDates.length;
+                    }
+                }
+                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) {
+                        this.currentDateIndex.push(index);
                         flag = true;
-                        this.currentDateIndex = i;
-                        break;
                     }
@@ -175,3 +230,3 @@ }
             var firstCell = firstRow.cells[0];
-            var currentCell = firstRow.cells[this.currentDateIndex];
+            var currentCell = firstRow.cells[this.currentDateIndex[0]];
             var cellWidth = 100 / firstRow.cells.length;
@@ -190,2 +245,3 @@ var prevLineWidth = (cellWidth * (currentCell.cellIndex - firstCell.cellIndex)) + '%';
             var timelineWrap = ej2_base_2.createElement('div', { className: cls.TIMELINE_WRAPPER_CLASS });
+            var timelineEle = [];
             var previousDateTimelineEle = ej2_base_2.createElement('div', {
@@ -195,8 +251,16 @@ className: cls.PREVIOUS_TIMELINE_CLASS,
             });
-            var currentDateTimelineEle = ej2_base_2.createElement('div', {
-                className: cls.CURRENT_TIMELINE_CLASS,
-                styles: 'width:' + currentLineWidth + '; ' + (this.parent.enableRtl ? 'right:' : 'left:') + prevLineWidth + ';top:' + topInPx
-            });
+            timelineEle.push(previousDateTimelineEle);
+            for (var _i = 0, _a = this.currentDateIndex; _i < _a.length; _i++) {
+                var dateIndex = _a[_i];
+                currentCell = firstRow.cells[dateIndex];
+                prevLineWidth = (cellWidth * (currentCell.cellIndex - firstCell.cellIndex)) + '%';
+                var currentDateTimelineEle = ej2_base_2.createElement('div', {
+                    className: cls.CURRENT_TIMELINE_CLASS,
+                    styles: 'width:' + currentLineWidth + '; ' +
+                        (this.parent.enableRtl ? 'right:' : 'left:') + prevLineWidth + ';top:' + topInPx
+                });
+                timelineEle.push(currentDateTimelineEle);
+            }
             var currentTimeEle = ej2_base_2.createElement('div', {
-                innerHTML: this.parent.globalize.formatDate(new Date(), { skeleton: 'hm' }),
+                innerHTML: this.parent.getTimeString(new Date()),
                 className: cls.CURRENT_TIME_CLASS,
@@ -207,3 +271,3 @@ styles: 'width: 100%; position: absolute; left: 0; right: 0; top:' + topInPx
             currentTimeEle.style.top = ej2_base_1.formatUnit(currentTimeEle.offsetTop - (currentTimeEle.offsetHeight / 2));
-            ej2_base_2.prepend([previousDateTimelineEle, currentDateTimelineEle], timelineWrap);
+            ej2_base_2.prepend(timelineEle, timelineWrap);
             ej2_base_2.prepend([timelineWrap], this.getContentAreaElement().querySelector('.' + cls.WRAPPER_CLASS));
@@ -214,3 +278,4 @@ };
             var diffInMinutes = ((date.getHours() - startHour.getHours()) * 60) + (date.getMinutes() - startHour.getMinutes());
-            return (diffInMinutes * this.getWorkCellHeight() * this.minorSlotCount) / this.majorSlot;
+            return (diffInMinutes * this.getWorkCellHeight() * this.parent.activeViewOptions.timeScale.slotCount) /
+                this.parent.activeViewOptions.timeScale.interval;
         };
@@ -220,3 +285,3 @@ VerticalView.prototype.getWorkCellHeight = function () {
         };
-        VerticalView.prototype.getTdContent = function (date, type) {
+        VerticalView.prototype.getTdContent = function (date, type, groupIndex) {
             var cntEle;
@@ -234,10 +299,22 @@ switch (type) {
                 case 'majorSlot':
-                    cntEle = ej2_base_1.compile(MAJOR_SLOT_TEMPLATE, this.customHelper)({ date: date });
+                    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':
-                    cntEle = ej2_base_1.compile(MINOR_SLOT_TEMPLATE, this.customHelper)({ date: date });
+                    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 };
+                        var args = { date: date, type: type, groupIndex: groupIndex };
                         cntEle = this.parent.getCellTemplate()(args);
@@ -253,9 +330,20 @@ }
             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.generateColLevels();
+            this.colLevels = this.generateColumnLevels();
             this.renderHeader();
             this.renderContent();
-            this.highlightCurrentTime();
+            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, {});
@@ -265,7 +353,9 @@ };
             var tr = ej2_base_2.createElement('tr');
-            var indentTd = ej2_base_2.createElement('td', { className: cls.LEFT_INDENT_CLASS });
             var dateTd = ej2_base_2.createElement('td');
-            indentTd.appendChild(this.renderLeftIndent());
             dateTd.appendChild(this.renderDatesHeader());
-            tr.appendChild(indentTd);
+            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);
+            }
             tr.appendChild(dateTd);
@@ -278,5 +368,7 @@ ej2_base_2.prepend([tr], this.element.querySelector('tbody'));
             if (this.parent.isAdaptive) {
-                workTd.setAttribute('colspan', '2');
+                workTd.setAttribute('colspan', (this.parent.activeViewOptions.timeScale.enable ? '2' : '1'));
                 var scrollContainer = ej2_base_2.createElement('div', { className: cls.SCROLL_CONTAINER_CLASS });
-                scrollContainer.appendChild(this.renderTimeCells());
+                if (this.parent.activeViewOptions.timeScale.enable) {
+                    scrollContainer.appendChild(this.renderTimeCells());
+                }
                 scrollContainer.appendChild(this.renderContentArea());
@@ -287,6 +379,8 @@ workTd.appendChild(scrollContainer);
             else {
-                var timesTd = ej2_base_2.createElement('td');
-                timesTd.appendChild(this.renderTimeCells());
                 workTd.appendChild(this.renderContentArea());
-                tr.appendChild(timesTd);
+                if (this.parent.activeViewOptions.timeScale.enable) {
+                    var timesTd = ej2_base_2.createElement('td');
+                    timesTd.appendChild(this.renderTimeCells());
+                    tr.appendChild(timesTd);
+                }
                 tr.appendChild(workTd);
@@ -303,4 +397,3 @@ }
                 var ntr_1 = trEle.cloneNode();
-                var level = this.colLevels[i];
-                var data_1 = { className: [level[0].className[0]], type: 'emptyCells' };
+                var data_1 = { className: [this.colLevels[i][0].className[0]], type: 'emptyCells' };
                 ntr_1.appendChild(this.createTd(data_1));
@@ -326,3 +419,2 @@ tbl.querySelector('tbody').appendChild(ntr_1);
             var wrap = ej2_base_2.createElement('div', { className: cls.DATE_HEADER_WRAP_CLASS });
-            var innerWrap = ej2_base_2.createElement('div', { className: cls.ALLDAY_APPOINTMENT_WRAPPER_CLASS });
             container.appendChild(wrap);
@@ -333,2 +425,7 @@ var tbl = this.createTableLayout();
             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'));
+            }
+            tbl.appendChild(colGroupEle);
             for (var i = 0; i < rowCount; i++) {
@@ -338,7 +435,4 @@ var ntr_2 = trEle.cloneNode();
                 var level = this.colLevels[i];
-                var colspan = lastLevel.length / level.length;
                 for (var j = 0; j < level.length; j++) {
-                    var td = level[j];
-                    td.colSpan = colspan;
-                    ntr_2.appendChild(this.createTd(td));
+                    ntr_2.appendChild(this.createTd(level[j]));
                 }
@@ -355,10 +449,5 @@ tbl.querySelector('tbody').appendChild(ntr_2);
                 ntd.setAttribute('data-date', td.date.getTime().toString());
-                ntd.setAttribute('data-index', j.toString());
-                var appointmentWrap = ej2_base_2.createElement('div', {
-                    id: cls.ALLDAY_APPOINTMENT_WRAPPER_CLASS + '-' + j.toString(),
-                    className: cls.ALLDAY_WRAPPER_CLASS,
-                    attrs: { 'data-index': j.toString() },
-                    styles: 'width:calc(' + 100 / this.renderDates.length + '%)'
-                });
-                innerWrap.appendChild(appointmentWrap);
+                if (!ej2_base_1.isNullOrUndefined(td.groupIndex)) {
+                    ntd.setAttribute('data-group-index', '' + td.groupIndex);
+                }
                 this.wireCellEvents(ntd);
@@ -368,3 +457,3 @@ ntr.appendChild(ntd);
             tbl.querySelector('tbody').appendChild(ntr);
-            wrap.appendChild(innerWrap);
+            ej2_base_2.prepend([this.createEventWrapper('allDay')], tbl);
             wrap.appendChild(tbl);
@@ -375,2 +464,5 @@ return container;
             var tdEle = ej2_base_2.createElement('th');
+            if (td.colSpan) {
+                tdEle.setAttribute('colspan', td.colSpan.toString());
+            }
             if (td.className) {
@@ -380,3 +472,3 @@ ej2_base_2.addClass([tdEle], td.className);
             if (td.date && td.type) {
-                var ele = this.getTdContent(td.date, td.type);
+                var ele = this.getTdContent(td.date, td.type, td.groupIndex);
                 if (ele && ele.length) {
@@ -386,8 +478,14 @@ ej2_base_2.append([].slice.call(ele), tdEle);
             }
+            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);
+                }
                 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 };
+            var args = { elementType: td.type, element: tdEle, date: td.date, groupIndex: td.groupIndex };
             this.parent.trigger(event.renderCell, args);
@@ -428,12 +526,19 @@ return tdEle;
             var tbody = tbl.querySelector('tbody');
-            var columns = this.renderDates;
+            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, columns_2 = columns; _i < columns_2.length; _i++) {
-                    var col = columns_2[_i];
+                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('' + col));
+                    var cellDate = util.resetTime(new Date('' + tdData.date));
                     util.setTime(cellDate, util.getDateInMs(r.date));
-                    if (_this.parent.workHours.highlight && _this.isWorkHour(cellDate)) {
+                    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);
@@ -443,8 +548,13 @@ }
                     if (_this.parent.cellTemplate) {
-                        var args_1 = { date: cellDate, type: 'workCells' };
+                        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 };
+                    var args = { elementType: 'workCells', element: ntd, date: cellDate, groupIndex: tdData.groupIndex };
                     _this.parent.trigger(event.renderCell, args);
@@ -457,13 +567,3 @@ ntr.appendChild(ntd);
             this.getTimeSlotRows(handler);
-            var innerAppointmentWrap = ej2_base_2.createElement('div', { className: cls.APPOINTMENT_WRAPPER_CLASS });
-            for (var day = 0, length_1 = this.renderDates.length; day < length_1; day++) {
-                var appointmentWrap = ej2_base_2.createElement('div', {
-                    id: cls.APPOINTMENT_WRAPPER_CLASS + '-' + day.toString(),
-                    className: cls.DAY_WRAPPER_CLASS,
-                    attrs: { 'data-dayindex': day.toString() },
-                    styles: 'width:calc(' + 100 / this.renderDates.length + '%)'
-                });
-                innerAppointmentWrap.appendChild(appointmentWrap);
-            }
-            innerWrap.appendChild(innerAppointmentWrap);
+            ej2_base_2.prepend([this.createEventWrapper()], tbl);
             wrap.appendChild(tbl);
@@ -473,2 +573,23 @@ ej2_base_1.EventHandler.add(wrap, 'scroll', this.onContentScroll, this);
         };
+        VerticalView.prototype.createEventWrapper = function (type) {
+            if (type === void 0) { type = ''; }
+            var thead = ej2_base_2.createElement('thead');
+            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 : cls.DAY_WRAPPER_CLASS,
+                    attrs: { role: 'gridcell', 'aria-selected': 'false' }
+                });
+                if (type !== 'allDay') {
+                    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);
+            });
+            thead.appendChild(tr);
+            return thead;
+        };
         VerticalView.prototype.getScrollableElement = function () {
@@ -492,4 +613,4 @@ if (this.parent.isAdaptive) {
         VerticalView.prototype.getEndDateFromStartDate = function (start) {
-            var msMajorInterval = this.majorSlot * util.MS_PER_MINUTE;
-            var msInterval = msMajorInterval / this.minorSlotCount;
+            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());
@@ -508,4 +629,4 @@ end.setMilliseconds(end.getMilliseconds() + msInterval);
             var endHour = this.getEndHour();
-            var msMajorInterval = this.majorSlot * util.MS_PER_MINUTE;
-            var msInterval = msMajorInterval / this.minorSlotCount;
+            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);
@@ -517,2 +638,5 @@ var msStartHour = startHour.getTime();
             }
+            if (!this.parent.activeViewOptions.timeScale.enable) {
+                length = 1;
+            }
             var dt = new Date(msStartHour);
@@ -524,4 +648,4 @@ for (var i = 0; i < length; i++) {
                     first: (majorTickDivider === 0),
-                    middle: (majorTickDivider < this.minorSlotCount - 1),
-                    last: (majorTickDivider === this.minorSlotCount - 1),
+                    middle: (majorTickDivider < this.parent.activeViewOptions.timeScale.slotCount - 1),
+                    last: (majorTickDivider === this.parent.activeViewOptions.timeScale.slotCount - 1),
                     type: ''
@@ -547,2 +671,5 @@ };
                 ej2_base_1.EventHandler.remove(this.getContentAreaElement(), 'scroll', this.onContentScroll);
+                if (this.parent.resourceBase) {
+                    this.parent.resourceBase.destroy();
+                }
                 ej2_base_2.remove(this.element);
@@ -549,0 +676,0 @@ this.element = null;

src/schedule/renderer/view-base.d.ts

@@ -1,3 +0,3 @@
-import { L10n } from '@syncfusion/ej2-base';
 import { Schedule } from '../base/schedule';
+import { TdData } from '../base/interface';
 /**
@@ -9,3 +9,2 @@ * view base
     parent: Schedule;
-    l10n: L10n;
     renderDates: Date[];
@@ -22,2 +21,5 @@ customHelper: Object;
     adjustEventWrapper(): void;
+    getDateSlots(renderDates: Date[], workDays: number[]): TdData[];
+    generateColumnLevels(): TdData[][];
+    highlightCurrentTime(): void;
     startDate(): Date;
@@ -29,5 +31,5 @@ endDate(): Date;
     isCurrentMonth(date: Date): boolean;
-    isWorkDay(date: Date): boolean;
-    isWorkHour(date: Date): boolean;
-    getRenderDates(): void;
+    isWorkDay(date: Date, workDays?: number[]): boolean;
+    isWorkHour(date: Date, startHour: Date, endHour: Date, workDays: number[]): boolean;
+    getRenderDates(workDays?: number[]): Date[];
     getNextPreviousDate(type: string): Date;
@@ -38,2 +40,4 @@ getLabelText(view: string): string;
     getMobileDateElement(date: Date, className?: string): Element;
+    setResourceHeaderContent(tdElement: Element, tdData: TdData, className?: string): void;
+    renderResourceMobileLayout(): void;
 }

src/schedule/renderer/view-base.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "@syncfusion/ej2-base", "../base/util", "../base/css-constant"], function (require, exports, ej2_base_1, util_1, cls) {
+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";
@@ -18,7 +18,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
                     }
-                    return _this.parent.globalize.formatDate(dt, { skeleton: 'hm' });
+                    return _this.parent.getTimeString(dt);
                 }
             };
             this.parent = parent;
-            this.l10n = this.parent.localeObj;
         }
@@ -48,2 +47,10 @@ ViewBase.prototype.createTableLayout = function (className) {
         };
+        ViewBase.prototype.getDateSlots = function (renderDates, workDays) {
+            return [];
+        };
+        ViewBase.prototype.generateColumnLevels = function () {
+            return [];
+        };
+        ViewBase.prototype.highlightCurrentTime = function () {
+        };
         ViewBase.prototype.startDate = function () {
@@ -75,4 +82,5 @@ return this.renderDates[0];
         };
-        ViewBase.prototype.isWorkDay = function (date) {
-            if (this.parent.activeViewOptions.workDays.indexOf(date.getDay()) >= 0) {
+        ViewBase.prototype.isWorkDay = function (date, workDays) {
+            if (workDays === void 0) { workDays = this.parent.activeViewOptions.workDays; }
+            if (workDays.indexOf(date.getDay()) >= 0) {
                 return true;
@@ -82,5 +90,3 @@ }
         };
-        ViewBase.prototype.isWorkHour = function (date) {
-            var startHour = this.parent.globalize.parseDate(this.parent.workHours.start, { skeleton: 'Hm' });
-            var endHour = this.parent.globalize.parseDate(this.parent.workHours.end, { skeleton: 'Hm' });
+        ViewBase.prototype.isWorkHour = function (date, startHour, endHour, workDays) {
             if (ej2_base_1.isNullOrUndefined(startHour) || ej2_base_1.isNullOrUndefined(endHour)) {
@@ -91,3 +97,3 @@ return false;
             endHour.setMilliseconds(0);
-            if (util_1.getDateInMs(date) < util_1.getDateInMs(startHour) || util_1.getDateInMs(date) >= util_1.getDateInMs(endHour) || !this.isWorkDay(date)) {
+            if (util_1.getDateInMs(date) < util_1.getDateInMs(startHour) || util_1.getDateInMs(date) >= util_1.getDateInMs(endHour) || !this.isWorkDay(date, workDays)) {
                 return false;
@@ -97,12 +103,18 @@ }
         };
-        ViewBase.prototype.getRenderDates = function () {
-            this.renderDates = [];
-            this.renderDates.push(util_1.resetTime(this.parent.selectedDate));
+        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);
+                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);
+                return util_1.addDays(this.parent.selectedDate, -util_1.WEEK_LENGTH * this.parent.activeViewOptions.interval);
             }
@@ -180,11 +192,32 @@ };
         ViewBase.prototype.getMobileDateElement = function (date, className) {
-            var wrap = ej2_base_1.createElement('div', { className: className });
-            var dateEle = ej2_base_1.createElement('div', { className: 'e-m-date' });
-            dateEle.innerHTML = this.parent.globalize.formatDate(date, { format: 'd' });
-            var dayEle = ej2_base_1.createElement('div', { className: 'e-m-day' });
-            dayEle.innerHTML = this.parent.globalize.formatDate(date, { format: 'E' });
-            wrap.appendChild(dateEle);
-            wrap.appendChild(dayEle);
+            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 {
+                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;
@@ -191,0 +224,0 @@ }());

src/schedule/renderer/week.d.ts

@@ -9,6 +9,6 @@ import { Schedule } from '../base/schedule';
     /**
-     * Constructor
+     * Constructor for week view
      */
     constructor(parent: Schedule);
-    getRenderDates(): void;
+    getRenderDates(workDays?: number[]): Date[];
     /**
@@ -15,0 +15,0 @@ * Get module name.

src/schedule/renderer/week.js

@@ -21,13 +21,13 @@ var __extends = (this && this.__extends) || (function () {
         }
-        Week.prototype.getRenderDates = function () {
-            this.renderDates = [];
+        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; i < length_1; i++) {
+            for (var i = 0, length_1 = util.WEEK_LENGTH * this.parent.activeViewOptions.interval; i < length_1; i++) {
                 if (this.parent.activeViewOptions.showWeekend) {
-                    this.renderDates.push(start);
+                    renderDates.push(start);
                 }
                 else {
-                    if (this.isWorkDay(start)) {
-                        this.renderDates.push(start);
+                    if (this.isWorkDay(start, workDays)) {
+                        renderDates.push(start);
                     }
@@ -37,2 +37,6 @@ }
             }
+            if (!workDays) {
+                this.renderDates = renderDates;
+            }
+            return renderDates;
         };
@@ -39,0 +43,0 @@ Week.prototype.getModuleName = function () {

src/schedule/renderer/work-week.d.ts

@@ -9,6 +9,6 @@ import { Schedule } from '../base/schedule';
     /**
-     * Constructor
+     * Constructor for work week view
      */
     constructor(par: Schedule);
-    getRenderDates(): void;
+    getRenderDates(workDays?: number[]): Date[];
     /**
@@ -15,0 +15,0 @@ * Get module name.

src/schedule/renderer/work-week.js

@@ -21,11 +21,15 @@ var __extends = (this && this.__extends) || (function () {
         }
-        WorkWeek.prototype.getRenderDates = function () {
-            this.renderDates = [];
+        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; i < length_1; i++) {
-                if (this.isWorkDay(start)) {
-                    this.renderDates.push(start);
+            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;
         };
@@ -32,0 +36,0 @@ WorkWeek.prototype.getModuleName = function () {

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

22009485

increased by21.24%

Number of package files

164

increased by8.61%

Lines of code

269509

increased by17.83%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

5

increased by25%

Dependency changes

• + Added@syncfusion/ej2-base@16.2.50(transitive)

• + Added@syncfusion/ej2-buttons@16.2.50(transitive)

• + Added@syncfusion/ej2-calendars@16.2.53(transitive)

• + Added@syncfusion/ej2-data@16.2.52(transitive)

• + Added@syncfusion/ej2-dropdowns@16.2.50(transitive)

• + Added@syncfusion/ej2-inputs@16.2.53(transitive)

• + Added@syncfusion/ej2-lists@16.2.50(transitive)

• + Added@syncfusion/ej2-navigations@16.2.50(transitive)

• + Added@syncfusion/ej2-popups@16.2.52(transitive)

• + Added@syncfusion/ej2-splitbuttons@16.2.50(transitive)

• - Removed@syncfusion/ej2-base@16.1.38(transitive)

• - Removed@syncfusion/ej2-buttons@16.1.48(transitive)

• - Removed@syncfusion/ej2-calendars@16.1.49(transitive)

• - Removed@syncfusion/ej2-data@16.1.42(transitive)

• - Removed@syncfusion/ej2-dropdowns@16.1.46(transitive)

• - Removed@syncfusion/ej2-inputs@16.1.48(transitive)

• - Removed@syncfusion/ej2-lists@16.1.42(transitive)

• - Removed@syncfusion/ej2-navigations@16.1.42(transitive)

• - Removed@syncfusion/ej2-popups@16.1.47(transitive)

• Updated@syncfusion/ej2-base@~16.2.41

• Updated@syncfusion/ej2-buttons@~16.2.41

• Updated@syncfusion/ej2-calendars@~16.2.41

• Updated@syncfusion/ej2-data@~16.2.41

• Updated@syncfusion/ej2-dropdowns@~16.2.41

• Updated@syncfusion/ej2-inputs@~16.2.41

• Updated@syncfusion/ej2-lists@~16.2.41

• Updated@syncfusion/ej2-navigations@~16.2.41

• Updated@syncfusion/ej2-popups@~16.2.41