@syncfusion/ej2-schedule 27.2.3 → 28.1.33

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

@@ -1,4 +1,4 @@
-import { Component, ModuleDeclaration, Property, Event, Animation, Collection, append } from '@syncfusion/ej2-base';import { EventHandler, EmitType, Browser, Internationalization, getDefaultDateObject, cldrData, L10n } from '@syncfusion/ej2-base';import { getValue, compile, extend, isNullOrUndefined, NotifyPropertyChanges, INotifyPropertyChanged, Complex } from '@syncfusion/ej2-base';import { getElement, removeClass, addClass, classList, remove, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';import { HeaderRenderer } from '../renderer/header-renderer';import { Scroll } from '../actions/scroll';import { ScheduleTouch } from '../actions/touch';import { KeyboardInteraction } from '../actions/keyboard';import { Data } from '../actions/data';import { View, CurrentAction, ReturnType, WeekRule } from '../base/type';import { EventBase } from '../event-renderer/event-base';import { InlineEdit } from '../event-renderer/inline-edit';import { QuickPopups } from '../popups/quick-popups';import { EventTooltip } from '../popups/event-tooltip';import { EventWindow } from '../popups/event-window';import { Render } from '../renderer/renderer';import { Day } from '../renderer/day';import { Week } from '../renderer/week';import { WorkWeek } from '../renderer/work-week';import { Month } from '../renderer/month';import { Year } from '../renderer/year';import { Agenda } from '../renderer/agenda';import { MonthAgenda } from '../renderer/month-agenda';import { TimelineViews } from '../renderer/timeline-view';import { TimelineMonth } from '../renderer/timeline-month';import { TimelineYear } from '../renderer/timeline-year';import { WorkHours } from '../models/work-hours';import { TimeScale } from '../models/time-scale';import { QuickInfoTemplates } from '../models/quick-info-templates';import { HeaderRows } from '../models/header-rows';import { Crud } from '../actions/crud';import { Resize } from '../actions/resize';import { DragAndDrop } from '../actions/drag';import { VirtualScroll } from '../actions/virtual-scroll';import { WorkCellInteraction } from '../actions/work-cells';import { WorkHoursModel, ViewsModel, EventSettingsModel, GroupModel, ResourcesModel, TimeScaleModel, ToolbarItemModel } from '../models/models';import { QuickInfoTemplatesModel, HeaderRowsModel } from '../models/models';import { EventSettings } from '../models/event-settings';import { Group } from '../models/group';import { Resources } from '../models/resources';import { ICalendarExport } from '../exports/calendar-export';import { ICalendarImport } from '../exports/calendar-import';import { ExcelExport } from '../exports/excel-export';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, StateArgs, ExportOptions, SelectEventArgs } from '../base/interface';import { ViewsData, PopupCloseEventArgs, HoverEventArgs, MoreEventsClickArgs, ScrollEventArgs, CallbackFunction } from '../base/interface';import { CalendarUtil, Gregorian, Islamic, CalendarType } from '../../common/calendar-util';import { ResourceBase } from '../base/resource';import { Timezone, timezoneData } from '../timezone/timezone';import { RecurrenceEditor } from '../../recurrence-editor/recurrence-editor';import * as events from '../base/constant';import * as cls from '../base/css-constant';import * as util from '../base/util';import { ToolbarItem } from '../models/toolbar';
+import { Component, ModuleDeclaration, Property, Event, Animation, Collection, append } from '@syncfusion/ej2-base';import { EventHandler, EmitType, Browser, Internationalization, getDefaultDateObject, cldrData, L10n } from '@syncfusion/ej2-base';import { getValue, compile, extend, isNullOrUndefined, NotifyPropertyChanges, INotifyPropertyChanged, Complex } from '@syncfusion/ej2-base';import { getElement, removeClass, addClass, classList, remove, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';import { HeaderRenderer } from '../renderer/header-renderer';import { Scroll } from '../actions/scroll';import { ScheduleTouch } from '../actions/touch';import { KeyboardInteraction } from '../actions/keyboard';import { Data } from '../actions/data';import { View, CurrentAction, ReturnType, WeekRule, NavigationDirection } from '../base/type';import { EventBase } from '../event-renderer/event-base';import { InlineEdit } from '../event-renderer/inline-edit';import { QuickPopups } from '../popups/quick-popups';import { EventTooltip } from '../popups/event-tooltip';import { EventWindow } from '../popups/event-window';import { Render } from '../renderer/renderer';import { Day } from '../renderer/day';import { Week } from '../renderer/week';import { WorkWeek } from '../renderer/work-week';import { Month } from '../renderer/month';import { Year } from '../renderer/year';import { Agenda } from '../renderer/agenda';import { MonthAgenda } from '../renderer/month-agenda';import { TimelineViews } from '../renderer/timeline-view';import { TimelineMonth } from '../renderer/timeline-month';import { TimelineYear } from '../renderer/timeline-year';import { WorkHours } from '../models/work-hours';import { TimeScale } from '../models/time-scale';import { QuickInfoTemplates } from '../models/quick-info-templates';import { HeaderRows } from '../models/header-rows';import { Crud } from '../actions/crud';import { Resize } from '../actions/resize';import { DragAndDrop } from '../actions/drag';import { VirtualScroll } from '../actions/virtual-scroll';import { WorkCellInteraction } from '../actions/work-cells';import { WorkHoursModel, ViewsModel, EventSettingsModel, GroupModel, ResourcesModel, TimeScaleModel, ToolbarItemModel } from '../models/models';import { QuickInfoTemplatesModel, HeaderRowsModel } from '../models/models';import { EventSettings } from '../models/event-settings';import { Group } from '../models/group';import { Resources } from '../models/resources';import { ICalendarExport } from '../exports/calendar-export';import { ICalendarImport } from '../exports/calendar-import';import { ExcelExport } from '../exports/excel-export';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, StateArgs, ExportOptions, SelectEventArgs } from '../base/interface';import { ViewsData, PopupCloseEventArgs, HoverEventArgs, MoreEventsClickArgs, ScrollEventArgs, CallbackFunction } from '../base/interface';import { CalendarUtil, Gregorian, Islamic, CalendarType } from '../../common/calendar-util';import { ResourceBase } from '../base/resource';import { Timezone, timezoneData } from '../timezone/timezone';import { RecurrenceEditor } from '../../recurrence-editor/recurrence-editor';import * as events from '../base/constant';import * as cls from '../base/css-constant';import * as util from '../base/util';import { ToolbarItem } from '../models/toolbar';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -657,6 +657,15 @@ export interface ScheduleModel extends ComponentModel{
      */
     cssClass?: string;
 
+    /**
+     * Enables clipboard functionality for appointments, allowing them to be copied using keyboard shortcuts and pasted onto the Scheduler.
+     * When set to `true`, users can use keyboard shortcuts to cut, copy appointments and paste them into different time slots or calendars.
+     *
+     * @default false
+     * @remarks The `allowKeyboardInteraction` property should be enabled to use the keyboard shortcuts.
+     */
+    allowClipboard?: boolean;
+
     /**
      * It enables the external drag and drop support for appointments on scheduler, to be able to move them out of the scheduler layout.
      * When the drag area is explicitly set with specific DOM element name, the appointments can be dragged anywhere within the specified drag area location.
@@ -858,4 +867,11 @@ export interface ScheduleModel extends ComponentModel{
      */
     dataBound?: EmitType<ReturnType>;
 
+    /**
+     * Triggers once when pasting an event on the scheduler.
+     *
+     * @event 'beforePaste'
+     */
+    beforePaste?: EmitType<ReturnType>;
+
 }

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

@@ -7,7 +7,7 @@ import { Scroll } from '../actions/scroll';
 import { ScheduleTouch } from '../actions/touch';
 import { KeyboardInteraction } from '../actions/keyboard';
 import { Data } from '../actions/data';
-import { View, CurrentAction, ReturnType, WeekRule } from '../base/type';
+import { View, CurrentAction, ReturnType, WeekRule, NavigationDirection } from '../base/type';
 import { EventBase } from '../event-renderer/event-base';
 import { InlineEdit } from '../event-renderer/inline-edit';
 import { QuickPopups } from '../popups/quick-popups';
@@ -730,6 +730,14 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @default null
      */
     cssClass: string;
+    /**
+     * Enables clipboard functionality for appointments, allowing them to be copied using keyboard shortcuts and pasted onto the Scheduler.
+     * When set to `true`, users can use keyboard shortcuts to cut, copy appointments and paste them into different time slots or calendars.
+     *
+     * @default false
+     * @remarks The `allowKeyboardInteraction` property should be enabled to use the keyboard shortcuts.
+     */
+    allowClipboard: boolean;
     /**
      * It enables the external drag and drop support for appointments on scheduler, to be able to move them out of the scheduler layout.
      * When the drag area is explicitly set with specific DOM element name, the appointments can be dragged anywhere within the specified drag area location.
@@ -903,6 +911,12 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @event 'dataBound'
      */
     dataBound: EmitType<ReturnType>;
+    /**
+     * Triggers once when pasting an event on the scheduler.
+     *
+     * @event 'beforePaste'
+     */
+    beforePaste: EmitType<ReturnType>;
     /**
      * Constructor for creating the Schedule widget
      *
@@ -1332,6 +1346,7 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      */
     getStartEndTime(startEndTime: string): Date;
     private onDocumentClick;
+    private onDocumentPaste;
     private onScheduleResize;
     /**
      * Method to process the templates
@@ -1748,6 +1763,28 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @returns {boolean} Returns true, if the slot that lies in the provided time range does not contain any other events.
      */
     isSlotAvailable(startTime: Date | Record<string, any>, endTime?: Date, groupIndex?: number): boolean;
+    /**
+     * 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: HTMLElement[]): void;
+    /**
+     * 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: HTMLElement[]): void;
+    /**
+     * Method to create a paste event with clipboard data
+     *
+     * @param { HTMLElement } targetElement Accepts HTMLElement
+     * @returns {void}
+     */
+    paste(targetElement: HTMLElement): void;
+    private processCutCopyActions;
     /**
      * To manually open the event editor on specific time or on certain events.
      *
@@ -1793,6 +1830,35 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @returns {void}
      */
     closeTooltip(): void;
+    /**
+     * 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: Date[]): string;
+    /**
+     * 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?: NavigationDirection): Date[];
     /**
      * Select the resource based on group index in mobile mode.
      *

package/src/schedule/base/schedule.js

@@ -880,6 +880,9 @@ var Schedule = /** @class */ (function (_super) {
         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
@@ -1255,6 +1258,9 @@ var Schedule = /** @class */ (function (_super) {
     Schedule.prototype.onDocumentClick = function (args) {
         this.notify(events.documentClick, { event: args });
     };
+    Schedule.prototype.onDocumentPaste = function (args) {
+        this.notify(events.documentPaste, { event: args });
+    };
     Schedule.prototype.onScheduleResize = function () {
         if (isNullOrUndefined(this.activeView) || ((this.isAdaptive || util.isMobile()) && document.activeElement
             && (document.activeElement.classList.contains(cls.SUBJECT_CLASS) ||
@@ -1452,6 +1458,7 @@ var Schedule = /** @class */ (function (_super) {
         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.
@@ -1687,11 +1694,12 @@ var Schedule = /** @class */ (function (_super) {
                 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;
@@ -2618,6 +2626,76 @@ var Schedule = /** @class */ (function (_super) {
         }
         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.
+     */
+    Schedule.prototype.copy = function (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.
+     */
+    Schedule.prototype.cut = function (elements) {
+        this.processCutCopyActions(elements, true);
+    };
+    /**
+     * Method to create a paste event with clipboard data
+     *
+     * @param { HTMLElement } targetElement Accepts HTMLElement
+     * @returns {void}
+     */
+    Schedule.prototype.paste = function (targetElement) {
+        var _this = this;
+        if (!this.allowClipboard || !this.allowKeyboardInteraction) {
+            return;
+        }
+        if (!targetElement.classList.contains('e-work-cells') && !targetElement.classList.contains('e-all-day-cells')) {
+            return;
+        }
+        var clipboardData = new DataTransfer();
+        if (!isNullOrUndefined(navigator.clipboard)) {
+            navigator.clipboard.readText()
+                .then(function (text) {
+                clipboardData.setData('text/plain', text);
+                var pasteEvent = new ClipboardEvent('paste', {
+                    bubbles: true,
+                    cancelable: true
+                });
+                Object.defineProperty(pasteEvent, 'clipboardData', {
+                    value: clipboardData
+                });
+                _this.keyboardInteractionModule.pasteHandler(pasteEvent, targetElement);
+            })
+                .catch(function (err) {
+                throw err;
+            });
+        }
+    };
+    Schedule.prototype.processCutCopyActions = function (elements, isCut) {
+        var _this = this;
+        if (!elements || !this.allowClipboard || !this.allowKeyboardInteraction) {
+            return;
+        }
+        var elementArray = elements;
+        var eventDetailsArray = [];
+        elementArray.forEach(function (element) {
+            if (element.classList.contains(cls.APPOINTMENT_CLASS)) {
+                var 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.
      *
@@ -2750,6 +2828,52 @@ var Schedule = /** @class */ (function (_super) {
             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.
+     */
+    Schedule.prototype.getDateRangeText = function (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.
+     */
+    Schedule.prototype.getViewDates = function (type) {
+        if (type === void 0) { 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.
      *
@@ -3054,6 +3178,9 @@ var Schedule = /** @class */ (function (_super) {
     __decorate([
         Property()
     ], Schedule.prototype, "cssClass", void 0);
+    __decorate([
+        Property(false)
+    ], Schedule.prototype, "allowClipboard", void 0);
     __decorate([
         Property()
     ], Schedule.prototype, "eventDragArea", void 0);
@@ -3138,6 +3265,9 @@ var Schedule = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], Schedule.prototype, "dataBound", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "beforePaste", void 0);
     Schedule = __decorate([
         NotifyPropertyChanges
     ], Schedule);

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

@@ -123,3 +123,11 @@ export declare type SpannedEventPlacement = 'AllDayRow' | 'TimeSlot';
  * ```
  */
 export declare type ToolbarName = 'Custom' | 'Previous' | 'Next' | 'Today' | 'Views' | 'DateRangeText' | 'NewEvent';
+/**
+ * An enum that defines the possible directions for a date collection.
+ *
+ * - **Previous:** Denotes the previous date collection.
+ * - **Next:** Denotes the next date collection.
+ * - **Current:** Denotes the current date collection.
+ */
+export declare type NavigationDirection = 'Previous' | 'Next' | 'Current';

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

@@ -122,7 +122,8 @@ export interface EventSettingsModel {
     allowDeleting?: boolean;
 
     /**
-     * It enables the event to occupy the full height of the cell without the header of the cell.
+     * It enables the event to occupy the full height in timeline views and
+     * full width in vertical views, excluding the header of the cell.
      *
      * @default false
      */

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

@@ -111,7 +111,8 @@ export declare class EventSettings extends ChildProperty<EventSettings> {
      */
     allowDeleting: boolean;
     /**
-     * It enables the event to occupy the full height of the cell without the header of the cell.
+     * It enables the event to occupy the full height in timeline views and
+     * full width in vertical views, excluding the header of the cell.
      *
      * @default false
      */

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

@@ -36,6 +36,10 @@ var EventTooltip = /** @class */ (function () {
         return targets.join(',');
     };
     EventTooltip.prototype.onBeforeRender = function (args) {
+        if (this.parent.uiStateValues.isSwipeScroll) {
+            args.cancel = true;
+            return;
+        }
         if (!isNullOrUndefined(args.target.getAttribute('data-tooltip-id'))) {
             return;
         }

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

@@ -1,6 +1,7 @@
 import { IRenderer } from '../base/interface';
 import { AgendaBase } from '../event-renderer/agenda-base';
 import { Schedule } from '../base/schedule';
+import { NavigationDirection } from '../base/type';
 /**
  * agenda view
  */
@@ -29,7 +30,7 @@ export declare class Agenda extends AgendaBase implements IRenderer {
     private appointmentFiltering;
     getStartDateFromEndDate(endDate: Date): Date;
     getEndDateFromStartDate(startDate: Date): Date;
-    getNextPreviousDate(type: string): Date;
+    getNextPreviousDate(type: NavigationDirection): Date;
     startDate(): Date;
     endDate(): Date;
     getDateRangeText(date?: Date): string;

package/src/schedule/renderer/agenda.js

@@ -400,7 +400,7 @@ var Agenda = /** @class */ (function (_super) {
         return util.resetTime(util.addDays(filterDate, 1));
     };
     Agenda.prototype.getNextPreviousDate = function (type) {
-        var noOfDays = (type === 'next') ? 1 : -1;
+        var noOfDays = (type === 'Next') ? 1 : -1;
         return util.addDays(this.parent.selectedDate, noOfDays);
     };
     Agenda.prototype.startDate = function () {

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

@@ -481,6 +481,8 @@ var HeaderRenderer = /** @class */ (function () {
             targetType: 'relative',
             relateTo: this.getPopUpRelativeElement(),
             position: { X: 'left', Y: 'bottom' },
+            collision: { X: 'fit' },
+            viewPortElement: this.element,
             enableRtl: this.parent.enableRtl
         });
         var calendarView = this.getCalendarView();
@@ -592,10 +594,10 @@ var HeaderRenderer = /** @class */ (function () {
                 }
                 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();

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

@@ -2,6 +2,7 @@ import { CellClickEventArgs, NotifyEventArgs, TdData } from '../base/interface';
 import { AgendaBase } from '../event-renderer/agenda-base';
 import { Schedule } from '../base/schedule';
 import { Month } from './month';
+import { NavigationDirection } from '../base/type';
 /**
  * month agenda view
  */
@@ -22,7 +23,7 @@ export declare class MonthAgenda extends Month {
     private appointmentFiltering;
     private clearElements;
     private appendAppContainer;
-    getNextPreviousDate(type: string): Date;
+    getNextPreviousDate(type: NavigationDirection): Date;
     private getAgendaBase;
     destroy(): void;
 }

package/src/schedule/renderer/month-agenda.js

@@ -160,9 +160,9 @@ var MonthAgenda = /** @class */ (function (_super) {
     };
     MonthAgenda.prototype.getNextPreviousDate = function (type) {
         var selectedDate = this.parent.selectedDate;
-        var interval = (type === 'next') ? this.parent.activeViewOptions.interval : -this.parent.activeViewOptions.interval;
+        var interval = (type === 'Next') ? this.parent.activeViewOptions.interval : -this.parent.activeViewOptions.interval;
         var navigateDate = util.addMonths(this.parent.selectedDate, interval);
-        var month = (type === 'next') ? 2 : 0;
+        var month = (type === 'Next') ? 2 : 0;
         var lastDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + month, 0).getDate();
         var date = (lastDate >= this.monthAgendaDate.getDate()) ? this.monthAgendaDate.getDate() : lastDate;
         this.monthAgendaDate = new Date(navigateDate.getFullYear(), navigateDate.getMonth(), date);

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

@@ -1,6 +1,7 @@
 import { IRenderer, TdData, NotifyEventArgs, CellClickEventArgs } from '../base/interface';
 import { Schedule } from '../base/schedule';
 import { ViewBase } from './view-base';
+import { NavigationDirection } from '../base/type';
 /**
  * month view
  */
@@ -45,12 +46,12 @@ export declare class Month extends ViewBase implements IRenderer {
     getMonthStart(currentDate: Date): Date;
     getMonthEnd(currentDate: Date): Date;
     private isCustomRange;
-    getRenderDates(workDays?: number[]): Date[];
-    getNextPreviousDate(type: string): Date;
+    getRenderDates(workDays?: number[], selectedDate?: Date): Date[];
+    getNextPreviousDate(type: NavigationDirection): Date;
     getStartDate(): Date;
     getEndDate(): Date;
     getEndDateFromStartDate(start: Date): Date;
-    getDateRangeText(): string;
+    getDateRangeText(startDate?: Date, dateCollection?: Date[]): string;
     getLabelText(view: string): string;
     private createWeekNumberElement;
     unWireEvents(): void;

package/src/schedule/renderer/month.js

@@ -593,9 +593,10 @@ var Month = /** @class */ (function (_super) {
         }
         return false;
     };
-    Month.prototype.getRenderDates = function (workDays) {
+    Month.prototype.getRenderDates = function (workDays, selectedDate) {
+        if (selectedDate === void 0) { selectedDate = this.parent.selectedDate; }
         var renderDates = [];
-        var currentDate = util.resetTime(this.parent.selectedDate);
+        var currentDate = util.resetTime(selectedDate);
         var start = this.getMonthStart(currentDate);
         var monthEnd = this.getMonthEnd(currentDate);
         do {
@@ -623,13 +624,13 @@ var Month = /** @class */ (function (_super) {
     Month.prototype.getNextPreviousDate = function (type) {
         if (this.isCustomMonth()) {
             var dates = this.parent.getCurrentViewDates();
-            var date = util.getWeekFirstDate(type === 'next' ? dates[dates.length - 1]
+            var date = util.getWeekFirstDate(type === 'Next' ? dates[dates.length - 1]
                 : dates[0], this.parent.activeViewOptions.firstDayOfWeek);
-            return util.addDays(date, type === 'next' ? util.WEEK_LENGTH : -(this.parent.activeViewOptions.numberOfWeeks > 0 ?
+            return util.addDays(date, type === 'Next' ? util.WEEK_LENGTH : -(this.parent.activeViewOptions.numberOfWeeks > 0 ?
                 this.parent.activeViewOptions.numberOfWeeks : util.DEFAULT_WEEKS) * util.WEEK_LENGTH);
         }
         else {
-            return util.addMonths(this.parent.selectedDate, ((type === 'next' ? 1 : -1) * this.parent.activeViewOptions.interval));
+            return util.addMonths(this.parent.selectedDate, ((type === 'Next' ? 1 : -1) * this.parent.activeViewOptions.interval));
         }
     };
     Month.prototype.getStartDate = function () {
@@ -641,13 +642,18 @@ var Month = /** @class */ (function (_super) {
     Month.prototype.getEndDateFromStartDate = function (start) {
         return util.addDays(new Date(start.getTime()), 1);
     };
-    Month.prototype.getDateRangeText = function () {
+    Month.prototype.getDateRangeText = function (startDate, dateCollection) {
+        if (startDate === void 0) { startDate = this.parent.selectedDate; }
+        if (dateCollection === void 0) { dateCollection = null; }
         if (this.parent.isAdaptive || isNullOrUndefined(this.parent.activeViewOptions.dateFormat)) {
-            var startDate = this.parent.selectedDate;
+            var maxNumberOfDaysPerWeek = 7;
+            startDate = !isNullOrUndefined(dateCollection) && dateCollection.length > maxNumberOfDaysPerWeek - 1
+                ? dateCollection[maxNumberOfDaysPerWeek - 1] : startDate;
             var endDate = void 0;
             var updateCustomRange = false;
             if (this.isCustomMonth()) {
-                var dates = this.parent.getCurrentViewDates();
+                var 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) {
@@ -673,7 +679,8 @@ var Month = /** @class */ (function (_super) {
             var format = (this.parent.activeViewOptions.dateFormat) ? this.parent.activeViewOptions.dateFormat : 'MMMM y';
             return util.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);
     };
     Month.prototype.getLabelText = function (view) {
         var viewStr = view.charAt(0).toLowerCase() + view.substring(1);

package/src/schedule/renderer/timeline-view.js

@@ -151,8 +151,13 @@ var TimelineViews = /** @class */ (function (_super) {
     };
     TimelineViews.prototype.getLeftFromDateTime = function (currentDateIndex, date) {
         var startHour = this.getStartHour();
+        var endHour = this.getEndHour();
         var diffInDates = 0;
         var diffInMinutes = ((date.getHours() - startHour.getHours()) * 60) + (date.getMinutes() - startHour.getMinutes());
+        var hoursRange = util.getStartEndHours(util.resetTime(new Date(date.getTime())), startHour, endHour);
+        var interval = this.parent.activeViewOptions.timeScale.slotCount !== 1 ?
+            this.parent.activeViewOptions.timeScale.interval :
+            (hoursRange.endHour.getTime() - hoursRange.startHour.getTime()) / util.MS_PER_MINUTE;
         if (!isNullOrUndefined(currentDateIndex)) {
             if (currentDateIndex[0] !== 0) {
                 var index = this.parent.activeView.colLevels.findIndex(function (level) { return level[0].type === 'dateHeader'; });
@@ -162,15 +167,15 @@ var TimelineViews = /** @class */ (function (_super) {
                         this.parent.getElementWidth(this.element.querySelector('.e-work-cells'));
                 }
                 else {
-                    var endHour = this.getEndHour();
-                    var end = (endHour.getHours() === 0) ? 24 : endHour.getHours();
+                    var endHour_1 = this.getEndHour();
+                    var end = (endHour_1.getHours() === 0) ? 24 : endHour_1.getHours();
                     diffInMinutes = diffInMinutes + ((currentDateIndex[0]) * (((end - startHour.getHours()) * 60) +
-                        (endHour.getMinutes() - startHour.getMinutes())));
+                        (endHour_1.getMinutes() - startHour.getMinutes())));
                 }
             }
         }
         return diffInDates + ((diffInMinutes * this.parent.getElementWidth(this.element.querySelector('.e-work-cells'))
-            * this.parent.activeViewOptions.timeScale.slotCount) / this.parent.activeViewOptions.timeScale.interval);
+            * this.parent.activeViewOptions.timeScale.slotCount) / interval);
     };
     TimelineViews.prototype.renderHeader = function () {
         var tr = createElement('tr');

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

@@ -370,9 +370,13 @@ var VerticalView = /** @class */ (function (_super) {
     };
     VerticalView.prototype.getTopFromDateTime = function (date) {
         var startHour = this.getStartEndHours(this.parent.activeViewOptions.startHour);
+        var endHour = this.getStartEndHours(this.parent.activeViewOptions.endHour);
         var diffInMinutes = ((date.getHours() - startHour.getHours()) * 60) + (date.getMinutes() - startHour.getMinutes());
-        return (diffInMinutes * this.getWorkCellHeight() * this.parent.activeViewOptions.timeScale.slotCount) /
-            this.parent.activeViewOptions.timeScale.interval;
+        var hoursRange = util.getStartEndHours(util.resetTime(new Date(date.getTime())), startHour, endHour);
+        var interval = this.parent.activeViewOptions.timeScale.slotCount !== 1 ?
+            this.parent.activeViewOptions.timeScale.interval :
+            (hoursRange.endHour.getTime() - hoursRange.startHour.getTime()) / util.MS_PER_MINUTE;
+        return (diffInMinutes * this.getWorkCellHeight() * this.parent.activeViewOptions.timeScale.slotCount) / interval;
     };
     VerticalView.prototype.getWorkCellHeight = function () {
         return parseFloat(this.parent.getElementHeight(this.element.querySelector('.' + cls.WORK_CELLS_CLASS)).toFixed(2));

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

@@ -1,10 +1,11 @@
 import { Schedule } from '../base/schedule';
 import { TdData } from '../base/interface';
+import { NavigationDirection } from '../base/type';
 /**
  * view base
  */
 export declare class ViewBase {
-    previousNextAction: string;
+    previousNextAction: NavigationDirection;
     element: HTMLElement;
     parent: Schedule;
     renderDates: Date[];
@@ -53,11 +54,11 @@ export declare class ViewBase {
     isCurrentMonth(date: Date): boolean;
     isWorkDay(date: Date, workDays?: number[]): boolean;
     isWorkHour(date: Date, startHour: Date, endHour: Date, workDays: number[]): boolean;
-    getRenderDates(workDays?: number[]): Date[];
-    getNextPreviousDate(type: string): Date;
+    getRenderDates(workDays?: number[], date?: Date): Date[];
+    getNextPreviousDate(type: NavigationDirection): Date;
     formatViewLabel(view: string, startDate: Date, endDate: Date): string;
     getLabelText(view: string): string;
-    getDateRangeText(): string;
+    getDateRangeText(date?: Date, dateCollection?: Date[]): string;
     formatDateRange(startDate: Date, endDate?: Date): string;
     getMobileDateElement(date: Date, className?: string): Element;
     setResourceHeaderContent(tdElement: Element, tdData: TdData, className?: string): void;