@syncfusion/ej2-schedule 22.2.12 → 23.1.38

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

@@ -38,7 +38,7 @@ import { Print } from '../exports/print';
 import { IRenderer, ActionEventArgs, NavigatingEventArgs, CellClickEventArgs, RenderCellEventArgs, ScrollCss, TimezoneFields } from '../base/interface';
 import { EventClickArgs, EventRenderedArgs, PopupOpenEventArgs, UIStateArgs, DragEventArgs, ResizeEventArgs } from '../base/interface';
 import { EventFieldsMapping, TdData, ResourceDetails, ResizeEdges, ExportOptions, SelectEventArgs } from '../base/interface';
-import { ViewsData, PopupCloseEventArgs, HoverEventArgs, MoreEventsClickArgs, CallbackFunction } from '../base/interface';
+import { ViewsData, PopupCloseEventArgs, HoverEventArgs, MoreEventsClickArgs, ScrollEventArgs, CallbackFunction } from '../base/interface';
 import { CalendarUtil, CalendarType } from '../../common/calendar-util';
 import { ResourceBase } from '../base/resource';
 import { Timezone } from '../timezone/timezone';
@@ -93,6 +93,8 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
     private eventTooltipTemplateFn;
     private headerTooltipTemplateFn;
     private editorTemplateFn;
+    private editorHeaderTemplateFn;
+    private editorFooterTemplateFn;
     private quickInfoTemplatesHeaderFn;
     private quickInfoTemplatesContentFn;
     private quickInfoTemplatesFooterFn;
@@ -561,6 +563,28 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @aspType string
      */
     editorTemplate: string | Function;
+    /**
+     * The template option to render the customized header of the editor window.
+     *
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    editorHeaderTemplate: string | Function;
+    /**
+     * The template option to render the customized footer of the editor window.
+     *
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    editorFooterTemplate: string | Function;
     /**
      * The template option to customize the quick window. The three sections of the quick popup whereas the header, content,
      * and footer can be easily customized with individual template option.
@@ -744,55 +768,47 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
     /**
      * Triggers on beginning of every scheduler action.
      *
-     * {% codeBlock src='schedule/actionBegin/index.md' %}{% endcodeBlock %}
-     *
      * @event 'actionBegin'
      */
     actionBegin: EmitType<ActionEventArgs>;
     /**
      * Triggers on successful completion of the scheduler actions.
      *
-     * {% codeBlock src='schedule/actionComplete/index.md' %}{% endcodeBlock %}
-     *
      * @event 'actionComplete'
      */
     actionComplete: EmitType<ActionEventArgs>;
     /**
      * Triggers when a scheduler action gets failed or interrupted and an error information will be returned.
      *
-     * {% codeBlock src='schedule/actionFailure/index.md' %}{% endcodeBlock %}
-     *
      * @event 'actionFailure'
      */
     actionFailure: EmitType<ActionEventArgs>;
     /**
      * Triggers before the date or view navigation takes place on scheduler.
      *
-     * {% codeBlock src='schedule/navigating/index.md' %}{% endcodeBlock %}
-     *
      * @event 'navigating'
      */
     navigating: EmitType<NavigatingEventArgs>;
     /**
      * Triggers before each element of the schedule rendering on the page.
      *
-     * {% codeBlock src='schedule/renderCell/index.md' %}{% endcodeBlock %}
-     *
      * @event 'renderCell'
      */
     renderCell: EmitType<RenderCellEventArgs>;
     /**
      * Triggers when the events are single clicked or on single tapping the events on the mobile devices.
      *
-     * {% codeBlock src='schedule/eventClick/index.md' %}{% endcodeBlock %}
-     *
      * @event 'eventClick'
      */
     eventClick: EmitType<EventClickArgs>;
     /**
-     * Triggers before each of the event getting rendered on the scheduler user interface.
+     * Triggers when the events are double clicked or on double tapping the events on the desktop devices.
      *
-     * {% codeBlock src='schedule/eventRendered/index.md' %}{% endcodeBlock %}
+     * @event 'eventDoubleClick'
+     */
+    eventDoubleClick: EmitType<EventClickArgs>;
+    /**
+     * Triggers before each of the event getting rendered on the scheduler user interface.
      *
      * @event 'eventRendered'
      */
