@syncfusion/ej2-schedule 23.2.7 → 24.2.3

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.2.7
+*  version : 24.2.3
 *  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.2.4",
+  "_id": "@syncfusion/ej2-schedule@24.1.41",
   "_inBundle": false,
-  "_integrity": "sha512-MubdFwUgutBqXNnindH9QOeHhjl+93mI33578Ati1Yi9mhyxRAlxYf9/fkujUMiPwjvzw6LPOHSXYhGmDMRxqQ==",
+  "_integrity": "sha512-PMFUzrOa5gFauoO79WYC7vNHSJIoHrPUZJwE/aDZPIKkc0pUdaPPcJhLrxMUrKEOLJvmhVo0bqOQkMwUXLswTA==",
   "_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.2.4.tgz",
-  "_shasum": "e7fad4c2553a7a5afdb615fbb67a67c2fafad48b",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-schedule/-/ej2-schedule-24.1.41.tgz",
+  "_shasum": "dfaee919781c2f41866763e373d84a7f4e8b46ad",
   "_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.6",
-    "@syncfusion/ej2-buttons": "~23.2.7",
-    "@syncfusion/ej2-calendars": "~23.2.7",
-    "@syncfusion/ej2-data": "~23.2.4",
-    "@syncfusion/ej2-dropdowns": "~23.2.7",
-    "@syncfusion/ej2-excel-export": "~23.2.4",
-    "@syncfusion/ej2-inputs": "~23.2.4",
-    "@syncfusion/ej2-lists": "~23.2.4",
-    "@syncfusion/ej2-navigations": "~23.2.7",
-    "@syncfusion/ej2-popups": "~23.2.4"
+    "@syncfusion/ej2-base": "~24.2.3",
+    "@syncfusion/ej2-buttons": "~24.2.3",
+    "@syncfusion/ej2-calendars": "~24.2.3",
+    "@syncfusion/ej2-data": "~24.2.3",
+    "@syncfusion/ej2-dropdowns": "~24.2.3",
+    "@syncfusion/ej2-excel-export": "~24.2.3",
+    "@syncfusion/ej2-inputs": "~24.2.3",
+    "@syncfusion/ej2-lists": "~24.2.3",
+    "@syncfusion/ej2-navigations": "~24.2.3",
+    "@syncfusion/ej2-popups": "~24.2.3"
   },
   "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.7",
+  "version": "24.2.3",
   "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]] :

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';

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

