@syncfusion/ej2-schedule 26.1.40 → 26.2.4

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

@@ -10,17 +10,19 @@ export declare const MS_PER_MINUTE: number;
  *
  * @param {Element} container Accepts the DOM element
  * @param {string} elementClass Accepts the element class
+ * @param {boolean} isTransformed Accepts the boolean value that indicates the status of the transform style applied to the element
  * @returns {number} Returns the height of the element
  */
-export declare function getElementHeightFromClass(container: Element, elementClass: string): number;
+export declare function getElementHeightFromClass(container: Element, elementClass: string, isTransformed?: boolean): number;
 /**
  * Method to get width from element
  *
  * @param {Element} container Accepts the DOM element
  * @param {string} elementClass Accepts the element class
+ * @param {boolean} isTransformed Accepts the boolean value that indicates the status of the transform style applied to the element
  * @returns {number} Returns the width of the element
  */
-export declare function getElementWidthFromClass(container: Element, elementClass: string): number;
+export declare function getElementWidthFromClass(container: Element, elementClass: string, isTransformed?: boolean): number;
 /**
  * Method to get translateY value
  *
@@ -242,20 +244,23 @@ export declare function capitalizeFirstWord(inputString: string, type: string):
  * Method to get element cell width
  *
  * @param {HTMLElement} element Accepts the DOM element
+ * @param {boolean} isTransformed Accepts the boolean value that indicates the status of the transform style applied to the element
  * @returns {number} Returns the width of the given element
  */
-export declare function getElementWidth(element: HTMLElement): number;
+export declare function getElementWidth(element: HTMLElement, isTransformed?: boolean): number;
 /**
  * Method to get element cell Height
  *
  * @param {HTMLElement} element Accepts the DOM element
+ * @param {boolean} isTransformed Accepts the boolean value that indicates the status of the transform style applied to the element
  * @returns {number} Returns the Height of the given element
  */
-export declare function getElementHeight(element: HTMLElement): number;
+export declare function getElementHeight(element: HTMLElement, isTransformed?: boolean): number;
 /**
  * Method to get element cell Top
  *
  * @param {HTMLElement} element Accepts the DOM element
+ * @param {boolean} isTransformed Accepts the boolean value that indicates the status of the transform style applied to the element
  * @returns {number} Returns the top value of the given element
  */
-export declare function getElementTop(element: HTMLElement): number;
+export declare function getElementTop(element: HTMLElement, isTransformed?: boolean): number;

package/src/schedule/base/util.js

@@ -12,15 +12,16 @@ export var MS_PER_MINUTE = 60000;
  *
  * @param {Element} container Accepts the DOM element
  * @param {string} elementClass Accepts the element class
+ * @param {boolean} isTransformed Accepts the boolean value that indicates the status of the transform style applied to the element
  * @returns {number} Returns the height of the element
  */
