@syncfusion/ej2-schedule 27.2.5 → 28.1.35

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

@@ -74,6 +74,8 @@ const agendaCells = 'agendaCells';
 const resourceHeader = 'resourceHeader';
 /** @private */
 const dateHeader = 'dateHeader';
+/** @private */
+const beforePaste = 'beforePaste';
 /**
  * Specifies schedule internal events
  */
@@ -100,6 +102,8 @@ const uiUpdate = 'ui-update';
 /** @private */
 const documentClick = 'document-click';
 /** @private */
+const documentPaste = 'document-paste';
+/** @private */
 const cellMouseDown = 'cell-mouse-down';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -1027,6 +1031,8 @@ const SCROLL_HIDDEN = 'e-scroll-hidden';
 const ALLDAY_APPOINTMENT_SCROLL = 'e-all-day-scroll';
 /** @private */
 const ALLDAY_APPOINTMENT_AUTO = 'e-all-day-auto';
+/** @private */
+const CLIPBOARD_CLASS = 'e-clipboard';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
@@ -1488,6 +1494,8 @@ class HeaderRenderer {
             targetType: 'relative',
             relateTo: this.getPopUpRelativeElement(),
             position: { X: 'left', Y: 'bottom' },
+            collision: { X: 'fit' },
+            viewPortElement: this.element,
             enableRtl: this.parent.enableRtl
         });
         const calendarView = this.getCalendarView();
@@ -1599,10 +1607,10 @@ class HeaderRenderer {
                 }
                 break;
             case 'e-prev':
-                this.parent.changeDate(this.parent.activeView.getNextPreviousDate('previous'), args.originalEvent);
+                this.parent.changeDate(this.parent.activeView.getNextPreviousDate('Previous'), args.originalEvent);
                 break;
             case 'e-next':
-                this.parent.changeDate(this.parent.activeView.getNextPreviousDate('next'), args.originalEvent);
+                this.parent.changeDate(this.parent.activeView.getNextPreviousDate('Next'), args.originalEvent);
                 break;
             case 'e-add':
                 isSameTime = this.parent.activeCellsData.startTime.getTime() === this.parent.activeCellsData.endTime.getTime();
