@syncfusion/ej2-schedule 19.2.60 → 19.3.48

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

@@ -44,6 +44,12 @@ var VerticalEvent = /** @class */ (function (_super) {
         return _this;
     }
     VerticalEvent.prototype.renderAppointments = function () {
+        if (isNullOrUndefined(this.parent)) {
+            return;
+        }
+        if (this.parent.dragAndDropModule) {
+            this.parent.dragAndDropModule.setDragArea();
+        }
         var wrapperElements = [].slice.call(this.parent.element.querySelectorAll('.' + cls.BLOCK_APPOINTMENT_CLASS +
             ',.' + cls.APPOINTMENT_CLASS + ',.' + cls.ROW_COUNT_WRAPPER_CLASS));
         var isDragging = (this.parent.crudModule && this.parent.crudModule.crudObj.isCrudAction) ? true : false;
@@ -519,7 +525,7 @@ var VerticalEvent = /** @class */ (function (_super) {
         var schedule = util.getStartEndHours(currentDate, this.startHour, this.endHour);
         var isValidEvent = this.isValidEvent(eventObj, eStart, eEnd, schedule);
         if (eStart <= eEnd && isValidEvent) {
-            var appHeight = this.getHeight(eStart, eEnd);
+            var appHeight_1 = this.getHeight(eStart, eEnd);
             if (eStart.getTime() > schedule.startHour.getTime()) {
                 topValue = this.getTopValue(eStart, dayIndex, resource);
             }
@@ -547,30 +553,30 @@ var VerticalEvent = /** @class */ (function (_super) {
                 this.renderedEvents[resource] = [];
             }
             this.renderedEvents[resource].push(extend({}, record, null, true));
-            var appointmentElement_2;
+            var appointmentElement = void 0;
             if (inline) {
-                appointmentElement_2 = this.parent.inlineModule.createInlineAppointmentElement(eventObj);
+                appointmentElement = this.parent.inlineModule.createInlineAppointmentElement(eventObj);
             }
             else {
-                appointmentElement_2 = this.createAppointmentElement(eventObj, false, record.isSpanned, resource);
+                appointmentElement = this.createAppointmentElement(eventObj, false, record.isSpanned, resource);
             }
-            setStyleAttribute(appointmentElement_2, {
+            setStyleAttribute(appointmentElement, {
                 'width': (this.parent.eventSettings.enableMaxHeight ? '100%' : tempData.appWidth),
-                'height': appHeight + 'px', 'top': topValue + 'px'
+                'height': appHeight_1 + 'px', 'top': topValue + 'px'
             });
-            var iconHeight = appointmentElement_2.querySelectorAll('.' + cls.EVENT_INDICATOR_CLASS).length * 15;
-            var maxHeight = appHeight - 40 - iconHeight;
-            var subjectElement = appointmentElement_2.querySelector('.' + cls.SUBJECT_CLASS);
+            var iconHeight = appointmentElement.querySelectorAll('.' + cls.EVENT_INDICATOR_CLASS).length * 15;
+            var maxHeight = appHeight_1 - 40 - iconHeight;
+            var subjectElement = appointmentElement.querySelector('.' + cls.SUBJECT_CLASS);
             if (!this.parent.isAdaptive && subjectElement) {
                 subjectElement.style.maxHeight = formatUnit(maxHeight);
             }
             var index = this.parent.activeViewOptions.group.byDate ? (this.resources.length * dayIndex) + resource : dayCount;
-            this.appendEvent(eventObj, appointmentElement_2, index, tempData.appLeft);
-            this.wireAppointmentEvents(appointmentElement_2, eventObj);
-            if (appointmentElement_2.offsetHeight < this.cellHeight) {
-                var resizeHandlers = [].slice.call(appointmentElement_2.querySelectorAll('.' + cls.EVENT_RESIZE_CLASS));
+            this.appendEvent(eventObj, appointmentElement, index, tempData.appLeft);
+            this.wireAppointmentEvents(appointmentElement, eventObj);
+            if (appHeight_1 < this.cellHeight) {
+                var resizeHandlers = [].slice.call(appointmentElement.querySelectorAll('.' + cls.EVENT_RESIZE_CLASS));
                 resizeHandlers.forEach(function (resizeHandler) {
-                    resizeHandler.style.height = Math.ceil(appointmentElement_2.offsetHeight / resizeHandler.offsetHeight) + 'px';
+                    resizeHandler.style.height = Math.ceil(appHeight_1 / resizeHandler.offsetHeight) + 'px';
                 });
             }
         }
@@ -663,11 +669,12 @@ var VerticalEvent = /** @class */ (function (_super) {
             eventsList = eventsList.filter(function (obj) { return (obj[fieldMapping.startTime] === record[fieldMapping.startTime] &&
                 obj[fieldMapping.endTime] > record[fieldMapping.endTime] || obj[fieldMapping.endTime] > record[fieldMapping.startTime] &&
                 obj[fieldMapping.startTime] < record[fieldMapping.endTime] || obj[fieldMapping.endTime] === record[fieldMapping.startTime]
-                && obj[fieldMapping.startTime] === record[fieldMapping.endTime]) || ((obj[fieldMapping.startTime].getTime() ===
-                record[fieldMapping.startTime].getTime() && obj[fieldMapping.endTime].getTime() === record[fieldMapping.endTime].getTime())
-                || (obj[fieldMapping.startTime].getTime() === record[fieldMapping.startTime].getTime() &&
-                    obj[fieldMapping.endTime].getTime() < record[fieldMapping.endTime].getTime() ||
-                    obj[fieldMapping.endTime].getTime() > record[fieldMapping.endTime].getTime())); });
+                && obj[fieldMapping.startTime] === record[fieldMapping.endTime]) ||
+                ((obj[fieldMapping.startTime].getTime() === record[fieldMapping.startTime].getTime() &&
+                    obj[fieldMapping.endTime].getTime() === record[fieldMapping.endTime].getTime())
+                    || (obj[fieldMapping.startTime].getTime() === record[fieldMapping.startTime].getTime() &&
+                        obj[fieldMapping.endTime].getTime() < record[fieldMapping.endTime].getTime() ||
+                        obj[fieldMapping.endTime].getTime() > record[fieldMapping.endTime].getTime())); });
         }
         if (eventsList.length > 0) {
             var appLevel = eventsList.map(function (obj) { return obj.Index; });

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

@@ -30,6 +30,9 @@ var YearEvent = /** @class */ (function (_super) {
         return _this;
     }
     YearEvent.prototype.renderAppointments = function () {
+        if (this.parent.dragAndDropModule) {
+            this.parent.dragAndDropModule.setDragArea();
+        }
         this.fields = this.parent.eventFields;
         var elementSelector = (this.parent.currentView === 'Year') ? '.' + cls.APPOINTMENT_CLASS :
             '.' + cls.APPOINTMENT_WRAPPER_CLASS + ',.' + cls.MORE_INDICATOR_CLASS;
@@ -228,7 +231,7 @@ var YearEvent = /** @class */ (function (_super) {
                 var monthStart = new Date(this.parent.selectedDate.getFullYear(), months[month], 1);
                 for (var i = 0, len = resources.length; i < len; i++) {
                     this.renderedEvents = [];
-                    this.renderResourceEvent(wrapperCollection[i], resources[i], month, i, monthStart);
+                    this.renderResourceEvent(wrapperCollection[month], resources[i], month, i, monthStart);
                 }
             }
         }

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

@@ -1,4 +1,4 @@
-import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';import { Query, DataManager } from '@syncfusion/ej2-data';import { Field } from './fields';import { FieldModel } from './fields-model';
+import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';import { Query, DataManager } from '@syncfusion/ej2-data';import { SortComparerFunction } from '../base/interface';import { SpannedEventPlacement } from '../base/type';import { Field } from './fields';import { FieldModel } from './fields-model';
 
 /**
  * Interface for a class EventSettings
@@ -57,6 +57,17 @@ export interface EventSettingsModel {
      */
     tooltipTemplate?: string;
 
+    /**
+     * Defines the option to render the spanned events (more than 24 hours) in either `AllDayRow` or `TimeSlot`. By default it renders in `AllDayRow`.
+     * This property is applicable for `Day`, `Week` and `WorkWeek` views only. The possible values for this property as follows
+     * * AllDayRow
+     * * TimeSlot
+     * {% codeBlock src='schedule/spannedEventPlacement/index.md' %}{% endcodeBlock %}
+     *
+     * @default 'AllDayRow'
+     */
+    spannedEventPlacement?: SpannedEventPlacement;
+
     /**
      * Defines the resource name, to decides the color of which particular resource level is to be applied on appointments, when
      *  grouping is enabled on scheduler.
@@ -116,4 +127,13 @@ export interface EventSettingsModel {
      */
     ignoreWhitespace?: boolean;
 
+    /**
+     * Defines the custom sort comparer function.
+     * The sort comparer function has the same functionality like
+     * [`Array.sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) sort comparer.
+     *
+     * @default null
+     */
+    sortComparer?: SortComparerFunction;
+
 }

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

@@ -1,5 +1,7 @@
 import { ChildProperty } from '@syncfusion/ej2-base';
 import { Query, DataManager } from '@syncfusion/ej2-data';
+import { SortComparerFunction } from '../base/interface';
+import { SpannedEventPlacement } from '../base/type';
 import { FieldModel } from './fields-model';
 /**
  * Holds the configuration of event related options and dataSource binding to Schedule.
@@ -51,6 +53,16 @@ export declare class EventSettings extends ChildProperty<EventSettings> {
      * @default null
      */
     tooltipTemplate: string;
+    /**
+     * Defines the option to render the spanned events (more than 24 hours) in either `AllDayRow` or `TimeSlot`. By default it renders in `AllDayRow`.
+     * This property is applicable for `Day`, `Week` and `WorkWeek` views only. The possible values for this property as follows
+     * * AllDayRow
+     * * TimeSlot
+     * {% codeBlock src='schedule/spannedEventPlacement/index.md' %}{% endcodeBlock %}
+     *
+     * @default 'AllDayRow'
+     */
+    spannedEventPlacement: SpannedEventPlacement;
     /**
      * Defines the resource name, to decides the color of which particular resource level is to be applied on appointments, when
      *  grouping is enabled on scheduler.
@@ -102,4 +114,12 @@ export declare class EventSettings extends ChildProperty<EventSettings> {
      * @default false
      */
     ignoreWhitespace: boolean;
+    /**
+     * Defines the custom sort comparer function.
+     * The sort comparer function has the same functionality like
+     * [`Array.sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) sort comparer.
+     *
+     * @default null
+     */
+    sortComparer: SortComparerFunction;
 }

package/src/schedule/models/event-settings.js

@@ -46,6 +46,9 @@ var EventSettings = /** @class */ (function (_super) {
     __decorate([
         Property()
     ], EventSettings.prototype, "tooltipTemplate", void 0);
+    __decorate([
+        Property('AllDayRow')
+    ], EventSettings.prototype, "spannedEventPlacement", void 0);
     __decorate([
         Property()
     ], EventSettings.prototype, "resourceColorField", void 0);
@@ -70,6 +73,9 @@ var EventSettings = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], EventSettings.prototype, "ignoreWhitespace", void 0);
+    __decorate([
+        Property()
+    ], EventSettings.prototype, "sortComparer", void 0);
     return EventSettings;
 }(ChildProperty));
 export { EventSettings };

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

@@ -207,6 +207,15 @@ export interface ViewsModel {
      */
     resourceHeaderTemplate?: string;
 
+    /**
+     * The template option which is used to render the customized header indent cell 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 indent cell.
+     *  It gets applied only to the view objects on which it is defined.
+     *
+     * @default null
+     */
+    headerIndentTemplate?: string;
+
     /**
      * By default, Schedule follows the time-format as per the default culture assigned to it.
      * It is also possible to manually set specific time format by using the `timeFormat` property.

package/src/schedule/models/views.d.ts

@@ -185,6 +185,14 @@ export declare class Views extends ChildProperty<Views> {
      * @default null
      */
     resourceHeaderTemplate: string;
+    /**
+     * The template option which is used to render the customized header indent cell 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 indent cell.
+     *  It gets applied only to the view objects on which it is defined.
+     *
+     * @default null
+     */
+    headerIndentTemplate: string;
     /**
      * By default, Schedule follows the time-format as per the default culture assigned to it.
      * It is also possible to manually set specific time format by using the `timeFormat` property.

package/src/schedule/models/views.js

@@ -95,6 +95,9 @@ var Views = /** @class */ (function (_super) {
     __decorate([
         Property()
     ], Views.prototype, "resourceHeaderTemplate", void 0);
+    __decorate([
+        Property()
+    ], Views.prototype, "headerIndentTemplate", void 0);
     __decorate([
         Property(null)
     ], Views.prototype, "timeFormat", void 0);

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

@@ -27,6 +27,7 @@ export declare class EventWindow {
     private eventWindowTime;
     private timezoneData;
     private isEnterKey;
+    private dialogEvent;
     constructor(parent: Schedule);
     private renderEventWindow;
     refresh(): void;
@@ -79,11 +80,11 @@ export declare class EventWindow {
     private renderRecurrenceEditor;
     updateMinMaxDateToEditor(): void;
     private updateRepeatLabel;
-    dialogClose(): void;
+    dialogClose(event?: Event): void;
     private resetForm;
     private timezoneChangeStyle;
     private resetFormFields;
-    eventSave(alert?: string): void;
+    eventSave(event: Event, alert?: string): void;
     getEventDataFromEditor(): Record<string, Record<string, any>>;
     private processEventValidation;
     private processCrudActions;

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

@@ -208,6 +208,7 @@ var EventWindow = /** @class */ (function () {
         }
         var eventProp = {
             type: 'Editor',
+            event: args.event || this.dialogEvent,
             data: this.eventCrudData,
             cancel: false,
             element: this.element,
@@ -1078,11 +1079,12 @@ var EventWindow = /** @class */ (function () {
             (this.l10n.getConstant('repeats') + ' ' + this.recurrenceEditor.getRuleSummary(repeatRule)) : this.l10n.getConstant('repeat');
         this.repeatStatus.setProperties({ label: data });
     };
-    EventWindow.prototype.dialogClose = function () {
+    EventWindow.prototype.dialogClose = function (event) {
         if (this.isEnterKey) {
             this.isEnterKey = false;
             return;
         }
+        this.dialogEvent = event;
         this.isCrudAction = false;
         this.parent.activeEventData = { event: undefined, element: undefined };
         this.parent.currentAction = null;
@@ -1132,7 +1134,7 @@ var EventWindow = /** @class */ (function () {
             }
         }
     };
-    EventWindow.prototype.eventSave = function (alert) {
+    EventWindow.prototype.eventSave = function (event, alert) {
         if (this.isEnterKey) {
             this.isEnterKey = false;
             return;
@@ -1147,6 +1149,7 @@ var EventWindow = /** @class */ (function () {
             return;
         }
         this.eventCrudData = dataCollection.eventData;
+        this.dialogEvent = event;
         this.isCrudAction = true;
         this.dialogObject.hide();
     };
@@ -1695,7 +1698,7 @@ var EventWindow = /** @class */ (function () {
         var element = this.element.querySelector('.' + className);
         return element ? element.ej2_instances[0] : null;
     };
-    EventWindow.prototype.eventDelete = function () {
+    EventWindow.prototype.eventDelete = function (event) {
         if (this.isEnterKey) {
             this.isEnterKey = false;
             return;
@@ -1721,6 +1724,7 @@ var EventWindow = /** @class */ (function () {
                 }
                 break;
         }
+        this.dialogEvent = event;
         this.isCrudAction = false;
         this.dialogObject.hide();
         this.parent.quickPopup.openDeleteAlert();

package/src/schedule/popups/form-validator.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { createElement, remove } from '@syncfusion/ej2-base';
+import { createElement, isNullOrUndefined, remove } from '@syncfusion/ej2-base';
 import { FormValidator } from '@syncfusion/ej2-inputs';
 import * as cls from '../base/css-constant';
 /**
@@ -49,6 +49,9 @@ var FieldValidator = /** @class */ (function () {
         if (!elem && !this.ignoreError) {
             this.createTooltip(inputElement, error, id, '');
         }
+        if (!isNullOrUndefined(elem)) {
+            elem.querySelector(".e-error").innerHTML = error.innerHTML;
+        }
     };
     FieldValidator.prototype.createTooltip = function (element, error, name, display) {
         var dlgContent;

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

@@ -14,6 +14,7 @@ export declare class QuickPopups {
     private fieldValidator;
     private isCrudAction;
     lastEvent: Record<string, any>;
+    private dialogEvent;
     constructor(parent: Schedule);
     private render;
     private renderQuickPopup;
@@ -43,7 +44,7 @@ export declare class QuickPopups {
     private saveClick;
     private detailsClick;
     private editClick;
-    deleteClick(): void;
+    deleteClick(event: Event): void;
     private updateMoreEventContent;
     private closeClick;
     private dialogButtonClick;
@@ -63,7 +64,7 @@ export declare class QuickPopups {
     quickPopupHide(hideAnimation?: boolean): void;
     private navigationClick;
     private documentClick;
-    onClosePopup(): void;
+    onClosePopup(event?: Event): void;
     private addEventListener;
     private removeEventListener;
     private destroyPopupButtons;

package/src/schedule/popups/quick-popups.js

@@ -138,6 +138,7 @@ var QuickPopups = /** @class */ (function () {
         });
         buttonObj.appendTo(element);
         EventHandler.add(element, 'click', clickEvent, this);
+        removeClass([element], cls.ICON);
     };
     QuickPopups.prototype.quickDialogClass = function (action) {
         var classList = [
@@ -382,10 +383,16 @@ var QuickPopups = /** @class */ (function () {
         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 readonly = this.parent.activeViewOptions.readonly || eventObj[this.parent.eventFields.isReadonly];
+        var editAction = !this.parent.eventSettings.allowEditing || readonly;
+        var deleteAction = !this.parent.eventSettings.allowDeleting || readonly;
         var editIcon = this.quickPopup.element.querySelector('.' + cls.EDIT_CLASS);
-        this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.EDIT_ICON_CLASS, readonly, editIcon, this.editClick);
+        if (editIcon) {
+            this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.EDIT_ICON_CLASS, editAction, 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, readonly, deleteIcon, this.deleteClick);
+        if (deleteIcon) {
+            this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.DELETE_ICON_CLASS, deleteAction, deleteIcon, this.deleteClick);
+        }
         this.beforeQuickPopupOpen(target);
     };
     QuickPopups.prototype.isCellBlocked = function (args) {
@@ -836,21 +843,24 @@ var QuickPopups = /** @class */ (function () {
             }
         });
     };
-    QuickPopups.prototype.saveClick = function () {
+    QuickPopups.prototype.saveClick = function (event) {
+        this.dialogEvent = event;
         this.isCrudAction = true;
         this.quickPopupHide();
     };
-    QuickPopups.prototype.detailsClick = function () {
+    QuickPopups.prototype.detailsClick = function (event) {
         var subjectEle = this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS);
         if (subjectEle && subjectEle.value !== '') {
             extend(this.parent.activeCellsData, { subject: subjectEle.value });
         }
+        this.dialogEvent = event;
         this.isCrudAction = false;
         this.fieldValidator.destroyToolTip();
         this.quickPopupHide();
         this.parent.eventWindow.openEditor(this.parent.activeCellsData, 'Add');
     };
-    QuickPopups.prototype.editClick = function () {
+    QuickPopups.prototype.editClick = function (event) {
+        this.dialogEvent = event;
         this.quickPopupHide(true);
         var data = this.parent.activeEventData.event;
         this.parent.currentAction = 'EditSeries';
@@ -862,7 +872,8 @@ var QuickPopups = /** @class */ (function () {
             this.parent.eventWindow.openEditor(data, this.parent.currentAction);
         }
     };
-    QuickPopups.prototype.deleteClick = function () {
+    QuickPopups.prototype.deleteClick = function (event) {
+        this.dialogEvent = event;
         this.quickPopupHide(true);
         this.parent.currentAction = 'Delete';
         if (this.parent.activeEventData.event[this.parent.eventFields.recurrenceRule]) {
@@ -894,11 +905,13 @@ var QuickPopups = /** @class */ (function () {
         var moreElement = this.createMoreEventList(events, groupOrder, groupIndex);
         this.morePopup.element.querySelector('.' + cls.MORE_EVENT_POPUP_CLASS).appendChild(moreElement);
     };
-    QuickPopups.prototype.closeClick = function () {
+    QuickPopups.prototype.closeClick = function (event) {
+        this.dialogEvent = event;
         this.quickPopupHide();
         this.morePopup.hide();
     };
     QuickPopups.prototype.dialogButtonClick = function (event) {
+        this.dialogEvent = event;
         this.quickDialog.hide();
         var target = event.target;
         var cancelBtn = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_CANCEL);
@@ -942,7 +955,7 @@ var QuickPopups = /** @class */ (function () {
         else if (!cancelBtn.classList.contains(cls.DISABLE_CLASS) && (target.classList.contains(cls.QUICK_DIALOG_ALERT_OK) ||
             (target.classList.contains(cls.QUICK_DIALOG_ALERT_CANCEL) && !cancelBtn.classList.contains(cls.QUICK_DIALOG_CANCEL_CLASS)))) {
             this.parent.uiStateValues.isIgnoreOccurrence = target.classList.contains(cls.QUICK_DIALOG_ALERT_CANCEL);
-            this.parent.eventWindow.eventSave(this.l10n.getConstant('ok'));
+            this.parent.eventWindow.eventSave(event, this.l10n.getConstant('ok'));
         }
     };
     QuickPopups.prototype.updateTapHoldEventPopup = function (target) {
@@ -999,9 +1012,10 @@ var QuickPopups = /** @class */ (function () {
         this.parent.eventWindow.convertToEventData(cellsData, eventObj);
         return eventObj;
     };
-    QuickPopups.prototype.beforeQuickDialogClose = function () {
+    QuickPopups.prototype.beforeQuickDialogClose = function (e) {
         var _this = this;
         var args = {
+            event: e.event || this.dialogEvent,
             type: (isNullOrUndefined(this.parent.activeEventData.event)) ? 'ValidationAlert' :
                 !isNullOrUndefined(this.parent.activeEventData.event[this.parent.eventFields.recurrenceRule])
                     ? 'RecurrenceAlert' : 'DeleteAlert', cancel: false, data: this.parent.activeEventData.event,
@@ -1043,7 +1057,7 @@ var QuickPopups = /** @class */ (function () {
                 else {
                     _this.quickPopup.offsetX = 10;
                     _this.quickPopup.collision = { X: _this.parent.enableRtl ? 'flip' : 'none', Y: 'fit' };
-                    _this.quickPopup.position = { X: _this.parent.enableRtl ? 'left' : 'right', Y: 'top' };
+                    _this.quickPopup.position = { X: _this.parent.enableRtl ? 'left' : 'right', Y: _this.parent.enableRtl ? 'bottom' : 'top' };
                     _this.quickPopup.dataBind();
                     _this.quickPopup.refreshPosition(null, true);
                     var collide = isCollide(_this.quickPopup.element, _this.parent.element);
@@ -1147,7 +1161,8 @@ var QuickPopups = /** @class */ (function () {
             remove(moreWrapper);
         }
     };
-    QuickPopups.prototype.popupClose = function () {
+    QuickPopups.prototype.popupClose = function (event) {
+        this.dialogEvent = event;
         this.isCrudAction = false;
         this.quickPopupHide(true);
     };
@@ -1181,6 +1196,7 @@ var QuickPopups = /** @class */ (function () {
         }
         var isEventPopup = this.quickPopup.element.querySelector('.' + cls.EVENT_POPUP_CLASS);
         var args = {
+            event: this.dialogEvent,
             type: this.parent.isAdaptive ? isEventPopup ? 'ViewEventInfo' : 'EditEventInfo' : 'QuickInfo',
             cancel: false, data: popupData, element: this.quickPopup.element,
             target: (isCellPopup ? this.parent.activeCellsData.element : this.parent.activeEventData.element)
@@ -1212,7 +1228,7 @@ var QuickPopups = /** @class */ (function () {
         if (!isNullOrUndefined(navigateEle)) {
             var date = this.parent.getDateFromElement(e.currentTarget);
             if (!isNullOrUndefined(date)) {
-                this.closeClick();
+                this.closeClick(e);
                 this.parent.setProperties({ selectedDate: date }, true);
                 this.parent.changeView(this.parent.getNavigateView(), e);
             }
@@ -1240,7 +1256,10 @@ var QuickPopups = /** @class */ (function () {
             this.morePopup.hide();
         }
     };
-    QuickPopups.prototype.onClosePopup = function () {
+    QuickPopups.prototype.onClosePopup = function (event) {
+        if (!isNullOrUndefined(event)) {
+            this.dialogEvent = event;
+        }
         this.quickPopupHide();
         this.parent.eventBase.focusElement();
     };

package/src/schedule/renderer/agenda.d.ts

@@ -17,6 +17,7 @@ export declare class Agenda extends AgendaBase implements IRenderer {
     renderLayout(): void;
     private eventLoad;
     private refreshEvent;
+    refreshHeader(): void;
     private renderInitialContent;
     renderContent(tBody: Element, agendaDate: Date, lastDate: Date): void;
     private agendaScrolling;

package/src/schedule/renderer/agenda.js

@@ -12,7 +12,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { formatUnit, isNullOrUndefined, closest, extend, append, prepend } from '@syncfusion/ej2-base';
+import { formatUnit, isNullOrUndefined, closest, extend, append, prepend, remove } from '@syncfusion/ej2-base';
 import { createElement, addClass, EventHandler } from '@syncfusion/ej2-base';
 import { AgendaBase } from '../event-renderer/agenda-base';
 import * as util from '../base/util';
@@ -67,7 +67,7 @@ var Agenda = /** @class */ (function (_super) {
             var event_1 = _a[_i];
             delete event_1.generatedDates;
         }
-        var eventCollection = args.processedData;
+        var eventCollection = this.parent.activeViewOptions.allowVirtualScrolling ? args.processedData : this.parent.eventsProcessed;
         if (this.parent.uiStateValues.isGroupAdaptive) {
             var resource = this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex];
             this.dataSource = this.parent.eventBase.filterEventsByResource(resource, this.dataSource);
@@ -98,6 +98,22 @@ var Agenda = /** @class */ (function (_super) {
         }
         this.parent.eventsProcessed = this.parent.eventsProcessed.concat(this.processAgendaEvents(processedData));
     };
+    Agenda.prototype.refreshHeader = function () {
+        var tBody = this.element.querySelector('.' + cls.CONTENT_TABLE_CLASS + ' tbody');
+        if (this.parent.activeViewOptions.group.byDate) {
+            util.removeChildren(tBody);
+        }
+        else {
+            remove(tBody.firstElementChild);
+        }
+        var agendaDate = util.resetTime(this.parent.selectedDate);
+        var emptyTBody = createElement('tbody');
+        var firstDate = new Date(agendaDate.getTime());
+        var lastDate = (this.parent.activeViewOptions.allowVirtualScrolling && this.parent.hideEmptyAgendaDays) ?
+            this.getEndDateFromStartDate(firstDate) : util.addDays(firstDate, this.parent.agendaDaysCount);
+        this.renderContent(emptyTBody, firstDate, lastDate);
+        append([].slice.call(emptyTBody.childNodes), tBody);
+    };
     Agenda.prototype.renderInitialContent = function (tBody, agendaDate) {
         var emptyTBody = createElement('tbody');
         var firstDate = new Date(agendaDate.getTime());
@@ -155,6 +171,7 @@ var Agenda = /** @class */ (function (_super) {
                     var filterData = this.appointmentFiltering(agendaDate);
                     var nTr = this.createTableRowElement(agendaDate, 'data');
                     if (this.element.querySelector('tr[aria-rowindex="' + parseInt(nTr.getAttribute('aria-rowindex'), 10) + '"]')) {
+                        agendaDate = util.addDays(agendaDate, 1);
                         continue;
                     }
                     var dTd = nTr.children[0];
@@ -227,7 +244,7 @@ var Agenda = /** @class */ (function (_super) {
                 this.updateHeaderText(scrollDate);
             }
         }
-        else if (totalHeight === scrollHeight) {
+        else if (totalHeight >= (scrollHeight - 5)) {
             filterDate = this.getPreviousNextDate(util.addDays(scrollDate, 1), direction);
             filterData = this.appointmentFiltering(filterDate.start, filterDate.end);
             if (filterData.length > 0 || !this.parent.hideEmptyAgendaDays) {

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

@@ -26,6 +26,7 @@ export declare class HeaderRenderer {
     setCalendarView(): void;
     updateActiveView(): void;
     updateDateRange(text: string): void;
+    refresh(): void;
     updateAddIcon(): void;
     private getDateRangeText;
     private getItems;

package/src/schedule/renderer/header-renderer.js

@@ -153,6 +153,11 @@ var HeaderRenderer = /** @class */ (function () {
         if (selEle) {
             selEle.setAttribute('aria-label', text);
             selEle.querySelector('.e-tbar-btn-text').innerHTML = text;
+            this.refresh();
+        }
+    };
+    HeaderRenderer.prototype.refresh = function () {
+        if (this.toolbarObj) {
             this.toolbarObj.refreshOverflow();
         }
     };
@@ -408,7 +413,7 @@ var HeaderRenderer = /** @class */ (function () {
                 this.parent.changeView('TimelineYear', args.originalEvent, undefined, this.calculateViewIndex(args));
                 break;
             case 'e-today':
-                if (!this.parent.isSelectedDate(util.resetTime(this.parent.getCurrentTime()))) {
+                if (this.parent.currentView === 'Agenda' || !this.parent.isSelectedDate(util.resetTime(this.parent.getCurrentTime()))) {
                     this.parent.changeDate(util.resetTime(this.parent.getCurrentTime()), args.originalEvent);
                 }
                 break;

package/src/schedule/renderer/month.d.ts

@@ -24,6 +24,7 @@ export declare class Month extends ViewBase implements IRenderer {
     getDateSlots(renderDates: Date[], workDays: number[]): TdData[];
     getDayNameFormat(): string;
     renderLayout(type: string): void;
+    refreshHeader(): void;
     private wireCellEvents;
     renderHeader(): void;
     renderLeftIndent(tr: Element): void;