@syncfusion/ej2-schedule 22.2.11 → 23.1.36

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,135 +768,115 @@ 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.
      *
-     * {% codeBlock src='schedule/eventRendered/index.md' %}{% endcodeBlock %}
-     *
      * @event 'eventRendered'
      */
     eventRendered: EmitType<EventRenderedArgs>;
     /**
      * 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 +922,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 +1212,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);
@@ -2955,6 +3014,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/base/util.d.ts

@@ -176,6 +176,7 @@ export declare function getScrollBarWidth(): number;
  * Method to reset scrollbar width
  *
  * @private
+ * @returns {void}
  */
 export declare function resetScrollbarWidth(): void;
 /**

package/src/schedule/base/util.js

@@ -300,6 +300,7 @@ export function getScrollBarWidth() {
  * Method to reset scrollbar width
  *
  * @private
+ * @returns {void}
  */
 export function resetScrollbarWidth() {
     var zoomPixelRatio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;

package/src/schedule/event-renderer/event-base.d.ts

@@ -58,7 +58,7 @@ export declare class EventBase {
     getEventIDType(): string;
     getEventMaxID(resourceId?: number): number | string;
     private activeEventData;
-    generateOccurrence(event: Record<string, any>, viewDate?: Date, oldTimezone?: string, isMaxCount?: boolean): Record<string, any>[];
+    generateOccurrence(event: Record<string, any>, viewDate?: Date, isMaxCount?: boolean): Record<string, any>[];
     private getDSTAdjustedTime;
     private getDSTDiff;
     getParentEvent(eventObj: Record<string, any>, isParent?: boolean): Record<string, any>;

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

@@ -54,12 +54,12 @@ var EventBase = /** @class */ (function () {
             }
             if (!isNullOrUndefined(event_1[fields.recurrenceRule]) && isNullOrUndefined(event_1[fields.recurrenceID]) &&
                 !(this_1.parent.crudModule && this_1.parent.crudModule.crudObj.isCrudAction)) {
-                processed = processed.concat(this_1.generateOccurrence(event_1, null, oldTimezone, true));
+                processed = processed.concat(this_1.generateOccurrence(event_1, null, true));
             }
             else {
                 if (this_1.parent.crudModule && this_1.parent.crudModule.crudObj.isCrudAction) {
                     if (!isNullOrUndefined(event_1[fields.recurrenceRule]) && isNullOrUndefined(event_1[fields.recurrenceID])) {
-                        var recurrenceEvent = this_1.generateOccurrence(event_1, null, oldTimezone, true);
+                        var recurrenceEvent = this_1.generateOccurrence(event_1, null, true);
                         var _loop_2 = function (occurrence) {
                             var app = this_1.parent.eventsProcessed.filter(function (data) {
                                 return data[fields.startTime].getTime() - occurrence[fields.startTime].getTime() === 0 &&
@@ -879,7 +879,7 @@ var EventBase = /** @class */ (function () {
         }
         this.parent.activeEventData = { event: eventObject, element: target };
     };
-    EventBase.prototype.generateOccurrence = function (event, viewDate, oldTimezone, isMaxCount) {
+    EventBase.prototype.generateOccurrence = function (event, viewDate, isMaxCount) {
         var startDate = event[this.parent.eventFields.startTime];
         var endDate = event[this.parent.eventFields.endTime];
         var eventRule = event[this.parent.eventFields.recurrenceRule];
@@ -894,7 +894,7 @@ var EventBase = /** @class */ (function () {
         var newTimezone = this.parent.timezone || this.parent.tzModule.getLocalTimezoneName();
         var firstDay = this.parent.activeViewOptions.firstDayOfWeek;
         var calendarMode = this.parent.calendarMode;
-        var dates = generate(startDate, eventRule, exception, firstDay, maxCount, viewDate, calendarMode, oldTimezone, newTimezone);
+        var dates = generate(startDate, eventRule, exception, firstDay, maxCount, viewDate, calendarMode, newTimezone);
         if (this.parent.currentView === 'Agenda' && eventRule.indexOf('COUNT') === -1 && eventRule.indexOf('UNTIL') === -1) {
             if (isNullOrUndefined(event.generatedDates)) {
                 event.generatedDates = { start: new Date(dates[0]), end: new Date(dates[dates.length - 1]) };

package/src/schedule/exports/calendar-import.d.ts

@@ -8,9 +8,10 @@ export declare class ICalendarImport {
     constructor(parent: Schedule);
     initializeCalendarImport(fileContent: Blob | string): void;
     private iCalendarParser;
+    private updateEventData;
     private processOccurrence;
     private getExcludeDateString;
-    private getDateString;
+    private getFormattedString;
     private dateParsing;
     protected getModuleName(): string;
     destroy(): void;