@syncfusion/ej2-schedule 23.2.4 → 24.1.41

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.2.4
+*  version : 24.1.41
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-schedule@*",
-  "_id": "@syncfusion/ej2-schedule@23.1.44",
+  "_id": "@syncfusion/ej2-schedule@22.7.2",
   "_inBundle": false,
-  "_integrity": "sha512-PthK0cIsxjGcDi1aGMvz5/KdydIBkhe815WmhpEXOW9Ly5ch5PFEKHtuVAeQ1ywevatpEv+7Z8iz30n9lv3lXg==",
+  "_integrity": "sha512-6umy02AOCRz04/IKB4d9pTm+yCNx0DQiLvlcPieh3rYci5cmuJHqp4st2pigQpe/rlT74gjcYEDXca1wVqBSjw==",
   "_location": "/@syncfusion/ej2-schedule",
   "_phantomChildren": {},
   "_requested": {
@@ -23,10 +23,10 @@
     "/@syncfusion/ej2-react-schedule",
     "/@syncfusion/ej2-vue-schedule"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-schedule/-/ej2-schedule-23.1.44.tgz",
-  "_shasum": "878cfb0462f5d587e27452d1345e8e30adf10f3d",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-schedule/-/ej2-schedule-22.7.2.tgz",
+  "_shasum": "8ad4c574b33d4ce48d3d3e3f87060fb1fd4badd7",
   "_spec": "@syncfusion/ej2-schedule@*",
-  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -35,16 +35,16 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.2.4",
-    "@syncfusion/ej2-buttons": "~23.2.4",
-    "@syncfusion/ej2-calendars": "~23.2.4",
-    "@syncfusion/ej2-data": "~23.2.4",
-    "@syncfusion/ej2-dropdowns": "~23.2.4",
-    "@syncfusion/ej2-excel-export": "~23.2.4",
-    "@syncfusion/ej2-inputs": "~23.2.4",
-    "@syncfusion/ej2-lists": "~23.2.4",
-    "@syncfusion/ej2-navigations": "~23.2.4",
-    "@syncfusion/ej2-popups": "~23.2.4"
+    "@syncfusion/ej2-base": "~24.1.41",
+    "@syncfusion/ej2-buttons": "~24.1.41",
+    "@syncfusion/ej2-calendars": "~24.1.41",
+    "@syncfusion/ej2-data": "~24.1.41",
+    "@syncfusion/ej2-dropdowns": "~24.1.41",
+    "@syncfusion/ej2-excel-export": "~24.1.41",
+    "@syncfusion/ej2-inputs": "~24.1.41",
+    "@syncfusion/ej2-lists": "~24.1.41",
+    "@syncfusion/ej2-navigations": "~24.1.41",
+    "@syncfusion/ej2-popups": "~24.1.41"
   },
   "deprecated": false,
   "description": "Flexible scheduling library with more built-in features and enhanced customization options similar to outlook and google calendar, allowing the users to plan and manage their appointments with efficient data-binding support.",
@@ -73,6 +73,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "23.2.4",
+  "version": "24.1.41",
   "sideEffects": false
 }

package/src/recurrence-editor/recurrence-editor.js

