@syncfusion/ej2-schedule 32.1.19 → 32.1.22

package/dist/es6/ej2-schedule.es2015.js

@@ -9788,7 +9788,9 @@ class QuickPopups {
     render() {
         this.renderQuickPopup();
         this.renderMorePopup();
-        this.renderQuickDialog();
+        if (this.parent.prerenderDialogs) {
+            this.renderQuickDialog();
+        }
     }
     renderQuickPopup() {
         const quickPopupWrapper = createElement('div', { className: POPUP_WRAPPER_CLASS + ' e-popup-close', attrs: { role: 'dialog' } });
@@ -9948,6 +9950,9 @@ class QuickPopups {
         this.fieldValidator.renderFormValidator(form, rules, this.quickPopup.element, this.parent.locale);
     }
     openRecurrenceAlert() {
+        if (!this.parent.prerenderDialogs) {
+            this.renderQuickDialog();
+        }
         const editDeleteOnly = this.quickDialog.element.querySelector('.' + QUICK_DIALOG_ALERT_OK);
         if (editDeleteOnly) {
             editDeleteOnly.innerHTML = this.l10n.getConstant(this.parent.currentAction === 'Delete' ? 'deleteEvent' : 'editEvent');
@@ -9969,6 +9974,9 @@ class QuickPopups {
         this.showQuickDialog('RecurrenceAlert');
     }
     openRecurrenceValidationAlert(type) {
+        if (!this.parent.prerenderDialogs) {
+            this.renderQuickDialog();
+        }
         this.quickDialogClass('Alert');
         const okButton = this.quickDialog.element.querySelector('.' + QUICK_DIALOG_ALERT_OK);
         okButton.innerHTML = this.l10n.getConstant('ok');
@@ -10012,6 +10020,9 @@ class QuickPopups {
         if (this.parent.activeViewOptions.readonly) {
             return;
         }
+        if (!this.parent.prerenderDialogs) {
+            this.renderQuickDialog();
+        }
         const okButton = this.quickDialog.element.querySelector('.' + QUICK_DIALOG_ALERT_OK);
         if (okButton) {
             okButton.innerHTML = this.l10n.getConstant('delete');
@@ -10030,6 +10041,9 @@ class QuickPopups {
         this.showQuickDialog('DeleteAlert');
     }
     openValidationError(type, eventData) {
+        if (!this.parent.prerenderDialogs) {
+            this.renderQuickDialog();
+        }
         this.quickDialog.header = this.l10n.getConstant('alert');
         this.quickDialog.content = this.l10n.getConstant(type);
         const okButton = this.quickDialog.element.querySelector('.' + QUICK_DIALOG_ALERT_OK);
@@ -10058,6 +10072,9 @@ class QuickPopups {
             if (!popupArgs.cancel) {
                 this.quickDialog.show();
             }
+            if (!this.parent.prerenderDialogs && popupArgs.cancel) {
+                this.destroyQuickDialog();
+            }
         });
     }
     createMoreEventList(eventCollection, groupOrder, groupIndex) {
@@ -10369,6 +10386,7 @@ class QuickPopups {
             let cellDetails;
             let argsData;
             const resourceText = this.getResourceText(args, type.toLowerCase());
+            const isResourceEmpty = this.parent.isResourceCollectionEmpty();
             switch (type) {
                 case 'Cell':
                     cellDetails = this.getFormattedString(data);
@@ -10404,7 +10422,7 @@ class QuickPopups {
                         content += '<div class="' + DESCRIPTION_CLASS + '"><div class="' + DESCRIPTION_ICON_CLASS + ' ' + ICON +
                             '"></div><div class="' + DESCRIPTION_DETAILS_CLASS + ' ' + TEXT_ELLIPSIS + '"></div></div>';
                     }
-                    if (this.parent.resourceCollection.length > 0) {
+                    if (this.parent.resourceCollection.length > 0 && !isResourceEmpty) {
                         content += '<div class="' + RESOURCE_CLASS + '"><div class="' + RESOURCE_ICON_CLASS + ' ' + ICON +
                             '"></div><div class="' + RESOURCE_DETAILS_CLASS + ' ' + TEXT_ELLIPSIS + '"></div></div>';
                     }
@@ -10467,7 +10485,8 @@ class QuickPopups {
         return footerTemplate;
     }
     getResourceText(args, type) {
-        if (this.parent.resourceCollection.length === 0) {
+        const isResourceEmpty = this.parent.isResourceCollectionEmpty();
+        if (this.parent.resourceCollection.length === 0 || isResourceEmpty) {
             return null;
         }
         let resourceValue = '';
@@ -10700,7 +10719,6 @@ class QuickPopups {
     }
     dialogButtonClick(event) {
         this.dialogEvent = event;
-        this.quickDialog.hide();
         const target = event.target;
         const cancelBtn = this.quickDialog.element.querySelector('.' + QUICK_DIALOG_ALERT_CANCEL);
         const eventData = this.parent.activeEventData.event;
@@ -10745,6 +10763,9 @@ class QuickPopups {
             this.parent.uiStateValues.isIgnoreOccurrence = target.classList.contains(QUICK_DIALOG_ALERT_CANCEL);
             this.parent.eventWindow.eventSave(event, this.l10n.getConstant('ok'));
         }
+        if (!isNullOrUndefined(this.quickDialog)) {
+            this.quickDialog.hide();
+        }
     }
     updateTapHoldEventPopup(target) {
         const selectedElements = this.parent.eventBase.getSelectedEventElements(target);
@@ -10811,6 +10832,9 @@ class QuickPopups {
         this.parent.trigger(popupClose, args, (popupCloseArgs) => {
             if (!popupCloseArgs.cancel) {
                 this.parent.eventBase.focusElement(true);
+                if (!this.parent.prerenderDialogs) {
+                    this.destroyQuickDialog();
+                }
             }
         });
     }
@@ -11134,7 +11158,9 @@ class QuickPopups {
     }
     refreshQuickDialog() {
         this.destroyQuickDialog();
-        this.renderQuickDialog();
+        if (this.parent.prerenderDialogs) {
+            this.renderQuickDialog();
+        }
     }
     refreshQuickPopup() {
         this.destroyQuickPopup();
@@ -11145,7 +11171,7 @@ class QuickPopups {
         this.renderMorePopup();
     }
     destroyQuickDialog() {
-        if (this.quickDialog.element) {
+        if (this.quickDialog && this.quickDialog.element) {
             this.quickDialog.destroy();
             remove(this.quickDialog.element);
             this.quickDialog = null;
@@ -12514,7 +12540,9 @@ class EventWindow {
         this.l10n = this.parent.localeObj;
         this.fields = this.parent.eventFields;
         this.eventWindowTime = { startTime: new Date(), endTime: new Date() };
-        this.renderEventWindow();
+        if (this.parent.prerenderDialogs) {
+            this.renderEventWindow();
+        }
     }
     renderEventWindow() {
         this.element = createElement('div', { id: this.parent.element.id + '_dialog_wrapper' });
@@ -12602,6 +12630,9 @@ class EventWindow {
         }
     }
     openEditor(data, type, isEventData, repeatType) {
+        if (!this.parent.prerenderDialogs) {
+            this.renderEventWindow();
+        }
         this.parent.currentAction = type;
         this.parent.removeNewEventElement();
         if (this.parent.quickPopup) {
@@ -12789,6 +12820,9 @@ class EventWindow {
             }
             callBackPromise.resolve(args);
         });
+        if (!this.parent.prerenderDialogs && args.cancel) {
+            this.destroy(true);
+        }
         return callBackPromise;
     }
     onBeforeClose(args) {
@@ -12815,6 +12849,9 @@ class EventWindow {
                     this.resetForm();
                     this.parent.eventBase.focusElement(true);
                     this.eventCrudData = null;
+                    if (!this.parent.prerenderDialogs) {
+                        this.destroy(true);
+                    }
                 }
             }
             callBackPromise.resolve(args);
@@ -12909,7 +12946,8 @@ class EventWindow {
         else {
             this.createRecurrenceEditor(parentDiv);
         }
-        if (this.parent.resourceCollection.length > 0) {
+        const isResourceEmpty = this.parent.isResourceCollectionEmpty();
+        if (this.parent.resourceCollection.length > 0 && !isResourceEmpty) {
             const resourceParentDiv = this.createDivElement(EVENT_WINDOW_RESOURCES_DIV_CLASS);
             for (const resource of this.parent.resourceBase.resourceCollection) {
                 resourceParentDiv.appendChild(this.renderResourceDetails(resource));
@@ -13444,7 +13482,8 @@ class EventWindow {
         if (cellsData.RecurrenceRule) {
             eventObj[this.fields.recurrenceRule] = cellsData.RecurrenceRule;
         }
-        if (this.parent.resourceCollection.length > 0 || this.parent.activeViewOptions.group.resources.length > 0) {
+        const isResourceEmpty = this.parent.isResourceCollectionEmpty();
+        if ((this.parent.resourceCollection.length > 0 && !isResourceEmpty) || this.parent.activeViewOptions.group.resources.length > 0) {
             this.parent.resourceBase.setResourceValues(eventObj);
         }
     }
@@ -14043,7 +14082,7 @@ class EventWindow {
             if (endDate.getTime() >= new Date(+startDate).setMonth(startDate.getMonth() + interval)) {
                 alertMessage = 'createError';
             }
-            if (isNullOrUndefined(alertMessage)) {
+            if (isNullOrUndefined(alertMessage) && !isNullOrUndefined(this.parent.quickPopup.quickDialog)) {
                 this.parent.quickPopup.quickDialog.hide();
             }
         }
@@ -16844,14 +16883,16 @@ class ResourceBase {
                         resourceId: levelId,
                         resourceName: treeLevel.resourceData[resource.textField],
                         resource: treeLevel.resource,
-                        resourceData: treeLevel.resourceData
+                        resourceData: treeLevel.resourceData,
+                        date: this.parent.selectedDate
                     };
                 }
                 else {
                     resObj = {
                         type: 'resourceHeader', resource: treeLevel.resource,
                         resourceData: treeLevel.resourceData, groupIndex: groupIndex,
-                        groupOrder: treeLevel.groupOrder
+                        groupOrder: treeLevel.groupOrder,
+                        date: this.parent.selectedDate
                     };
                     resTreeColl.push(resObj);
                     groupIndex++;
@@ -17155,6 +17196,11 @@ class ResourceBase {
         }
         this.lastResourceLevel = headerLevels.slice(-1)[0] || [];
         if (!this.parent.activeViewOptions.group.byDate) {
+            for (let levelIndex = 0; levelIndex < headerLevels.length; levelIndex++) {
+                for (const levelItem of headerLevels[parseInt(levelIndex.toString(), 10)]) {
+                    levelItem.date = this.parent.selectedDate;
+                }
+            }
             let index = 0;
             for (const lastLevelResource of this.lastResourceLevel) {
                 for (let i = 0; i < lastLevelResource.colSpan; i++) {
@@ -17247,6 +17293,9 @@ class ResourceBase {
             datesColumn.push(headerDate);
             const resGroup = extend([], levels, null, true);
             for (let k = 0, length = resGroup.length; k < length; k++) {
+                for (const resTd of resGroup[parseInt(k.toString(), 10)]) {
+                    resTd.date = headerDate.date;
+                }
                 if (k === resGroup.length - 1) {
                     for (const resTd of resGroup[parseInt(k.toString(), 10)]) {
                         resTd.date = headerDate.date;
@@ -17301,10 +17350,13 @@ class ResourceBase {
         if (isNullOrUndefined(groupOrder) && this.parent.activeViewOptions.group.allowGroupEdit && resource.allowMultiple) {
             return undefined;
         }
-        const id = isNullOrUndefined(groupOrder) ? eventObj[resource.field] : groupOrder[parseInt(colorFieldIndex.toString(), 10)];
-        const data = this.filterData(resource.dataSource, resource.idField, id);
-        if (data.length > 0) {
-            return data[0][resource.colorField];
+        const isResourceEmpty = this.parent.isResourceCollectionEmpty();
+        if (!isResourceEmpty) {
+            const id = isNullOrUndefined(groupOrder) ? eventObj[resource.field] : groupOrder[parseInt(colorFieldIndex.toString(), 10)];
+            const data = this.filterData(resource.dataSource, resource.idField, id);
+            if (data.length > 0) {
+                return data[0][resource.colorField];
+            }
         }
         return undefined;
     }
@@ -17895,6 +17947,19 @@ let Schedule = class Schedule extends Component {
                 (currentIndex === -1) ? 0 : currentIndex;
         }
     }
+    /**
+     * Checks if resources have empty dataSource
+     *
+     * @returns {boolean} Returns true if resources have empty dataSource, otherwise false
+     * @private
+     */
+    isResourceCollectionEmpty() {
+        return this.resourceCollection.length > 0 &&
+            this.resourceCollection.some((res) => {
+                const ds = res && res.dataSource;
+                return Array.isArray(ds) ? ds.length === 0 : !ds;
+            });
+    }
     getActiveViewOptions() {
         const timeScale = {
             enable: this.timeScale.enable,
@@ -17903,12 +17968,20 @@ let Schedule = class Schedule extends Component {
             majorSlotTemplate: this.timeScale.majorSlotTemplate,
             minorSlotTemplate: this.timeScale.minorSlotTemplate
         };
+        const isResourceEmpty = this.isResourceCollectionEmpty();
         const isYearView = this.viewCollections[this.viewIndex].option.indexOf('Year') > -1;
+        let groupResources = [];
+        if ((!isNullOrUndefined(this.group.resources) && this.group.resources.length > 0) && !isResourceEmpty) {
+            groupResources = this.group.resources;
+        }
+        else if (this.resources.length > 0 && !isResourceEmpty) {
+            groupResources = [];
+        }
         const group = {
-            byDate: isYearView ? false : this.group.byDate,
+            byDate: (isYearView || isResourceEmpty) ? false : this.group.byDate,
             byGroupID: this.group.byGroupID,
             allowGroupEdit: this.group.allowGroupEdit,
-            resources: isNullOrUndefined(this.group.resources) ? [] : this.group.resources,
+            resources: groupResources,
             headerTooltipTemplate: this.group.headerTooltipTemplate,
             enableCompactView: this.group.enableCompactView,
             hideNonWorkingDays: ['Day', 'Week', 'WorkWeek', 'Month'].indexOf(this.currentView) > -1 ? this.group.hideNonWorkingDays : false
@@ -18417,7 +18490,7 @@ let Schedule = class Schedule extends Component {
      * @private
      */
     removeSelectedClass() {
-        const selectedCells = this.getSelectedCells();
+        const selectedCells = [].slice.call(this.element.querySelectorAll('.' + SELECTED_CELL_CLASS));
         for (const cell of selectedCells) {
             cell.removeAttribute('tabindex');
         }
@@ -18849,7 +18922,23 @@ let Schedule = class Schedule extends Component {
      * @private
      */
     getSelectedCells() {
-        return [].slice.call(this.element.querySelectorAll('.' + SELECTED_CELL_CLASS));
+        const selectedCells = [].slice.call(this.element.querySelectorAll('.' + SELECTED_CELL_CLASS));
+        if (!selectedCells || selectedCells.length === 0) {
+            return [];
+        }
+        else if (selectedCells.length === 1) {
+            return selectedCells;
+        }
+        if (selectedCells && selectedCells.length > 1) {
+            const hasAnyWorkCells = selectedCells.some((cell) => cell.classList.contains(WORK_CELLS_CLASS));
+            const workCells = hasAnyWorkCells ?
+                selectedCells.filter((cell) => !cell.classList.contains(ALLDAY_CELLS_CLASS)) : selectedCells;
+            if (!workCells || workCells.length === 0) {
+                return [];
+            }
+            return [...workCells].sort((a, b) => (+a.dataset.date || 0) - (+b.dataset.date || 0));
+        }
+        return selectedCells;
     }
     /**
      * Method to generate the announcement string
@@ -19047,6 +19136,17 @@ let Schedule = class Schedule extends Component {
                         state.isLayout = true;
                     }
                     break;
+                case 'prerenderDialogs': {
+                    if (newProp.prerenderDialogs) {
+                        this.eventWindow.renderEventWindow();
+                        this.quickPopup.renderQuickDialog();
+                    }
+                    else {
+                        this.eventWindow.destroy(true);
+                        this.quickPopup.destroyQuickDialog();
+                    }
+                    break;
+                }
                 case 'showWeekend':
                 case 'startHour':
                 case 'endHour':
@@ -20339,6 +20439,9 @@ let Schedule = class Schedule extends Component {
      * @returns {void}
      */
     openOverlapAlert(args) {
+        if (!this.prerenderDialogs) {
+            return;
+        }
         if (this.quickPopup) {
             const eventProp = {
                 type: 'OverlapAlert',
@@ -20361,6 +20464,9 @@ let Schedule = class Schedule extends Component {
      * @returns {void}
      */
     closeOverlapAlert() {
+        if (!this.prerenderDialogs) {
+            return;
+        }
         if (this.quickPopup) {
             const args = {
                 type: 'OverlapAlert',
@@ -20671,6 +20777,9 @@ __decorate$b([
 __decorate$b([
     Property(true)
 ], Schedule.prototype, "showQuickInfo", void 0);
+__decorate$b([
+    Property(true)
+], Schedule.prototype, "prerenderDialogs", void 0);
 __decorate$b([
     Property(false)
 ], Schedule.prototype, "allowInline", void 0);
@@ -20932,7 +21041,7 @@ class ActionBase {
         const startHour = this.parent.activeView.getStartHour();
         const intervalInMS = MS_PER_MINUTE * this.actionObj.interval;
         dateInMS += (startHour.getHours() * 60 + startHour.getMinutes()) * MS_PER_MINUTE + startHour.getSeconds() * 1000;
-        dateInMS = dateInMS + Math.floor((date.getTime() - dateInMS) / intervalInMS) * intervalInMS;
+        dateInMS = dateInMS + ((date.getTime() - dateInMS) / intervalInMS) * intervalInMS;
         return new Date(dateInMS);
     }
     getContentAreaDimension() {
@@ -21687,7 +21796,7 @@ class Resize extends ActionBase {
                     const offsetWidth = (Math.round(offset / this.actionObj.cellWidth) *
                         this.actionObj.cellWidth) + (isLeft ? 0 : (this.parent.getElementWidth(this.actionObj.clone) -
                         this.actionObj.cellWidth));
-                    cellIndex = Math.floor(offsetWidth / this.actionObj.cellWidth);
+                    cellIndex = Math.ceil(offsetWidth / this.actionObj.cellWidth);
                 }
                 isLastCell = cellIndex === tdCollections.length;
                 cellIndex = this.getIndex(cellIndex);
@@ -21705,13 +21814,29 @@ class Resize extends ActionBase {
             }
             else {
                 if (!isLeft) {
-                    offset += this.parent.getElementWidth(this.actionObj.clone);
-                }
-                let spanMinutes = Math.floor((this.actionObj.slotInterval / this.actionObj.cellWidth) *
+                    let cloneWidth = this.parent.getElementWidth(this.actionObj.clone);
+                    const pixelsPerInterval = this.actionObj.cellWidth /
+                        (this.actionObj.slotInterval / this.actionObj.interval);
+                    const numIntervals = Math.round(cloneWidth / pixelsPerInterval);
+                    cloneWidth = numIntervals * pixelsPerInterval;
+                    offset = offset + cloneWidth;
+                }
+                let spanMinutes = Math.ceil((this.actionObj.slotInterval / this.actionObj.cellWidth) *
                     (offset - Math.floor(offset / this.actionObj.cellWidth) * this.actionObj.cellWidth));
                 spanMinutes = (isLastCell || (!isLeft && spanMinutes === 0)) ? this.actionObj.slotInterval : spanMinutes;
                 resizeTime = new Date(resizeDate.getTime());
                 resizeTime = new Date(resizeDate.getTime() + (spanMinutes * MS_PER_MINUTE));
+                const isCustomResizeInterval = this.actionObj.interval !== this.actionObj.slotInterval;
+                const initialCellTime = new Date(resizeTime.getTime());
+                const intervalInMS = this.actionObj.interval * 60000;
+                if (intervalInMS > 0 && isCustomResizeInterval) {
+                    if (this.resizeEdges.right || this.resizeEdges.left) {
+                        const eventTime = this.resizeEdges.right ? eventEnd : eventStart;
+                        const timeDifferenceMs = initialCellTime.getTime() - eventTime.getTime();
+                        const intervalCount = Math.round(timeDifferenceMs / intervalInMS);
+                        resizeTime = new Date(eventTime.getTime() + intervalCount * intervalInMS);
+                    }
+                }
                 this.updateTimePosition(resizeTime);
             }
         }
@@ -24042,14 +24167,18 @@ class ViewBase {
         }
     }
     getHeaderBarHeight() {
-        let headerBarHeight = 2;
+        const computedStyle = getComputedStyle(this.parent.element);
+        const borderTop = parseFloat(computedStyle.borderTopWidth) || 1;
+        const borderBottom = parseFloat(computedStyle.borderBottomWidth) || 1;
+        const border = Math.round(borderTop + borderBottom);
+        let headerBarHeight = border;
         if (this.parent.headerModule) {
             headerBarHeight += getOuterHeight(this.parent.headerModule.getHeaderElement());
         }
         if (this.parent.uiStateValues.isGroupAdaptive) {
             const resHeader = this.parent.element.querySelector('.' + RESOURCE_HEADER_TOOLBAR);
             if (resHeader) {
-                headerBarHeight += resHeader.offsetHeight;
+                headerBarHeight += getOuterHeight(resHeader);
             }
         }
         return headerBarHeight;
@@ -24332,7 +24461,7 @@ class ViewBase {
     }
     setResourceHeaderContent(tdElement, tdData, className = TEXT_ELLIPSIS) {
         if (this.parent.activeViewOptions.resourceHeaderTemplate) {
-            const data = { resource: tdData.resource, resourceData: tdData.resourceData };
+            const data = { resource: tdData.resource, resourceData: tdData.resourceData, date: tdData.date };
             const scheduleId = this.parent.element.id + '_';
             const viewName = this.parent.activeViewOptions.resourceHeaderTemplateName;
             const templateId = scheduleId + viewName + 'resourceHeaderTemplate';
@@ -26829,7 +26958,7 @@ class AgendaBase extends ViewBase {
                                         groupOrder: resData[parseInt(res.toString(), 10)].groupOrder.slice(0, -1),
                                         resourceData: resData[parseInt(res.toString(), 10)].resourceData,
                                         groupIndex: (lastLevelInfo.length - data.length), className: [RESOURCE_NAME],
-                                        date: agendaDate
+                                        date: this.parent.activeViewOptions.group.byDate ? firstDate : agendaDate
                                     };
                                     lastLevelInfo[parseInt((lastLevelInfo.length - data.length).toString(), 10)].push(tempObj);
                                     tempLastLevelInfo.push(extend({}, tempObj, null, true));
@@ -26857,7 +26986,8 @@ class AgendaBase extends ViewBase {
                                 tempGroupedData[0].type = 'parentColumnLevel_' + (y + 1);
                                 tempGroupedData[0].resource = topResources[topResources.length - (y + 1)];
                                 tempGroupedData[0].resourceData = data[parseInt(x.toString(), 10)];
-                                tempGroupedData[0].date = agendaDate;
+                                tempGroupedData[0].date = this.parent.activeViewOptions.group.byDate ?
+                                    tempLastLevelInfo[parseInt(u.toString(), 10)].date : agendaDate;
                                 lastLevelInfo[tempGroupedData[0].groupIndex].push(tempGroupedData[0]);
                                 tempGroupedData = [];
                                 totalRowSpan = 0;