@@ -800,79 +816,73 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
     /**
      * Triggers before the data binds to the scheduler.
      *
-     * {% codeBlock src='schedule/dataBinding/index.md' %}{% endcodeBlock %}
-     *
      * @event 'dataBinding'
      */
     dataBinding: EmitType<ReturnType>;
     /**
      * Triggers before any of the scheduler popups opens on the page.
      *
-     * {% codeBlock src='schedule/popupOpen/index.md' %}{% endcodeBlock %}
-     *
      * @event 'popupOpen'
      */
     popupOpen: EmitType<PopupOpenEventArgs>;
     /**
      * Triggers before any of the scheduler popups close on the page.
      *
-     * {% codeBlock src='schedule/popupClose/index.md' %}{% endcodeBlock %}
-     *
      * @event 'popupClose'
      */
     popupClose: EmitType<PopupCloseEventArgs>;
     /**
      * Triggers when an appointment is started to drag.
      *
-     * {% codeBlock src='schedule/dragStart/index.md' %}{% endcodeBlock %}
-     *
      * @event 'dragStart'
      */
     dragStart: EmitType<DragEventArgs>;
     /**
      * Triggers when an appointment is being in a dragged state.
      *
-     * {% codeBlock src='schedule/drag/index.md' %}{% endcodeBlock %}
-     *
      * @event 'drag'
      */
     drag: EmitType<DragEventArgs>;
     /**
      * Triggers when the dragging of appointment is stopped.
      *
-     * {% codeBlock src='schedule/dragStop/index.md' %}{% endcodeBlock %}
-     *
      * @event 'dragStop'
      */
     dragStop: EmitType<DragEventArgs>;
     /**
      * Triggers when an appointment is started to resize.
      *
-     * {% codeBlock src='schedule/resizeStart/index.md' %}{% endcodeBlock %}
-     *
      * @event 'resizeStart'
      */
     resizeStart: EmitType<ResizeEventArgs>;
     /**
      * Triggers when an appointment is being in a resizing action.
      *
-     * {% codeBlock src='schedule/resizing/index.md' %}{% endcodeBlock %}
-     *
      * @event 'resizing'
      */
     resizing: EmitType<ResizeEventArgs>;
     /**
      * Triggers when the resizing of appointment is stopped.
      *
-     * {% codeBlock src='schedule/resizeStop/index.md' %}{% endcodeBlock %}
-     *
      * @event 'resizeStop'
      */
     resizeStop: EmitType<ResizeEventArgs>;
     /**
-     * Triggers once the event data is bound to the scheduler.
+     * Triggers when the scroll action is started.
+     * This event triggers only when `allowVirtualScrolling` or `enableLazyLoading` properties are enabled along with resource grouping.
      *
-     * {% codeBlock src='schedule/dataBound/index.md' %}{% endcodeBlock %}
+     * @event 'virtualScrollStart'
+     */
+    virtualScrollStart: EmitType<ScrollEventArgs>;
+    /**
+     * Triggers when the scroll action is stopped.
+     * This event triggers only when `allowVirtualScrolling` or `enableLazyLoading` properties are enabled along with resource grouping.
+     *
+     * @event 'virtualScrollStop'
+     */
+    virtualScrollStop: EmitType<ScrollEventArgs>;
+    /**
+     * Triggers once the event data is bound to the scheduler.
      *
      * @event 'dataBound'
      */
@@ -918,6 +928,7 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      */
     sanitize(value: string, element: HTMLElement): void;
     private initializeResources;
+    private destroyEditorWindow;
     /**
      * Method to render the layout elements
      *
@@ -1207,6 +1218,20 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @private
      */
     getEditorTemplate(): CallbackFunction;
+    /**
+     * Method to process editor header template
+     *
+     * @returns {CallbackFunction} Returns the callback function
+     * @private
+     */
+    getEditorHeaderTemplate(): CallbackFunction;
+    /**
+     * Method to process editor footer template
+     *
+     * @returns {CallbackFunction} Returns the callback function
+     * @private
+     */
+    getEditorFooterTemplate(): CallbackFunction;
     /**
      * Method to process quick info header template
      *

package/src/schedule/base/schedule.js

@@ -187,6 +187,13 @@ var Schedule = /** @class */ (function (_super) {
             this.renderElements(isSetModel);
         }
     };