@@ -374,6 +374,8 @@ var RecurrenceEditor = /** @class */ (function (_super) {
         this.endType = new DropDownList({
             dataSource: this.getEndData(),
             popupWidth: this.getPopupWidth(),
+            floatLabelType: 'Always',
+            placeholder: this.localeObj.getConstant(END),
             enableRtl: this.enableRtl,
             index: 1,
             fields: {
@@ -714,6 +716,7 @@ var RecurrenceEditor = /** @class */ (function (_super) {
     RecurrenceEditor.prototype.setTemplate = function () {
         var dayData = this.getDayData('narrow');
         var fullDay = this.getDayData('wide');
+        var labelId = this.element.id + '_' + 'end_label';
         this.element.innerHTML = '<div class="' + HEADER + '">' +
             '<div class="' + INPUTWARAPPER + ' ' + FORMLEFT + '">' +
             '<input type="text" tabindex="0" class="' + REPEATELEMENT +
@@ -759,9 +762,8 @@ var RecurrenceEditor = /** @class */ (function (_super) {
             '</div></td></tr></table>' +
             '</div></div>' +
             '<div class="' + INPUTWARAPPERSIDE + ' ' + ENDON + ' ' + FORMRIGHT + '">' +
-            '<div class=' + ENDONLABEL + '>' + this.localeObj.getConstant(END) + '</div>' +
             '<div class="' + INPUTWARAPPER + ' ' + ENDONLEFT + '">' +
-            '<input type="text" tabindex="0" class="' + ENDONELEMENT + '"title="' + this.localeObj.getConstant(END) + '" />' +
+            '<input type="text" tabindex="0" class="' + ENDONELEMENT + '" aria-labelledby="' + labelId + '"title="' + this.localeObj.getConstant(END) + '" />' +
             '</div>' +
             '<div class="' + INPUTWARAPPER + ' ' + ENDONDATE + '" >' +
             '<input type="text" tabindex="0" class="' + UNTILDATE + '"title="' + this.localeObj.getConstant(UNTIL) + '" />' +

package/src/schedule/actions/drag.js

@@ -560,7 +560,7 @@ var DragAndDrop = /** @class */ (function (_super) {
         var _this = this;
         if (isNullOrUndefined(this.actionObj.target) ||
             (this.actionObj.target && isNullOrUndefined(closest(this.actionObj.target, 'tr'))) ||
-            (!(closest(this.actionObj.target, 'td').classList.contains(cls.WORK_CELLS_CLASS)) &&
+            (!isNullOrUndefined(closest(this.actionObj.target, 'td')) && !(closest(this.actionObj.target, 'td').classList.contains(cls.WORK_CELLS_CLASS)) &&
                 !(closest(this.actionObj.target, 'td').classList.contains(cls.ALLDAY_CELLS_CLASS)))) {
             return;
         }
@@ -597,8 +597,8 @@ var DragAndDrop = /** @class */ (function (_super) {
             tr = trCollections[parseInt(rowIndex.toString(), 10)];
         }
         var index;
-        if (closest(this.actionObj.target, 'td').classList.contains(cls.WORK_CELLS_CLASS) ||
-            closest(this.actionObj.target, 'td').classList.contains(cls.ALLDAY_CELLS_CLASS)) {
+        if (!isNullOrUndefined(closest(this.actionObj.target, 'td')) && (closest(this.actionObj.target, 'td').classList.contains(cls.WORK_CELLS_CLASS) ||
+            closest(this.actionObj.target, 'td').classList.contains(cls.ALLDAY_CELLS_CLASS))) {
             index = closest(this.actionObj.target, 'td').cellIndex;
         }
         var colIndex = isNullOrUndefined(index) ? closest(this.actionObj.clone, 'td').cellIndex : index;
@@ -899,7 +899,7 @@ var DragAndDrop = /** @class */ (function (_super) {
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     DragAndDrop.prototype.swapDragging = function (e) {
-        var colIndex = closest(this.actionObj.target, 'td').cellIndex;
+        var colIndex = !isNullOrUndefined(closest(this.actionObj.target, 'td')) && closest(this.actionObj.target, 'td').cellIndex;
         if (closest(this.actionObj.target, '.' + cls.DATE_HEADER_WRAP_CLASS) &&
             !closest(this.actionObj.clone, '.' + cls.ALLDAY_APPOINTMENT_WRAPPER_CLASS)) {
             addClass([this.actionObj.clone], cls.ALLDAY_APPOINTMENT_CLASS);

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 } 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 { 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 {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -54,6 +54,20 @@ export interface ScheduleModel extends ComponentModel{
      */
     allowSwiping?: boolean;
 
+    /**
+    * To render the custom toolbar items, the `toolbarItems` property can be used. It contains built-in and custom toolbar items.
+    * To avail the built-in toolbar items, the below string values are assigned to the `name` property of the `ToolbarItemModel`.
+    * * `Previous`: Schedule component navigates to the previous date from the current date.
+    * * `Next`: Schedule component navigates to the next date from the current date.
+    * * `Today`: Schedule component navigates to the current date from any date.
+    * * `Views`: Schedule component render the defined view options in the toolbar. If view option is not defined, then it will render default view options in the Schedule.
+    * * `DateRangeText`: Schedule component displays the current date text range.
+    * * `NewEvent`: Schedule component render the icon to add a new event.
+    *
+    * @default []
+    */
+    toolbarItems?: ToolbarItemModel[]
+
     /**
      * To set the active view on scheduler, the `currentView` property can be used and it usually accepts either of the following available
      *  view options. The view option specified in this property will be initially loaded on the schedule.

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

@@ -29,7 +29,7 @@ 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 } from '../models/models';
+import { WorkHoursModel, ViewsModel, EventSettingsModel, GroupModel, ResourcesModel, TimeScaleModel, ToolbarItemModel } from '../models/models';
 import { QuickInfoTemplatesModel, HeaderRowsModel } from '../models/models';
 import { ICalendarExport } from '../exports/calendar-export';
 import { ICalendarImport } from '../exports/calendar-import';
@@ -180,6 +180,19 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @default true
      */
     allowSwiping: boolean;
+    /**
+    * To render the custom toolbar items, the `toolbarItems` property can be used. It contains built-in and custom toolbar items.
+    * To avail the built-in toolbar items, the below string values are assigned to the `name` property of the `ToolbarItemModel`.
+    * * `Previous`: Schedule component navigates to the previous date from the current date.
+    * * `Next`: Schedule component navigates to the next date from the current date.
+    * * `Today`: Schedule component navigates to the current date from any date.
+    * * `Views`: Schedule component render the defined view options in the toolbar. If view option is not defined, then it will render default view options in the Schedule.
+    * * `DateRangeText`: Schedule component displays the current date text range.
+    * * `NewEvent`: Schedule component render the icon to add a new event.
+    *
+    * @default []
+    */
+    toolbarItems: ToolbarItemModel[];
     /**
      * To set the active view on scheduler, the `currentView` property can be used and it usually accepts either of the following available
      *  view options. The view option specified in this property will be initially loaded on the schedule.

package/src/schedule/base/schedule.js

@@ -49,6 +49,7 @@ import { Timezone, timezoneData } from '../timezone/timezone';
 import * as events from '../base/constant';
 import * as cls from '../base/css-constant';
 import * as util from '../base/util';
+import { ToolbarItem } from '../models/toolbar';
 /**
  * Represents the Schedule component that displays a list of events scheduled against specific date and timings,
  * thus helping us to plan and manage it properly.
@@ -1435,6 +1436,7 @@ var Schedule = /** @class */ (function (_super) {
                     }
                     break;
                 case 'showHeaderBar':
+                case 'toolbarItems':
                     this.destroyHeaderModule();
                     if (newProp.showHeaderBar) {
                         this.headerModule = new HeaderRenderer(this);
@@ -2786,6 +2788,9 @@ var Schedule = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], Schedule.prototype, "allowSwiping", void 0);
+    __decorate([
+        Collection([], ToolbarItem)
+    ], Schedule.prototype, "toolbarItems", void 0);
     __decorate([
         Property('Week')
     ], Schedule.prototype, "currentView", void 0);

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

@@ -110,3 +110,15 @@ export declare type WeekRule = 'FirstDay' | 'FirstFourDayWeek' | 'FirstFullWeek'
  * ```
  */
 export declare type SpannedEventPlacement = 'AllDayRow' | 'TimeSlot';
+/**
+ * An enum that holds the options to define name of the toolbar items to access default toolbar items in the Scheduler.
+ * ```props
+ * Previous :- Denotes the previous date navigation button in the Schedule toolbar.
+ * Next :- Denotes the next date navigation button in the Schedule toolbar.
+ * Today :- Denotes the today button in the Schedule toolbar.
+ * Views :- Denotes the view-switching in the Schedule toolbar.
+ * DateRangeText :- Denotes the date range text in the Schedule toolbar.
+ * NewEvent :- Denotes the new event button in the Schedule toolbar.
+ * ```
+ */
+export declare type ToolbarName = 'Custom' | 'Previous' | 'Next' | 'Today' | 'Views' | 'DateRangeText' | 'NewEvent';

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

@@ -272,7 +272,7 @@ var AgendaBase = /** @class */ (function (_super) {
     AgendaBase.prototype.createResourceTableRow = function (tContent, tBody) {
         var tr = createElement('tr');
         var ntr;
-        var td = createElement('td', { attrs: { 'aria-selected': 'false' } });
+        var td = createElement('td');
         var tempData;
         var rowSpan = 0;
         var level;

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

@@ -88,6 +88,7 @@ export declare class EventBase {
     createEventWrapper(type?: string, index?: number): HTMLElement;
     getPageCoordinates(e: MouseEvent & TouchEvent): (MouseEvent & TouchEvent) | Touch;
     renderSpannedIcon(element: HTMLElement, spanEvent: Record<string, any>): void;
+    addCellHeight(selector: string, eventHeight: number, eventGap: number, headerHeight: number, indHeight: number, isScrollUpdate?: boolean): void;
     private unWireEvents;
     destroy(): void;
 }

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable max-len */
-import { isNullOrUndefined, closest, extend, EventHandler } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, closest, extend, EventHandler, setStyleAttribute } from '@syncfusion/ej2-base';
 import { createElement, prepend, append, addClass, removeClass } from '@syncfusion/ej2-base';
 import { DataManager, Query, Predicate } from '@syncfusion/ej2-data';
 import { generate, getDateFromRecurrenceDateString } from '../../recurrence-editor/date-generator';
@@ -175,6 +175,9 @@ var EventBase = /** @class */ (function () {
     EventBase.prototype.processTimezone = function (event, isReverse) {
         if (isReverse === void 0) { isReverse = false; }
         var fields = this.parent.eventFields;
+        if (event[fields.isAllDay]) {
+            return event;
+        }
         if (event[fields.startTimezone] || event[fields.endTimezone]) {
             var startTimezone = event[fields.startTimezone] || event[fields.endTimezone];
             var endTimezone = event[fields.endTimezone] || event[fields.startTimezone];
@@ -1330,6 +1333,27 @@ var EventBase = /** @class */ (function () {
             append([iconBottom], element);
         }
     };
+    EventBase.prototype.addCellHeight = function (selector, eventHeight, eventGap, headerHeight, indHeight, isScrollUpdate) {
+        if (isScrollUpdate === void 0) { isScrollUpdate = true; }
+        if (this.parent.activeViewOptions.maxEventsPerRow && !this.parent.rowAutoHeight) {
+            var rows = [].slice.call(this.parent.element.querySelectorAll(selector));
+            var weekNumberRows = this.parent.showWeekNumber
+                ? [].slice.call(this.parent.element.querySelectorAll('.' + cls.WEEK_NUMBER_WRAPPER_CLASS + ' tbody tr'))
+                : [];
+            for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {
+                var row = rows_1[_i];
+                var height = (this.parent.activeViewOptions.maxEventsPerRow *
+                    ((eventHeight + (this.parent.currentView === 'Month' ? eventGap : 2)))) + headerHeight + indHeight;
+                if (weekNumberRows.length > 0) {
+                    setStyleAttribute(weekNumberRows[rows.indexOf(row)].firstElementChild, { 'height': height + 'px' });
+                }
+                setStyleAttribute(row.firstElementChild, { 'height': height + 'px' });
+            }
+            if (!this.parent.enablePersistence && !this.parent.activeViewOptions.allowVirtualScrolling && isScrollUpdate) {
+                this.parent.notify(event.contentReady, {});
+            }
+        }
+    };
     EventBase.prototype.unWireEvents = function () {
         var appElements = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));
         for (var _i = 0, appElements_1 = appElements; _i < appElements_1.length; _i++) {

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

@@ -97,6 +97,8 @@ var MonthEvent = /** @class */ (function (_super) {
             cellTd.removeChild(wrapper);
         }
         this.eventHeight = util.getElementHeightFromClass(this.element, cls.APPOINTMENT_CLASS);
+        var selector = '.' + cls.CONTENT_TABLE_CLASS + ' tbody tr';
+        this.addCellHeight(selector, this.eventHeight, (this.parent.currentView === 'Month' ? EVENT_GAP : 2), this.monthHeaderHeight, this.moreIndicatorHeight);
         var scrollTop = conWrap.scrollTop;
         if (this.parent.rowAutoHeight && this.parent.virtualScrollModule && !this.parent.virtualScrollModule.isHorizontalScroll
             && !isNullOrUndefined(this.parent.currentAction)) {
@@ -497,6 +499,7 @@ var MonthEvent = /** @class */ (function (_super) {
         if ((day < 0) || (startTime.getTime() < this.parent.minDate.getTime()) || (endTime.getTime() > this.parent.maxDate.getTime())) {
             return;
         }
+        var eventsPerRow = this.parent.rowAutoHeight ? 1 : this.parent.activeViewOptions.maxEventsPerRow;
         var overlapCount = this.getIndex(startTime);
         event.Index = overlapCount;
         var diffInDays = event.data.count;
@@ -505,7 +508,9 @@ var MonthEvent = /** @class */ (function (_super) {
             var cellTd = this.workCells[parseInt(day.toString(), 10)];
             var appTop = (overlapCount * (this.eventHeight + EVENT_GAP));
             var height = this.monthHeaderHeight + ((overlapCount + 1) * (this.eventHeight + EVENT_GAP)) + this.moreIndicatorHeight;
-            var enableAppRender = this.maxOrIndicator ? overlapCount < 1 ? true : false : this.cellHeight > height;
+            var enableAppRender = this.parent.activeViewOptions.maxEventsPerRow && !this.parent.rowAutoHeight &&
+                !this.parent.eventSettings.enableIndicator ? overlapCount < eventsPerRow : this.maxOrIndicator ? overlapCount < 1
+                ? true : false : this.cellHeight > height;
             if (this.parent.rowAutoHeight || enableAppRender) {
                 this.renderedEvents.push(extend({}, event, null, true));
                 var appointmentElement = void 0;
@@ -670,7 +675,10 @@ var MonthEvent = /** @class */ (function (_super) {
             className: cls.MORE_INDICATOR_CLASS,
             innerHTML: this.getMoreIndicatorText(count),
             attrs: {
+                'role': 'button',
                 'tabindex': '0',
+                'aria-label': this.parent.globalize.formatNumber(count) + '&nbsp;'
+                    + (this.parent.isAdaptive ? '' : this.parent.localeObj.getConstant('more')),
                 'data-count': count.toString(),
                 'data-start-date': startDate.getTime().toString(),
                 'data-end-date': endDate.getTime().toString()

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

@@ -110,6 +110,8 @@ var TimelineEvent = /** @class */ (function (_super) {
     };
     TimelineEvent.prototype.renderResourceEvents = function () {
         this.removeHeightProperty(cls.RESOURCE_COLUMN_TABLE_CLASS);
+        var selector = '.' + cls.RESOURCE_COLUMN_TABLE_CLASS + ' tbody tr';
+        this.addCellHeight(selector, this.eventHeight, EVENT_GAP, this.moreIndicatorHeight, 0, false);
         var resources = this.parent.uiStateValues.isGroupAdaptive ?
             [this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex]] :
             this.parent.resourceBase.renderedResources;
@@ -152,6 +154,7 @@ var TimelineEvent = /** @class */ (function (_super) {
             return;
         }
         var cellTd = this.getCellTd();
+        var eventsPerRow = this.parent.rowAutoHeight ? 1 : this.parent.activeViewOptions.maxEventsPerRow;
         var overlapCount = (isNullOrUndefined(this.parent.eventSettings.sortComparer)) ? this.getIndex(startTime) : this.getSortComparerIndex(startTime, endTime);
         event.Index = overlapCount;
         var appHeight = this.eventHeight;
@@ -184,7 +187,8 @@ var TimelineEvent = /** @class */ (function (_super) {
             appLeft = (this.parent.enableRtl) ? 0 : position;
             appRight = (this.parent.enableRtl) ? position : 0;
             var height = ((overlapCount + 1) * (appHeight + EVENT_GAP)) + this.moreIndicatorHeight;
-            var renderApp = this.maxOrIndicator ? overlapCount < 1 ? true : false : this.cellHeight > height;
+            var renderApp = this.parent.activeViewOptions.maxEventsPerRow && !this.parent.rowAutoHeight && !this.parent.eventSettings.enableIndicator
+                ? overlapCount < eventsPerRow : this.maxOrIndicator ? overlapCount < 1 ? true : false : this.cellHeight > height;
             if (this.parent.rowAutoHeight || renderApp) {
                 var appointmentElement = void 0;
                 if (isNullOrUndefined(this.inlineValue)) {
@@ -267,7 +271,9 @@ var TimelineEvent = /** @class */ (function (_super) {
             var appArea = this.cellHeight - this.moreIndicatorHeight;
             appHeight = this.withIndicator ? appArea - EVENT_GAP : appHeight;
             var renderedAppCount = Math.floor(appArea / (appHeight + EVENT_GAP));
-            var count = (filterEvents.length - renderedAppCount) <= 0 ? 1 : (filterEvents.length - renderedAppCount);
+            var count = this.parent.activeViewOptions.maxEventsPerRow && !this.parent.eventSettings.enableIndicator
+                ? filterEvents.length - this.parent.activeViewOptions.maxEventsPerRow : (filterEvents.length - renderedAppCount) <= 0 ? 1
+                : filterEvents.length - renderedAppCount;
             var moreIndicatorElement = void 0;
             if (this.renderType === 'day') {
                 moreIndicatorElement = this.getMoreIndicatorElement(count, startDate, endDate);

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

@@ -93,6 +93,8 @@ var YearEvent = /** @class */ (function (_super) {
         this.cellHeader = util.getOuterHeight(workCell.querySelector('.' + cls.DATE_HEADER_CLASS));
         var eventTable = this.parent.element.querySelector('.' + cls.EVENT_TABLE_CLASS);
         this.eventHeight = util.getElementHeightFromClass(eventTable, cls.APPOINTMENT_CLASS);
+        var selector = "." + cls.MONTH_HEADER_WRAPPER + " tbody tr,." + cls.RESOURCE_COLUMN_TABLE_CLASS + " tbody tr,." + cls.CONTENT_TABLE_CLASS + " tbody tr";
+        this.addCellHeight(selector, this.eventHeight, EVENT_GAP, this.cellHeader, this.moreIndicatorHeight);
         var wrapperCollection = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CONTAINER_CLASS));
         var months = this.getMonths();
         var groupIndex = (this.parent.activeViewOptions.group.resources.length > 0 && this.parent.uiStateValues.isGroupAdaptive) ?
@@ -154,7 +156,9 @@ var YearEvent = /** @class */ (function (_super) {
                         this_1.moreIndicatorHeight;
                     var appArea = this_1.cellHeight - this_1.cellHeader - this_1.moreIndicatorHeight;
                     var renderedAppCount = Math.floor(appArea / (this_1.eventHeight + EVENT_GAP));
-                    var moreIndicatorCount = (count - renderedAppCount) <= 0 ? 1 : (count - renderedAppCount);
+                    var eventsPerRow = this_1.parent.rowAutoHeight ? 1 : this_1.parent.activeViewOptions.maxEventsPerRow;
+                    var moreIndicatorCount = this_1.parent.activeViewOptions.maxEventsPerRow ? count - eventsPerRow
+                        : (count - renderedAppCount) <= 0 ? 1 : count - renderedAppCount;
                     if (this_1.parent.activeViewOptions.orientation === 'Horizontal') {
                         var isRendered = this_1.renderedEvents.filter(function (eventObj) {
                             return eventObj.Guid === eventData.Guid;
@@ -171,9 +175,12 @@ var YearEvent = /** @class */ (function (_super) {
                             return "continue";
                         }
                     }
-                    if (this_1.parent.rowAutoHeight || this_1.cellHeight > availedHeight) {
+                    var enableAppRender = this_1.maxOrIndicator || (overlapIndex < eventsPerRow) || (this_1.cellHeight > availedHeight);
+                    if (this_1.parent.rowAutoHeight || enableAppRender || this_1.cellHeight > availedHeight) {
                         this_1.renderEvent(eventWrapper, eventData, row, leftValue, rightValue, monthStart, dayIndex);
-                        this_1.updateCellHeight(rowTd, availedHeight);
+                        if (this_1.parent.rowAutoHeight || this_1.cellHeight > availedHeight) {
+                            this_1.updateCellHeight(rowTd, availedHeight);
+                        }
                         isSpannedCollection.push(eventData);
                     }
                     else {
@@ -244,6 +251,8 @@ var YearEvent = /** @class */ (function (_super) {
         this.cellHeader = 0;
         var eventTable = this.parent.element.querySelector('.' + cls.EVENT_TABLE_CLASS);
         this.eventHeight = util.getElementHeightFromClass(eventTable, cls.APPOINTMENT_CLASS);
+        var selector = "." + cls.MONTH_HEADER_WRAPPER + " tbody tr,." + cls.RESOURCE_COLUMN_TABLE_CLASS + " tbody tr,." + cls.CONTENT_TABLE_CLASS + " tbody tr";
+        this.addCellHeight(selector, this.eventHeight, EVENT_GAP, this.cellHeader, this.moreIndicatorHeight);
         var wrapperCollection = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CONTAINER_CLASS));
         var resources = this.parent.uiStateValues.isGroupAdaptive ?
             [this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex]] :
@@ -588,6 +597,11 @@ var YearEvent = /** @class */ (function (_super) {
                 (util.resetTime(appStart).getTime() >= dateStart) && (util.resetTime(appEnd).getTime() <= dateEnd)) {
                 appointmentsList.push(app);
             }
+            else if (this.parent.activeViewOptions.orientation === 'Vertical') {
+                if (util.resetTime(appStart).getTime() >= dateStart && util.resetTime(appEnd).getTime() >= dateEnd) {
+                    appointmentsList.push(app);
+                }
+            }
         }
         return appointmentsList;
     };

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

@@ -11,3 +11,4 @@ export * from './group-model';
 export * from './resources-model';
 export * from './quick-info-templates-model';
 export * from './header-rows-model';
+export * from './toolbar-model';