@@ -0,0 +1,196 @@
+import { Property, ChildProperty, Event, EmitType } from '@syncfusion/ej2-base';import { ClickEventArgs, DisplayMode, ItemAlign, ItemType, OverflowOption } from '@syncfusion/ej2-navigations';import { ToolbarName } from '../base/type';
+
+/**
+ * Interface for a class ToolbarItem
+ */
+export interface ToolbarItemModel {
+
+    /**
+     * Specifies the unique ID to be used with button or input element of Toolbar items.
+     *
+     * @default ""
+     */
+    id?: string;
+
+    /**
+     * Specifies the text to be displayed on the Toolbar button.
+     *
+     * @default ""
+     */
+    text?: string;
+
+    /**
+     * Specifies the width of the Toolbar button commands.
+     *
+     * @default 'auto'
+     */
+    width?: number | string;
+
+    /**
+     * Defines single/multiple classes (separated by space) to be used for customization of commands.
+     *
+     * @default ""
+     */
+    cssClass?: string;
+
+    /**
+     * Defines the priority of items to display it in popup always.
+     * It allows to maintain toolbar item on popup always but it does not work for toolbar priority items.
+     *
+     * @default false
+     */
+    showAlwaysInPopup?: boolean;
+
+    /**
+     * Specifies whether an item should be disabled or not.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * Defines single/multiple classes separated by space used to specify an icon for the button.
+     * The icon will be positioned before the text content if text is available, otherwise the icon alone will be rendered.
+     *
+     * @default ""
+     */
+    prefixIcon?: string;
+
+    /**
+     * Defines single/multiple classes separated by space used to specify an icon for the button.
+     * The icon will be positioned after the text content if text is available.
+     *
+     * @default ""
+     */
+    suffixIcon?: string;
+
+    /**
+     * Specifies whether an item should be hidden or not.
+     *
+     * @default true
+     */
+    visible?: boolean;
+
+    /**
+     * Specifies the Toolbar command display area when an element's content is too large to fit available space.
+     * This is applicable only to `popup` mode. The possible values for this property as follows
+     * * `Show`:  Always shows the item as the primary priority on the *Toolbar*.
+     * * `Hide`: Always shows the item as the secondary priority on the *popup*.
+     * * `None`: No priority for display, and as per normal order moves to popup when content exceeds.
+     *
+     * @default 'None'
+     * @aspDefaultValue Syncfusion.EJ2.Navigations.OverflowOption.None
+     * @isEnumeration true
+     * @aspType Syncfusion.EJ2.Navigations.OverflowOption
+     */
+    overflow?: OverflowOption;
+
+    /**
+     * Specifies the HTML element/element ID as a string that can be added as a Toolbar command.
+     * ```
+     * E.g - items: [{ template: '<input placeholder="Search"/>' },{ template: '#checkbox1' }]
+     * ```
+     *
+     * @default ""
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    template?: string | Object | Function;
+
+    /**
+     * Specifies the types of command to be rendered in the Toolbar.
+     * Supported types are:
+     * * `Button`: Creates the Button control with its given properties like text, prefixIcon, etc.
+     * * `Separator`: Adds a horizontal line that separates the Toolbar commands.
+     * * `Input`: Creates an input element that is applicable to template rendering with Syncfusion controls like DropDownList,
+     * AutoComplete, etc.
+     *
+     * @default 'Button'
+     * @aspDefaultValue Syncfusion.EJ2.Navigations.ItemType.Button
+     * @isEnumeration true
+     * @aspType Syncfusion.EJ2.Navigations.ItemType
+     */
+    type?: ItemType;
+
+    /**
+     * Specifies where the button text will be displayed on *popup mode* of the Toolbar.
+     * The possible values for this property as follows
+     * * `Toolbar`:  Text will be displayed on *Toolbar* only.
+     * * `Overflow`: Text will be displayed only when content overflows to *popup*.
+     * * `Both`: Text will be displayed on *popup* and *Toolbar*.
+     *
+     * @default 'Both'
+     * @aspDefaultValue Syncfusion.EJ2.Navigations.DisplayMode.Both
+     * @isEnumeration true
+     * @aspType Syncfusion.EJ2.Navigations.DisplayMode
+     */
+    showTextOn?: DisplayMode;
+
+    /**
+     * Defines htmlAttributes used to add custom attributes to Toolbar command.
+     * Supports HTML attributes such as style, class, etc.
+     *
+     * @default null
+     */
+    htmlAttributes?: { [key: string]: string };
+
+    /**
+     * Specifies the text to be displayed on hovering the Toolbar button.
+     *
+     * @default ""
+     */
+    tooltipText?: string;
+
+    /**
+     * Specifies the location for aligning Toolbar items on the Toolbar. Each command will be aligned according to the `align` property.
+     * The possible values for this property as follows
+     * * `Left`: To align commands to the left side of the Toolbar.
+     * * `Center`: To align commands at the center of the Toolbar.
+     * * `Right`: To align commands to the right side of the Toolbar.
+     *
+     * @default 'Left'
+     * @aspDefaultValue Syncfusion.EJ2.Navigations.ItemAlign.Left
+     * @isEnumeration true
+     * @aspType Syncfusion.EJ2.Navigations.ItemAlign
+     */
+    align?: ItemAlign;
+
+    /**
+     * Specifies the tab order of the Toolbar items. When positive values assigned, it allows to switch focus to the next/previous toolbar items with Tab/ShiftTab keys.
+     * By default, user can able to switch between items only via arrow keys.
+     * If the value is set to 0 for all tool bar items, then tab switches based on element order.
+     *
+     * @default -1
+     */
+    tabIndex?: number;
+
+    /**
+     * Specifies the unique name for each toolbar item rendered in Schedule. This name is used to map the toolbar items in the Schedule component.
+     * 
+     * To access the default toolbar items, provide the name below,
+     * 
+     * * `Custom`: Schedule component render the custom toolbar item.
+     * * `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 'Custom'
+     * @aspDefaultValue Custom
+     * @isEnumeration true
+     * @aspType ToolbarName
+     */
+    name?: ToolbarName;
+
+    /**
+     * Event triggers when `click` the toolbar item.
+     *
+     * @event click
+     */
+    click?: EmitType<ClickEventArgs>;
+
+}