@syncfusion/ej2-schedule 19.2.60 → 19.3.48

package/src/schedule/renderer/month.js

@@ -11,7 +11,8 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import { EventHandler, formatUnit, isNullOrUndefined, createElement, addClass, append, prepend } from '@syncfusion/ej2-base';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { EventHandler, formatUnit, isNullOrUndefined, createElement, addClass, append, prepend, remove } from '@syncfusion/ej2-base';
 import { ViewBase } from './view-base';
 import { MonthEvent } from '../event-renderer/month';
 import * as util from '../base/util';
@@ -77,20 +78,14 @@ var Month = /** @class */ (function (_super) {
             this.setContentHeight(content, leftPanel, height);
         }
         var scrollBarWidth = util.getScrollBarWidth();
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         header.firstElementChild.style[args.cssProperties.rtlBorder] = '';
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         header.style[args.cssProperties.rtlPadding] = '';
         if (content.offsetWidth - content.clientWidth > 0) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             header.firstElementChild.style[args.cssProperties.border] = scrollBarWidth > 0 ? '1px' : '0px';
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             header.style[args.cssProperties.padding] = scrollBarWidth > 0 ? scrollBarWidth - 1 + 'px' : '0px';
         }
         else {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             header.firstElementChild.style[args.cssProperties.border] = '';
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             header.style[args.cssProperties.padding] = '';
         }
         this.setColWidth(content);
@@ -192,6 +187,11 @@ var Month = /** @class */ (function (_super) {
         }
         this.parent.notify(event.contentReady, {});
     };
