@syncfusion/ej2-schedule 23.2.4 → 24.1.41

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

@@ -1043,7 +1043,7 @@ class HeaderRenderer {
         this.renderToolbar();
     }
     renderToolbar() {
-        const items = this.getItems();
+        const items = (this.parent.toolbarItems && this.parent.toolbarItems.length > 0) ? this.getToolbarItems() : this.getItems();
         this.parent.trigger(actionBegin, { requestType: 'toolbarItemRendering', items: items }, (args) => {
             this.toolbarObj = new Toolbar({
                 items: args.items,
@@ -1053,6 +1053,7 @@ class HeaderRenderer {
                 enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
                 locale: this.parent.locale
             });
+            this.toolbarObj.root = this.parent.root ? this.parent.root : this.parent;
             this.toolbarObj.appendTo(this.parent.element.querySelector('.' + HEADER_TOOLBAR));
             const prevNavEle = this.toolbarObj.element.querySelector('.e-prev');
             if (prevNavEle) {
@@ -1174,20 +1175,144 @@ class HeaderRenderer {
         });
         return capitalizeFirstWord(dateString, 'single');
     }
+    getItemModel(propItem) {
+        const item = {};
+        if (propItem.id) {
+            item.id = propItem.id;
+        }
+        if (propItem.text) {
+            item.text = propItem.text;
+        }
+        if (propItem.tooltipText) {
+            item.tooltipText = propItem.tooltipText;
+        }
+        if (propItem.prefixIcon) {
+            item.prefixIcon = propItem.prefixIcon;
+        }
+        if (propItem.cssClass) {
+            item.cssClass = propItem.cssClass;
+        }
+        if (propItem.showTextOn !== 'Both') {
+            item.showTextOn = propItem.showTextOn;
+        }
+        if (propItem.template) {
+            item.template = propItem.template;
+        }
+        if (propItem.disabled) {
+            item.disabled = propItem.disabled;
+        }
+        if (propItem.width !== 'auto') {
+            item.width = propItem.width;
+        }
+        if (propItem.suffixIcon) {
+            item.suffixIcon = propItem.suffixIcon;
+        }
+        if (propItem.align !== 'Left') {
+            item.align = propItem.align;
+        }
+        if (propItem.overflow !== 'None') {
+            item.overflow = propItem.overflow;
+        }
+        if (propItem.htmlAttributes) {
+            item.htmlAttributes = propItem.htmlAttributes;
+        }
+        if (propItem.type !== 'Button') {
+            item.type = propItem.type;
+        }
+        if (propItem.visible !== true) {
+            item.visible = propItem.visible;
+        }
+        if (propItem.showAlwaysInPopup) {
+            item.showAlwaysInPopup = propItem.showAlwaysInPopup;
+        }
+        if (propItem.tabIndex !== -1) {
+            item.tabIndex = propItem.tabIndex;
+        }
+        return item;
+    }
+    getToolbarItems() {
+        const items = [];
+        let propItem;
+        for (const item of this.parent.toolbarItems) {
+            propItem = this.getItemModel(item);
+            let tbItem;
+            if (item.name) {
+                switch (item.name) {
+                    case 'Today':
+                        tbItem = {
+                            showAlwaysInPopup: (this.parent.isAdaptive || this.parent.enableAdaptiveUI), prefixIcon: 'e-icon-day',
+                            text: this.l10n.getConstant('today'), cssClass: 'e-today', overflow: 'Show'
+                        };
+                        tbItem.align = propItem.align ? propItem.align : item.align;
+                        items.push(Object.assign({}, tbItem, propItem));
+                        break;
+                    case 'Previous':
+                        tbItem = {
+                            prefixIcon: 'e-icon-prev', tooltipText: 'Previous', overflow: 'Show',
+                            cssClass: 'e-prev', htmlAttributes: { 'role': 'navigation' }
+                        };
+                        tbItem.align = propItem.align ? propItem.align : item.align;
+                        items.push(Object.assign({}, tbItem, propItem));
+                        break;
+                    case 'Next':
+                        tbItem = {
+                            prefixIcon: 'e-icon-next', tooltipText: 'Next', overflow: 'Show',
+                            cssClass: 'e-next', htmlAttributes: { 'role': 'navigation' }
+                        };
+                        tbItem.align = propItem.align ? propItem.align : item.align;
+                        items.push(Object.assign({}, tbItem, propItem));
+                        break;
+                    case 'DateRangeText':
+                        tbItem = {
+                            text: this.getDateRangeText(), suffixIcon: 'e-icon-down-arrow', cssClass: 'e-date-range',
+                            overflow: 'Show',
+                            htmlAttributes: { 'aria-atomic': 'true', 'aria-live': 'assertive', 'role': 'navigation' }
+                        };
+                        tbItem.align = propItem.align ? propItem.align : item.align;
+                        items.push(Object.assign({}, tbItem, propItem));
+                        break;
+                    case 'NewEvent':
+                        tbItem = {
+                            showAlwaysInPopup: (this.parent.isAdaptive || this.parent.enableAdaptiveUI), prefixIcon: 'e-icon-add',
+                            text: this.l10n.getConstant('newEvent'), cssClass: 'e-add', overflow: 'Show'
+                        };
+                        tbItem.align = propItem.align ? propItem.align : item.align;
+                        items.push(Object.assign({}, tbItem, propItem));
+                        break;
+                    case 'Views':
+                        if (this.parent.views.length > 1) {
+                            for (const view of this.parent.views) {
+                                tbItem = this.getItemObject(view);
+                                tbItem.align = propItem.align ? propItem.align : item.align;
+                                items.push(Object.assign({}, tbItem, propItem));
+                            }
+                        }
+                        break;
+                    case 'Custom':
+                        items.push(item);
+                        break;
+                }
+            }
+            else {
+                items.push(item);
+            }
+        }
+        return items;
+    }
     getItems() {
         const items = [];
         items.push({
             align: 'Left', prefixIcon: 'e-icon-prev', tooltipText: 'Previous', overflow: 'Show',
-            cssClass: 'e-prev', htmlAttributes: { 'role': 'navigation' }
+            cssClass: 'e-prev'
         });
         items.push({
             align: 'Left', prefixIcon: 'e-icon-next', tooltipText: 'Next', overflow: 'Show',
-            cssClass: 'e-next', htmlAttributes: { 'role': 'navigation' }
+            cssClass: 'e-next'
         });
         items.push({
             align: 'Left', text: this.getDateRangeText(), suffixIcon: 'e-icon-down-arrow', cssClass: 'e-date-range',
             overflow: 'Show',
-            htmlAttributes: { 'aria-atomic': 'true', 'aria-live': 'assertive', 'role': 'navigation' }
+            htmlAttributes: { 'aria-atomic': 'true', 'aria-live': 'assertive' }
         });
         if (this.parent.isAdaptive || this.parent.enableAdaptiveUI) {
             items.push({
@@ -5416,6 +5541,9 @@ class EventBase {
     }
     processTimezone(event, isReverse = false) {
         const fields = this.parent.eventFields;
+        if (event[fields.isAllDay]) {
+            return event;
+        }
         if (event[fields.startTimezone] || event[fields.endTimezone]) {
             const startTimezone = event[fields.startTimezone] || event[fields.endTimezone];
             const endTimezone = event[fields.endTimezone] || event[fields.startTimezone];
@@ -6519,6 +6647,25 @@ class EventBase {
             append([iconBottom], element);
         }
     }
+    addCellHeight(selector, eventHeight, eventGap, headerHeight, indHeight, isScrollUpdate = true) {
+        if (this.parent.activeViewOptions.maxEventsPerRow && !this.parent.rowAutoHeight) {
+            const rows = [].slice.call(this.parent.element.querySelectorAll(selector));
+            const weekNumberRows = this.parent.showWeekNumber
+                ? [].slice.call(this.parent.element.querySelectorAll('.' + WEEK_NUMBER_WRAPPER_CLASS + ' tbody tr'))
+                : [];
+            for (const row of rows) {
+                const 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(contentReady, {});
+            }
+        }
+    }
     unWireEvents() {
         const appElements = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CLASS));
         for (const element of appElements) {
@@ -7417,6 +7564,8 @@ class MonthEvent extends EventBase {
             cellTd.removeChild(wrapper);
         }
         this.eventHeight = getElementHeightFromClass(this.element, APPOINTMENT_CLASS);
+        const selector = '.' + CONTENT_TABLE_CLASS + ' tbody tr';
+        this.addCellHeight(selector, this.eventHeight, (this.parent.currentView === 'Month' ? EVENT_GAP : 2), this.monthHeaderHeight, this.moreIndicatorHeight);
         const scrollTop = conWrap.scrollTop;
         if (this.parent.rowAutoHeight && this.parent.virtualScrollModule && !this.parent.virtualScrollModule.isHorizontalScroll
             && !isNullOrUndefined(this.parent.currentAction)) {
@@ -7810,6 +7959,7 @@ class MonthEvent extends EventBase {
         if ((day < 0) || (startTime.getTime() < this.parent.minDate.getTime()) || (endTime.getTime() > this.parent.maxDate.getTime())) {
             return;
         }
+        const eventsPerRow = this.parent.rowAutoHeight ? 1 : this.parent.activeViewOptions.maxEventsPerRow;
         const overlapCount = this.getIndex(startTime);
         event.Index = overlapCount;
         const diffInDays = event.data.count;
@@ -7818,7 +7968,9 @@ class MonthEvent extends EventBase {
             const cellTd = this.workCells[parseInt(day.toString(), 10)];
             const appTop = (overlapCount * (this.eventHeight + EVENT_GAP));
             const height = this.monthHeaderHeight + ((overlapCount + 1) * (this.eventHeight + EVENT_GAP)) + this.moreIndicatorHeight;
-            const enableAppRender = this.maxOrIndicator ? overlapCount < 1 ? true : false : this.cellHeight > height;
+            const 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));
                 let appointmentElement;
@@ -7978,7 +8130,10 @@ class MonthEvent extends EventBase {
             className: 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()
@@ -8102,6 +8257,8 @@ class TimelineEvent extends MonthEvent {
     }
     renderResourceEvents() {
         this.removeHeightProperty(RESOURCE_COLUMN_TABLE_CLASS);
+        const selector = '.' + RESOURCE_COLUMN_TABLE_CLASS + ' tbody tr';
+        this.addCellHeight(selector, this.eventHeight, EVENT_GAP$1, this.moreIndicatorHeight, 0, false);
         const resources = this.parent.uiStateValues.isGroupAdaptive ?
             [this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex]] :
             this.parent.resourceBase.renderedResources;
@@ -8144,6 +8301,7 @@ class TimelineEvent extends MonthEvent {
             return;
         }
         const cellTd = this.getCellTd();
+        const eventsPerRow = this.parent.rowAutoHeight ? 1 : this.parent.activeViewOptions.maxEventsPerRow;
         const overlapCount = (isNullOrUndefined(this.parent.eventSettings.sortComparer)) ? this.getIndex(startTime) : this.getSortComparerIndex(startTime, endTime);
         event.Index = overlapCount;
         const appHeight = this.eventHeight;
@@ -8176,7 +8334,8 @@ class TimelineEvent extends MonthEvent {
             appLeft = (this.parent.enableRtl) ? 0 : position;
             appRight = (this.parent.enableRtl) ? position : 0;
             const height = ((overlapCount + 1) * (appHeight + EVENT_GAP$1)) + this.moreIndicatorHeight;
-            const renderApp = this.maxOrIndicator ? overlapCount < 1 ? true : false : this.cellHeight > height;
+            const 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) {
                 let appointmentElement;
                 if (isNullOrUndefined(this.inlineValue)) {
@@ -8259,7 +8418,9 @@ class TimelineEvent extends MonthEvent {
             const appArea = this.cellHeight - this.moreIndicatorHeight;
             appHeight = this.withIndicator ? appArea - EVENT_GAP$1 : appHeight;
             const renderedAppCount = Math.floor(appArea / (appHeight + EVENT_GAP$1));
-            const count = (filterEvents.length - renderedAppCount) <= 0 ? 1 : (filterEvents.length - renderedAppCount);
+            const count = this.parent.activeViewOptions.maxEventsPerRow && !this.parent.eventSettings.enableIndicator
+                ? filterEvents.length - this.parent.activeViewOptions.maxEventsPerRow : (filterEvents.length - renderedAppCount) <= 0 ? 1
+                : filterEvents.length - renderedAppCount;
             let moreIndicatorElement;
             if (this.renderType === 'day') {
                 moreIndicatorElement = this.getMoreIndicatorElement(count, startDate, endDate);
@@ -8934,9 +9095,9 @@ class QuickPopups {
     }
     renderMorePopup() {
         const moreEventPopup = `<div class="${MORE_EVENT_POPUP_CLASS}"><div class="${MORE_EVENT_HEADER_CLASS}">` +
-            `<div class="${MORE_EVENT_CLOSE_CLASS}" title="${this.l10n.getConstant('close')}" tabindex="0"></div>` +
+            `<div class="${MORE_EVENT_CLOSE_CLASS}" title="${this.l10n.getConstant('close')}" tabindex="0" role="button"></div>` +
             `<div class="${MORE_EVENT_DATE_HEADER_CLASS}"><div class="${MORE_EVENT_HEADER_DAY_CLASS}"></div>` +
-            `<div class="${MORE_EVENT_HEADER_DATE_CLASS} ${NAVIGATE_CLASS}" tabindex="0"></div></div></div></div>`;
+            `<div class="${MORE_EVENT_HEADER_DATE_CLASS} ${NAVIGATE_CLASS}" tabindex="0" role="link"></div></div></div></div>`;
         const moreEventWrapper = createElement('div', {
             className: MORE_POPUP_WRAPPER_CLASS + ' e-popup-close',
             innerHTML: moreEventPopup
@@ -10451,7 +10612,6 @@ const MONTHWEEK = 'e-month-week';
 const ENDON = 'e-end-on';
 const MONTHEXPANDERLABEL = 'e-month-expander-label';
 const WEEKEXPANDERLABEL = 'e-week-expander-label';
-const ENDONLABEL = 'e-end-on-label';
 const ENDONLEFT = 'e-end-on-left';
 const MONTHDAYELEMENT = 'e-monthday-element';
 const ENDONELEMENT = 'e-end-on-element';
@@ -10766,6 +10926,8 @@ let RecurrenceEditor = class RecurrenceEditor extends Component {
         this.endType = new DropDownList({
             dataSource: this.getEndData(),
             popupWidth: this.getPopupWidth(),
+            floatLabelType: 'Always',
+            placeholder: this.localeObj.getConstant(END),
             enableRtl: this.enableRtl,
             index: 1,
             fields: {
@@ -11100,6 +11262,7 @@ let RecurrenceEditor = class RecurrenceEditor extends Component {
     setTemplate() {
         const dayData = this.getDayData('narrow');
         const fullDay = this.getDayData('wide');
+        const labelId = this.element.id + '_' + 'end_label';
         this.element.innerHTML = '<div class="' + HEADER + '">' +
             '<div class="' + INPUTWARAPPER + ' ' + FORMLEFT + '">' +
             '<input type="text" tabindex="0" class="' + REPEATELEMENT +
@@ -11145,9 +11308,8 @@ let RecurrenceEditor = class RecurrenceEditor extends Component {
             '</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$1) + '" />' +
@@ -11904,15 +12066,11 @@ class EventWindow {
         const titleLocationDiv = this.createDivElement(EVENT_WINDOW_TITLE_LOCATION_DIV_CLASS);
         parentDiv.appendChild(titleLocationDiv);
         titleLocationDiv.appendChild(this.renderTextBox(SUBJECT_CLASS));
-        titleLocationDiv.querySelector('.' + SUBJECT_CLASS).setAttribute('title', this.parent.editorTitles.subject);
         titleLocationDiv.appendChild(this.renderTextBox(LOCATION_CLASS));
-        titleLocationDiv.querySelector('.' + LOCATION_CLASS).setAttribute('title', this.parent.editorTitles.location);
         const startEndDateTimeDiv = this.createDivElement(EVENT_WINDOW_START_END_DIV_CLASS);
         parentDiv.appendChild(startEndDateTimeDiv);
         startEndDateTimeDiv.appendChild(this.renderDateTimePicker(EVENT_WINDOW_START_CLASS, this.onTimeChange.bind(this)));
-        startEndDateTimeDiv.querySelector('.' + EVENT_WINDOW_START_CLASS).setAttribute('title', this.parent.editorTitles.startTime);
         startEndDateTimeDiv.appendChild(this.renderDateTimePicker(EVENT_WINDOW_END_CLASS));
-        startEndDateTimeDiv.querySelector('.' + EVENT_WINDOW_END_CLASS).setAttribute('title', this.parent.editorTitles.endTime);
         const allDayTimezoneDiv = this.createDivElement(EVENT_WINDOW_ALLDAY_TZ_DIV_CLASS);
         parentDiv.appendChild(allDayTimezoneDiv);
         allDayTimezoneDiv.appendChild(this.renderCheckBox(EVENT_WINDOW_ALL_DAY_CLASS));
@@ -11949,7 +12107,6 @@ class EventWindow {
         }
         const description = this.createDivElement(DESCRIPTION_CLASS + '-row');
         description.appendChild(this.renderTextBox(DESCRIPTION_CLASS));
-        description.querySelector('.' + DESCRIPTION_CLASS).setAttribute('title', this.parent.editorTitles.description);
         parentDiv.appendChild(description);
         const submit = createElement('button', { attrs: { type: 'hidden', title: 'submit', style: 'display:none' } });
         parentDiv.appendChild(submit);
@@ -11968,9 +12125,7 @@ class EventWindow {
     createInputElement(className, fieldName, type) {
         return createElement(type || 'input', {
             className: className, attrs: {
-                type: 'text', name: fieldName, value: '', id: fieldName,
-                title: ((this.l10n.getConstant(fieldName.charAt(0).toLowerCase() + fieldName.slice(1))) === '') ?
-                    fieldName : this.l10n.getConstant(fieldName.charAt(0).toLowerCase() + fieldName.slice(1))
+                type: 'text', name: fieldName, value: '', id: fieldName
             }
         });
     }
@@ -11992,6 +12147,7 @@ class EventWindow {
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
             floatLabelType: 'Always',
+            strictMode: true,
             timeFormat: this.parent.activeViewOptions.timeFormat,
             format: (isNullOrUndefined(this.parent.dateFormat) ?
                 this.getFormat('dateFormats') : this.parent.dateFormat) + ' ' + this.parent.activeViewOptions.timeFormat,
@@ -12059,7 +12215,7 @@ class EventWindow {
                     text: resourceData.textField,
                     value: resourceData.idField
                 },
-                htmlAttributes: { 'title': labelValue, 'name': fieldName },
+                htmlAttributes: { 'name': fieldName },
                 floatLabelType: 'Always',
                 placeholder: labelValue,
                 popupHeight: '230px',
@@ -12078,7 +12234,7 @@ class EventWindow {
                     text: resourceData.textField,
                     value: resourceData.idField
                 },
-                htmlAttributes: { 'title': labelValue, 'name': fieldName },
+                htmlAttributes: { 'name': fieldName },
                 floatLabelType: 'Always',
                 placeholder: labelValue,
                 popupHeight: '230px',
@@ -12487,7 +12643,7 @@ class EventWindow {
         this.eventData = this.eventCrudData ? this.eventData : eventData;
         const eventObj = extend({}, eventData, null, true);
         const formElements = this.getFormElements(EVENT_WINDOW_DIALOG_CLASS);
-        if (this.parent.isReact && formElements.length < 1) {
+        if (this.parent.isReact && formElements.length < 1 && !this.cellClickAction) {
             this.eventCrudData = eventObj;
             return;
         }
@@ -14040,7 +14196,7 @@ class Render {
     }
     updateLabelText(view) {
         const content = this.parent.activeView.getLabelText(view);
-        this.parent.element.setAttribute('role', 'main');
+        this.parent.element.setAttribute('role', 'application');
         this.parent.element.setAttribute('aria-label', content);
     }
 }
@@ -16228,6 +16384,72 @@ class ResourceBase {
     }
 }
 
+var __decorate$11 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class ToolbarItem extends ChildProperty {
+}
+__decorate$11([
+    Property('')
+], ToolbarItem.prototype, "id", void 0);
+__decorate$11([
+    Property('')
+], ToolbarItem.prototype, "text", void 0);
+__decorate$11([
+    Property('auto')
+], ToolbarItem.prototype, "width", void 0);
+__decorate$11([
+    Property('')
+], ToolbarItem.prototype, "cssClass", void 0);
+__decorate$11([
+    Property(false)
+], ToolbarItem.prototype, "showAlwaysInPopup", void 0);
+__decorate$11([
+    Property(false)
+], ToolbarItem.prototype, "disabled", void 0);
+__decorate$11([
+    Property('')
+], ToolbarItem.prototype, "prefixIcon", void 0);
+__decorate$11([
+    Property('')
+], ToolbarItem.prototype, "suffixIcon", void 0);
+__decorate$11([
+    Property(true)
+], ToolbarItem.prototype, "visible", void 0);
+__decorate$11([
+    Property('None')
+], ToolbarItem.prototype, "overflow", void 0);
+__decorate$11([
+    Property('')
+], ToolbarItem.prototype, "template", void 0);
+__decorate$11([
+    Property('Button')
+], ToolbarItem.prototype, "type", void 0);
+__decorate$11([
+    Property('Both')
+], ToolbarItem.prototype, "showTextOn", void 0);
+__decorate$11([
+    Property(null)
+], ToolbarItem.prototype, "htmlAttributes", void 0);
+__decorate$11([
+    Property('')
+], ToolbarItem.prototype, "tooltipText", void 0);
+__decorate$11([
+    Property('Left')
+], ToolbarItem.prototype, "align", void 0);
+__decorate$11([
+    Property(-1)
+], ToolbarItem.prototype, "tabIndex", void 0);
+__decorate$11([
+    Property('Custom')
+], ToolbarItem.prototype, "name", void 0);
+__decorate$11([
+    Event()
+], ToolbarItem.prototype, "click", void 0);
+
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -17606,6 +17828,7 @@ let Schedule = class Schedule extends Component {
                     }
                     break;
                 case 'showHeaderBar':
+                case 'toolbarItems':
                     this.destroyHeaderModule();
                     if (newProp.showHeaderBar) {
                         this.headerModule = new HeaderRenderer(this);
@@ -18944,6 +19167,9 @@ __decorate([
 __decorate([
     Property(true)
 ], Schedule.prototype, "allowSwiping", void 0);
+__decorate([
+    Collection([], ToolbarItem)
+], Schedule.prototype, "toolbarItems", void 0);
 __decorate([
     Property('Week')
 ], Schedule.prototype, "currentView", void 0);
@@ -20277,6 +20503,8 @@ class YearEvent extends TimelineEvent {
         this.cellHeader = getOuterHeight(workCell.querySelector('.' + DATE_HEADER_CLASS));
         const eventTable = this.parent.element.querySelector('.' + EVENT_TABLE_CLASS);
         this.eventHeight = getElementHeightFromClass(eventTable, APPOINTMENT_CLASS);
+        const selector = `.${MONTH_HEADER_WRAPPER} tbody tr,.${RESOURCE_COLUMN_TABLE_CLASS} tbody tr,.${CONTENT_TABLE_CLASS} tbody tr`;
+        this.addCellHeight(selector, this.eventHeight, EVENT_GAP$2, this.cellHeader, this.moreIndicatorHeight);
         const wrapperCollection = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CONTAINER_CLASS));
         const months = this.getMonths();
         const groupIndex = (this.parent.activeViewOptions.group.resources.length > 0 && this.parent.uiStateValues.isGroupAdaptive) ?
@@ -20338,7 +20566,9 @@ class YearEvent extends TimelineEvent {
                         this.moreIndicatorHeight;
                     const appArea = this.cellHeight - this.cellHeader - this.moreIndicatorHeight;
                     const renderedAppCount = Math.floor(appArea / (this.eventHeight + EVENT_GAP$2));
-                    const moreIndicatorCount = (count - renderedAppCount) <= 0 ? 1 : (count - renderedAppCount);
+                    const eventsPerRow = this.parent.rowAutoHeight ? 1 : this.parent.activeViewOptions.maxEventsPerRow;
+                    const moreIndicatorCount = this.parent.activeViewOptions.maxEventsPerRow ? count - eventsPerRow
+                        : (count - renderedAppCount) <= 0 ? 1 : count - renderedAppCount;
                     if (this.parent.activeViewOptions.orientation === 'Horizontal') {
                         const isRendered = this.renderedEvents.filter((eventObj) => eventObj.Guid === eventData.Guid);
                         const isSpanned = isSpannedCollection.filter((eventObj) => eventObj.Guid === eventData.Guid);
@@ -20351,9 +20581,12 @@ class YearEvent extends TimelineEvent {
                             continue;
                         }
                     }
-                    if (this.parent.rowAutoHeight || this.cellHeight > availedHeight) {
+                    const enableAppRender = this.maxOrIndicator || (overlapIndex < eventsPerRow) || (this.cellHeight > availedHeight);
+                    if (this.parent.rowAutoHeight || enableAppRender || this.cellHeight > availedHeight) {
                         this.renderEvent(eventWrapper, eventData, row, leftValue, rightValue, monthStart, dayIndex);
-                        this.updateCellHeight(rowTd, availedHeight);
+                        if (this.parent.rowAutoHeight || this.cellHeight > availedHeight) {
+                            this.updateCellHeight(rowTd, availedHeight);
+                        }
                         isSpannedCollection.push(eventData);
                     }
                     else {
@@ -20419,6 +20652,8 @@ class YearEvent extends TimelineEvent {
         this.cellHeader = 0;
         const eventTable = this.parent.element.querySelector('.' + EVENT_TABLE_CLASS);
         this.eventHeight = getElementHeightFromClass(eventTable, APPOINTMENT_CLASS);
+        const selector = `.${MONTH_HEADER_WRAPPER} tbody tr,.${RESOURCE_COLUMN_TABLE_CLASS} tbody tr,.${CONTENT_TABLE_CLASS} tbody tr`;
+        this.addCellHeight(selector, this.eventHeight, EVENT_GAP$2, this.cellHeader, this.moreIndicatorHeight);
         const wrapperCollection = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CONTAINER_CLASS));
         const resources = this.parent.uiStateValues.isGroupAdaptive ?
             [this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex]] :
@@ -20749,6 +20984,11 @@ class YearEvent extends TimelineEvent {
                 (resetTime(appStart).getTime() >= dateStart) && (resetTime(appEnd).getTime() <= dateEnd)) {
                 appointmentsList.push(app);
             }
+            else if (this.parent.activeViewOptions.orientation === 'Vertical') {
+                if (resetTime(appStart).getTime() >= dateStart && resetTime(appEnd).getTime() >= dateEnd) {
+                    appointmentsList.push(app);
+                }
+            }
         }
         return appointmentsList;
     }
@@ -21299,7 +21539,7 @@ class DragAndDrop extends ActionBase {
     calculateVerticalTime(e) {
         if (isNullOrUndefined(this.actionObj.target) ||
             (this.actionObj.target && isNullOrUndefined(closest(this.actionObj.target, 'tr'))) ||
-            (!(closest(this.actionObj.target, 'td').classList.contains(WORK_CELLS_CLASS)) &&
+            (!isNullOrUndefined(closest(this.actionObj.target, 'td')) && !(closest(this.actionObj.target, 'td').classList.contains(WORK_CELLS_CLASS)) &&
                 !(closest(this.actionObj.target, 'td').classList.contains(ALLDAY_CELLS_CLASS)))) {
             return;
         }
@@ -21336,8 +21576,8 @@ class DragAndDrop extends ActionBase {
             tr = trCollections[parseInt(rowIndex.toString(), 10)];
         }
         let index;
-        if (closest(this.actionObj.target, 'td').classList.contains(WORK_CELLS_CLASS) ||
-            closest(this.actionObj.target, 'td').classList.contains(ALLDAY_CELLS_CLASS)) {
+        if (!isNullOrUndefined(closest(this.actionObj.target, 'td')) && (closest(this.actionObj.target, 'td').classList.contains(WORK_CELLS_CLASS) ||
+            closest(this.actionObj.target, 'td').classList.contains(ALLDAY_CELLS_CLASS))) {
             index = closest(this.actionObj.target, 'td').cellIndex;
         }
         const colIndex = isNullOrUndefined(index) ? closest(this.actionObj.clone, 'td').cellIndex : index;
@@ -21635,7 +21875,7 @@ class DragAndDrop extends ActionBase {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     swapDragging(e) {
-        const colIndex = closest(this.actionObj.target, 'td').cellIndex;
+        const colIndex = !isNullOrUndefined(closest(this.actionObj.target, 'td')) && closest(this.actionObj.target, 'td').cellIndex;
         if (closest(this.actionObj.target, '.' + DATE_HEADER_WRAP_CLASS) &&
             !closest(this.actionObj.clone, '.' + ALLDAY_APPOINTMENT_WRAPPER_CLASS)) {
             addClass([this.actionObj.clone], ALLDAY_APPOINTMENT_CLASS);
@@ -23377,9 +23617,9 @@ class VerticalView extends ViewBase {
         const msStartHour = startHour.getTime();
         const msEndHour = endHour.getTime();
         if (msStartHour !== msEndHour) {
-            const duration = this.parent.activeViewOptions.timeScale.interval / this.parent.activeViewOptions.timeScale.slotCount;
-            length = (Math.abs(msEndHour - msStartHour) / msInterval) - ((new Date(msEndHour).getTimezoneOffset()
-                - new Date(msStartHour).getTimezoneOffset()) / duration);
+            let milliSeconds = (startHour.getTimezoneOffset() !== endHour.getTimezoneOffset()) ?
+                (msEndHour - msStartHour) - 3600000 : (msEndHour - msStartHour);
+            length = Math.round(milliSeconds / msInterval);
         }
         if (!this.parent.activeViewOptions.timeScale.enable) {
             length = 1;
@@ -24363,6 +24603,9 @@ class Year extends ViewBase {
                 let classList$$1 = [];
                 if (currentDate.getMonth() !== date.getMonth()) {
                     classList$$1.push(OTHERMONTH_CLASS);
+                    if (td.firstElementChild && !this.parent.activeViewOptions.cellTemplate) {
+                        td.firstElementChild.setAttribute('aria-disabled', 'true');
+                    }
                 }
                 if (this.isCurrentDate(date) && currentDate.getMonth() === date.getMonth()) {
                     classList$$1 = classList$$1.concat(['e-today', 'e-selected']);
@@ -24882,7 +25125,7 @@ class AgendaBase extends ViewBase {
     createResourceTableRow(tContent, tBody) {
         const tr = createElement('tr');
         let ntr;
-        const td = createElement('td', { attrs: { 'aria-selected': 'false' } });
+        const td = createElement('td');
         let tempData;
         let rowSpan = 0;
         let level;