@@ -1827,6 +1835,9 @@ class ScheduleTouch {
         this.touchRightDirection = this.parent.enableRtl ? 'Left' : 'Right';
     }
     scrollHandler(e) {
+        if (!isNullOrUndefined(this.parent.eventTooltip)) {
+            this.parent.eventTooltip.close();
+        }
         const blockSwipe = !this.parent.isAdaptive && e.originalEvent && e.originalEvent.target &&
             !isNullOrUndefined(closest(e.originalEvent.target, '.' + APPOINTMENT_CLASS));
         this.parent.uiStateValues.isTouchScroll = blockSwipe && e.originalEvent.type === 'touchmove' && !this.parent.uiStateValues.action;
@@ -1834,6 +1845,7 @@ class ScheduleTouch {
             this.parent.uiStateValues.isTapHold) {
             return;
         }
+        this.parent.uiStateValues.isSwipeScroll = true;
         if (!this.timeStampStart) {
             this.timeStampStart = Date.now();
         }
@@ -1858,7 +1870,7 @@ class ScheduleTouch {
         }
         if (e.scrollDirection === this.touchLeftDirection) {
             if (!this.nextPanel) {
-                this.renderPanel(NEXT_PANEL_CLASS, 'next');
+                this.renderPanel(NEXT_PANEL_CLASS, 'Next');
                 this.nextPanel = {
                     element: this.parent.activeView.getPanel(),
                     selectedDate: new Date(this.parent.selectedDate.getTime()),
@@ -1873,7 +1885,7 @@ class ScheduleTouch {
         else if (e.scrollDirection === this.touchRightDirection) {
             let prevWidth = 0;
             if (!this.previousPanel) {
-                this.renderPanel(PREVIOUS_PANEL_CLASS, 'previous');
+                this.renderPanel(PREVIOUS_PANEL_CLASS, 'Previous');
                 this.previousPanel = {
                     element: this.parent.activeView.getPanel(),
                     selectedDate: new Date(this.parent.selectedDate.getTime()),
@@ -2020,6 +2032,7 @@ class ScheduleTouch {
         if (!isNullOrUndefined(this.element) && !this.element.classList.contains(TRANSLATE_CLASS)) {
             return;
         }
+        this.parent.uiStateValues.isSwipeScroll = false;
         removeClass([this.element], TRANSLATE_CLASS);
         this.element.style.transitionDuration = '';
         this.element.style.transform = '';
@@ -2072,6 +2085,8 @@ class ScheduleTouch {
 class KeyboardInteraction {
     constructor(parent) {
         this.selectedCells = [];
+        this.isCutContentPasted = false;
+        this.isCutAction = false;
         this.keyConfigs = {
             downArrow: 'downarrow',
             upArrow: 'uparrow',
@@ -2106,7 +2121,11 @@ class KeyboardInteraction {
             ctrlShiftLeftArrow: 'ctrl+shift+leftarrow',
             ctrlShiftRightArrow: 'ctrl+shift+rightarrow',
             shiftAltY: 'shift+alt+y',
-            shiftAltN: 'shift+alt+n'
+            shiftAltN: 'shift+alt+n',
+            cut: 'ctrl+x',
+            copy: 'ctrl+c',
+            cmdCut: 'cmd+x',
+            cmdCopy: 'cmd+c'
         };
         this.parent = parent;
         this.parent.element.tabIndex = this.parent.element.tabIndex === -1 ? 0 : this.parent.element.tabIndex;
@@ -2116,6 +2135,7 @@ class KeyboardInteraction {
             eventName: 'keydown'
         });
         this.addEventListener();
+        this.createClipboardElement();
     }
     keyActionHandler(e) {
         switch (e.action) {
@@ -2136,13 +2156,13 @@ class KeyboardInteraction {
                 this.processRight(e, e.shiftKey);
                 break;
             case 'ctrlLeftArrow':
-                this.parent.changeDate(this.parent.activeView.getNextPreviousDate('previous'), e);
+                this.parent.changeDate(this.parent.activeView.getNextPreviousDate('Previous'), e);
                 if (this.parent.headerModule) {
                     this.parent.headerModule.element.querySelector('.e-prev button').focus();
                 }
                 break;
             case 'ctrlRightArrow':
-                this.parent.changeDate(this.parent.activeView.getNextPreviousDate('next'), e);
+                this.parent.changeDate(this.parent.activeView.getNextPreviousDate('Next'), e);
                 if (this.parent.headerModule) {
                     this.parent.headerModule.element.querySelector('.e-next button').focus();
                 }
@@ -2197,6 +2217,14 @@ class KeyboardInteraction {
                 }
                 this.processShiftAltN(e);
                 break;
+            case 'cut':
+            case 'cmdCut':
+                this.processClipboardAction(true, undefined, e);
+                break;
+            case 'copy':
+            case 'cmdCopy':
+                this.processClipboardAction(false, undefined, e);
+                break;
         }
     }
     processShiftAltN(e) {
@@ -2244,9 +2272,13 @@ class KeyboardInteraction {
     }
     addEventListener() {
         this.parent.on(cellMouseDown, this.onCellMouseDown, this);
+        if (this.parent.allowClipboard) {
+            this.parent.on(documentPaste, this.pasteHandler, this);
+        }
     }
     removeEventListener() {
         this.parent.off(cellMouseDown, this.onCellMouseDown);
+        this.parent.off(documentPaste, this.pasteHandler);
     }
     onCellMouseDown(e) {
         if (e.event.shiftKey) {
@@ -2881,7 +2913,7 @@ class KeyboardInteraction {
                         return;
                     }
                     const rowIndex = this.isInverseTableSelect() ? key.rowIndex : 0;
-                    this.parent.changeDate(this.parent.activeView.getNextPreviousDate('next'), e);
+                    this.parent.changeDate(this.parent.activeView.getNextPreviousDate('Next'), e);
                     const tableEle = this.parent.getContentTable();
                     const cell = isMonthEnd ? tableEle.rows[parseInt(rowIndex.toString(), 10)].querySelector('.' + WORK_CELLS_CLASS + ':not(.' + OTHERMONTH_CLASS + ')')
                         : tableEle.rows[parseInt(rowIndex.toString(), 10)].cells[0];
@@ -2897,7 +2929,7 @@ class KeyboardInteraction {
                 this.selectCells(isMultiple, allDayRow.cells[curColIndex + 1]);
             }
             else if (curColIndex === maxColIndex - 1 && !isMultiple) {
-                this.parent.changeDate(this.parent.activeView.getNextPreviousDate('next'), e);
+                this.parent.changeDate(this.parent.activeView.getNextPreviousDate('Next'), e);
                 const allDayRow = this.parent.getAllDayRow();
                 this.selectCells(false, allDayRow.cells[0]);
             }
@@ -2951,7 +2983,7 @@ class KeyboardInteraction {
                         this.selectCells(isMultiple, this.parent.element.querySelector('[data-date="' + (targetDate.getTime() - MS_PER_DAY) + '"]'));
                         return;
                     }
-                    this.parent.changeDate(this.parent.activeView.getNextPreviousDate('previous'), e);
+                    this.parent.changeDate(this.parent.activeView.getNextPreviousDate('Previous'), e);
                     const tableEle = this.parent.getContentTable();
                     const rowIndex = this.isInverseTableSelect() ? key.rowIndex : tableEle.rows.length - 1;
                     let cell = tableEle.rows[parseInt(rowIndex.toString(), 10)].cells[key.maxIndex - 1];
@@ -2971,7 +3003,7 @@ class KeyboardInteraction {
                 this.selectCells(isMultiple, allDayRow.cells[curColIndex - 1]);
             }
             else if (curColIndex === 0 && !isMultiple) {
-                this.parent.changeDate(this.parent.activeView.getNextPreviousDate('previous'), e);
+                this.parent.changeDate(this.parent.activeView.getNextPreviousDate('Previous'), e);
                 const allDayRow = this.parent.getAllDayRow();
                 this.selectCells(false, allDayRow.cells[maxColIndex - 1]);
             }
@@ -3236,6 +3268,215 @@ class KeyboardInteraction {
             this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS).scrollTop = workCell.offsetTop;
         }
     }
+    createClipboardElement() {
+        if (!this.parent.allowClipboard) {
+            return;
+        }
+        this.clipBoardTextArea = this.parent.createElement('textarea', {
+            className: CLIPBOARD_CLASS,
+            attrs: {
+                tabindex: '-1'
+            }
+        });
+        this.parent.element.appendChild(this.clipBoardTextArea);
+    }
+    setCopy(copiedEventData, e) {
+        if (window.getSelection().toString() !== '') {
+            return;
+        }
+        this.clipBoardTextArea.value = '';
+        let eventDetails = { elements: [], eventDatas: [] };
+        if (copiedEventData) {
+            const filteredContent = this.filterReadOnlyEvent(copiedEventData);
+            eventDetails.eventDatas = filteredContent;
+        }
+        else {
+            if (!this.parent || !this.parent.eventBase) {
+                return;
+            }
+            const selectedEvents = this.parent.eventBase.getSelectedEvents();
+            selectedEvents.event = selectedEvents && selectedEvents.event ? Array.isArray(selectedEvents.event)
+                ? this.filterReadOnlyEvent(selectedEvents.event) :
+                this.filterReadOnlyEvent([selectedEvents.event]) : undefined;
+            if (selectedEvents.element && selectedEvents.event) {
+                eventDetails = {
+                    elements: selectedEvents.element,
+                    eventDatas: selectedEvents.event
+                };
+            }
+            else {
+                eventDetails.element = [e.target];
+                eventDetails.eventDatas = [this.parent.getEventDetails(e.target)];
+            }
+        }
+        this.clipBoardTextArea.value = JSON.stringify(eventDetails.eventDatas, undefined, 2);
+        if (!/ipad|ipod|iphone/i.test(Browser.userAgent)) {
+            this.clipBoardTextArea.select();
+        }
+        else {
+            this.clipBoardTextArea.setSelectionRange(0, this.clipBoardTextArea.value.length);
+        }
+        if (!isNullOrUndefined(navigator.clipboard)) {
+            navigator.clipboard.writeText(this.clipBoardTextArea.value)
+                .then(() => {
+                this.clipBoardTextArea.blur();
+                window.getSelection().removeAllRanges();
+                if (e) {
+                    const closestAppointment = e.target.closest('.' + APPOINTMENT_CLASS);
+                    if (closestAppointment) {
+                        closestAppointment.focus();
+                    }
+                }
+            })
+                .catch((err) => {
+                throw err;
+            });
+        }
+    }
+    filterReadOnlyEvent(args) {
+        return args.filter((event) => !event[this.parent.eventFields.isReadonly]);
+    }
+    processClipboardAction(isCut, copiedEventData, e) {
+        if (!this.parent.allowClipboard) {
+            return;
+        }
+        this.isCutAction = isCut;
+        this.isCutContentPasted = false;
+        this.parent.closeQuickInfoPopup();
+        this.setCopy(copiedEventData ? copiedEventData : undefined, e);
+    }
+    pasteHandler(clipboardEvent, targetElement) {
+        if (!this.parent.allowClipboard || this.isCutContentPasted) {
+            return;
+        }
+        const target = this.parent.getSelectedCells().length > 0
+            ? this.parent.getSelectedCells()
+            : (targetElement ? [targetElement] : []);
+        if (target.length === 0 || this.parent.eventWindow.dialogObject.visible ||
+            this.parent.quickPopup.quickPopup.element.classList.contains(POPUP_OPEN)) {
+            return;
+        }
+        const clipboardData = clipboardEvent.clipboardData || clipboardEvent.event.clipboardData
+            || window.clipboardData;
+        const pastedData = clipboardData.getData('text');
+        if (pastedData === '[]' || pastedData === '') {
+            return;
+        }
+        let parsedData;
+        try {
+            parsedData = JSON.parse(pastedData);
+        }
+        catch (_a) {
+            parsedData = pastedData;
+        }
+        const args = { cancel: false, data: parsedData, element: target };
+        this.parent.trigger(beforePaste, args, (pasteEventArgs) => {
+            if (!pasteEventArgs.cancel) {
+                if (!Array.isArray(pasteEventArgs.data) || !pasteEventArgs.data.every((item) => typeof item === 'object')) {
+                    this.clipBoardTextArea.value = '';
+                    return;
+                }
+                this.processPaste(pasteEventArgs.data, targetElement);
+                if (this.isCutAction) {
+                    this.isCutContentPasted = true;
+                }
+            }
+            else {
+                this.parent.closeQuickInfoPopup();
+                return;
+            }
+        });
+    }
+    processPaste(data, targetElement) {
+        if (!this.parent || !this.parent.eventWindow || !this.parent.eventBase || !data || !data.length) {
+            return;
+        }
+        const target = this.getTargetElements(targetElement);
+        const cellDetails = this.parent.getCellDetails(target);
+        const eventDetails = {};
+        this.parent.eventWindow.convertToEventData(cellDetails, eventDetails);
+        const isAllDay = this.isAllDayEvent(target);
+        const resources = this.parent.getResourcesByIndex(cellDetails.groupIndex);
+        const processedData = this.processEventData(data, isAllDay, cellDetails, resources);
+        const selectedEventData = this.parent.eventBase.sortByDateTime(processedData);
+        const saveData = this.prepareEventData(selectedEventData, eventDetails);
+        removeClass(target, SELECTED_CELL_CLASS);
+        if (saveData.length > 0) {
+            if (this.isCutAction) {
+                this.parent.saveEvent(saveData);
+            }
+            else {
+                this.parent.addEvent(saveData);
+            }
+        }
+    }
+    getTargetElements(targetElement) {
+        return this.parent.getSelectedCells().length > 0
+            ? this.parent.getSelectedCells()
+            : (targetElement ? [targetElement] : []);
+    }
+    isAllDayEvent(target) {
+        return !target.some((cell) => cell.classList.contains(WORK_CELLS_CLASS));
+    }
+    processEventData(data, isAllDay, cellDetails, resources) {
+        return data.map((item) => {
+            const processedItem = Object.assign({}, item, { [this.parent.eventFields.startTime]: new Date(item[this.parent.eventFields.startTime]), [this.parent.eventFields.endTime]: new Date(item[this.parent.eventFields.endTime]), [this.parent.eventFields.recurrenceID]: null, [this.parent.eventFields.isAllDay]: isAllDay });
+            this.adjustEventTime(processedItem, isAllDay, item.IsAllDay, cellDetails);
+            if (resources && resources.groupData) {
+                Object.assign(processedItem, resources.groupData);
+            }
+            return processedItem;
+        });
+    }
+    adjustEventTime(processedItem, isAllDay, itemIsAllDay, cellDetails) {
+        const isTimeScaleEnabled = this.parent.activeViewOptions.timeScale.enable;
+        if ((['Day', 'Week', 'WorkWeek'].indexOf(this.parent.currentView) !== -1) && isTimeScaleEnabled) {
+            if (isAllDay) {
+                processedItem[this.parent.eventFields.endTime] = new Date(processedItem[this.parent.eventFields.startTime]);
+                processedItem[this.parent.eventFields.endTime].setDate(processedItem[this.parent.eventFields.startTime].getDate() + 1);
+            }
+            else if (itemIsAllDay) {
+                processedItem[this.parent.eventFields.startTime] = new Date(processedItem[this.parent.eventFields.startTime]
+                    .setHours(0, 0, 0, 0));
+                processedItem[this.parent.eventFields.endTime] = new Date(processedItem[this.parent.eventFields.startTime].getTime() + (cellDetails.endTime.getTime() - cellDetails.startTime.getTime()));
+            }
+        }
+        else if (itemIsAllDay) {
+            processedItem[this.parent.eventFields.isAllDay] = true;
+            processedItem[this.parent.eventFields.startTime] = new Date(processedItem[this.parent.eventFields.startTime]
+                .setHours(0, 0, 0, 0));
+            processedItem[this.parent.eventFields.endTime] = new Date(processedItem[this.parent.eventFields.startTime].getTime() +
+                (processedItem[this.parent.eventFields.endTime].getTime() - processedItem[this.parent.eventFields.startTime].getTime()));
+        }
+    }
+    prepareEventData(selectedEventData, eventDetails) {
+        const initialEventTime = new Date(selectedEventData[0][this.parent.eventFields.startTime]);
+        let uniqueId = this.parent.getEventMaxID();
+        return selectedEventData.map((events) => {
+            const totalDuration = this.calculateTotalDuration(events, eventDetails, initialEventTime);
+            const cloneDetails = this.isCutAction ? events : Object.assign({}, events);
+            if (!events[this.parent.eventFields.recurrenceRule]) {
+                cloneDetails[this.parent.eventFields.startTime] =
+                    new Date(new Date(cloneDetails[this.parent.eventFields.startTime]).setMilliseconds(totalDuration));
+                cloneDetails[this.parent.eventFields.endTime] =
+                    new Date(new Date(cloneDetails[this.parent.eventFields.endTime]).setMilliseconds(totalDuration));
+            }
+            if (!this.isCutAction) {
+                cloneDetails[this.parent.eventFields.id] = uniqueId++;
+            }
+            return cloneDetails;
+        });
+    }
+    calculateTotalDuration(events, eventDetails, initialEventTime) {
+        if ((['Month', 'TimelineMonth', 'TimelineYear'].indexOf(this.parent.currentView) !== -1) || !this.parent.activeViewOptions.timeScale.enable) {
+            const eventStartTime = new Date(events[this.parent.eventFields.startTime]);
+            return eventDetails[this.parent.eventFields.startTime].getTime() - initialEventTime.getTime() +
+                (eventStartTime.getHours() * 3600000 + eventStartTime.getMinutes() * 60000 + eventStartTime.getSeconds() * 1000);
+        }
+        else {
+            return eventDetails[this.parent.eventFields.startTime].getTime() - initialEventTime.getTime();
+        }
+    }
     /**
      * Get module name.
      *
@@ -3253,6 +3494,7 @@ class KeyboardInteraction {
     destroy() {
         this.removeEventListener();
         this.selectedCells = [];
+        this.clipBoardTextArea = null;
         this.keyboardModule.destroy();
     }
 }
@@ -10767,6 +11009,10 @@ class EventTooltip {
         return targets.join(',');
     }
     onBeforeRender(args) {
+        if (this.parent.uiStateValues.isSwipeScroll) {
+            args.cancel = true;
+            return;
+        }
         if (!isNullOrUndefined(args.target.getAttribute('data-tooltip-id'))) {
             return;
         }
@@ -17768,6 +18014,9 @@ let Schedule = class Schedule extends Component {
         EventHandler.add(window, 'resize', this.onScheduleResize, this);
         EventHandler.add(window, 'orientationchange', this.onScheduleResize, this);
         EventHandler.add(document, Browser.touchStartEvent, this.onDocumentClick, this);
+        if (this.allowClipboard) {
+            EventHandler.add(document, 'paste', this.onDocumentPaste, this);
+        }
     }
     /**
      * Method to remove selected class
@@ -18141,6 +18390,9 @@ let Schedule = class Schedule extends Component {
     onDocumentClick(args) {
         this.notify(documentClick, { event: args });
     }
+    onDocumentPaste(args) {
+        this.notify(documentPaste, { event: args });
+    }
     onScheduleResize() {
         if (isNullOrUndefined(this.activeView) || ((this.isAdaptive || isMobile()) && document.activeElement
             && (document.activeElement.classList.contains(SUBJECT_CLASS) ||
@@ -18338,6 +18590,7 @@ let Schedule = class Schedule extends Component {
         EventHandler.remove(window, 'resize', this.onScheduleResize);
         EventHandler.remove(window, 'orientationchange', this.onScheduleResize);
         EventHandler.remove(document, Browser.touchStartEvent, this.onDocumentClick);
+        EventHandler.remove(document, 'paste', this.onDocumentPaste);
     }
     /**
      * Core method to return the component name.
@@ -18572,11 +18825,12 @@ let Schedule = class Schedule extends Component {
                 this.onEventSettingsPropertyChanged(newProp.eventSettings, oldProp.eventSettings, state);
                 break;
             case 'allowKeyboardInteraction':
+            case 'allowClipboard':
                 if (this.keyboardInteractionModule) {
                     this.keyboardInteractionModule.destroy();
                     this.keyboardInteractionModule = null;
                 }
-                if (newProp.allowKeyboardInteraction) {
+                if (newProp.allowKeyboardInteraction || newProp.allowClipboard) {
                     this.keyboardInteractionModule = new KeyboardInteraction(this);
                 }
                 break;
@@ -19494,6 +19748,74 @@ let Schedule = class Schedule extends Component {
         }
         return (eventCollection.length > 0) ? false : true;
     }
+    /**
+     * Method to copy events from an HTMLElement or an array of HTMLElements.
+     *
+     * @param { HTMLElement[] } elements Accepts an array of HTMLElement
+     * @returns {void} This method does not return a value.
+     */
+    copy(elements) {
+        this.processCutCopyActions(elements, false);
+    }
+    /**
+     * Method to cut events from an HTMLElement or an array of HTMLElements.
+     *
+     * @param { HTMLElement[] } elements Accepts an array of HTMLElement
+     * @returns {void} This method does not return a value.
+     */
+    cut(elements) {
+        this.processCutCopyActions(elements, true);
+    }
+    /**
+     * Method to create a paste event with clipboard data
+     *
+     * @param { HTMLElement } targetElement Accepts HTMLElement
+     * @returns {void}
+     */
+    paste(targetElement) {
+        if (!this.allowClipboard || !this.allowKeyboardInteraction) {
+            return;
+        }
+        if (!targetElement.classList.contains('e-work-cells') && !targetElement.classList.contains('e-all-day-cells')) {
+            return;
+        }
+        const clipboardData = new DataTransfer();
+        if (!isNullOrUndefined(navigator.clipboard)) {
+            navigator.clipboard.readText()
+                .then((text) => {
+                clipboardData.setData('text/plain', text);
+                const pasteEvent = new ClipboardEvent('paste', {
+                    bubbles: true,
+                    cancelable: true
+                });
+                Object.defineProperty(pasteEvent, 'clipboardData', {
+                    value: clipboardData
+                });
+                this.keyboardInteractionModule.pasteHandler(pasteEvent, targetElement);
+            })
+                .catch((err) => {
+                throw err;
+            });
+        }
+    }
+    processCutCopyActions(elements, isCut) {
+        if (!elements || !this.allowClipboard || !this.allowKeyboardInteraction) {
+            return;
+        }
+        const elementArray = elements;
+        const eventDetailsArray = [];
+        elementArray.forEach((element) => {
+            if (element.classList.contains(APPOINTMENT_CLASS)) {
+                const eventDetail = this.getEventDetails(element);
+                if (eventDetail) {
+                    eventDetailsArray.push(eventDetail);
+                }
+            }
+        });
+        if (eventDetailsArray.length > 0) {
+            this.keyboardInteractionModule.processClipboardAction(isCut, eventDetailsArray);
+        }
+    }
     /**
      * To manually open the event editor on specific time or on certain events.
      *
@@ -19621,6 +19943,51 @@ let Schedule = class Schedule extends Component {
             this.eventTooltip.close();
         }
     }
+    /**
+     * Retrieves a formatted string representing the date range of the given date collection.
+     *
+     * @param {Date[]} dates - An array of Date objects representing the date range.
+     * @returns {string} A formatted string describing the date range.
+     *   If the dates is empty, returns an empty string.
+     *   Otherwise, delegates to the active view to generate the appropriate date range text.
+     *
+     * @example
+     * // Assuming dates contains dates from May 1, 2023 to May 7, 2023
+     * const rangeText = schedule.getDateRangeText(schedule.getViewDates());
+     * // rangeText might be "May 1 - 7, 2023" (actual format depends on the active view)
+     *
+     * @remarks
+     * The actual format of the returned string depends on the implementation
+     * of the getDateRangeText method in the active view.
+     */
+    getDateRangeText(dates) {
+        if ((isNullOrUndefined(dates) && dates.length === 0) || !this.activeView) {
+            return '';
+        }
+        return this.activeView.getDateRangeText(dates[0], dates);
+    }
+    /**
+     * Retrieves an array of dates based on the specified date collection direction.
+     *
+     * @param {NavigationDirection} type - The direction for date collection. Options are:
+     *   - 'Previous': Returns the previous date range collection from the current rendered date.
+     *   - 'Next': Returns the next date range collection from the current rendered date.
+     *   - 'Current': Returns the current rendered date collection.
+     *
+     * @returns {Date[]} An array of Date objects representing the view dates.
+     */
+    getViewDates(type = 'Current') {
+        if (!this.activeView) {
+            return [];
+        }
+        switch (type) {
+            case 'Previous':
+            case 'Next':
+                return this.activeView.getRenderDates(undefined, this.activeView.getNextPreviousDate(type));
+            case 'Current':
+                return this.getCurrentViewDates();
+        }
+    }
     /**
      * Select the resource based on group index in mobile mode.
      *
@@ -19925,6 +20292,9 @@ __decorate$b([
 __decorate$b([
     Property()
 ], Schedule.prototype, "cssClass", void 0);
+__decorate$b([
+    Property(false)
+], Schedule.prototype, "allowClipboard", void 0);
 __decorate$b([
     Property()
 ], Schedule.prototype, "eventDragArea", void 0);
@@ -20009,6 +20379,9 @@ __decorate$b([
 __decorate$b([
     Event()
 ], Schedule.prototype, "dataBound", void 0);
+__decorate$b([
+    Event()
+], Schedule.prototype, "beforePaste", void 0);
 Schedule = __decorate$b([
     NotifyPropertyChanges
 ], Schedule);
@@ -20095,9 +20468,10 @@ class ActionBase {
         }
     }
     calculateIntervalTime(date) {
-        const intervalTime = new Date(+date);
-        intervalTime.setMinutes(Math.floor(intervalTime.getMinutes() / this.actionObj.interval) * this.actionObj.interval);
-        return intervalTime;
+        let dateInMS = resetTime(date).getTime();
+        const intervalInMS = MS_PER_MINUTE * this.actionObj.interval;
+        dateInMS = dateInMS + Math.floor((date.getTime() - dateInMS) / intervalInMS) * intervalInMS;
+        return new Date(dateInMS);
     }
     getContentAreaDimension() {
         const viewElement = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
@@ -21655,14 +22029,14 @@ class DragAndDrop extends ActionBase {
         this.isPreventMultiDrag = false;
         this.slotsUptoCursor = -1;
         this.eleTop = 0;
+        this.distanceUptoCursor = 0;
     }
     wireDragEvent(element) {
-        const isVerticalView = ['Day', 'Week', 'WorkWeek'].indexOf(this.parent.currentView) > -1;
         new Draggable(element, {
             abort: '.' + EVENT_RESIZE_CLASS,
             clone: true,
             isDragScroll: true,
-            enableTailMode: (this.parent.eventDragArea || isVerticalView) ? true : false,
+            enableTailMode: this.parent.eventDragArea ? true : false,
             cursorAt: (this.parent.eventDragArea) ? { left: -20, top: -20 } : { left: 0, top: 0 },
             dragArea: this.dragArea,
             dragStart: this.dragStart.bind(this),
@@ -21685,8 +22059,12 @@ class DragAndDrop extends ActionBase {
         }
         this.setDragActionDefaultValues();
         this.actionObj.element = e.element;
-        this.eleTop = parseFloat(this.actionObj.element.style.top);
-        this.slotsUptoCursor = -1;
+        if (e.sender && ['Day', 'Week', 'WorkWeek'].indexOf(this.parent.currentView) > -1) {
+            const eventArgs = this.parent.eventBase.getPageCoordinates(e.sender);
+            this.distanceUptoCursor = eventArgs.clientY - this.actionObj.element.getBoundingClientRect().top;
+            this.eleTop = parseFloat(this.actionObj.element.style.top);
+            this.slotsUptoCursor = -1;
+        }
         this.actionObj.action = 'drag';
         let elements = [];
         if (!this.parent.allowMultiDrag || isNullOrUndefined(this.parent.selectedElements) || this.parent.selectedElements.length === 0 ||
@@ -21766,11 +22144,11 @@ class DragAndDrop extends ActionBase {
             let top = parseInt(e.top, 10);
             top = top < 0 ? 0 : top;
             if (this.slotsUptoCursor < 0) {
-                const cellsCountUptoCursor = Math.floor(top / cellHeight);
+                const cellsCountUptoCursor = Math.floor((this.eleTop + this.distanceUptoCursor) / cellHeight);
                 const cellsCountUptoEleTop = Math.floor(this.eleTop / cellHeight);
                 this.slotsUptoCursor = cellsCountUptoCursor - cellsCountUptoEleTop;
             }
-            top = (Math.floor((top + 1) / cellHeight) - this.slotsUptoCursor) * cellHeight;
+            top = (Math.floor((top + this.distanceUptoCursor + 1) / cellHeight) - this.slotsUptoCursor) * cellHeight;
             topValue = formatUnit(top < 0 ? 0 : top);
             const scrollHeight = this.parent.element.querySelector('.e-content-wrap').scrollHeight;
             const cloneBottom = parseInt(topValue, 10) + this.actionObj.clone.offsetHeight;
@@ -22129,12 +22507,12 @@ class DragAndDrop extends ActionBase {
             if ((dragArea.scrollLeft === 0) &&
                 (Math.round(this.actionObj.X) <=
                     Math.round(dragArea.getBoundingClientRect().left + this.actionObj.cellWidth + window.pageXOffset))) {
-                navigationType = this.parent.enableRtl ? 'next' : 'previous';
+                navigationType = this.parent.enableRtl ? 'Next' : 'Previous';
             }
             else if ((Math.round(dragArea.scrollLeft) + dragArea.clientWidth === dragArea.scrollWidth) &&
                 (Math.round(this.actionObj.X) >=
                     Math.round(dragArea.getBoundingClientRect().right - this.actionObj.cellWidth + window.pageXOffset))) {
-                navigationType = this.parent.enableRtl ? 'previous' : 'next';
+                navigationType = this.parent.enableRtl ? 'Previous' : 'Next';
             }
             if (navigationType) {
                 this.parent.changeDate(this.parent.activeView.getNextPreviousDate(navigationType));
@@ -22987,7 +23365,7 @@ class ViewBase {
      * @param {Schedule} parent Accepts the schedule instance
      */
     constructor(parent) {
-        this.previousNextAction = 'next';
+        this.previousNextAction = 'Next';
         this.parent = parent;
     }
     isTimelineView() {
@@ -23242,11 +23620,11 @@ class ViewBase {
         return !(getDateInMs(date) < getDateInMs(startHour) || getDateInMs(date) >= getDateInMs(endHour) ||
             !this.isWorkDay(date, workDays));
     }
-    getRenderDates(workDays) {
+    getRenderDates(workDays, date = this.parent.selectedDate) {
         const renderDates = [];
         // Due to same code for vertical and time line, week & work week views, if condition has used
         if (this.parent.currentView === 'Week' || this.parent.currentView === 'TimelineWeek') {
-            const selectedDate = resetTime(this.parent.selectedDate);
+            const selectedDate = resetTime(date);
             let start = getWeekFirstDate(selectedDate, this.parent.activeViewOptions.firstDayOfWeek);
             for (let i = 0, length = WEEK_LENGTH * this.parent.activeViewOptions.interval; i < length; i++) {
                 if (this.parent.activeViewOptions.showWeekend) {
@@ -23261,7 +23639,7 @@ class ViewBase {
             }
         }
         else if (this.parent.currentView === 'WorkWeek' || this.parent.currentView === 'TimelineWorkWeek') {
-            let start = getWeekFirstDate(resetTime(this.parent.selectedDate), this.parent.activeViewOptions.firstDayOfWeek);
+            let start = getWeekFirstDate(resetTime(date), this.parent.activeViewOptions.firstDayOfWeek);
             for (let i = 0, length = WEEK_LENGTH * this.parent.activeViewOptions.interval; i < length; i++) {
                 if (this.isWorkDay(start, workDays)) {
                     renderDates.push(start);
@@ -23272,7 +23650,7 @@ class ViewBase {
         else {
             const dayCount = this.parent.currentView === 'Agenda' ? this.parent.agendaDaysCount :
                 this.parent.activeViewOptions.interval;
-            let start = resetTime(this.parent.selectedDate);
+            let start = resetTime(date);
             do {
                 if (this.parent.activeViewOptions.showWeekend) {
                     renderDates.push(start);
@@ -23298,11 +23676,11 @@ class ViewBase {
         if (this.parent.currentView === 'Day' || this.parent.currentView === 'TimelineDay') {
             if (this.parent.activeViewOptions.showWeekend) {
                 const daysCount = this.parent.activeViewOptions.interval;
-                return addDays(this.parent.selectedDate, type === 'next' ? daysCount : -daysCount);
+                return addDays(this.parent.selectedDate, type === 'Next' ? daysCount : -daysCount);
             }
             else {
                 let date;
-                if (type === 'next') {
+                if (type === 'Next') {
                     date = addDays(this.renderDates.slice(-1)[0], 1);
                     while (!this.isWorkDay(date)) {
                         date = addDays(date, 1);
@@ -23323,7 +23701,7 @@ class ViewBase {
                 return date;
             }
         }
-        const weekLength = type === 'next' ? WEEK_LENGTH : -WEEK_LENGTH;
+        const weekLength = type === 'Next' ? WEEK_LENGTH : -WEEK_LENGTH;
         return addDays(this.parent.selectedDate, weekLength * this.parent.activeViewOptions.interval);
     }
     formatViewLabel(view, startDate, endDate) {
@@ -23350,12 +23728,12 @@ class ViewBase {
             }
         }
     }
-    getDateRangeText() {
+    getDateRangeText(date = this.renderDates[0], dateCollection = this.renderDates) {
         if (this.parent.isAdaptive) {
             const formatDate = (this.parent.activeViewOptions.dateFormat) ? this.parent.activeViewOptions.dateFormat : 'MMMM y';
             return capitalizeFirstWord(this.parent.globalize.formatDate(this.parent.selectedDate, { format: formatDate, calendar: this.parent.getCalendarMode() }), 'single');
         }
-        return this.formatDateRange(this.renderDates[0], this.renderDates[this.renderDates.length - 1]);
+        return this.formatDateRange(date, dateCollection[dateCollection.length - 1]);
     }
     formatDateRange(startDate, endDate) {
         const globalize = this.parent.globalize;
@@ -25111,9 +25489,9 @@ class Month extends ViewBase {
         }
         return false;
     }
-    getRenderDates(workDays) {
+    getRenderDates(workDays, selectedDate = this.parent.selectedDate) {
         const renderDates = [];
-        const currentDate = resetTime(this.parent.selectedDate);
+        const currentDate = resetTime(selectedDate);
         let start = this.getMonthStart(currentDate);
         const monthEnd = this.getMonthEnd(currentDate);
         do {
@@ -25141,13 +25519,13 @@ class Month extends ViewBase {
     getNextPreviousDate(type) {
         if (this.isCustomMonth()) {
             const dates = this.parent.getCurrentViewDates();
-            const date = getWeekFirstDate(type === 'next' ? dates[dates.length - 1]
+            const date = getWeekFirstDate(type === 'Next' ? dates[dates.length - 1]
                 : dates[0], this.parent.activeViewOptions.firstDayOfWeek);
-            return addDays(date, type === 'next' ? WEEK_LENGTH : -(this.parent.activeViewOptions.numberOfWeeks > 0 ?
+            return addDays(date, type === 'Next' ? WEEK_LENGTH : -(this.parent.activeViewOptions.numberOfWeeks > 0 ?
                 this.parent.activeViewOptions.numberOfWeeks : DEFAULT_WEEKS) * WEEK_LENGTH);
         }
         else {
-            return addMonths(this.parent.selectedDate, ((type === 'next' ? 1 : -1) * this.parent.activeViewOptions.interval));
+            return addMonths(this.parent.selectedDate, ((type === 'Next' ? 1 : -1) * this.parent.activeViewOptions.interval));
         }
     }
     getStartDate() {
@@ -25159,13 +25537,16 @@ class Month extends ViewBase {
     getEndDateFromStartDate(start) {
         return addDays(new Date(start.getTime()), 1);
     }
-    getDateRangeText() {
+    getDateRangeText(startDate = this.parent.selectedDate, dateCollection = null) {
         if (this.parent.isAdaptive || isNullOrUndefined(this.parent.activeViewOptions.dateFormat)) {
-            let startDate = this.parent.selectedDate;
+            const maxNumberOfDaysPerWeek = 7;
+            startDate = !isNullOrUndefined(dateCollection) && dateCollection.length > maxNumberOfDaysPerWeek - 1
+                ? dateCollection[maxNumberOfDaysPerWeek - 1] : startDate;
             let endDate;
             let updateCustomRange = false;
             if (this.isCustomMonth()) {
-                const dates = this.parent.getCurrentViewDates();
+                const dates = !isNullOrUndefined(dateCollection) && dateCollection.length > 0 ? dateCollection :
+                    this.parent.getCurrentViewDates();
                 updateCustomRange = dates[0].getMonth() !== dates[dates.length - 1].getMonth() ||
                     dates[0].getFullYear() !== dates[dates.length - 1].getFullYear();
                 if (updateCustomRange) {
@@ -25191,7 +25572,8 @@ class Month extends ViewBase {
             const format = (this.parent.activeViewOptions.dateFormat) ? this.parent.activeViewOptions.dateFormat : 'MMMM y';
             return capitalizeFirstWord(this.parent.globalize.formatDate(startDate, { format: format, calendar: this.parent.getCalendarMode() }), 'single');
         }
-        return this.formatDateRange(this.parent.selectedDate);
+        return this.formatDateRange(!isNullOrUndefined(dateCollection) && dateCollection.length > 0 ? dateCollection[0] :
+            this.parent.selectedDate);
     }
     getLabelText(view) {
         const viewStr = view.charAt(0).toLowerCase() + view.substring(1);
@@ -25505,7 +25887,7 @@ class Year extends ViewBase {
         this.parent.activeCellsData = this.parent.getCellDetails(target);
         const isPrevious = startDate.getTime() < this.getStartDate().getTime();
         if (isPrevious || startDate.getTime() > this.getEndDate().getTime()) {
-            this.parent.changeDate(this.parent.activeView.getNextPreviousDate(isPrevious ? 'previous' : 'next'), e);
+            this.parent.changeDate(this.parent.activeView.getNextPreviousDate(isPrevious ? 'Previous' : 'Next'), e);
             const activeDate = this.parent.activeCellsData.startTime.getTime();
             const inRange = activeDate >= this.getStartDate().getTime() && activeDate <= this.getEndDate().getTime();
             const dateAttr = inRange ? activeDate : (isPrevious ? this.getEndDate() : this.getStartDate()).getTime();
@@ -25608,16 +25990,17 @@ class Year extends ViewBase {
         return addDays(new Date(date.getTime()), 1);
     }
     getNextPreviousDate(type) {
-        return addYears(this.parent.selectedDate, ((type === 'next') ? 1 : -1));
+        return addYears(this.parent.selectedDate, ((type === 'Next') ? 1 : -1));
     }
-    getDateRangeText() {
-        const startDate = this.getStartDate();
-        const endDate = this.getEndDate();
+    getDateRangeText(date = this.parent.selectedDate, dateCollection = null) {
+        const isDateColAvail = !isNullOrUndefined(dateCollection) && dateCollection.length > 0;
+        const startDate = isDateColAvail ? dateCollection[0] : this.getStartDate();
+        const endDate = isDateColAvail ? dateCollection[dateCollection.length - 1] : this.getEndDate();
         if (startDate.getFullYear() !== endDate.getFullYear()) {
             return this.parent.globalize.formatDate(startDate, { skeleton: 'yMMM' }) + ' - ' + this.parent.globalize.formatDate(endDate, { skeleton: 'yMMM' });
         }
         else {
-            return this.parent.globalize.formatDate(this.parent.selectedDate, { skeleton: 'y' });
+            return this.parent.globalize.formatDate(isDateColAvail ? dateCollection[0] : date, { skeleton: 'y' });
         }
     }
     addEventListener() {
@@ -26445,7 +26828,7 @@ class Agenda extends AgendaBase {
         return resetTime(addDays(filterDate, 1));
     }
     getNextPreviousDate(type) {
-        const noOfDays = (type === 'next') ? 1 : -1;
+        const noOfDays = (type === 'Next') ? 1 : -1;
         return addDays(this.parent.selectedDate, noOfDays);
     }
     startDate() {
@@ -26684,9 +27067,9 @@ class MonthAgenda extends Month {
     }
     getNextPreviousDate(type) {
         const selectedDate = this.parent.selectedDate;
-        const interval = (type === 'next') ? this.parent.activeViewOptions.interval : -this.parent.activeViewOptions.interval;
+        const interval = (type === 'Next') ? this.parent.activeViewOptions.interval : -this.parent.activeViewOptions.interval;
         const navigateDate = addMonths(this.parent.selectedDate, interval);
-        const month = (type === 'next') ? 2 : 0;
+        const month = (type === 'Next') ? 2 : 0;
         const lastDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + month, 0).getDate();
         const date = (lastDate >= this.monthAgendaDate.getDate()) ? this.monthAgendaDate.getDate() : lastDate;
         this.monthAgendaDate = new Date(navigateDate.getFullYear(), navigateDate.getMonth(), date);
@@ -28347,5 +28730,5 @@ class Print {
     }
 }
 
-export { Agenda, DEFAULT_WEEKS, Day, DragAndDrop, ExcelExport, Gregorian, HeaderRenderer, ICalendarExport, ICalendarImport, Islamic, MS_PER_DAY, MS_PER_MINUTE, Month, MonthAgenda, Print, RecurrenceEditor, Resize, Schedule, TimelineMonth, TimelineViews, TimelineYear, Timezone, ViewBase, WEEK_LENGTH, Week, WorkWeek, Year, actionBegin, actionComplete, actionFailure, addDays, addMonths, addYears, agendaCells, capitalizeFirstWord, cellClick, cellDoubleClick, cellMouseDown, cellSelect, contentReady, dataBinding, dataBound, dataReady, dateHeader, documentClick, drag, dragStart, dragStop, eventClick, eventDoubleClick, eventRendered, eventsLoaded, extractObjectFromRule, findIndexInData, firstDateOfMonth, generate, generateSummary, getCalendarUtil, getDateCount, getDateFromRecurrenceDateString, getDateFromString, getDateInMs, getDaysCount, getElementHeight, getElementHeightFromClass, getElementTop, getElementWidth, getElementWidthFromClass, getMaxDays, getOuterHeight, getRecurrenceStringFromDate, getScrollBarWidth, getStartEndHours, getTranslateX, getTranslateY, getUniversalTime, getWeekFirstDate, getWeekLastDate, getWeekMiddleDate, getWeekNumber, hover, initialEnd, initialLoad, inlineClick, isDaylightSavingTime, isIPadDevice, isMobile, lastDateOfMonth, moreEventsClick, navigating, noEvents, popupClose, popupOpen, print, removeChildren, renderCell, resetScrollbarWidth, resetTime, resizeStart, resizeStop, resizing, resourceHeader, scroll, scrollUiUpdate, select, setTime, timezoneData, uiUpdate, virtualScroll, virtualScrollStart, virtualScrollStop };
+export { Agenda, DEFAULT_WEEKS, Day, DragAndDrop, ExcelExport, Gregorian, HeaderRenderer, ICalendarExport, ICalendarImport, Islamic, MS_PER_DAY, MS_PER_MINUTE, Month, MonthAgenda, Print, RecurrenceEditor, Resize, Schedule, TimelineMonth, TimelineViews, TimelineYear, Timezone, ViewBase, WEEK_LENGTH, Week, WorkWeek, Year, actionBegin, actionComplete, actionFailure, addDays, addMonths, addYears, agendaCells, beforePaste, capitalizeFirstWord, cellClick, cellDoubleClick, cellMouseDown, cellSelect, contentReady, dataBinding, dataBound, dataReady, dateHeader, documentClick, documentPaste, drag, dragStart, dragStop, eventClick, eventDoubleClick, eventRendered, eventsLoaded, extractObjectFromRule, findIndexInData, firstDateOfMonth, generate, generateSummary, getCalendarUtil, getDateCount, getDateFromRecurrenceDateString, getDateFromString, getDateInMs, getDaysCount, getElementHeight, getElementHeightFromClass, getElementTop, getElementWidth, getElementWidthFromClass, getMaxDays, getOuterHeight, getRecurrenceStringFromDate, getScrollBarWidth, getStartEndHours, getTranslateX, getTranslateY, getUniversalTime, getWeekFirstDate, getWeekLastDate, getWeekMiddleDate, getWeekNumber, hover, initialEnd, initialLoad, inlineClick, isDaylightSavingTime, isIPadDevice, isMobile, lastDateOfMonth, moreEventsClick, navigating, noEvents, popupClose, popupOpen, print, removeChildren, renderCell, resetScrollbarWidth, resetTime, resizeStart, resizeStop, resizing, resourceHeader, scroll, scrollUiUpdate, select, setTime, timezoneData, uiUpdate, virtualScroll, virtualScrollStart, virtualScrollStop };
 //# sourceMappingURL=ej2-schedule.es2015.js.map