@syncfusion/ej2-schedule 23.2.7 → 24.2.3

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

@@ -0,0 +1,176 @@
+import { ChildProperty, EmitType } from '@syncfusion/ej2-base';
+import { ClickEventArgs, DisplayMode, ItemAlign, ItemType, OverflowOption } from '@syncfusion/ej2-navigations';
+import { ToolbarName } from '../base/type';
+export declare class ToolbarItem extends ChildProperty<ToolbarItem> {
+    /**
+     * 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>;
+}

package/src/schedule/models/toolbar.js

@@ -0,0 +1,85 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__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;
+};
+import { Property, ChildProperty, Event } from '@syncfusion/ej2-base';
+var ToolbarItem = /** @class */ (function (_super) {
+    __extends(ToolbarItem, _super);
+    function ToolbarItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], ToolbarItem.prototype, "id", void 0);
+    __decorate([
+        Property('')
+    ], ToolbarItem.prototype, "text", void 0);
+    __decorate([
+        Property('auto')
+    ], ToolbarItem.prototype, "width", void 0);
+    __decorate([
+        Property('')
+    ], ToolbarItem.prototype, "cssClass", void 0);
+    __decorate([
+        Property(false)
+    ], ToolbarItem.prototype, "showAlwaysInPopup", void 0);
+    __decorate([
+        Property(false)
+    ], ToolbarItem.prototype, "disabled", void 0);
+    __decorate([
+        Property('')
+    ], ToolbarItem.prototype, "prefixIcon", void 0);
+    __decorate([
+        Property('')
+    ], ToolbarItem.prototype, "suffixIcon", void 0);
+    __decorate([
+        Property(true)
+    ], ToolbarItem.prototype, "visible", void 0);
+    __decorate([
+        Property('None')
+    ], ToolbarItem.prototype, "overflow", void 0);
+    __decorate([
+        Property('')
+    ], ToolbarItem.prototype, "template", void 0);
+    __decorate([
+        Property('Button')
+    ], ToolbarItem.prototype, "type", void 0);
+    __decorate([
+        Property('Both')
+    ], ToolbarItem.prototype, "showTextOn", void 0);
+    __decorate([
+        Property(null)
+    ], ToolbarItem.prototype, "htmlAttributes", void 0);
+    __decorate([
+        Property('')
+    ], ToolbarItem.prototype, "tooltipText", void 0);
+    __decorate([
+        Property('Left')
+    ], ToolbarItem.prototype, "align", void 0);
+    __decorate([
+        Property(-1)
+    ], ToolbarItem.prototype, "tabIndex", void 0);
+    __decorate([
+        Property('Custom')
+    ], ToolbarItem.prototype, "name", void 0);
+    __decorate([
+        Event()
+    ], ToolbarItem.prototype, "click", void 0);
+    return ToolbarItem;
+}(ChildProperty));
+export { ToolbarItem };

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