+    Month.prototype.refreshHeader = function () {
+        remove(this.element.querySelector('tbody tr'));
+        this.renderHeader();
+        this.parent.notify(event.contentReady, {});
+    };
     Month.prototype.wireCellEvents = function (element) {
         EventHandler.add(element, 'mousedown', this.parent.workCellAction.cellMouseDown, this.parent.workCellAction);
         EventHandler.add(element, 'click', this.parent.workCellAction.cellClick, this.parent.workCellAction);

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

@@ -116,8 +116,14 @@ var TimelineYear = /** @class */ (function (_super) {
                     if (c.colSpan) {
                         tdEle.setAttribute('colspan', c.colSpan.toString());
                     }
+                    if (c.groupIndex > -1) {
+                        tdEle.setAttribute('data-group-index', c.groupIndex.toString());
+                    }
                     this.setResourceHeaderContent(tdEle, c);
                 }
+                if (className === cls.LEFT_INDENT_WRAP_CLASS) {
+                    this.parent.renderHeaderIndentTemplate(c, tdEle);
+                }
                 var args = { elementType: c.type, element: tdEle, date: c.date, groupIndex: c.groupIndex };
                 this.parent.trigger(event.renderCell, args);
                 ntr.appendChild(tdEle);
@@ -328,10 +334,10 @@ var TimelineYear = /** @class */ (function (_super) {
                 });
                 addClass([td], classList);
                 td.setAttribute('data-group-index', groupIndex.toString());
-                this.renderCellTemplate({ date: date, type: 'workCells', groupIndex: groupIndex }, td);
+                this.renderCellTemplate({ date: date, type: 'resourceGroupCells', groupIndex: groupIndex }, td);
                 this.wireEvents(td, 'cell');
                 tr.appendChild(td);
-                this.parent.trigger(event.renderCell, { elementType: 'workCells', element: td, date: date });
+                this.parent.trigger(event.renderCell, { elementType: 'resourceGroupCells', element: td, date: date });
             }
         }
         if (this.parent.activeViewOptions.orientation === 'Vertical') {

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

@@ -29,11 +29,13 @@ export declare class VerticalView extends ViewBase implements IRenderer {
     highlightCurrentTime(): void;
     getCurrentTimeIndicatorIndex(): number[];
     private clearCurrentTimeIndicatorTimer;
+    private updateCurrentTimeIndicatorTimer;
     removeCurrentTimeIndicatorElements(): void;
     changeCurrentTimePosition(): void;
     getTopFromDateTime(date: Date): number;
     private getWorkCellHeight;
     private getTdContent;
+    refreshHeader(): void;
     renderLayout(type: string): void;
     renderHeader(): void;
     renderContent(): void;

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

@@ -224,12 +224,11 @@ var VerticalView = /** @class */ (function (_super) {
                             if (!isNullOrUndefined(_this.currentTimeIndicatorTimer)) {
                                 _this.clearCurrentTimeIndicatorTimer();
                                 _this.changeCurrentTimePosition();
-                                _this.currentTimeIndicatorTimer =
-                                    window.setInterval(function () { _this.changeCurrentTimePosition(); }, util.MS_PER_MINUTE);
+                                _this.updateCurrentTimeIndicatorTimer();
                             }
                         }, interval);
                     }
-                    this.currentTimeIndicatorTimer = window.setInterval(function () { _this.changeCurrentTimePosition(); }, util.MS_PER_MINUTE);
+                    this.updateCurrentTimeIndicatorTimer();
                 }
             }
             else {
@@ -273,6 +272,10 @@ var VerticalView = /** @class */ (function (_super) {
             this.removeCurrentTimeIndicatorElements();
         }
     };
+    VerticalView.prototype.updateCurrentTimeIndicatorTimer = function () {
+        var _this = this;
+        this.currentTimeIndicatorTimer = window.setInterval(function () { _this.changeCurrentTimePosition(); }, util.MS_PER_MINUTE);
+    };
     VerticalView.prototype.removeCurrentTimeIndicatorElements = function () {
         var queryString = '.' + cls.PREVIOUS_TIMELINE_CLASS + ',.' + cls.CURRENT_TIMELINE_CLASS + ',.' + cls.CURRENT_TIME_CLASS;
         var timeIndicator = [].slice.call(this.element.querySelectorAll(queryString));
@@ -366,7 +369,6 @@ var VerticalView = /** @class */ (function (_super) {
                     cntEle = [].slice.call(this.parent.getMinorSlotTemplate()(args, this.parent, templateName, templateId + templateName, false));
                 }
                 else {
-                    wrapper.innerHTML = ' ';
                     cntEle = [].slice.call(wrapper.childNodes);
                 }
                 break;
@@ -381,6 +383,11 @@ var VerticalView = /** @class */ (function (_super) {
         }
         return cntEle;
     };
+    VerticalView.prototype.refreshHeader = function () {
+        remove(this.element.querySelector('tbody tr'));
+        this.renderHeader();
+        this.parent.notify(event.contentReady, {});
+    };
     VerticalView.prototype.renderLayout = function (type) {
         this.setPanel(createElement('div', { className: cls.TABLE_WRAP_CLASS }));
         var clsList = [this.baseCssClass, this.viewClass];
@@ -452,6 +459,7 @@ var VerticalView = /** @class */ (function (_super) {
         var tbl = this.createTableLayout();
         var trEle = createElement('tr');
         var rowCount = this.colLevels.length;
+        var nth;
         for (var i = 0; i < rowCount; i++) {
             var ntr_1 = trEle.cloneNode();
             var data_1 = { className: [(this.colLevels[i][0] && this.colLevels[i][0].className[0])], type: 'emptyCells' };
@@ -463,7 +471,9 @@ var VerticalView = /** @class */ (function (_super) {
                         attrs: { title: this.parent.localeObj.getConstant('week') + ' ' + weekNo }
                     })];
             }
-            ntr_1.appendChild(this.createTd(data_1));
+            nth = this.createTd(data_1);
+            this.parent.renderHeaderIndentTemplate(data_1, nth);
+            ntr_1.appendChild(nth);
             tbl.querySelector('tbody').appendChild(ntr_1);
         }
         var ntr = trEle.cloneNode();
@@ -476,8 +486,9 @@ var VerticalView = /** @class */ (function (_super) {
                 cls.ICON + ' ' + cls.DISABLE_CLASS
         });
         var data = { className: [cls.ALLDAY_CELLS_CLASS], type: 'emptyCells' };
-        var nth = this.createTd(data);
+        nth = this.createTd(data);
         nth.appendChild(appointmentExpandCollapse);
+        this.parent.renderHeaderIndentTemplate(data, nth);
         ntr.appendChild(nth);
         tbl.querySelector('tbody').appendChild(ntr);
         wrap.appendChild(tbl);
@@ -618,10 +629,10 @@ var VerticalView = /** @class */ (function (_super) {
             ntd.setAttribute('colspan', tdData.colSpan.toString());
         }
         var clsName = this.getContentTdClass(r);
-        if (!this.parent.isMinMaxDate(util.resetTime(new Date('' + tdData.date)))) {
+        var cellDate = util.resetTime(tdData.date);
+        if (!this.parent.isMinMaxDate(cellDate)) {
             clsName.push(cls.DISABLE_DATES);
         }
-        var cellDate = util.resetTime(new Date('' + tdData.date));
         util.setTime(cellDate, util.getDateInMs(r.date));
         var type = 'workCells';
         if (tdData.className.indexOf(cls.RESOURCE_PARENT_CLASS) !== -1) {

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

@@ -17,7 +17,8 @@ export declare class ViewBase {
     constructor(parent: Schedule);
     isTimelineView(): boolean;
     getContentRows(): Element[];
-    serverRenderLayout(): void;
+    refreshHeader(): void;
+    refreshResourceHeader(): void;
     getDayName(date: Date): string;
     getDate(date: Date): string;
     getTime(date: Date): string;

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

@@ -1,5 +1,6 @@
 import { createElement, append, prepend, isNullOrUndefined, getValue, getDefaultDateObject, cldrData, addClass, setStyleAttribute, formatUnit, EventHandler, remove } from '@syncfusion/ej2-base';
 import * as cls from '../base/css-constant';
+import * as event from '../base/constant';
 import * as util from '../base/util';
 /**
  * view base
@@ -19,8 +20,15 @@ var ViewBase = /** @class */ (function () {
     ViewBase.prototype.getContentRows = function () {
         return [];
     };
-    ViewBase.prototype.serverRenderLayout = function () {
-        // Need only for layout server rendering
+    ViewBase.prototype.refreshHeader = function () {
+        // Method to refresh the date header
+    };
+    ViewBase.prototype.refreshResourceHeader = function () {
+        remove(this.element.querySelector('tbody').lastElementChild.firstElementChild);
+        var resTd = createElement('td');
+        resTd.appendChild(this.parent.resourceBase.createResourceColumn());
+        prepend([resTd], this.element.querySelector('tbody').lastElementChild);
+        this.parent.notify(event.contentReady, {});
     };
     ViewBase.prototype.getDayName = function (date) {
         return this.parent.getDayNames('abbreviated')[date.getDay()];
@@ -67,7 +75,7 @@ var ViewBase = /** @class */ (function () {
     };
     ViewBase.prototype.createTableLayout = function (className) {
         var clsName = className || '';
-        var table = createElement('table', { className: cls.SCHEDULE_TABLE_CLASS + ' ' + clsName });
+        var table = createElement('table', { className: cls.SCHEDULE_TABLE_CLASS + ' ' + clsName, attrs: { role: 'table' } });
         var tbody = createElement('tbody');
         table.appendChild(tbody);
         return table;

package/styles/bootstrap-dark.css

@@ -218,7 +218,6 @@
   box-shadow: none;
   margin-bottom: 0;
   min-height: 43px;
-  border-radius: 0;
 }
 
 .e-schedule .e-schedule-toolbar .e-active-view .e-tbar-btn-text,
@@ -227,22 +226,9 @@
 }
 
 .e-schedule .e-schedule-toolbar .e-toolbar-pop {
-  background: #131313;
   overflow: auto;
 }
 
-.e-schedule .e-schedule-toolbar .e-tbar-btn {
-  background: #131313;
-}
-
-.e-schedule .e-schedule-toolbar .e-tbar-btn:hover, .e-schedule .e-schedule-toolbar .e-tbar-btn:focus {
-  background-color: #393939;
-}
-
-.e-schedule .e-schedule-toolbar .e-tbar-btn:active {
-  background: #484848;
-}
-
 .e-schedule .e-schedule-toolbar .e-tbar-btn .e-tbar-btn-text {
   cursor: pointer;
   font-size: 14px;
@@ -267,13 +253,7 @@
   padding-top: 0;
 }
 
-.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:hover {
-  background: #393939;
-  border-radius: 4px;
-}
-
-.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:focus {
-  background: #393939;
+.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:focus, .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:hover {
   border-radius: 4px;
 }
 
@@ -314,16 +294,6 @@
   text-transform: initial;
 }
 
-.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
-  cursor: pointer;
-  font-size: 14px;
-  text-transform: initial;
-}
-
-.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
-  padding-left: 0;
-}
-
 .e-schedule .e-schedule-toolbar.e-rtl .e-hor-nav {
   background: #131313;
   border-left: 0;
@@ -336,7 +306,6 @@
 }
 
 .e-schedule .e-schedule-toolbar .e-hor-nav {
-  background: #131313;
   border-left: 1px solid #858585;
 }
 
@@ -547,6 +516,13 @@
   width: 100%;
 }
 
+.e-schedule .e-content-placeholder {
+  height: 100%;
+  position: relative;
+  width: 100%;
+  z-index: 99999;
+}
+
 .e-schedule .e-content-wrap,
 .e-schedule .e-scroll-container {
   -webkit-overflow-scrolling: touch;
@@ -586,7 +562,7 @@
 
 .e-schedule .e-block-appointment {
   background: rgba(255, 255, 255, 0.08);
-  border-radius: 2px;
+  border-radius: 4px;
   color: #969696;
   cursor: default;
   overflow: hidden;
@@ -776,8 +752,8 @@
 
 .e-schedule .e-vertical-view.e-timescale-disable .e-appointment {
   background: #0070f0;
-  border: 1px solid #248aff;
-  border-radius: 2px;
+  border: 1px solid #1a1a1a;
+  border-radius: 4px;
   color: #fff;
   display: -ms-flexbox;
   display: flex;
@@ -861,7 +837,7 @@
 .e-schedule .e-vertical-view.e-timescale-disable .e-more-indicator {
   color: #8d8d8d;
   cursor: pointer;
-  font-size: 12px;
+  font-size: 11px;
   line-height: 11px;
   overflow: hidden;
   padding: 2px 4px;
@@ -1052,7 +1028,7 @@
 }
 
 .e-schedule .e-vertical-view .e-date-header-wrap.e-all-day-scroll {
-  border-bottom: 1px solid #248aff;
+  border-bottom: 1px solid #1a1a1a;
   overflow-y: auto;
 }
 
@@ -1093,8 +1069,8 @@
 
 .e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment {
   background: #0070f0;
-  border: 1px solid #248aff;
-  border-radius: 2px;
+  border: 1px solid #1a1a1a;
+  border-radius: 4px;
   color: #fff;
   display: -ms-flexbox;
   display: flex;
@@ -1151,8 +1127,8 @@
 
 .e-schedule .e-vertical-view .e-day-wrapper .e-appointment {
   background: #0070f0;
-  border: 1px solid #248aff;
-  border-radius: 2px;
+  border: 1px solid #1a1a1a;
+  border-radius: 4px;
   color: #fff;
   overflow: hidden;
   position: absolute;
@@ -1442,8 +1418,8 @@
 
 .e-schedule .e-month-view .e-appointment {
   background: #0070f0;
-  border: 1px solid #248aff;
-  border-radius: 2px;
+  border: 1px solid #1a1a1a;
+  border-radius: 4px;
   color: #fff;
   cursor: default;
   display: -ms-flexbox;
@@ -1511,7 +1487,7 @@
 .e-schedule .e-month-view .e-more-indicator {
   color: #8d8d8d;
   cursor: pointer;
-  font-size: 12px;
+  font-size: 11px;
   line-height: 11px;
   overflow: hidden;
   padding: 2px 4px;
@@ -1700,7 +1676,7 @@
   border-style: solid;
   border-width: 0 1px 1px 0;
   color: #f0f0f0;
-  height: 70px;
+  height: 75px;
   padding-left: 15px;
   padding-right: 0;
   vertical-align: middle;
@@ -1741,6 +1717,7 @@
   border-style: solid;
   border-width: 0 1px 1px 0;
   color: #f0f0f0;
+  padding: 0;
 }
 
 .e-schedule .e-timeline-year-view .e-work-cells:hover:not(.e-other-month) {
@@ -1844,7 +1821,7 @@
 
 .e-schedule .e-timeline-year-view .e-month-header,
 .e-schedule .e-timeline-year-view .e-work-cells {
-  height: 70px;
+  height: 75px;
 }
 
 .e-schedule .e-timeline-year-view .e-header-cells,
@@ -1885,8 +1862,8 @@
 
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment {
   background: #0070f0;
-  border: 1px solid #248aff;
-  border-radius: 2px;
+  border: 1px solid #1a1a1a;
+  border-radius: 4px;
   color: #fff;
   cursor: default;
   display: -ms-flexbox;
@@ -1964,7 +1941,7 @@
 .e-schedule .e-timeline-year-view .e-event-table .e-more-indicator {
   color: #8d8d8d;
   cursor: pointer;
-  font-size: 12px;
+  font-size: 11px;
   line-height: 11px;
   overflow: hidden;
   padding: 2px 4px;
@@ -2095,13 +2072,6 @@
   background-color: #393939;
 }
 
-.e-schedule .e-timeline-view .e-resource-cells:focus .e-resource-tree-icon,
-.e-schedule .e-timeline-month-view .e-resource-cells:focus .e-resource-tree-icon {
-  background-color: #484848;
-  border-radius: 50%;
-  color: #fff;
-}
-
 .e-schedule .e-timeline-view .e-resource-column-wrap,
 .e-schedule .e-timeline-month-view .e-resource-column-wrap {
   overflow: hidden;
@@ -2125,6 +2095,12 @@
   height: 42px;
 }
 
+.e-schedule .e-timeline-view.e-virtual-mask .e-work-cells,
+.e-schedule .e-timeline-month-view.e-virtual-mask .e-work-cells {
+  background-color: rgba(0, 0, 0, 0.08);
+  box-shadow: inset 0 0 0 8px #2a2a2a;
+}
+
 .e-schedule .e-timeline-view .e-resource-tree-icon,
 .e-schedule .e-timeline-month-view .e-resource-tree-icon {
   color: #fff;
@@ -2158,8 +2134,8 @@
 .e-schedule .e-timeline-view .e-appointment,
 .e-schedule .e-timeline-month-view .e-appointment {
   background: #0070f0;
-  border: 1px solid #248aff;
-  border-radius: 2px;
+  border: 1px solid #1a1a1a;
+  border-radius: 4px;
   color: #fff;
   cursor: default;
   display: -ms-flexbox;
@@ -2211,6 +2187,7 @@
 .e-schedule .e-timeline-view .e-appointment .e-time,
 .e-schedule .e-timeline-month-view .e-appointment .e-time {
   display: block;
+  line-height: 1.4;
 }
 
 .e-schedule .e-timeline-view .e-appointment .e-disable,
@@ -2261,7 +2238,7 @@
 .e-schedule .e-timeline-month-view .e-more-indicator {
   color: #8d8d8d;
   cursor: pointer;
-  font-size: 12px;
+  font-size: 11px;
   line-height: 11px;
   overflow: hidden;
   padding: 2px 4px;
@@ -2387,6 +2364,7 @@
 
 .e-schedule .e-month-agenda-view .e-week-number-wrapper .e-week-number {
   border-right: 1px solid #505050;
+  height: 40px;
   padding-top: 8px;
 }
 
@@ -2542,7 +2520,7 @@
   padding: 0;
 }
 
-.e-schedule .e-month-agenda-view .e-appointment-indicator {
+.e-schedule .e-month-agenda-view .e-work-cells .e-appointment-indicator {
   background: #0070f0;
   border-radius: 50%;
   height: 6px;
@@ -3876,7 +3854,7 @@
 
 .e-appointment.e-schedule-event-clone {
   background: #0070f0;
-  border-radius: 2px;
+  border-radius: 4px;
   box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
   color: #fff;
   display: -ms-flexbox;
@@ -4053,7 +4031,7 @@
 
 .e-more-popup-wrapper .e-appointment {
   background: #0070f0;
-  border-radius: 2px;
+  border-radius: 4px;
   color: #fff;
   display: -ms-flexbox;
   display: flex;
@@ -4201,6 +4179,7 @@
   border-color: #505050;
   border-style: solid;
   border-width: 0 0 1px 1px;
+  padding: 0;
 }
 
 .e-schedule .e-vertical-view .e-work-cells:hover {
@@ -4286,6 +4265,7 @@
   border-style: solid;
   border-width: 0 0 1px 1px;
   color: #f0f0f0;
+  padding: 0;
 }
 
 .e-schedule .e-month-view .e-work-cells:hover,
@@ -4374,6 +4354,7 @@
   border-style: solid;
   border-width: 0 0 1px 1px;
   color: #f0f0f0;
+  padding: 0;
 }
 
 .e-schedule .e-timeline-view .e-work-cells:hover:not(.e-resource-group-cells),
@@ -4382,6 +4363,11 @@
   color: #fff;
 }
 
+.e-schedule .e-timeline-view.e-virtual-mask .e-work-cells:hover,
+.e-schedule .e-timeline-month-view.e-virtual-mask .e-work-cells:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
 .e-schedule .e-timeline-view .e-work-days,
 .e-schedule .e-timeline-month-view .e-work-days {
   background-color: #1a1a1a;
@@ -4581,10 +4567,6 @@
   padding-left: 10px;
 }
 
-.e-recurrenceeditor .e-icons {
-  height: 0;
-}
-
 .e-recurrenceeditor .e-input-wrapper-side.e-form-left {
   padding: 0 8px 10px 0;
 }