-export function getElementHeightFromClass(container, elementClass) {
+export function getElementHeightFromClass(container, elementClass, isTransformed) {
     var height = 0;
     var el = createElement('div', { className: elementClass }).cloneNode();
     el.style.visibility = 'hidden';
     el.style.position = 'absolute';
     container.appendChild(el);
-    height = getElementHeight(el);
+    height = getElementHeight(el, isTransformed);
     remove(el);
     return height;
 }
@@ -29,15 +30,16 @@ export function getElementHeightFromClass(container, elementClass) {
  *
  * @param {Element} container Accepts the DOM element
  * @param {string} elementClass Accepts the element class
+ * @param {boolean} isTransformed Accepts the boolean value that indicates the status of the transform style applied to the element
  * @returns {number} Returns the width of the element
  */
-export function getElementWidthFromClass(container, elementClass) {
+export function getElementWidthFromClass(container, elementClass, isTransformed) {
     var width = 0;
     var el = createElement('div', { className: elementClass }).cloneNode();
     el.style.visibility = 'hidden';
     el.style.position = 'absolute';
     container.appendChild(el);
-    width = getElementWidth(el);
+    width = getElementWidth(el, isTransformed);
     remove(el);
     return width;
 }
@@ -429,26 +431,29 @@ export function capitalizeFirstWord(inputString, type) {
  * Method to get element cell width
  *
  * @param {HTMLElement} element Accepts the DOM element
+ * @param {boolean} isTransformed Accepts the boolean value that indicates the status of the transform style applied to the element
  * @returns {number} Returns the width of the given element
  */
-export function getElementWidth(element) {
-    return document.body.style.transform.includes('scale') ? element.offsetWidth : element.getBoundingClientRect().width;
+export function getElementWidth(element, isTransformed) {
+    return isTransformed ? element.offsetWidth : element.getBoundingClientRect().width;
 }
 /**
  * Method to get element cell Height
  *
  * @param {HTMLElement} element Accepts the DOM element
+ * @param {boolean} isTransformed Accepts the boolean value that indicates the status of the transform style applied to the element
  * @returns {number} Returns the Height of the given element
  */
-export function getElementHeight(element) {
-    return document.body.style.transform.includes('scale') ? element.offsetHeight : element.getBoundingClientRect().height;
+export function getElementHeight(element, isTransformed) {
+    return isTransformed ? element.offsetHeight : element.getBoundingClientRect().height;
 }
 /**
  * Method to get element cell Top
  *
  * @param {HTMLElement} element Accepts the DOM element
+ * @param {boolean} isTransformed Accepts the boolean value that indicates the status of the transform style applied to the element
  * @returns {number} Returns the top value of the given element
  */
-export function getElementTop(element) {
-    return document.body.style.transform.includes('scale') ? element.offsetTop : element.getBoundingClientRect().top;
+export function getElementTop(element, isTransformed) {
+    return isTransformed ? element.offsetTop : element.getBoundingClientRect().top;
 }

package/src/schedule/event-renderer/inline-edit.js

@@ -108,11 +108,11 @@ var InlineEdit = /** @class */ (function () {
             var allDayElements = [].slice.call(this.parent.element.querySelectorAll('.' + cls.ALLDAY_APPOINTMENT_CLASS));
             var allDayLevel = 0;
             if (allDayElements.length > 0) {
-                allDayLevel = Math.floor(util.getElementHeight(this.parent.element.querySelector('.' + cls.ALLDAY_ROW_CLASS)) /
+                allDayLevel = Math.floor(this.parent.getElementHeight(this.parent.element.querySelector('.' + cls.ALLDAY_ROW_CLASS)) /
                     allDayElements[0].offsetHeight) - 1;
             }
             verticalEvent.allDayLevel = allDayLevel;
-            var appHeight = util.getElementHeightFromClass(this.parent.element.querySelector('.' + cls.ALLDAY_APPOINTMENT_WRAPPER_CLASS), cls.APPOINTMENT_CLASS);
+            var appHeight = this.parent.getElementHeightFromClass(this.parent.element.querySelector('.' + cls.ALLDAY_APPOINTMENT_WRAPPER_CLASS), cls.APPOINTMENT_CLASS);
             var cellTop = verticalEvent.allDayElement.length > 0 ? verticalEvent.allDayElement[0].offsetTop : 0;
             verticalEvent.renderAllDayEvents(saveObj, index, resIndex, daysCount, this.parent.allowInline, cellTop, appHeight);
         }
@@ -140,7 +140,7 @@ var InlineEdit = /** @class */ (function () {
         monthEvent.cellWidth = monthEvent.workCells[0].offsetWidth;
         monthEvent.cellHeight = monthEvent.workCells[0].offsetHeight;
         monthEvent.eventHeight =
-            util.getElementHeightFromClass(this.parent.monthModule.element || monthEvent.element, cls.APPOINTMENT_CLASS);
+            this.parent.getElementHeightFromClass(this.parent.monthModule.element || monthEvent.element, cls.APPOINTMENT_CLASS);
         monthEvent.getSlotDates(workDays);
         var filteredDates = monthEvent.getRenderedDates(renderDates);
         var spannedEvents = monthEvent.splitEvent(saveObject, filteredDates || renderDates);
@@ -164,7 +164,7 @@ var InlineEdit = /** @class */ (function () {
         var dayLength = this.parent.element.querySelectorAll('.' + cls.CONTENT_TABLE_CLASS + ' tbody tr').length === 0 ?
             0 : this.parent.element.querySelectorAll('.' + cls.CONTENT_TABLE_CLASS + ' tbody tr')[0].children.length;
         timelineView.slotsPerDay = dayLength / timelineView.dateRender.length;
-        timelineView.eventHeight = util.getElementHeightFromClass(timelineView.element, cls.APPOINTMENT_CLASS);
+        timelineView.eventHeight = this.parent.getElementHeightFromClass(timelineView.element, cls.APPOINTMENT_CLASS);
         timelineView.renderEvents(saveObject, resIndex);
     };
     InlineEdit.prototype.getEventDaysCount = function (saveObj) {

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

@@ -96,7 +96,7 @@ var MonthEvent = /** @class */ (function (_super) {
             this.monthHeaderHeight = wrapper.offsetTop - cellTd.offsetTop;
             cellTd.removeChild(wrapper);
         }
-        this.eventHeight = util.getElementHeightFromClass(this.element, cls.APPOINTMENT_CLASS);
+        this.eventHeight = this.parent.getElementHeightFromClass(this.element, cls.APPOINTMENT_CLASS);
         var selector = '.' + cls.CONTENT_TABLE_CLASS + ' tbody tr';
         this.addCellHeight(selector, this.eventHeight, (this.parent.currentView === 'Month' ? EVENT_GAP : 2), this.monthHeaderHeight, this.moreIndicatorHeight);
         var scrollTop = conWrap.scrollTop;
@@ -175,8 +175,8 @@ var MonthEvent = /** @class */ (function (_super) {
             });
         }
         var cellDetail = this.workCells[this.parent.activeView.isTimelineView() ? 0 : this.workCells.length - 1];
-        this.cellWidth = util.getElementWidth(cellDetail);
-        this.cellHeight = util.getElementHeight(cellDetail);
+        this.cellWidth = this.parent.getElementWidth(cellDetail);
+        this.cellHeight = this.parent.getElementHeight(cellDetail);
         this.dateRender = dateRender;
         var filteredDates = this.getRenderedDates(dateRender);
         this.getSlotDates(workDays || this.parent.activeViewOptions.workDays);

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

@@ -48,7 +48,7 @@ var TimelineEvent = /** @class */ (function (_super) {
             this.parent.activeViewOptions.headerRows.slice(-1)[0].option !== 'Hour') {
             this.renderType = 'day';
             var workCell = this.content.querySelector('.' + cls.WORK_CELLS_CLASS);
-            this.cellWidth = util.getElementWidth(workCell) / +(workCell.getAttribute('colspan') || 1);
+            this.cellWidth = this.parent.getElementWidth(workCell) / +(workCell.getAttribute('colspan') || 1);
             this.slotsPerDay = 1;
         }
         else {
@@ -218,14 +218,14 @@ var TimelineEvent = /** @class */ (function (_super) {
                 this.wireAppointmentEvents(appointmentElement, event);
                 if (this.parent.rowAutoHeight) {
                     var conWrap = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
-                    var conWidth = util.getElementWidth(conWrap);
+                    var conWidth = this.parent.getElementWidth(conWrap);
                     var isWithoutScroll = conWrap.offsetHeight === conWrap.clientHeight &&
                         conWrap.offsetWidth === conWrap.clientWidth;
                     this.renderEventElement(event, appointmentElement, cellTd);
                     var firstChild = this.getFirstChild(resIndex);
                     this.updateCellHeight(firstChild, height);
                     if (isWithoutScroll &&
-                        (conWrap.offsetWidth > conWrap.clientWidth || conWidth !== util.getElementWidth(conWrap))) {
+                        (conWrap.offsetWidth > conWrap.clientWidth || conWidth !== this.parent.getElementWidth(conWrap))) {
                         this.adjustAppointments(conWidth);
                     }
                 }
@@ -344,7 +344,7 @@ var TimelineEvent = /** @class */ (function (_super) {
     TimelineEvent.prototype.adjustAppointments = function (conWidth) {
         var _this = this;
         var tr = this.parent.element.querySelector('.' + cls.CONTENT_TABLE_CLASS + ' tbody tr');
-        var actualCellWidth = util.getElementWidth(this.workCells[0]);
+        var actualCellWidth = this.parent.getElementWidth(this.workCells[0]);
         this.cellWidth = actualCellWidth / +(this.workCells[0].getAttribute('colspan') || 1);
         var currentPercentage = (actualCellWidth * tr.children.length) / (conWidth / 100);
         var apps = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));

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

@@ -129,7 +129,7 @@ var VerticalEvent = /** @class */ (function (_super) {
             this.resources = this.parent.resourceBase.renderedResources;
         }
         this.cellHeight =
-            parseFloat(util.getElementHeight(this.parent.element.querySelector('.e-content-wrap tbody tr')).toFixed(2));
+            parseFloat(this.parent.getElementHeight(this.parent.element.querySelector('.e-content-wrap tbody tr')).toFixed(2));
         this.dateRender[0] = this.parent.activeView.renderDates;
         if (this.parent.activeViewOptions.group.resources.length > 0) {
             for (var i = 0, len = this.resources.length; i < len; i++) {
@@ -215,7 +215,7 @@ var VerticalEvent = /** @class */ (function (_super) {
         var resources = this.getResourceList();
         var dateCount = this.getStartCount();
         var isRender;
-        var appHeight = eventType === 'allDayEvents' ? util.getElementHeightFromClass(this.element.querySelector('.' + cls.ALLDAY_APPOINTMENT_WRAPPER_CLASS), cls.APPOINTMENT_CLASS) : 0;
+        var appHeight = eventType === 'allDayEvents' ? this.parent.getElementHeightFromClass(this.element.querySelector('.' + cls.ALLDAY_APPOINTMENT_WRAPPER_CLASS), cls.APPOINTMENT_CLASS) : 0;
         var allDayRowTop = eventType === 'allDayEvents' && this.allDayElement.length > 0 ? this.allDayElement[0].offsetTop : 0;
         var _loop_1 = function (resource) {
             isRender = true;

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

@@ -89,10 +89,10 @@ var YearEvent = /** @class */ (function (_super) {
     YearEvent.prototype.timelineYearViewEvents = function () {
         var _this = this;
         var workCell = this.parent.element.querySelector('.' + cls.WORK_CELLS_CLASS + ':not(.' + cls.OTHERMONTH_CLASS + ')');
-        this.cellWidth = util.getElementWidth(workCell);
+        this.cellWidth = this.parent.getElementWidth(workCell);
         this.cellHeader = util.getOuterHeight(workCell.querySelector('.' + cls.DATE_HEADER_CLASS));
         var eventTable = this.parent.element.querySelector('.' + cls.EVENT_TABLE_CLASS);
-        this.eventHeight = util.getElementHeightFromClass(eventTable, cls.APPOINTMENT_CLASS);
+        this.eventHeight = this.parent.getElementHeightFromClass(eventTable, cls.APPOINTMENT_CLASS);
         var selector = "." + cls.MONTH_HEADER_WRAPPER + " tbody tr,." + cls.RESOURCE_COLUMN_TABLE_CLASS + " tbody tr,." + cls.CONTENT_TABLE_CLASS + " tbody tr";
         this.addCellHeight(selector, this.eventHeight, EVENT_GAP, this.cellHeader, this.moreIndicatorHeight);
         var wrapperCollection = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CONTAINER_CLASS));
@@ -248,10 +248,10 @@ var YearEvent = /** @class */ (function (_super) {
         var contentTable = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
         var isVerticalScrollbarAvail = contentTable.offsetWidth > contentTable.clientWidth;
         var workCell = this.parent.element.querySelector('.' + cls.WORK_CELLS_CLASS);
-        this.cellWidth = util.getElementWidth(workCell);
+        this.cellWidth = this.parent.getElementWidth(workCell);
         this.cellHeader = 0;
         var eventTable = this.parent.element.querySelector('.' + cls.EVENT_TABLE_CLASS);
-        this.eventHeight = util.getElementHeightFromClass(eventTable, cls.APPOINTMENT_CLASS);
+        this.eventHeight = this.parent.getElementHeightFromClass(eventTable, cls.APPOINTMENT_CLASS);
         var selector = "." + cls.MONTH_HEADER_WRAPPER + " tbody tr,." + cls.RESOURCE_COLUMN_TABLE_CLASS + " tbody tr,." + cls.CONTENT_TABLE_CLASS + " tbody tr";
         this.addCellHeight(selector, this.eventHeight, EVENT_GAP, this.cellHeader, this.moreIndicatorHeight);
         var wrapperCollection = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CONTAINER_CLASS));
@@ -293,7 +293,7 @@ var YearEvent = /** @class */ (function (_super) {
                 appWrapper.forEach(function (appWrap, cellIndex) {
                     var td = row.querySelector("td:nth-child(" + (cellIndex + 1) + ")");
                     var app = [].slice.call(appWrap.children);
-                    var width = util.getElementWidth(td);
+                    var width = _this.parent.getElementWidth(td);
                     var left = td.offsetLeft;
                     if (_this.parent.enableRtl) {
                         var right_1 = conTable_1.offsetWidth - left - td.offsetWidth;

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

@@ -35,6 +35,7 @@ export declare class EventWindow {
     refreshRecurrenceEditor(): void;
     setRecurrenceEditor(recurrenceEditor: RecurrenceEditor): void;
     openEditor(data: Record<string, any>, type: CurrentAction, isEventData?: boolean, repeatType?: number): void;
+    private setEditorContent;
     setDialogContent(): void;
     setDialogHeader(): void;
     setDialogFooter(): void;

package/src/schedule/popups/event-window.js

@@ -159,8 +159,13 @@ var EventWindow = /** @class */ (function () {
             this.addEventHandlers();
         }
         if (!isNullOrUndefined(this.parent.editorTemplate)) {
-            this.renderFormElements(this.element.querySelector('.e-schedule-form'), data);
+            this.renderFormElements(this.element.querySelector('.e-schedule-form'), data, type, repeatType);
         }
+        else {
+            this.setEditorContent(data, type, repeatType);
+        }
+    };
+    EventWindow.prototype.setEditorContent = function (data, type, repeatType) {
         if (!this.parent.isAdaptive && isNullOrUndefined(this.parent.editorTemplate)) {
             removeClass([this.dialogObject.element.querySelector('.e-recurrenceeditor')], cls.DISABLE_CLASS);
         }
@@ -341,7 +346,7 @@ var EventWindow = /** @class */ (function () {
         container.appendChild(form);
         return container;
     };
-    EventWindow.prototype.renderFormElements = function (form, args) {
+    EventWindow.prototype.renderFormElements = function (form, args, type, repeatType) {
         var _this = this;
         if (!isNullOrUndefined(this.parent.editorTemplate)) {
             if (args) {
@@ -370,15 +375,17 @@ var EventWindow = /** @class */ (function () {
             this.parent.renderTemplates(function () {
                 if (_this.element) {
                     _this.applyFormValidation();
-                    if (_this.eventCrudData) {
-                        _this.showDetails(_this.eventCrudData);
-                        _this.eventCrudData = null;
+                    if (args) {
+                        _this.setEditorContent(args, type, repeatType);
                     }
                 }
             });
         }
         else {
             form.appendChild(this.getDefaultEventWindowContent());
+            if (args) {
+                this.setEditorContent(args, type, repeatType);
+            }
         }
     };
     EventWindow.prototype.getDefaultEventWindowContent = function () {
@@ -977,13 +984,9 @@ var EventWindow = /** @class */ (function () {
         this.fieldValidator.renderFormValidator(form, rules, this.element, this.parent.locale);
     };
     EventWindow.prototype.showDetails = function (eventData) {
-        this.eventData = this.eventCrudData ? this.eventData : eventData;
+        this.eventData = eventData;
         var eventObj = extend({}, eventData, null, true);
         var formElements = this.getFormElements(cls.EVENT_WINDOW_DIALOG_CLASS);
-        if (this.parent.isReact && formElements.length < 1 && !this.cellClickAction) {
-            this.eventCrudData = eventObj;
-            return;
-        }
         if ((!this.cellClickAction || this.cellClickAction && !isNullOrUndefined(this.parent.editorTemplate)) &&
             eventObj[this.fields.endTime].getHours() === 0 && eventObj[this.fields.endTime].getMinutes() === 0) {
             this.trimAllDay(eventObj);

package/src/schedule/renderer/timeline-view.js

@@ -72,7 +72,7 @@ var TimelineViews = /** @class */ (function (_super) {
         }
         var scrollLeft;
         if (isNullOrUndefined(hour) || !this.parent.activeViewOptions.timeScale.enable) {
-            scrollLeft = index * util.getElementWidth(this.element.querySelector('.e-work-cells'));
+            scrollLeft = index * this.parent.getElementWidth(this.element.querySelector('.e-work-cells'));
         }
         else {
             scrollLeft = isNullOrUndefined(scrollDate) ? this.getLeftFromDateTime(null, date) :
@@ -159,7 +159,7 @@ var TimelineViews = /** @class */ (function (_super) {
                 if (this.parent.activeView.colLevels[parseInt(index.toString(), 10)] &&
                     this.parent.activeView.colLevels[parseInt(index.toString(), 10)][0].colSpan) {
                     diffInDates = currentDateIndex[0] * this.parent.activeView.colLevels[parseInt(index.toString(), 10)][0].colSpan *
-                        util.getElementWidth(this.element.querySelector('.e-work-cells'));
+                        this.parent.getElementWidth(this.element.querySelector('.e-work-cells'));
                 }
                 else {
                     var endHour = this.getEndHour();
@@ -169,8 +169,8 @@ var TimelineViews = /** @class */ (function (_super) {
                 }
             }
         }
-        return diffInDates + ((diffInMinutes * util.getElementWidth(this.element.querySelector('.e-work-cells')) * this.parent.activeViewOptions.timeScale.slotCount) /
-            this.parent.activeViewOptions.timeScale.interval);
+        return diffInDates + ((diffInMinutes * this.parent.getElementWidth(this.element.querySelector('.e-work-cells'))
+            * this.parent.activeViewOptions.timeScale.slotCount) / this.parent.activeViewOptions.timeScale.interval);
     };
     TimelineViews.prototype.renderHeader = function () {
         var tr = createElement('tr');

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

@@ -245,11 +245,8 @@ var VerticalView = /** @class */ (function (_super) {
         var currentDate = this.parent.getCurrentTime();
         if (this.parent.showTimeIndicator && this.isWorkHourRange(currentDate)) {
             var currentDateIndex = this.getCurrentTimeIndicatorIndex();
-            if (currentDateIndex.length > 0) {
-                var workCells = [].slice.call(this.element.querySelectorAll('.' + cls.WORK_CELLS_CLASS));
-                if (workCells.length > 0) {
-                    this.changeCurrentTimePosition();
-                }
+            if (currentDateIndex.length > 0 && !isNullOrUndefined(this.element.querySelector('.' + cls.WORK_CELLS_CLASS))) {
+                this.changeCurrentTimePosition();
                 if (isNullOrUndefined(this.currentTimeIndicatorTimer)) {
                     var interval = util.MS_PER_MINUTE - ((currentDate.getSeconds() * 1000) + currentDate.getMilliseconds());
                     if (interval <= (util.MS_PER_MINUTE - 1000)) {
@@ -351,7 +348,11 @@ var VerticalView = /** @class */ (function (_super) {
         }
         for (var _i = 0, currentDateIndex_1 = currentDateIndex; _i < currentDateIndex_1.length; _i++) {
             var day = currentDateIndex_1[_i];
-            curTimeWrap[parseInt(day.toString(), 10)].appendChild(createElement('div', { className: cls.CURRENT_TIMELINE_CLASS, styles: 'top:' + topInPx }));
+            if (curTimeWrap.length > day) {
+                curTimeWrap[parseInt(day.toString(), 10)].appendChild(createElement('div', {
+                    className: cls.CURRENT_TIMELINE_CLASS, styles: 'top:' + topInPx
+                }));
+            }
         }
         var currentTimeEle = createElement('div', {
             innerHTML: this.parent.getTimeString(this.parent.getCurrentTime()),
@@ -374,7 +375,7 @@ var VerticalView = /** @class */ (function (_super) {
             this.parent.activeViewOptions.timeScale.interval;
     };
     VerticalView.prototype.getWorkCellHeight = function () {
-        return parseFloat(util.getElementHeight(this.element.querySelector('.' + cls.WORK_CELLS_CLASS)).toFixed(2));
+        return parseFloat(this.parent.getElementHeight(this.element.querySelector('.' + cls.WORK_CELLS_CLASS)).toFixed(2));
     };
     VerticalView.prototype.getTdContent = function (date, type, groupIndex) {
         var cntEle;
@@ -677,12 +678,25 @@ var VerticalView = /** @class */ (function (_super) {
         var rows = [];
         var tr = createElement('tr');
         var td = createElement('td', { attrs: { 'aria-selected': 'false' } });
+        var existingGroupIndices = new Set();
+        if (this.parent.virtualScrollModule && this.parent.activeViewOptions.group.resources.length > 0 &&
+            this.parent.virtualScrollModule.existingDataCollection.length > 0) {
+            existingGroupIndices = new Set(this.parent.virtualScrollModule.existingDataCollection.map(function (data) { return data.groupIndex; }));
+        }
         var handler = function (r) {
             var ntr = tr.cloneNode();
             for (var _i = 0, _a = _this.colLevels[_this.colLevels.length - 1]; _i < _a.length; _i++) {
                 var tdData = _a[_i];
-                var ntd = _this.createContentTd(tdData, r, td);
-                ntr.appendChild(ntd);
+                var isAllowTdCreation = true;
+                if (_this.parent.virtualScrollModule && _this.parent.activeViewOptions.group.resources.length > 0) {
+                    if (existingGroupIndices.has(tdData.groupIndex)) {
+                        isAllowTdCreation = false;
+                    }
+                }
+                if (isAllowTdCreation) {
+                    var ntd = _this.createContentTd(tdData, r, td);
+                    ntr.appendChild(ntd);
+                }
             }
             rows.push(ntr);
             return r;

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

@@ -493,7 +493,7 @@ var ViewBase = /** @class */ (function () {
         if (this.isTimelineView()) {
             var colElements = this.getColElements();
             var contentBody = this.element.querySelector('.' + cls.CONTENT_TABLE_CLASS + ' tbody');
-            var colWidth_1 = (util.getElementWidth(contentBody) / (colElements.length / 2));
+            var colWidth_1 = (this.parent.getElementWidth(contentBody) / (colElements.length / 2));
             if (content.offsetHeight !== content.clientHeight) {
                 var resourceColumn = this.parent.element.querySelector('.' + cls.RESOURCE_COLUMN_WRAP_CLASS);
                 if (!isNullOrUndefined(resourceColumn) && resourceColumn.offsetHeight !== content.clientHeight) {

package/styles/fluent2.css

@@ -47,7 +47,7 @@
   --color-sf-flyout-bg-color-pressed: #e0e0e0;
   --color-sf-flyout-bg-color-selected: #ebebeb;
   --color-sf-flyout-bg-color-focus: #f5f5f5;
-  --color-sf-overlay-bg-color: #000;
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #f5f5f5;
   --color-sf-table-bg-color-pressed: #e0e0e0;
   --color-sf-table-bg-color-selected: #ebf3fc;
@@ -369,7 +369,7 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
   --color-sf-flyout-bg-color-selected: #383838;
   --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #383838;
   --color-sf-table-bg-color-pressed: #2e2e2e;
   --color-sf-table-bg-color-selected: #082338;
@@ -711,9 +711,9 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
-  --color-sf-table-bg-color-hover: var(--color-sf-black);
-  --color-sf-table-bg-color-pressed: var(--color-sf-black);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
+  --color-sf-table-bg-color-hover: #1a3bff;
+  --color-sf-table-bg-color-pressed: #1a3bff;
   --color-sf-table-bg-color-selected: #1a3bff;
   --color-sf-content-text-color: #fff;
   --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
@@ -732,12 +732,12 @@
   --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
-  --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
+  --color-sf-table-text-color-hover: #000;
+  --color-sf-table-text-color-pressed: #000;
+  --color-sf-table-text-color-selected: #000;
   --color-sf-icon-color: #fff;
-  --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
+  --color-sf-icon-color-hover: #000;
+  --color-sf-icon-color-pressed: #000;
   --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
   --color-sf-border-light: #fff;
   --color-sf-border: var(--color-sf-border-light);
@@ -1737,7 +1737,7 @@
   padding: 0 0 0 12px;
 }
 .e-schedule .e-resource-tree-popup-overlay.e-enable {
-  background: rgba(var(--color-sf-overlay-bg-color), 0.4);
+  background: var(--color-sf-overlay-bg-color);
   height: 100%;
   left: 0;
   opacity: 0.5;

package/styles/recurrence-editor/fluent2.css

@@ -47,7 +47,7 @@
   --color-sf-flyout-bg-color-pressed: #e0e0e0;
   --color-sf-flyout-bg-color-selected: #ebebeb;
   --color-sf-flyout-bg-color-focus: #f5f5f5;
-  --color-sf-overlay-bg-color: #000;
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #f5f5f5;
   --color-sf-table-bg-color-pressed: #e0e0e0;
   --color-sf-table-bg-color-selected: #ebf3fc;
@@ -369,7 +369,7 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
   --color-sf-flyout-bg-color-selected: #383838;
   --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #383838;
   --color-sf-table-bg-color-pressed: #2e2e2e;
   --color-sf-table-bg-color-selected: #082338;
@@ -711,9 +711,9 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
-  --color-sf-table-bg-color-hover: var(--color-sf-black);
-  --color-sf-table-bg-color-pressed: var(--color-sf-black);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
+  --color-sf-table-bg-color-hover: #1a3bff;
+  --color-sf-table-bg-color-pressed: #1a3bff;
   --color-sf-table-bg-color-selected: #1a3bff;
   --color-sf-content-text-color: #fff;
   --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
@@ -732,12 +732,12 @@
   --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
-  --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
+  --color-sf-table-text-color-hover: #000;
+  --color-sf-table-text-color-pressed: #000;
+  --color-sf-table-text-color-selected: #000;
   --color-sf-icon-color: #fff;
-  --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
+  --color-sf-icon-color-hover: #000;
+  --color-sf-icon-color-pressed: #000;
   --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
   --color-sf-border-light: #fff;
   --color-sf-border: var(--color-sf-border-light);

package/styles/schedule/fluent2.css

@@ -47,7 +47,7 @@
   --color-sf-flyout-bg-color-pressed: #e0e0e0;
   --color-sf-flyout-bg-color-selected: #ebebeb;
   --color-sf-flyout-bg-color-focus: #f5f5f5;
-  --color-sf-overlay-bg-color: #000;
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #f5f5f5;
   --color-sf-table-bg-color-pressed: #e0e0e0;
   --color-sf-table-bg-color-selected: #ebf3fc;
@@ -369,7 +369,7 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
   --color-sf-flyout-bg-color-selected: #383838;
   --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #383838;
   --color-sf-table-bg-color-pressed: #2e2e2e;
   --color-sf-table-bg-color-selected: #082338;
@@ -711,9 +711,9 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
-  --color-sf-table-bg-color-hover: var(--color-sf-black);
-  --color-sf-table-bg-color-pressed: var(--color-sf-black);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
+  --color-sf-table-bg-color-hover: #1a3bff;
+  --color-sf-table-bg-color-pressed: #1a3bff;
   --color-sf-table-bg-color-selected: #1a3bff;
   --color-sf-content-text-color: #fff;
   --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
@@ -732,12 +732,12 @@
   --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
-  --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
+  --color-sf-table-text-color-hover: #000;
+  --color-sf-table-text-color-pressed: #000;
+  --color-sf-table-text-color-selected: #000;
   --color-sf-icon-color: #fff;
-  --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
+  --color-sf-icon-color-hover: #000;
+  --color-sf-icon-color-pressed: #000;
   --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
   --color-sf-border-light: #fff;
   --color-sf-border: var(--color-sf-border-light);
@@ -1737,7 +1737,7 @@
   padding: 0 0 0 12px;
 }
 .e-schedule .e-resource-tree-popup-overlay.e-enable {
-  background: rgba(var(--color-sf-overlay-bg-color), 0.4);
+  background: var(--color-sf-overlay-bg-color);
   height: 100%;
   left: 0;
   opacity: 0.5;