@syncfusion/ej2-schedule 20.2.45 → 20.3.47

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

@@ -12,7 +12,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { append, addClass, createElement } from '@syncfusion/ej2-base';
+import { append, addClass, createElement, EventHandler } from '@syncfusion/ej2-base';
 import { Year } from './year';
 import * as event from '../base/constant';
 import * as cls from '../base/css-constant';
@@ -163,6 +163,7 @@ var TimelineYear = /** @class */ (function (_super) {
         var content = createElement('div', { className: cls.CONTENT_WRAP_CLASS });
         lastTd.appendChild(content);
         var contentTable = this.createTableLayout(cls.CONTENT_TABLE_CLASS);
+        this.setAriaAttributes(contentTable);
         content.appendChild(contentTable);
         var eventWrapper = createElement('div', { className: cls.EVENT_TABLE_CLASS });
         content.appendChild(eventWrapper);
@@ -196,12 +197,12 @@ var TimelineYear = /** @class */ (function (_super) {
             var monthDate = new Date(this.parent.selectedDate.getFullYear(), months[month], 1);
             var monthStart = this.parent.calendarUtil.getMonthStartDate(new Date(monthDate.getTime()));
             var monthEnd = this.parent.calendarUtil.getMonthEndDate(new Date(monthDate.getTime()));
-            var tr = createElement('tr', { attrs: { 'role': 'row' } });
+            var tr = createElement('tr');
             var monthTr = tr.cloneNode();
             monthBody.appendChild(monthTr);
             var contentTr = tr.cloneNode();
             contentBody.appendChild(contentTr);
-            var monthTd = createElement('td', { className: cls.MONTH_HEADER_CLASS, attrs: { 'role': 'gridcell' } });
+            var monthTd = createElement('td', { className: cls.MONTH_HEADER_CLASS });
             if (this.parent.activeViewOptions.orientation === 'Horizontal') {
                 if (this.parent.monthHeaderTemplate) {
                     append(this.renderDayMonthHeaderTemplate(monthStart, month, 'monthHeaderTemplate'), monthTd);
@@ -236,7 +237,7 @@ var TimelineYear = /** @class */ (function (_super) {
                     isDateAvail = column >= monthStart.getDay() && date.getTime() < monthEnd.getTime();
                 }
                 var td = createElement('td', {
-                    className: cls.WORK_CELLS_CLASS, attrs: { 'role': 'gridcell', 'aria-selected': 'false' }
+                    className: cls.WORK_CELLS_CLASS, attrs: { 'aria-selected': 'false' }
                 });
                 contentTr.appendChild(td);
                 var dateHeader = createElement('div', {
@@ -277,7 +278,7 @@ var TimelineYear = /** @class */ (function (_super) {
                 td.appendChild(dateHeader);
                 if (isDateAvail) {
                     td.setAttribute('data-date', date.getTime().toString());
-                    this.wireEvents(td, 'cell');
+                    this.wireEvents(td);
                 }
                 this.renderCellTemplate({ date: date, type: 'workCells' }, td);
                 this.parent.trigger(event.renderCell, { elementType: 'workCells', element: td, date: date });
@@ -293,7 +294,7 @@ var TimelineYear = /** @class */ (function (_super) {
         var tRow = [];
         var monthCells = this.getMonths();
         for (var row = 0; row < this.parent.resourceBase.renderedResources.length; row++) {
-            var tr = createElement('tr', { attrs: { 'role': 'row' } });
+            var tr = createElement('tr');
             tRow.push(tr);
             var resData = void 0;
             if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
@@ -316,14 +317,14 @@ var TimelineYear = /** @class */ (function (_super) {
                 var tdELe = createElement('td', {
                     className: cls.WORK_CELLS_CLASS,
                     attrs: {
-                        'role': 'gridcell', 'aria-selected': 'false',
+                        'aria-selected': 'false',
                         'data-date': date.getTime().toString()
                     }
                 });
                 addClass([tdELe], classList);
                 tdELe.setAttribute('data-group-index', groupIndex.toString());
                 this.renderCellTemplate({ date: date, type: 'resourceGroupCells', groupIndex: groupIndex }, tdELe);
-                this.wireEvents(tdELe, 'cell');
+                this.wireEvents(tdELe);
                 this.parent.trigger(event.renderCell, { elementType: 'resourceGroupCells', element: tdELe, date: date });
                 tr.appendChild(tdELe);
             }
@@ -334,7 +335,7 @@ var TimelineYear = /** @class */ (function (_super) {
         var months = this.getMonths();
         for (var row = 0; row < this.rowCount; row++) {
             wrapper.appendChild(createElement('div', { className: cls.APPOINTMENT_CONTAINER_CLASS }));
-            var tr = createElement('tr', { attrs: { 'role': 'row' } });
+            var tr = createElement('tr');
             contentBody.appendChild(tr);
             var resData = void 0;
             if (this.parent.activeViewOptions.orientation === 'Vertical' && this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
@@ -347,7 +348,7 @@ var TimelineYear = /** @class */ (function (_super) {
                 monthBody.appendChild(monthTr);
                 var monthTd = createElement('td', {
                     className: cls.MONTH_HEADER_CLASS,
-                    attrs: { 'role': 'gridcell', 'data-date': date.getTime().toString() }
+                    attrs: { 'data-date': date.getTime().toString() }
                 });
                 if (this.parent.monthHeaderTemplate) {
                     append(this.renderDayMonthHeaderTemplate(monthDate, row, 'monthHeaderTemplate'), monthTd);
@@ -379,14 +380,14 @@ var TimelineYear = /** @class */ (function (_super) {
                 var td = createElement('td', {
                     className: cls.WORK_CELLS_CLASS,
                     attrs: {
-                        'role': 'gridcell', 'aria-selected': 'false',
+                        'aria-selected': 'false',
                         'data-date': date.getTime().toString()
                     }
                 });
                 addClass([td], classList);
                 td.setAttribute('data-group-index', groupIndex.toString());
                 this.renderCellTemplate({ date: date, type: 'resourceGroupCells', groupIndex: groupIndex }, td);
-                this.wireEvents(td, 'cell');
+                this.wireEvents(td);
                 tr.appendChild(td);
                 this.parent.trigger(event.renderCell, { elementType: 'resourceGroupCells', element: td, date: date });
             }
@@ -451,6 +452,13 @@ var TimelineYear = /** @class */ (function (_super) {
             return this.getContentAreaElement();
         }
     };
+    TimelineYear.prototype.wireEvents = function (element) {
+        EventHandler.add(element, 'mousedown', this.parent.workCellAction.cellMouseDown, this.parent.workCellAction);
+        EventHandler.add(element, 'click', this.parent.workCellAction.cellClick, this.parent.workCellAction);
+        if (!this.parent.isAdaptive) {
+            EventHandler.add(element, 'dblclick', this.parent.workCellAction.cellDblClick, this.parent.workCellAction);
+        }
+    };
     return TimelineYear;
 }(Year));
 export { TimelineYear };

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

@@ -49,10 +49,10 @@ export declare class VerticalView extends ViewBase implements IRenderer {
     private renderTimeCells;
     renderContentArea(): Element;
     renderContentTable(table: Element): void;
+    getContentRows(): Element[];
     createContentTd(tdData: TdData, r: TimeSlotData, td: Element): Element;
     getContentTdClass(r: TimeSlotData): string[];
     private renderContentTableHeader;
-    private createEventWrapper;
     getScrollableElement(): Element;
     getLeftPanelElement(): HTMLElement;
     getEndDateFromStartDate(start: Date): Date;

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

@@ -259,15 +259,27 @@ var VerticalView = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.parent.resourceBase) && (this.parent.activeViewOptions.group.resources.length > 0) &&
             !this.parent.uiStateValues.isGroupAdaptive) {
             var count = 0;
-            for (var _i = 0, _a = this.parent.resourceBase.lastResourceLevel; _i < _a.length; _i++) {
-                var resource = _a[_i];
-                var index = this.parent.getIndexOfDate(resource.renderDates, util.resetTime(this.parent.getCurrentTime()));
-                if (index >= 0) {
-                    var resIndex = this.parent.activeViewOptions.group.byDate ?
-                        (this.parent.resourceBase.lastResourceLevel.length * index) + count : count + index;
-                    currentDateIndex.push(resIndex);
+            if (this.parent.virtualScrollModule && this.parent.activeViewOptions.allowVirtualScrolling &&
+                this.parent.activeViewOptions.group.byDate) {
+                for (var _i = 0, _a = this.parent.resourceBase.expandedResources; _i < _a.length; _i++) {
+                    var resource = _a[_i];
+                    if (util.resetTime(resource.date).getTime() === util.resetTime(this.parent.getCurrentTime()).getTime()) {
+                        currentDateIndex.push(count);
+                    }
+                    count += 1;
+                }
+            }
+            else {
+                for (var _b = 0, _c = this.parent.resourceBase.renderedResources; _b < _c.length; _b++) {
+                    var resource = _c[_b];
+                    var index = this.parent.getIndexOfDate(resource.renderDates, util.resetTime(this.parent.getCurrentTime()));
+                    if (index >= 0) {
+                        var resIndex = this.parent.activeViewOptions.group.byDate ?
+                            (this.parent.resourceBase.lastResourceLevel.length * index) + count : count + index;
+                        currentDateIndex.push(resIndex);
+                    }
+                    count += this.parent.activeViewOptions.group.byDate ? 1 : resource.renderDates.length;
                 }
-                count += this.parent.activeViewOptions.group.byDate ? 1 : resource.renderDates.length;
             }
         }
         else {
@@ -413,7 +425,7 @@ var VerticalView = /** @class */ (function (_super) {
         if (!this.parent.activeViewOptions.timeScale.enable) {
             addClass([this.element], [cls.TIMESCALE_DISABLE, this.viewClass]);
         }
-        if (this.parent.activeViewOptions.allowVirtualScrolling) {
+        if (this.parent.activeViewOptions.allowVirtualScrolling && !this.parent.uiStateValues.isGroupAdaptive) {
             clsList.push(cls.VIRTUAL_SCROLL_CLASS);
         }
         if (this.parent.rowAutoHeight && this.parent.eventSettings.ignoreWhitespace) {
@@ -444,6 +456,9 @@ var VerticalView = /** @class */ (function (_super) {
         prepend([tr], this.element.querySelector('tbody'));
     };
     VerticalView.prototype.renderContent = function () {
+        if (this.parent.activeViewOptions.group.resources.length > 0) {
+            this.parent.resourceBase.renderedResources = extend([], this.parent.resourceBase.lastResourceLevel, null, true);
+        }
         var tr = createElement('tr');
         var workTd = createElement('td');
         if (this.parent.isAdaptive) {
@@ -459,13 +474,22 @@ var VerticalView = /** @class */ (function (_super) {
             tr.appendChild(workTd);
         }
         else {
-            workTd.appendChild(this.renderContentArea());
+            var levels = this.colLevels.slice(0);
+            if (this.parent.virtualScrollModule) {
+                this.resetColLevels();
+            }
+            var wrap = this.renderContentArea();
+            workTd.appendChild(wrap);
             if (this.parent.activeViewOptions.timeScale.enable) {
                 var timesTd = createElement('td');
                 timesTd.appendChild(this.renderTimeCells());
                 tr.appendChild(timesTd);
             }
             tr.appendChild(workTd);
+            if (this.parent.virtualScrollModule) {
+                this.colLevels = levels;
+                this.parent.virtualScrollModule.renderVirtualTrack(wrap);
+            }
         }
         this.element.querySelector('tbody').appendChild(tr);
     };
@@ -537,7 +561,6 @@ var VerticalView = /** @class */ (function (_super) {
             td.className = [cls.ALLDAY_CELLS_CLASS];
             td.type = 'alldayCells';
             var ntd = this.createTd(td);
-            ntd.setAttribute('role', 'gridcell');
             ntd.setAttribute('data-date', td.date.getTime().toString());
             if (!isNullOrUndefined(td.groupIndex)) {
                 ntd.setAttribute('data-group-index', '' + td.groupIndex);
@@ -550,7 +573,7 @@ var VerticalView = /** @class */ (function (_super) {
         }
         table.querySelector('tbody').appendChild(ntr);
         var thead = createElement('thead');
-        thead.appendChild(this.createEventWrapper('allDay'));
+        thead.appendChild(this.parent.eventBase.createEventWrapper('allDay'));
         prepend([thead], table);
     };
     VerticalView.prototype.createTd = function (td) {
@@ -570,7 +593,6 @@ var VerticalView = /** @class */ (function (_super) {
         }
         if (td.type === 'dateHeader' && td.className.indexOf(cls.HEADER_CELLS_CLASS) >= 0) {
             tdEle.setAttribute('data-date', td.date.getTime().toString());
-            tdEle.setAttribute('role', 'gridcell');
             if (!isNullOrUndefined(td.groupIndex)) {
                 tdEle.setAttribute('data-group-index', '' + td.groupIndex);
             }
@@ -611,6 +633,7 @@ var VerticalView = /** @class */ (function (_super) {
     VerticalView.prototype.renderContentArea = function () {
         var wrap = createElement('div', { className: cls.CONTENT_WRAP_CLASS });
         var tbl = this.createTableLayout(cls.CONTENT_TABLE_CLASS);
+        this.setAriaAttributes(tbl);
         this.addAutoHeightClass(tbl);
         this.renderContentTable(tbl);
         this.createColGroup(tbl, this.colLevels.slice(-1)[0]);
@@ -621,10 +644,15 @@ var VerticalView = /** @class */ (function (_super) {
         return wrap;
     };
     VerticalView.prototype.renderContentTable = function (table) {
+        var tBody = table.querySelector('tbody');
+        append(this.getContentRows(), tBody);
+        this.renderContentTableHeader(table);
+    };
+    VerticalView.prototype.getContentRows = function () {
         var _this = this;
-        var tr = createElement('tr', { attrs: { role: 'row' } });
-        var td = createElement('td', { attrs: { role: 'gridcell', 'aria-selected': 'false' } });
-        var tbody = table.querySelector('tbody');
+        var rows = [];
+        var tr = createElement('tr');
+        var td = createElement('td', { attrs: { 'aria-selected': 'false' } });
         var handler = function (r) {
             var ntr = tr.cloneNode();
             for (var _i = 0, _a = _this.colLevels[_this.colLevels.length - 1]; _i < _a.length; _i++) {
@@ -632,11 +660,11 @@ var VerticalView = /** @class */ (function (_super) {
                 var ntd = _this.createContentTd(tdData, r, td);
                 ntr.appendChild(ntd);
             }
-            tbody.appendChild(ntr);
+            rows.push(ntr);
             return r;
         };
         this.getTimeSlotRows(handler);
-        this.renderContentTableHeader(table);
+        return rows;
     };
     VerticalView.prototype.createContentTd = function (tdData, r, td) {
         var ntd = td.cloneNode();
@@ -683,36 +711,12 @@ var VerticalView = /** @class */ (function (_super) {
     };
     VerticalView.prototype.renderContentTableHeader = function (table) {
         var thead = createElement('thead');
-        thead.appendChild(this.createEventWrapper());
+        thead.appendChild(this.parent.eventBase.createEventWrapper());
         if (this.parent.activeViewOptions.timeScale.enable) {
-            thead.appendChild(this.createEventWrapper('timeIndicator'));
+            thead.appendChild(this.parent.eventBase.createEventWrapper('timeIndicator'));
         }
         prepend([thead], table);
     };
-    VerticalView.prototype.createEventWrapper = function (type) {
-        if (type === void 0) { type = ''; }
-        var tr = createElement('tr');
-        var levels = this.colLevels.slice(-1)[0];
-        for (var i = 0, len = levels.length; i < len; i++) {
-            var col = levels[i];
-            var appointmentWrap = createElement('td', {
-                className: (type === 'allDay') ? cls.ALLDAY_APPOINTMENT_WRAPPER_CLASS : (type === 'timeIndicator') ?
-                    cls.TIMELINE_WRAPPER_CLASS : cls.DAY_WRAPPER_CLASS, attrs: { 'data-date': col.date.getTime().toString() }
-            });
-            if (!isNullOrUndefined(col.groupIndex)) {
-                appointmentWrap.setAttribute('data-group-index', col.groupIndex.toString());
-            }
-            if (type === '') {
-                var innerWrapper = createElement('div', {
-                    id: cls.APPOINTMENT_WRAPPER_CLASS + '-' + i.toString(),
-                    className: cls.APPOINTMENT_WRAPPER_CLASS
-                });
-                appointmentWrap.appendChild(innerWrapper);
-            }
-            tr.appendChild(appointmentWrap);
-        }
-        return tr;
-    };
     VerticalView.prototype.getScrollableElement = function () {
         if (this.parent.isAdaptive && !this.isTimelineView()) {
             return this.element.querySelector('.' + cls.SCROLL_CONTAINER_CLASS);

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

@@ -27,6 +27,7 @@ export declare class ViewBase {
     getEventRows(trCount: number): Element[];
     collapseRows(wrap: Element): void;
     createTableLayout(className?: string): Element;
+    setAriaAttributes(table: Element): void;
     createColGroup(table: Element, lastRow: TdData[]): void;
     getScrollXIndent(content: HTMLElement): number;
     scrollTopPanel(target: HTMLElement): void;
@@ -69,5 +70,6 @@ export declare class ViewBase {
     getViewStartDate(): Date;
     getViewEndDate(): Date;
     getAdjustedDate(startTime: Date): Date;
+    resetColLevels(): void;
     destroy(): void;
 }

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

@@ -75,11 +75,15 @@ var ViewBase = /** @class */ (function () {
     };
     ViewBase.prototype.createTableLayout = function (className) {
         var clsName = className || '';
-        var table = createElement('table', { className: cls.SCHEDULE_TABLE_CLASS + ' ' + clsName, attrs: { role: 'table' } });
+        var table = createElement('table', { className: cls.SCHEDULE_TABLE_CLASS + ' ' + clsName });
         var tbody = createElement('tbody');
         table.appendChild(tbody);
         return table;
     };
+    ViewBase.prototype.setAriaAttributes = function (table) {
+        table.setAttribute('role', 'grid');
+        table.setAttribute('aria-label', this.getLabelText(this.parent.currentView));
+    };
     ViewBase.prototype.createColGroup = function (table, lastRow) {
         var length = lastRow.length;
         if (lastRow[0] && lastRow[0].colSpan) {
@@ -544,6 +548,32 @@ var ViewBase = /** @class */ (function () {
         }
         return null;
     };
+    ViewBase.prototype.resetColLevels = function () {
+        this.parent.resourceBase.expandedResources = [];
+        var renderedCount = this.parent.virtualScrollModule.getRenderedCount();
+        var lastLevel = this.parent.activeViewOptions.group.byDate ? this.colLevels[0] :
+            this.parent.resourceBase.renderedResources;
+        var index = 0;
+        for (var i = 0; i < lastLevel.length; i++) {
+            if (index >= renderedCount) {
+                break;
+            }
+            index += lastLevel[i].colSpan;
+            this.parent.resourceBase.expandedResources.push(lastLevel[i]);
+        }
+        if (this.parent.activeViewOptions.group.byDate) {
+            this.colLevels[0] = this.parent.resourceBase.expandedResources;
+            this.parent.virtualScrollModule.setRenderedDates(this.parent.resourceBase.expandedResources);
+        }
+        else {
+            this.colLevels[this.colLevels.length - 2] = this.parent.resourceBase.expandedResources;
+            this.parent.resourceBase.renderedResources = this.parent.resourceBase.expandedResources;
+        }
+        if (this.parent.currentView !== 'Month') {
+            this.colLevels[this.colLevels.length - 1] = this.colLevels[this.colLevels.length - 1].slice(0, index);
+            this.parent.resourceBase.expandedResources = this.colLevels[this.colLevels.length - 1];
+        }
+    };
     ViewBase.prototype.destroy = function () {
         if (this.element && this.element.parentNode) {
             remove(this.element);

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

@@ -26,6 +26,7 @@ export declare class Year extends ViewBase implements IRenderer {
     getRowColumnCount(type: string): number;
     isCurrentDate(date: Date): boolean;
     getMonths(): number[];
+    private renderTemplates;
     private onCellClick;
     onContentScroll(e: Event): void;
     onScrollUiUpdate(args: NotifyEventArgs): void;
@@ -39,7 +40,6 @@ export declare class Year extends ViewBase implements IRenderer {
     addEventListener(): void;
     removeEventListener(): void;
     onDataReady(args: NotifyEventArgs): void;
-    wireEvents(element: HTMLElement, type: string): void;
     scrollToDate(scrollDate: Date): void;
     destroy(): void;
 }

package/src/schedule/renderer/year.js

@@ -12,7 +12,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { EventHandler, formatUnit, createElement, addClass, closest, prepend } from '@syncfusion/ej2-base';
+import { EventHandler, formatUnit, createElement, addClass, closest, prepend, append, extend } from '@syncfusion/ej2-base';
 import { ViewBase } from './view-base';
 import { YearEvent } from '../event-renderer/year';
 import * as util from '../base/util';
@@ -56,7 +56,7 @@ var Year = /** @class */ (function (_super) {
             this.generateColumnLevels();
             this.renderResourceMobileLayout();
         }
-        this.wireEvents(this.element.querySelector('.' + cls.CONTENT_WRAP_CLASS), 'scroll');
+        EventHandler.add(this.element.querySelector('.' + cls.CONTENT_WRAP_CLASS), 'scroll', this.onContentScroll, this);
         this.parent.notify(event.contentReady, {});
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -92,7 +92,14 @@ var Year = /** @class */ (function (_super) {
     };
     Year.prototype.renderCalendarHeader = function (currentDate) {
         var headerWrapper = createElement('div', { className: 'e-header e-month' });
-        var headerContent = createElement('div', { className: 'e-day e-title', innerHTML: this.getMonthName(currentDate) });
+        var headerContent = createElement('div', { className: 'e-day e-title' });
+        if (this.parent.monthHeaderTemplate) {
+            var args = { date: currentDate, type: 'monthHeader' };
+            this.renderTemplates(this.parent.getMonthHeaderTemplate(), args, 'monthHeaderTemplate', this.parent.activeViewOptions.monthHeaderTemplateName, headerContent);
+        }
+        else {
+            headerContent.innerHTML = this.getMonthName(currentDate);
+        }
         headerWrapper.appendChild(headerContent);
         this.parent.trigger(event.renderCell, { elementType: 'headerCells', element: headerContent, date: currentDate });
         return headerWrapper;
@@ -102,6 +109,7 @@ var Year = /** @class */ (function (_super) {
         var contentWrapper = createElement('div', { className: 'e-content e-month' });
         var contentTable = this.createTableLayout('e-calendar-table ' + cls.CONTENT_TABLE_CLASS);
         contentWrapper.appendChild(contentTable);
+        this.setAriaAttributes(contentTable);
         var thead = createElement('thead', { className: 'e-week-header' });
         var tr = createElement('tr');
         var currentWeek = util.getWeekFirstDate(util.firstDateOfMonth(currentDate), this.parent.firstDayOfWeek);
@@ -109,7 +117,15 @@ var Year = /** @class */ (function (_super) {
             tr.appendChild(createElement('th'));
         }
         for (var i = 0; i < util.WEEK_LENGTH; i++) {
-            tr.appendChild(createElement('th', { innerHTML: this.parent.getDayNames('narrow')[currentWeek.getDay()] }));
+            if (this.parent.dayHeaderTemplate) {
+                var th = createElement('th');
+                var args = { date: currentWeek, type: 'dayHeader' };
+                this.renderTemplates(this.parent.getDayHeaderTemplate(), args, 'dayHeaderTemplate', this.parent.activeViewOptions.dayHeaderTemplateName, th);
+                tr.appendChild(th);
+            }
+            else {
+                tr.appendChild(createElement('th', { innerHTML: this.parent.getDayNames('narrow')[currentWeek.getDay()] }));
+            }
             currentWeek = new Date(currentWeek.getTime() + util.MS_PER_DAY);
         }
         thead.appendChild(tr);
@@ -117,12 +133,12 @@ var Year = /** @class */ (function (_super) {
         var tbody = contentTable.querySelector('tbody');
         while (dateCollection.length > 0) {
             var weekDates = dateCollection.splice(0, util.WEEK_LENGTH);
-            var tr_1 = createElement('tr', { attrs: { 'role': 'row' } });
+            var tr_1 = createElement('tr');
             if (this.parent.activeViewOptions.showWeekNumber) {
                 var weekNumber = this.parent.getWeekNumberContent(weekDates);
                 var td = createElement('td', {
                     className: 'e-week-number',
-                    attrs: { 'role': 'gridcell', 'title': this.parent.localeObj.getConstant('week') + ' ' + weekNumber },
+                    attrs: { 'title': this.parent.localeObj.getConstant('week') + ' ' + weekNumber },
                     innerHTML: weekNumber
                 });
                 tr_1.appendChild(td);
@@ -132,13 +148,23 @@ var Year = /** @class */ (function (_super) {
                 var date = weekDates_1[_i];
                 var td = createElement('td', {
                     className: 'e-cell ' + cls.WORK_CELLS_CLASS,
-                    attrs: { 'role': 'gridcell', 'aria-selected': 'false', 'data-date': date.getTime().toString() }
+                    attrs: { 'aria-selected': 'false', 'data-date': date.getTime().toString() }
                 });
-                var span = createElement('span', {
-                    className: 'e-day', innerHTML: this.parent.globalize.formatDate(date, { skeleton: 'd', calendar: this.parent.getCalendarMode() }),
-                    attrs: { title: this.parent.globalize.formatDate(date, { type: 'date', skeleton: 'full' }) }
-                });
-                td.appendChild(span);
+                if (this.parent.activeViewOptions.cellHeaderTemplate) {
+                    var args = { date: date, type: 'monthCells' };
+                    this.renderTemplates(this.parent.getCellHeaderTemplate(), args, 'cellHeaderTemplate', this.parent.activeViewOptions.cellHeaderTemplateName, td);
+                }
+                else {
+                    var span = createElement('span', {
+                        className: 'e-day', innerHTML: this.parent.globalize.formatDate(date, { skeleton: 'd', calendar: this.parent.getCalendarMode() }),
+                        attrs: { title: this.parent.globalize.formatDate(date, { type: 'date', skeleton: 'full' }) }
+                    });
+                    td.appendChild(span);
+                }
+                if (this.parent.activeViewOptions.cellTemplate) {
+                    var args = { date: date, type: 'monthCells' };
+                    this.renderTemplates(this.parent.getCellTemplate(), args, 'cellTemplate', this.parent.activeViewOptions.cellTemplateName, td);
+                }
                 var classList = [];
                 if (currentDate.getMonth() !== date.getMonth()) {
                     classList.push(cls.OTHERMONTH_CLASS);
@@ -150,7 +176,10 @@ var Year = /** @class */ (function (_super) {
                     addClass([td], classList);
                 }
                 tr_1.appendChild(td);
-                this.wireEvents(td, 'cell');
+                EventHandler.add(td, 'click', this.onCellClick, this);
+                if (!this.parent.isAdaptive) {
+                    EventHandler.add(td, 'dblclick', this.parent.workCellAction.cellDblClick, this.parent.workCellAction);
+                }
                 this.parent.trigger(event.renderCell, { elementType: 'workCells', element: td, date: date });
             }
             tbody.appendChild(tr_1);
@@ -236,6 +265,11 @@ var Year = /** @class */ (function (_super) {
             return _this.parent.firstMonthOfYear + index;
         });
     };
+    Year.prototype.renderTemplates = function (fn, args, tName, vName, ele) {
+        var templateId = this.parent.element.id + '_' + vName + tName;
+        var template = [].slice.call(fn(args, this.parent, tName, templateId, false));
+        append(template, ele);
+    };
     Year.prototype.onCellClick = function (e) {
         var target = closest(e.target, '.' + cls.WORK_CELLS_CLASS);
         var startDate = this.parent.getDateFromElement(target);
@@ -258,6 +292,8 @@ var Year = /** @class */ (function (_super) {
                 target = this.parent.element.querySelector(':not(.' + cls.OTHERMONTH_CLASS + ')[data-date="' + target.getAttribute('data-date') + '"]');
             }
             this.parent.activeCellsData = this.parent.getCellDetails(target);
+            var args = extend(this.parent.activeCellsData, { cancel: false, event: e, name: 'cellClick' });
+            this.parent.trigger(event.cellClick, args);
             this.parent.quickPopup.moreEventClick(moreEventArgs, endDate);
         }
     };
@@ -369,23 +405,6 @@ var Year = /** @class */ (function (_super) {
         this.yearEventModule.renderAppointments();
         this.parent.notify(event.eventsLoaded, args);
     };
-    Year.prototype.wireEvents = function (element, type) {
-        if (type === 'cell') {
-            if (this.parent.currentView !== 'TimelineYear') {
-                EventHandler.add(element, 'click', this.onCellClick, this);
-            }
-            else {
-                EventHandler.add(element, 'mousedown', this.parent.workCellAction.cellMouseDown, this.parent.workCellAction);
-                EventHandler.add(element, 'click', this.parent.workCellAction.cellClick, this.parent.workCellAction);
-                if (!this.parent.isAdaptive) {
-                    EventHandler.add(element, 'dblclick', this.parent.workCellAction.cellDblClick, this.parent.workCellAction);
-                }
-            }
-        }
-        else {
-            EventHandler.add(element, 'scroll', this.onContentScroll, this);
-        }
-    };
     Year.prototype.scrollToDate = function (scrollDate) {
         var date = +new Date(util.resetTime(scrollDate));
         var element = this.element.querySelector('.' + cls.WORK_CELLS_CLASS + ':not(.' + cls.OTHERMONTH_CLASS + ')[data-date="' + date + '"]');