@syncfusion/ej2-schedule 25.1.37 → 25.1.39

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

@@ -557,6 +557,8 @@ const RTL = 'e-rtl';
 /** @private */
 const DEVICE_CLASS = 'e-device';
 /** @private */
+const ADAPTIVE_CLASS = 'e-adaptive';
+/** @private */
 const MULTI_DRAG = 'e-multi-drag';
 /** @private */
 const ICON = 'e-icons';
@@ -1084,6 +1086,7 @@ class HeaderRenderer {
             });
             this.toolbarObj.root = this.parent.root ? this.parent.root : this.parent;
             this.toolbarObj.appendTo(this.parent.element.querySelector('.' + HEADER_TOOLBAR));
+            this.toolbarObj.element.setAttribute('aria-label', 'Scheduler');
             const prevNavEle = this.toolbarObj.element.querySelector('.e-prev');
             if (prevNavEle) {
                 prevNavEle.firstElementChild.setAttribute('title', this.l10n.getConstant('previous'));
@@ -1269,7 +1272,7 @@ class HeaderRenderer {
                 switch (item.name) {
                     case 'Today':
                         tbItem = {
-                            showAlwaysInPopup: (this.parent.isAdaptive || this.parent.enableAdaptiveUI), prefixIcon: 'e-icon-day',
+                            showAlwaysInPopup: (this.parent.isAdaptive || this.parent.enableAdaptiveUI), prefixIcon: 'e-icon-today',
                             text: this.l10n.getConstant('today'), cssClass: 'e-today', overflow: 'Show'
                         };
                         tbItem.align = propItem.align ? propItem.align : item.align;
@@ -1355,7 +1358,7 @@ class HeaderRenderer {
         }
         else {
             items.push({
-                align: 'Right', showAlwaysInPopup: (this.parent.isAdaptive || this.parent.enableAdaptiveUI), prefixIcon: 'e-icon-day',
+                align: 'Right', showAlwaysInPopup: (this.parent.isAdaptive || this.parent.enableAdaptiveUI), prefixIcon: 'e-icon-today',
                 text: this.l10n.getConstant('today'), cssClass: 'e-today', overflow: 'Show'
             });
             if (this.parent.views.length > 1) {
@@ -6751,6 +6754,14 @@ class VerticalEvent extends EventBase {
         const wrapperElements = [].slice.call(this.parent.element.querySelectorAll('.' + BLOCK_APPOINTMENT_CLASS +
             ',.' + APPOINTMENT_CLASS + ',.' + ROW_COUNT_WRAPPER_CLASS));
         const isDragging = (this.parent.crudModule && this.parent.crudModule.crudObj.isCrudAction) ? true : false;
+        const hideWrapper = (wrapper) => {
+            if (this.parent.isReact && !isNullOrUndefined(this.parent.activeViewOptions.eventTemplate)) {
+                const appWrapper = closest(wrapper, '.' + DAY_WRAPPER_CLASS + ',.' + ALLDAY_APPOINTMENT_WRAPPER_CLASS);
+                if (appWrapper && !appWrapper.classList.contains(APPOINTMENT_WRAPPER_HIDDEN_CLASS)) {
+                    addClass([appWrapper], APPOINTMENT_WRAPPER_HIDDEN_CLASS);
+                }
+            }
+        };
         for (const wrapper of wrapperElements) {
             if (isDragging && !(wrapper.classList.contains(ALLDAY_APPOINTMENT_CLASS) ||
                 wrapper.classList.contains(ROW_COUNT_WRAPPER_CLASS))) {
@@ -6758,11 +6769,13 @@ class VerticalEvent extends EventBase {
                 for (let j = 0, len = this.parent.crudModule.crudObj.sourceEvent.length; j < len; j++) {
                     if (groupIndex === this.parent.crudModule.crudObj.sourceEvent[parseInt(j.toString(), 10)].groupIndex ||
                         groupIndex === this.parent.crudModule.crudObj.targetEvent[parseInt(j.toString(), 10)].groupIndex) {
+                        hideWrapper(wrapper);
                         remove(wrapper);
                     }
                 }
             }
             else {
+                hideWrapper(wrapper);
                 remove(wrapper);
             }
         }
@@ -8174,8 +8187,7 @@ class MonthEvent extends EventBase {
             attrs: {
                 'role': 'button',
                 'tabindex': '0',
-                'aria-label': this.parent.globalize.formatNumber(count) + '&nbsp;'
-                    + (this.parent.isAdaptive ? '' : this.parent.localeObj.getConstant('more')),
+                'aria-label': this.parent.globalize.formatNumber(count) + ' ' + this.parent.localeObj.getConstant('moreEvents'),
                 'data-count': count.toString(),
                 'data-start-date': startDate.getTime().toString(),
                 'data-end-date': endDate.getTime().toString()
@@ -8282,8 +8294,16 @@ class TimelineEvent extends MonthEvent {
         const appointments = [];
         for (const app of appointmentsCollection) {
             if (this.renderType === 'day') {
-                if ((resetTime(app[this.fields.startTime]).getTime() <= resetTime(new Date(startDate.getTime())).getTime()) &&
-                    (resetTime(app[this.fields.endTime]).getTime() >= resetTime(new Date(startDate.getTime())).getTime())) {
+                const start = resetTime(startDate).getTime();
+                const end = resetTime(endDate).getTime();
+                const appStart = resetTime(app[this.fields.startTime]).getTime();
+                const appEnd = resetTime(app[this.fields.endTime]).getTime();
+                const isEndOverlap = () => {
+                    let endTime = (end - (getDateInMs(endDate) <= 0 ? MS_PER_DAY : 0));
+                    endTime = start > endTime ? start : endTime;
+                    return appEnd >= endTime && appStart <= endTime;
+                };
+                if (appStart <= start && appEnd >= start || isEndOverlap() || appStart > start && appEnd < end) {
                     appointments.push(app);
                 }
             }
@@ -9156,7 +9176,7 @@ class QuickPopups {
     renderMorePopup() {
         const moreEventPopup = `<div class="${MORE_EVENT_POPUP_CLASS}"><div class="${MORE_EVENT_HEADER_CLASS}">` +
             `<div class="${MORE_EVENT_CLOSE_CLASS}" title="${this.l10n.getConstant('close')}" tabindex="0" role="button"></div>` +
-            `<div class="${MORE_EVENT_DATE_HEADER_CLASS}"><div class="${MORE_EVENT_HEADER_DAY_CLASS}"></div>` +
+            `<div class="${MORE_EVENT_DATE_HEADER_CLASS}"><div class="${MORE_EVENT_HEADER_DAY_CLASS}" id="${this.parent.element.id}_more_popup"></div>` +
             `<div class="${MORE_EVENT_HEADER_DATE_CLASS} ${NAVIGATE_CLASS}" tabindex="0" role="link"></div></div></div></div>`;
         const moreEventWrapper = createElement('div', {
             className: MORE_POPUP_WRAPPER_CLASS + ' e-popup-close',
@@ -9181,6 +9201,8 @@ class QuickPopups {
             viewPortElement: (this.parent.isAdaptive ? document.body : this.parent.element),
             zIndex: (this.parent.isAdaptive ? 1002 : 2)
         });
+        this.morePopup.element.setAttribute('role', 'dialog');
+        this.morePopup.element.setAttribute('aria-labelledby', this.parent.element.id + '_more_popup');
         const closeButton = this.morePopup.element.querySelector('.' + MORE_EVENT_CLOSE_CLASS);
         this.renderButton('e-round', ICON + ' ' + CLOSE_ICON_CLASS, false, closeButton, this.closeClick);
         EventHandler.add(this.morePopup.element.querySelector('.' + MORE_EVENT_HEADER_DATE_CLASS), 'click', this.navigationClick, this);
@@ -13798,6 +13820,27 @@ class VirtualScroll {
             this.itemSize = getElementHeightFromClass(this.parent.activeView.element, WORK_CELLS_CLASS) || this.itemSize;
         }
     }
+    refreshLayout() {
+        const initialHeight = this.parent.uiStateValues.scheduleHeight;
+        this.parent.uiStateValues.scheduleHeight = this.parent.element.offsetHeight;
+        const preRenderedLength = this.renderedLength;
+        if (this.parent.uiStateValues.scheduleHeight !== initialHeight) {
+            if (preRenderedLength < this.getRenderedCount()) {
+                this.isRemoteRefresh = true;
+            }
+            const resWrap = this.parent.element.querySelector('.' + RESOURCE_COLUMN_WRAP_CLASS);
+            const conWrap = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
+            const eventWrap = this.parent.element.querySelector('.' + EVENT_TABLE_CLASS);
+            let firstTDIndex = parseInt(resWrap.querySelector('tbody td').getAttribute('data-group-index'), 10);
+            const endIndex = (firstTDIndex + this.renderedLength);
+            firstTDIndex = (endIndex > this.parent.resourceBase.expandedResources.length) ?
+                (this.parent.resourceBase.expandedResources.length - this.renderedLength) : firstTDIndex;
+            this.parent.resourceBase.renderedResources = this.parent.resourceBase.expandedResources.slice(firstTDIndex, endIndex);
+            if (this.parent.resourceBase.renderedResources.length > 0) {
+                this.updateContent(resWrap, conWrap, eventWrap, this.parent.resourceBase.renderedResources);
+            }
+        }
+    }
     renderEvents() {
         this.setTabIndex();
         const dynamicData = this.triggerScrollEvent(virtualScrollStop);
@@ -13832,7 +13875,9 @@ class VirtualScroll {
             const eventWrap = this.parent.element.querySelector('.' + EVENT_TABLE_CLASS);
             const timeIndicator = this.parent.element.querySelector('.' + CURRENT_TIMELINE_CLASS);
             const conTable = this.parent.element.querySelector('.' + CONTENT_TABLE_CLASS);
-            addClass([conWrap], 'e-transition');
+            if (!this.parent.rowAutoHeight) {
+                addClass([conWrap, resWrap], 'e-transition');
+            }
             this.renderedLength = resWrap.querySelector('tbody').children.length;
             const firstTDIndex = parseInt(resWrap.querySelector('tbody td').getAttribute('data-group-index'), 10);
             const scrollHeight = this.parent.rowAutoHeight ?
@@ -14226,6 +14271,7 @@ class Render {
             }
             throw Error('Inject required modules');
         }
+        this.parent.uiStateValues.scheduleHeight = this.parent.element.offsetHeight;
         this.parent.activeView.viewIndex = this.parent.viewIndex;
         this.updateLabelText(viewName);
         this.parent.activeView.addEventListener();
@@ -15914,6 +15960,7 @@ class ResourceBase {
                 args = {
                     cancel: false, event: (event) ? event.event : null, groupIndex: this.parent.uiStateValues.groupIndex, requestType: 'resourceChanged'
                 };
+                this.parent.adaptiveGroupIndex = this.parent.uiStateValues.groupIndex;
                 this.parent.trigger(actionComplete, args);
             }
         });
@@ -16570,6 +16617,7 @@ let Schedule = class Schedule extends Component {
      */
     constructor(options, element) {
         super(options, element);
+        this.adaptiveGroupIndex = 0;
     }
     /**
      * Core method that initializes the control rendering.
@@ -16593,6 +16641,12 @@ let Schedule = class Schedule extends Component {
         else {
             removeClasses.push(DEVICE_CLASS);
         }
+        if (this.enableAdaptiveUI) {
+            addClasses.push(ADAPTIVE_CLASS);
+        }
+        else {
+            removeClasses.push(ADAPTIVE_CLASS);
+        }
         if (this.allowMultiDrag) {
             addClasses.push(MULTI_DRAG);
         }
@@ -17194,7 +17248,7 @@ let Schedule = class Schedule extends Component {
         if (this && isNullOrUndefined(this.uiStateValues) || !(this.enablePersistence)) {
             this.uiStateValues = {
                 expand: false, isInitial: true, left: 0, top: 0, isGroupAdaptive: false,
-                isIgnoreOccurrence: false, groupIndex: 0, action: false, isBlock: false, isCustomMonth: true, isPreventTimezone: false
+                isIgnoreOccurrence: false, groupIndex: this.adaptiveGroupIndex, action: false, isBlock: false, isCustomMonth: true, isPreventTimezone: false
             };
         }
         this.currentTimezoneDate = this.getCurrentTime();
@@ -17686,6 +17740,9 @@ let Schedule = class Schedule extends Component {
             && document.activeElement.classList.contains(SUBJECT_CLASS))) {
             return;
         }
+        if (this.virtualScrollModule && this.activeView.isTimelineView()) {
+            this.virtualScrollModule.refreshLayout();
+        }
         if (this.activeViewOptions.timeScale.enable && this.activeView) {
             this.activeView.highlightCurrentTime();
         }
@@ -17697,7 +17754,12 @@ let Schedule = class Schedule extends Component {
             && !this.activeViewOptions.timeScale.enable) || this.activeView.isTimelineView()) {
             this.activeView.resetColWidth();
             this.notify(scrollUiUpdate, { cssProperties: this.getCssProperties(), isPreventScrollUpdate: true });
-            this.refreshEvents(false);
+            let isRemoteRefresh = false;
+            if (this.activeViewOptions.enableLazyLoading && this.virtualScrollModule && this.virtualScrollModule.isRemoteRefresh) {
+                isRemoteRefresh = this.virtualScrollModule.isRemoteRefresh;
+                this.virtualScrollModule.isRemoteRefresh = false;
+            }
+            this.refreshEvents(isRemoteRefresh);
         }
         else {
             this.notify(contentReady, {});
@@ -17880,7 +17942,7 @@ let Schedule = class Schedule extends Component {
      * @private
      */
     getPersistData() {
-        return this.addOnPersist(['currentView', 'selectedDate', 'scrollTop', 'scrollLeft']);
+        return this.addOnPersist(['currentView', 'selectedDate', 'scrollTop', 'scrollLeft', 'adaptiveGroupIndex']);
     }
     /**
      * Called internally, if any of the property value changed.
@@ -22881,7 +22943,7 @@ class ViewBase {
             const colWidth = (getElementWidth(contentBody) / (colElements.length / 2));
             if (content.offsetHeight !== content.clientHeight) {
                 const resourceColumn = this.parent.element.querySelector('.' + RESOURCE_COLUMN_WRAP_CLASS);
-                if (!isNullOrUndefined(resourceColumn)) {
+                if (!isNullOrUndefined(resourceColumn) && resourceColumn.offsetHeight !== content.clientHeight) {
                     setStyleAttribute(resourceColumn, { 'height': formatUnit(content.clientHeight) });
                 }
             }
@@ -23698,6 +23760,20 @@ class VerticalView extends ViewBase {
             append(tooltipTemplate, ntd);
         }
         ntd.setAttribute('data-date', cellDate.getTime().toString());
+        const skeleton = 'full';
+        if (!this.parent.activeViewOptions.timeScale.enable) {
+            const announcementText = this.parent.globalize.formatDate(tdData.date, { skeleton: skeleton, calendar: this.parent.getCalendarMode() });
+            ntd.setAttribute('aria-label', announcementText);
+        }
+        else {
+            const startDateText = this.parent.globalize.formatDate(cellDate, {
+                type: 'dateTime', skeleton: skeleton, calendar: this.parent.getCalendarMode()
+            });
+            const endDateText = this.parent.globalize.formatDate(this.getEndDateFromStartDate(cellDate), {
+                type: 'dateTime', skeleton: skeleton, calendar: this.parent.getCalendarMode()
+            });
+            ntd.setAttribute('aria-label', startDateText + ' ' + this.parent.localeObj.getConstant('endAt') + ' ' + endDateText);
+        }
         if (!isNullOrUndefined(tdData.groupIndex) || this.parent.uiStateValues.isGroupAdaptive) {
             const groupIndex = this.parent.uiStateValues.isGroupAdaptive ? this.parent.uiStateValues.groupIndex :
                 tdData.groupIndex;
@@ -26924,11 +27000,14 @@ class TimelineYear extends Year {
                     groupIndex = this.colLevels.slice(-1)[0][parseInt(month.toString(), 10)].groupIndex;
                     classList$$1.push(WORKDAY_CLASS);
                 }
+                const startDateText = this.parent.globalize.formatDate(date, { type: 'dateTime', skeleton: 'full', calendar: this.parent.getCalendarMode() });
+                const endDateText = this.parent.globalize.formatDate(this.parent.calendarUtil.getMonthEndDate(new Date(monthDate.getTime())), { type: 'dateTime', skeleton: 'full', calendar: this.parent.getCalendarMode() });
                 const td = createElement('td', {
                     className: WORK_CELLS_CLASS,
                     attrs: {
                         'aria-selected': 'false',
-                        'data-date': date.getTime().toString()
+                        'data-date': date.getTime().toString(),
+                        'aria-label': startDateText + ' ' + this.parent.localeObj.getConstant('endAt') + ' ' + endDateText
                     }
                 });
                 addClass([td], classList$$1);