+    Schedule.prototype.destroyEditorWindow = function () {
+        if (this.eventWindow) {
+            this.eventWindow.destroy();
+            this.eventWindow = null;
+        }
+        this.eventWindow = new EventWindow(this);
+    };
     /**
      * Method to render the layout elements
      *
@@ -356,7 +363,8 @@ var Schedule = /** @class */ (function (_super) {
             headerRows: this.headerRows,
             orientation: 'Horizontal',
             numberOfWeeks: 0,
-            displayDate: null
+            displayDate: null,
+            enableLazyLoading: false
         };
         var viewOptions = this.viewCollections[this.viewIndex];
         var viewsData = extend(scheduleOptions, viewOptions, undefined, true);
@@ -367,6 +375,11 @@ var Schedule = /** @class */ (function (_super) {
             viewsData.displayDate = viewsData.displayDate instanceof Date ? new Date(viewsData.displayDate.getTime()) :
                 new Date(viewsData.displayDate);
         }
+        if (viewsData.enableLazyLoading && !isNullOrUndefined(viewsData.group.resources) && viewsData.group.resources.length > 0 &&
+            (['Agenda', 'MonthAgenda', 'Year', 'TimelineYear'].indexOf(viewsData.option) === -1 ||
+                (viewsData.option === 'TimelineYear' && viewsData.orientation === 'Vertical'))) {
+            viewsData.allowVirtualScrolling = true;
+        }
         return viewsData;
     };
     Schedule.prototype.initializeDataModule = function () {
@@ -428,6 +441,8 @@ var Schedule = /** @class */ (function (_super) {
         this.headerTooltipTemplateFn = this.templateParser(this.activeViewOptions.group.headerTooltipTemplate);
         this.eventTooltipTemplateFn = this.templateParser(this.eventSettings.tooltipTemplate);
         this.editorTemplateFn = this.templateParser(this.editorTemplate);
+        this.editorHeaderTemplateFn = this.templateParser(this.editorHeaderTemplate);
+        this.editorFooterTemplateFn = this.templateParser(this.editorFooterTemplate);
         this.quickInfoTemplatesHeaderFn = this.templateParser(this.quickInfoTemplates.header);
         this.quickInfoTemplatesContentFn = this.templateParser(this.quickInfoTemplates.content);
         this.quickInfoTemplatesFooterFn = this.templateParser(this.quickInfoTemplates.footer);
@@ -1069,6 +1084,24 @@ var Schedule = /** @class */ (function (_super) {
     Schedule.prototype.getEditorTemplate = function () {
         return this.editorTemplateFn;
     };
+    /**
+     * Method to process editor header template
+     *
+     * @returns {CallbackFunction} Returns the callback function
+     * @private
+     */
+    Schedule.prototype.getEditorHeaderTemplate = function () {
+        return this.editorHeaderTemplateFn;
+    };
+    /**
+     * Method to process editor footer template
+     *
+     * @returns {CallbackFunction} Returns the callback function
+     * @private
+     */
+    Schedule.prototype.getEditorFooterTemplate = function () {
+        return this.editorFooterTemplateFn;
+    };
     /**
      * Method to process quick info header template
      *
@@ -1586,6 +1619,22 @@ var Schedule = /** @class */ (function (_super) {
                     this.eventWindow.setDialogContent();
                 }
                 break;
+            case 'editorHeaderTemplate':
+                if (!isNullOrUndefined(this.editorHeaderTemplate)) {
+                    this.editorHeaderTemplateFn = this.templateParser(this.editorHeaderTemplate);
+                }
+                if (this.eventWindow) {
+                    this.eventWindow.setDialogHeader();
+                }
+                break;
+            case 'editorFooterTemplate':
+                if (!isNullOrUndefined(this.editorFooterTemplate)) {
+                    this.editorFooterTemplateFn = this.templateParser(this.editorFooterTemplate);
+                }
+                if (this.eventWindow) {
+                    this.eventWindow.setDialogFooter();
+                }
+                break;
             case 'quickInfoTemplates':
                 if (this.quickInfoTemplates.header) {
                     this.quickInfoTemplatesHeaderFn = this.templateParser(this.quickInfoTemplates.header);
@@ -2356,13 +2405,17 @@ var Schedule = /** @class */ (function (_super) {
                 this.quickInfoTemplatesFooterFn = this.templateParser(this.quickInfoTemplates.footer);
                 break;
             case 'editorTemplate':
-                if (this.eventWindow) {
-                    this.eventWindow.destroy();
-                    this.eventWindow = null;
-                }
-                this.eventWindow = new EventWindow(this);
+                this.destroyEditorWindow();
                 this.editorTemplateFn = this.templateParser(this.editorTemplate);
                 break;
+            case 'editorHeaderTemplate':
+                this.destroyEditorWindow();
+                this.editorHeaderTemplateFn = this.templateParser(this.editorHeaderTemplate);
+                break;
+            case 'editorFooterTemplate':
+                this.destroyEditorWindow();
+                this.editorFooterTemplateFn = this.templateParser(this.editorFooterTemplate);
+                break;
             case 'tooltipTemplate':
             case 'headerTooltipTemplate':
                 if (this.eventTooltip) {
@@ -2844,6 +2897,12 @@ var Schedule = /** @class */ (function (_super) {
     __decorate([
         Property()
     ], Schedule.prototype, "editorTemplate", void 0);
+    __decorate([
+        Property()
+    ], Schedule.prototype, "editorHeaderTemplate", void 0);
+    __decorate([
+        Property()
+    ], Schedule.prototype, "editorFooterTemplate", void 0);
     __decorate([
         Complex({}, QuickInfoTemplates)
     ], Schedule.prototype, "quickInfoTemplates", void 0);
@@ -2925,6 +2984,9 @@ var Schedule = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], Schedule.prototype, "eventClick", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "eventDoubleClick", void 0);
     __decorate([
         Event()
     ], Schedule.prototype, "eventRendered", void 0);
@@ -2955,6 +3017,12 @@ var Schedule = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], Schedule.prototype, "resizeStop", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "virtualScrollStart", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "virtualScrollStop", void 0);
     __decorate([
         Event()
     ], Schedule.prototype, "dataBound", void 0);

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

@@ -797,12 +797,13 @@ var EventBase = /** @class */ (function () {
             });
         }
     };
-    EventBase.prototype.eventDoubleClick = function (e) {
+    EventBase.prototype.eventDoubleClick = function (eventData) {
+        var _this = this;
         if (this.parent.quickPopup) {
             this.parent.quickPopup.quickPopupHide(true);
         }
-        if (e.type === 'touchstart') {
-            this.activeEventData(e, true);
+        if (eventData.type === 'touchstart') {
+            this.activeEventData(eventData, true);
         }
         this.removeSelectedAppointmentClass();
         this.parent.selectedElements = [];
@@ -810,14 +811,19 @@ var EventBase = /** @class */ (function () {
             this.parent.activeEventData.element.querySelector('.' + cls.INLINE_SUBJECT_CLASS)) {
             return;
         }
-        if (!isNullOrUndefined(this.parent.activeEventData.event) &&
-            isNullOrUndefined(this.parent.activeEventData.event[this.parent.eventFields.recurrenceID])) {
-            this.parent.eventWindow.openEditor(this.parent.activeEventData.event, 'Save');
-        }
-        else {
-            this.parent.currentAction = 'EditOccurrence';
-            this.parent.quickPopup.openRecurrenceAlert();
-        }
+        var args = extend(this.parent.activeEventData, { cancel: false, originalEvent: eventData });
+        this.parent.trigger(event.eventDoubleClick, args, function (eventDoubleClickArgs) {
+            if (!eventDoubleClickArgs.cancel) {
+                if (!isNullOrUndefined(_this.parent.activeEventData.event) &&
+                    isNullOrUndefined(_this.parent.activeEventData.event[_this.parent.eventFields.recurrenceID])) {
+                    _this.parent.eventWindow.openEditor(_this.parent.activeEventData.event, 'Save');
+                }
+                else {
+                    _this.parent.currentAction = 'EditOccurrence';
+                    _this.parent.quickPopup.openRecurrenceAlert();
+                }
+            }
+        });
     };
     EventBase.prototype.getEventByGuid = function (guid) {
         return this.parent.eventsProcessed.filter(function (data) { return data.Guid === guid; })[0];

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

@@ -68,7 +68,7 @@ export interface ViewsModel {
     endHour?: string;
 
     /**
-     * It is used to allow or disallow the virtual scrolling functionality on Agenda View. This is applicable only on Agenda view.
+     * It is used to allow or disallow the virtual scrolling functionality.
      *
      * @default false
      */
@@ -317,4 +317,13 @@ export interface ViewsModel {
      */
     displayDate?: Date;
 
+    /**
+     * Enables the lazy loading of events for scrolling actions only when the resources grouping property is enabled.
+     * Lazy loading allows the scheduler to fetch the appointments dynamically during scroll actions for the currently rendered resource collection.
+     * New event data is fetched on-demand as the user scrolls through the schedule content.
+     *
+     * @default false
+     */
+    enableLazyLoading?: boolean;
+
 }

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

@@ -62,7 +62,7 @@ export declare class Views extends ChildProperty<Views> {
      */
     endHour: string;
     /**
-     * It is used to allow or disallow the virtual scrolling functionality on Agenda View. This is applicable only on Agenda view.
+     * It is used to allow or disallow the virtual scrolling functionality.
      *
      * @default false
      */
@@ -286,4 +286,12 @@ export declare class Views extends ChildProperty<Views> {
      * @default null
      */
     displayDate: Date;
+    /**
+     * Enables the lazy loading of events for scrolling actions only when the resources grouping property is enabled.
+     * Lazy loading allows the scheduler to fetch the appointments dynamically during scroll actions for the currently rendered resource collection.
+     * New event data is fetched on-demand as the user scrolls through the schedule content.
+     *
+     * @default false
+     */
+    enableLazyLoading: boolean;
 }

package/src/schedule/models/views.js

@@ -122,6 +122,9 @@ var Views = /** @class */ (function (_super) {
     __decorate([
         Property()
     ], Views.prototype, "displayDate", void 0);
+    __decorate([
+        Property(false)
+    ], Views.prototype, "enableLazyLoading", void 0);
     return Views;
 }(ChildProperty));
 export { Views };

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { isNullOrUndefined, append, createElement, addClass, initializeCSPTemplate } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, append, createElement, addClass, initializeCSPTemplate, removeClass } from '@syncfusion/ej2-base';
 import { Tooltip } from '@syncfusion/ej2-popups';
 import * as cls from '../base/css-constant';
 import * as util from '../base/util';
@@ -19,7 +19,7 @@ var EventTooltip = /** @class */ (function () {
             cssClass: this.parent.cssClass + ' ' + cls.EVENT_TOOLTIP_ROOT_CLASS,
             target: this.getTargets(),
             beforeRender: this.onBeforeRender.bind(this),
-            afterClose: this.onTooltipClose.bind(this),
+            beforeClose: this.onTooltipClose.bind(this),
             enableRtl: this.parent.enableRtl,
             enableHtmlSanitizer: this.parent.enableHtmlSanitizer
         });
@@ -127,7 +127,11 @@ var EventTooltip = /** @class */ (function () {
         }
         this.parent.renderTemplates();
     };
-    EventTooltip.prototype.onTooltipClose = function () {
+    EventTooltip.prototype.onTooltipClose = function (args) {
+        if (args.element) {
+            removeClass([args.element], cls.POPUP_OPEN);
+            addClass([args.element], cls.POPUP_CLOSE);
+        }
         this.parent.resetTemplates(['tooltipTemplate', 'headerTooltipTemplate']);
     };
     EventTooltip.prototype.setContent = function (content) {

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

@@ -29,11 +29,18 @@ export declare class EventWindow {
     private dialogEvent;
     constructor(parent: Schedule);
     private renderEventWindow;
+    private renderDialogButtons;
+    private addEventHandlers;
     refresh(): void;
     refreshRecurrenceEditor(): void;
     setRecurrenceEditor(recurrenceEditor: RecurrenceEditor): void;
     openEditor(data: Record<string, any>, type: CurrentAction, isEventData?: boolean, repeatType?: number): void;
     setDialogContent(): void;
+    setDialogHeader(): void;
+    setDialogFooter(): void;
+    private createAdaptiveHeaderElement;
+    private getDialogHeader;
+    private getDialogFooter;
     private preventEventSave;
     private onBeforeOpen;
     private onBeforeClose;