@@ -74,6 +74,15 @@ export interface ViewsModel {
      */
     allowVirtualScrolling?: boolean;
 
+    /**
+     * Specifies the maximum number of events to be displayed in a single row.
+     * This property is applicable when the 'rowAutoHeight' property is disabled.
+     * This property is only applicable for the month view, timeline views, and timeline year view.
+     *
+     * @default null
+     */
+    maxEventsPerRow?: number;
+
     /**
      * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the
      *  month date cells.

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

@@ -67,6 +67,14 @@ export declare class Views extends ChildProperty<Views> {
      * @default false
      */
     allowVirtualScrolling: boolean;
+    /**
+     * Specifies the maximum number of events to be displayed in a single row.
+     * This property is applicable when the 'rowAutoHeight' property is disabled.
+     * This property is only applicable for the month view, timeline views, and timeline year view.
+     *
+     * @default null
+     */
+    maxEventsPerRow: number;
     /**
      * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the
      *  month date cells.

package/src/schedule/models/views.js

@@ -50,6 +50,9 @@ var Views = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], Views.prototype, "allowVirtualScrolling", void 0);
+    __decorate([
+        Property(null)
+    ], Views.prototype, "maxEventsPerRow", void 0);
     __decorate([
         Property()
     ], Views.prototype, "cellHeaderTemplate", void 0);

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

@@ -383,15 +383,11 @@ var EventWindow = /** @class */ (function () {
         var titleLocationDiv = this.createDivElement(cls.EVENT_WINDOW_TITLE_LOCATION_DIV_CLASS);
         parentDiv.appendChild(titleLocationDiv);
         titleLocationDiv.appendChild(this.renderTextBox(cls.SUBJECT_CLASS));
-        titleLocationDiv.querySelector('.' + cls.SUBJECT_CLASS).setAttribute('title', this.parent.editorTitles.subject);
         titleLocationDiv.appendChild(this.renderTextBox(cls.LOCATION_CLASS));
-        titleLocationDiv.querySelector('.' + cls.LOCATION_CLASS).setAttribute('title', this.parent.editorTitles.location);
         var startEndDateTimeDiv = this.createDivElement(cls.EVENT_WINDOW_START_END_DIV_CLASS);
         parentDiv.appendChild(startEndDateTimeDiv);
         startEndDateTimeDiv.appendChild(this.renderDateTimePicker(cls.EVENT_WINDOW_START_CLASS, this.onTimeChange.bind(this)));
-        startEndDateTimeDiv.querySelector('.' + cls.EVENT_WINDOW_START_CLASS).setAttribute('title', this.parent.editorTitles.startTime);
         startEndDateTimeDiv.appendChild(this.renderDateTimePicker(cls.EVENT_WINDOW_END_CLASS));
-        startEndDateTimeDiv.querySelector('.' + cls.EVENT_WINDOW_END_CLASS).setAttribute('title', this.parent.editorTitles.endTime);
         var allDayTimezoneDiv = this.createDivElement(cls.EVENT_WINDOW_ALLDAY_TZ_DIV_CLASS);
         parentDiv.appendChild(allDayTimezoneDiv);
         allDayTimezoneDiv.appendChild(this.renderCheckBox(cls.EVENT_WINDOW_ALL_DAY_CLASS));
@@ -429,7 +425,6 @@ var EventWindow = /** @class */ (function () {
         }
         var description = this.createDivElement(cls.DESCRIPTION_CLASS + '-row');
         description.appendChild(this.renderTextBox(cls.DESCRIPTION_CLASS));
-        description.querySelector('.' + cls.DESCRIPTION_CLASS).setAttribute('title', this.parent.editorTitles.description);
         parentDiv.appendChild(description);
         var submit = createElement('button', { attrs: { type: 'hidden', title: 'submit', style: 'display:none' } });
         parentDiv.appendChild(submit);
@@ -448,9 +443,7 @@ var EventWindow = /** @class */ (function () {
     EventWindow.prototype.createInputElement = function (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
             }
         });
     };
@@ -472,6 +465,7 @@ var EventWindow = /** @class */ (function () {
             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,
@@ -540,7 +534,7 @@ var EventWindow = /** @class */ (function () {
                     text: resourceData.textField,
                     value: resourceData.idField
                 },
-                htmlAttributes: { 'title': labelValue, 'name': fieldName },
+                htmlAttributes: { 'name': fieldName },
                 floatLabelType: 'Always',
                 placeholder: labelValue,
                 popupHeight: '230px',
@@ -559,7 +553,7 @@ var EventWindow = /** @class */ (function () {
                     text: resourceData.textField,
                     value: resourceData.idField
                 },
-                htmlAttributes: { 'title': labelValue, 'name': fieldName },
+                htmlAttributes: { 'name': fieldName },
                 floatLabelType: 'Always',
                 placeholder: labelValue,
                 popupHeight: '230px',

package/src/schedule/popups/quick-popups.js

@@ -52,9 +52,9 @@ var QuickPopups = /** @class */ (function () {
     };
     QuickPopups.prototype.renderMorePopup = function () {
         var moreEventPopup = "<div class=\"" + cls.MORE_EVENT_POPUP_CLASS + "\"><div class=\"" + cls.MORE_EVENT_HEADER_CLASS + "\">" +
-            ("<div class=\"" + cls.MORE_EVENT_CLOSE_CLASS + "\" title=\"" + this.l10n.getConstant('close') + "\" tabindex=\"0\"></div>") +
+            ("<div class=\"" + cls.MORE_EVENT_CLOSE_CLASS + "\" title=\"" + this.l10n.getConstant('close') + "\" tabindex=\"0\" role=\"button\"></div>") +
             ("<div class=\"" + cls.MORE_EVENT_DATE_HEADER_CLASS + "\"><div class=\"" + cls.MORE_EVENT_HEADER_DAY_CLASS + "\"></div>") +
-            ("<div class=\"" + cls.MORE_EVENT_HEADER_DATE_CLASS + " " + cls.NAVIGATE_CLASS + "\" tabindex=\"0\"></div></div></div></div>");
+            ("<div class=\"" + cls.MORE_EVENT_HEADER_DATE_CLASS + " " + cls.NAVIGATE_CLASS + "\" tabindex=\"0\" role=\"link\"></div></div></div></div>");
         var moreEventWrapper = createElement('div', {
             className: cls.MORE_POPUP_WRAPPER_CLASS + ' e-popup-close',
             innerHTML: moreEventPopup

package/src/schedule/renderer/header-renderer.d.ts

@@ -29,6 +29,8 @@ export declare class HeaderRenderer {
     refresh(): void;
     updateAddIcon(): void;
     private getDateRangeText;
+    private getItemModel;
+    private getToolbarItems;
     private getItems;
     private getItemObject;
     private renderHeaderPopup;

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

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { isNullOrUndefined, createElement, remove, closest, addClass, removeClass, extend, append } from '@syncfusion/ej2-base';
 import { Toolbar } from '@syncfusion/ej2-navigations';
@@ -63,7 +74,7 @@ var HeaderRenderer = /** @class */ (function () {
     };
     HeaderRenderer.prototype.renderToolbar = function () {
         var _this = this;
-        var items = this.getItems();
+        var items = (this.parent.toolbarItems && this.parent.toolbarItems.length > 0) ? this.getToolbarItems() : this.getItems();
         this.parent.trigger(events.actionBegin, { requestType: 'toolbarItemRendering', items: items }, function (args) {
             _this.toolbarObj = new Toolbar({
                 items: args.items,
@@ -73,6 +84,7 @@ var HeaderRenderer = /** @class */ (function () {
                 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('.' + cls.HEADER_TOOLBAR));
             var prevNavEle = _this.toolbarObj.element.querySelector('.e-prev');
             if (prevNavEle) {
@@ -195,20 +207,146 @@ var HeaderRenderer = /** @class */ (function () {
         });
         return util.capitalizeFirstWord(dateString, 'single');
     };
+    HeaderRenderer.prototype.getItemModel = function (propItem) {
+        var 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;
+    };
+    HeaderRenderer.prototype.getToolbarItems = function () {
+        var items = [];
+        var propItem;
+        for (var _i = 0, _a = this.parent.toolbarItems; _i < _a.length; _i++) {
+            var item = _a[_i];
+            propItem = this.getItemModel(item);
+            var tbItem = void 0;
+            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(__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(__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(__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(__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(__assign({}, tbItem, propItem));
+                        break;
+                    case 'Views':
+                        if (this.parent.views.length > 1) {
+                            for (var _b = 0, _c = this.parent.views; _b < _c.length; _b++) {
+                                var view = _c[_b];
+                                tbItem = this.getItemObject(view);
+                                tbItem.align = propItem.align ? propItem.align : item.align;
+                                items.push(__assign({}, tbItem, propItem));
+                            }
+                        }
+                        break;
+                    case 'Custom':
+                        items.push(item);
+                        break;
+                }
+            }
+            else {
+                items.push(item);
+            }
+        }
+        return items;
+    };
     HeaderRenderer.prototype.getItems = function () {
         var 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({

package/src/schedule/renderer/renderer.js

@@ -132,7 +132,7 @@ var Render = /** @class */ (function () {
     };
     Render.prototype.updateLabelText = function (view) {
         var 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);
     };
     return Render;

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

@@ -761,9 +761,9 @@ var VerticalView = /** @class */ (function (_super) {
         var msStartHour = startHour.getTime();
         var msEndHour = endHour.getTime();
         if (msStartHour !== msEndHour) {
-            var 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);
+            var milliSeconds = (startHour.getTimezoneOffset() !== endHour.getTimezoneOffset()) ?
+                (msEndHour - msStartHour) - 3600000 : (msEndHour - msStartHour);
+            length = Math.round(milliSeconds / msInterval);
         }
         if (!this.parent.activeViewOptions.timeScale.enable) {
             length = 1;

package/src/schedule/renderer/year.js

@@ -170,6 +170,9 @@ var Year = /** @class */ (function (_super) {
                 var classList = [];
                 if (currentDate.getMonth() !== date.getMonth()) {
                     classList.push(cls.OTHERMONTH_CLASS);
+                    if (td.firstElementChild && !this.parent.activeViewOptions.cellTemplate) {
+                        td.firstElementChild.setAttribute('aria-disabled', 'true');
+                    }
                 }
                 if (this.isCurrentDate(date) && currentDate.getMonth() === date.getMonth()) {
                     classList = classList.concat(['e-today', 'e-selected']);