@syncfusion/ej2-vue-schedule 19.4.55 → 20.1.50

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-vue-schedule@*",
-  "_id": "@syncfusion/ej2-vue-schedule@19.4.52",
+  "_id": "@syncfusion/ej2-vue-schedule@20.1.48",
   "_inBundle": false,
-  "_integrity": "sha512-PVeNkzFbyZO3M6MVMBssnYyKdmxcz8+LO3NnGgg3c2PYbnt3ieP0ey2nmTql5GcIVxVG71OsAAteK6jP9Gs7Tg==",
+  "_integrity": "sha512-W+YqZZu1AY6OpfvsHyn+omLXagEgxCC/muYyJYw3YbbU8z1q7niVhpnjCzGqwsn1gFBlOrnhXQ7Ac06r+M8jqw==",
   "_location": "/@syncfusion/ej2-vue-schedule",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-vue-schedule/-/ej2-vue-schedule-19.4.52.tgz",
-  "_shasum": "32a55dbd80d41e53bfeec56b83f0b9d6fae0ca6d",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-vue-schedule/-/ej2-vue-schedule-20.1.48.tgz",
+  "_shasum": "84562637198a62acd36e862d86df3ca03d85e1f3",
   "_spec": "@syncfusion/ej2-vue-schedule@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.4.52",
-    "@syncfusion/ej2-schedule": "19.4.55",
-    "@syncfusion/ej2-vue-base": "~19.4.53"
+    "@syncfusion/ej2-base": "~20.1.50",
+    "@syncfusion/ej2-schedule": "20.1.50",
+    "@syncfusion/ej2-vue-base": "~20.1.49"
   },
   "deprecated": false,
   "description": "Flexible scheduling library with more built-in features and enhanced customization options similar to outlook and google calendar, allowing the users to plan and manage their appointments with efficient data-binding support. for Vue",
@@ -70,6 +70,6 @@
     "type": "git",
     "url": "git+https://github.com/syncfusion/ej2-vue-ui-components.git"
   },
-  "version": "19.4.55",
+  "version": "20.1.50",
   "sideEffects": false
 }

package/src/recurrence-editor/recurrenceeditor.component.d.ts

@@ -28,6 +28,7 @@ export declare class RecurrenceEditorComponent extends ComponentBase {
     clearTemplate(templateNames?: string[]): any;
     setProperties(prop: any, muteOnChange: boolean): void;
     render(createElement: any): any;
+    custom(): void;
     getRecurrenceDates(startDate: Object, rule: string, excludeDate?: string, maximumCount?: number, viewDate?: Object): number[];
     getRecurrenceRule(): string;
     getRuleSummary(rule: string): string;

package/src/recurrence-editor/recurrenceeditor.component.js

@@ -55,6 +55,7 @@ var RecurrenceEditorComponent = /** @class */ (function (_super) {
         _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
         _this.ej2Instances.setProperties = _this.setProperties;
         _this.ej2Instances.clearTemplate = _this.clearTemplate;
+        _this.updated = _this.updated;
         return _this;
     }
     RecurrenceEditorComponent.prototype.clearTemplate = function (templateNames) {
@@ -113,6 +114,9 @@ var RecurrenceEditorComponent = /** @class */ (function (_super) {
         }
         return h('div', slots);
     };
+    RecurrenceEditorComponent.prototype.custom = function () {
+        this.updated();
+    };
     RecurrenceEditorComponent.prototype.getRecurrenceDates = function (startDate, rule, excludeDate, maximumCount, viewDate) {
         return this.ej2Instances.getRecurrenceDates(startDate, rule, excludeDate, maximumCount, viewDate);
     };
@@ -138,7 +142,12 @@ var RecurrenceEditorComponent = /** @class */ (function (_super) {
         ,Options({
             props: props,
             watch: watch,
-            emits: emitProbs
+            emits: emitProbs,
+            provide: function provide() {
+                return {
+                    custom: this.custom
+                };
+            }
         })
     ], RecurrenceEditorComponent);
     return RecurrenceEditorComponent;

package/src/schedule/headerrows.directive.d.ts

@@ -1,7 +1,9 @@
 export declare const isExecute: any;
 declare let vueImport: any;
 export declare class HeaderRowsDirective extends vueImport {
-    render(): void;
+    constructor();
+    render(createElement: any): void;
+    updated(): void;
     getTag(): string;
 }
 export declare const HeaderRowsPlugin: {

package/src/schedule/headerrows.directive.js

@@ -19,7 +19,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
 import * as Vue3 from 'vue-class-component';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
 import Vue from 'vue';
+import { Options } from 'vue-class-component';
 export var isExecute = gh ? false : true;
 var vueImport;
 if (!isExecute || parseInt(allVue.version) < 3) {
@@ -31,16 +33,36 @@ else {
 var HeaderRowsDirective = /** @class */ (function (_super) {
     __extends(HeaderRowsDirective, _super);
     function HeaderRowsDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        return _super.call(this, arguments) || this;
     }
-    HeaderRowsDirective.prototype.render = function () {
+    HeaderRowsDirective.prototype.render = function (createElement) {
+        if (gh) {
+            var h = gh || createElement;
+            var slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = gh ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
         return;
     };
+    HeaderRowsDirective.prototype.updated = function () {
+        if (gh && this.custom) {
+            this.custom();
+        }
+    };
     HeaderRowsDirective.prototype.getTag = function () {
         return 'e-header-rows';
     };
     HeaderRowsDirective = __decorate([
         EJComponentDecorator({}, isExecute)
+        ,Options({
+            inject: {
+                custom: {
+                    default: null
+                }
+            }
+        })
     ], HeaderRowsDirective);
     return HeaderRowsDirective;
 }(vueImport));

package/src/schedule/resources.directive.d.ts

@@ -1,7 +1,9 @@
 export declare const isExecute: any;
 declare let vueImport: any;
 export declare class ResourcesDirective extends vueImport {
-    render(): void;
+    constructor();
+    render(createElement: any): void;
+    updated(): void;
     getTag(): string;
 }
 export declare const ResourcesPlugin: {

package/src/schedule/resources.directive.js

@@ -19,7 +19,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
 import * as Vue3 from 'vue-class-component';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
 import Vue from 'vue';
+import { Options } from 'vue-class-component';
 export var isExecute = gh ? false : true;
 var vueImport;
 if (!isExecute || parseInt(allVue.version) < 3) {
@@ -31,16 +33,36 @@ else {
 var ResourcesDirective = /** @class */ (function (_super) {
     __extends(ResourcesDirective, _super);
     function ResourcesDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        return _super.call(this, arguments) || this;
     }
-    ResourcesDirective.prototype.render = function () {
+    ResourcesDirective.prototype.render = function (createElement) {
+        if (gh) {
+            var h = gh || createElement;
+            var slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = gh ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
         return;
     };
+    ResourcesDirective.prototype.updated = function () {
+        if (gh && this.custom) {
+            this.custom();
+        }
+    };
     ResourcesDirective.prototype.getTag = function () {
         return 'e-resources';
     };
     ResourcesDirective = __decorate([
         EJComponentDecorator({}, isExecute)
+        ,Options({
+            inject: {
+                custom: {
+                    default: null
+                }
+            }
+        })
     ], ResourcesDirective);
     return ResourcesDirective;
 }(vueImport));

package/src/schedule/schedule.component.d.ts

@@ -31,6 +31,7 @@ export declare class ScheduleComponent extends ComponentBase {
         [key: string]: Object;
     }, successHandler?: Function): void;
     render(createElement: any): any;
+    custom(): void;
     addEvent(data: Object | Object[]): void;
     addResource(resources: Object | Object[], name: string, index: number): void;
     changeCurrentView(viewName: Object, viewIndex?: number): void;

package/src/schedule/schedule.component.js

@@ -61,6 +61,7 @@ var ScheduleComponent = /** @class */ (function (_super) {
         _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
         _this.ej2Instances.setProperties = _this.setProperties;
         _this.ej2Instances.clearTemplate = _this.clearTemplate;
+        _this.updated = _this.updated;
         return _this;
     }
     ScheduleComponent.prototype.clearTemplate = function (templateNames) {
@@ -157,6 +158,9 @@ var ScheduleComponent = /** @class */ (function (_super) {
         }
         return h('div', slots);
     };
+    ScheduleComponent.prototype.custom = function () {
+        this.updated();
+    };
     ScheduleComponent.prototype.addEvent = function (data) {
         return this.ej2Instances.addEvent(data);
     };
@@ -296,7 +300,12 @@ var ScheduleComponent = /** @class */ (function (_super) {
         ,Options({
             props: props,
             watch: watch,
-            emits: emitProbs
+            emits: emitProbs,
+            provide: function provide() {
+                return {
+                    custom: this.custom
+                };
+            }
         })
     ], ScheduleComponent);
     return ScheduleComponent;

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

@@ -1,7 +1,9 @@
 export declare const isExecute: any;
 declare let vueImport: any;
 export declare class ViewsDirective extends vueImport {
-    render(): void;
+    constructor();
+    render(createElement: any): void;
+    updated(): void;
     getTag(): string;
 }
 export declare const ViewsPlugin: {

package/src/schedule/views.directive.js

@@ -19,7 +19,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
 import * as Vue3 from 'vue-class-component';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
 import Vue from 'vue';
+import { Options } from 'vue-class-component';
 export var isExecute = gh ? false : true;
 var vueImport;
 if (!isExecute || parseInt(allVue.version) < 3) {
@@ -31,16 +33,36 @@ else {
 var ViewsDirective = /** @class */ (function (_super) {
     __extends(ViewsDirective, _super);
     function ViewsDirective() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        return _super.call(this, arguments) || this;
     }
-    ViewsDirective.prototype.render = function () {
+    ViewsDirective.prototype.render = function (createElement) {
+        if (gh) {
+            var h = gh || createElement;
+            var slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = gh ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
         return;
     };
+    ViewsDirective.prototype.updated = function () {
+        if (gh && this.custom) {
+            this.custom();
+        }
+    };
     ViewsDirective.prototype.getTag = function () {
         return 'e-views';
     };
     ViewsDirective = __decorate([
         EJComponentDecorator({}, isExecute)
+        ,Options({
+            inject: {
+                custom: {
+                    default: null
+                }
+            }
+        })
     ], ViewsDirective);
     return ViewsDirective;
 }(vueImport));

package/styles/bootstrap-dark.css

@@ -1847,6 +1847,15 @@
   text-decoration: underline;
 }
 
+.e-schedule .e-timeline-year-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-year-view.e-virtual-mask .e-work-cells:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
 .e-schedule .e-timeline-year-view .e-event-table {
   position: absolute;
   top: 0;
@@ -2878,13 +2887,6 @@
   min-width: 34px;
 }
 
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons {
-  padding: 0;
-}
-
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
@@ -4015,6 +4017,7 @@
 
 .e-bigger .e-more-popup-wrapper .e-more-event-content,
 .e-more-popup-wrapper .e-more-event-content {
+  color: #f0f0f0;
   height: calc(100% - 35px);
   max-height: 150px;
   overflow-y: auto;

package/styles/bootstrap.css

@@ -1844,6 +1844,15 @@
   text-decoration: underline;
 }
 
+.e-schedule .e-timeline-year-view.e-virtual-mask .e-work-cells {
+  background-color: rgba(0, 0, 0, 0.08);
+  box-shadow: inset 0 0 0 8px #f8f8f8;
+}
+
+.e-schedule .e-timeline-year-view.e-virtual-mask .e-work-cells:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
 .e-schedule .e-timeline-year-view .e-event-table {
   position: absolute;
   top: 0;
@@ -2875,13 +2884,6 @@
   min-width: 34px;
 }
 
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons {
-  padding: 0;
-}
-
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
@@ -4013,6 +4015,7 @@
 
 .e-bigger .e-more-popup-wrapper .e-more-event-content,
 .e-more-popup-wrapper .e-more-event-content {
+  color: #333;
   height: calc(100% - 35px);
   max-height: 150px;
   overflow-y: auto;

package/styles/bootstrap4.css

@@ -1818,7 +1818,7 @@
   cursor: default;
   font-weight: 400;
   height: 35px;
-  padding: 8px;
+  padding: 0;
   text-align: center;
 }
 
@@ -1850,6 +1850,15 @@
   text-decoration: underline;
 }
 
+.e-schedule .e-timeline-year-view.e-virtual-mask .e-work-cells {
+  background-color: rgba(0, 0, 0, 0.08);
+  box-shadow: inset 0 0 0 8px #f8f9fa;
+}
+
+.e-schedule .e-timeline-year-view.e-virtual-mask .e-work-cells:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
 .e-schedule .e-timeline-year-view .e-event-table {
   position: absolute;
   top: 0;
@@ -2882,13 +2891,6 @@
   min-width: 34px;
 }
 
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons {
-  padding: 0;
-}
-
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
@@ -4124,6 +4126,7 @@
 
 .e-bigger .e-more-popup-wrapper .e-more-event-content,
 .e-more-popup-wrapper .e-more-event-content {
+  color: #212529;
   height: calc(100% - 35px);
   max-height: 150px;
   overflow-y: auto;

package/styles/bootstrap5-dark.css

@@ -879,7 +879,7 @@
 .e-schedule .e-vertical-view .e-header-cells {
   font-size: 12px;
   height: 60px;
-  padding: 8px 8px 0;
+  padding: 4px;
 }
 
 .e-schedule .e-vertical-view .e-header-cells .e-header-day {
@@ -1854,6 +1854,15 @@
   text-decoration: underline;
 }
 
+.e-schedule .e-timeline-year-view.e-virtual-mask .e-work-cells {
+  background-color: #343a40;
+  box-shadow: inset 0 0 0 8px #282d31;
+}
+
+.e-schedule .e-timeline-year-view.e-virtual-mask .e-work-cells:hover {
+  background-color: #343a40;
+}
+
 .e-schedule .e-timeline-year-view .e-event-table {
   position: absolute;
   top: 0;
@@ -2621,7 +2630,7 @@
 .e-schedule .e-agenda-view .e-day-date-header {
   color: #e9ecef;
   cursor: default;
-  padding: 8px 34px 14px 18px;
+  padding: 8px 20px 14px 14px;
 }
 
 .e-schedule .e-agenda-view .e-day-date-header .e-m-date {
@@ -2738,7 +2747,7 @@
   border-left: 3px solid #0d6efd;
   border-right: 0;
   cursor: default;
-  padding: 0 12px;
+  padding: 0 14px;
 }
 
 .e-schedule .e-agenda-view .e-appointment:hover {
@@ -2893,13 +2902,6 @@
   padding: 8px;
 }
 
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons {
-  padding: 0;
-}
-
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
@@ -2926,6 +2928,12 @@
   font-size: 14px;
 }
 
+.e-bigger .e-schedule .e-vertical-view .e-header-cells,
+.e-bigger.e-schedule .e-vertical-view .e-header-cells {
+  height: 66px;
+  padding: 8px;
+}
+
 .e-bigger .e-schedule .e-vertical-view .e-header-cells .e-header-day,
 .e-bigger.e-schedule .e-vertical-view .e-header-cells .e-header-day {
   font-size: 14px;
@@ -3763,8 +3771,6 @@
   display: block;
   padding: 8px 18px 8px 18px;
   text-align: right;
-  background-color: #282d31;
-  border-radius: 0 0 6px 6px;
 }
 
 .e-quick-popup-wrapper .e-popup-footer .e-event-edit {
@@ -4131,6 +4137,7 @@
 
 .e-bigger .e-more-popup-wrapper .e-more-event-content,
 .e-more-popup-wrapper .e-more-event-content {
+  color: #fff;
   height: calc(100% - 35px);
   max-height: 150px;
   overflow-y: auto;
@@ -4204,7 +4211,7 @@
 
 .e-bigger .e-more-popup-wrapper .e-more-event-close .e-btn-icon,
 .e-more-popup-wrapper .e-more-event-close .e-btn-icon {
-  margin-top: 8px;
+  margin-top: 3px;
 }
 
 .e-bigger .e-more-popup-wrapper .e-more-event-close:focus, .e-bigger .e-more-popup-wrapper .e-more-event-close:hover,
@@ -4508,12 +4515,6 @@
   color: #fff;
 }
 
-.e-schedule .e-month-view .e-selected-cell.e-current-date .e-date-header,
-.e-schedule .e-month-agenda-view .e-selected-cell.e-current-date .e-date-header {
-  background-color: #fff;
-  color: #343a40;
-}
-
 .e-schedule .e-month-view .e-selected-cell .e-more-indicator,
 .e-schedule .e-month-agenda-view .e-selected-cell .e-more-indicator {
   color: #fff;

package/styles/bootstrap5.css

@@ -880,7 +880,7 @@
 .e-schedule .e-vertical-view .e-header-cells {
   font-size: 12px;
   height: 60px;
-  padding: 8px 8px 0;
+  padding: 4px;
 }
 
 .e-schedule .e-vertical-view .e-header-cells .e-header-day {
@@ -1855,6 +1855,15 @@
   text-decoration: underline;
 }
 
+.e-schedule .e-timeline-year-view.e-virtual-mask .e-work-cells {
+  background-color: #e9ecef;
+  box-shadow: inset 0 0 0 8px #f8f9fa;
+}
+
+.e-schedule .e-timeline-year-view.e-virtual-mask .e-work-cells:hover {
+  background-color: #e9ecef;
+}
+
 .e-schedule .e-timeline-year-view .e-event-table {
   position: absolute;
   top: 0;
@@ -2622,7 +2631,7 @@
 .e-schedule .e-agenda-view .e-day-date-header {
   color: #343a40;
   cursor: default;
-  padding: 8px 34px 14px 18px;
+  padding: 8px 20px 14px 14px;
 }
 
 .e-schedule .e-agenda-view .e-day-date-header .e-m-date {
@@ -2739,7 +2748,7 @@
   border-left: 3px solid #0d6efd;
   border-right: 0;
   cursor: default;
-  padding: 0 12px;
+  padding: 0 14px;
 }
 
 .e-schedule .e-agenda-view .e-appointment:hover {
@@ -2894,13 +2903,6 @@
   padding: 8px;
 }
 
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons {
-  padding: 0;
-}
-
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
@@ -2927,6 +2929,12 @@
   font-size: 14px;
 }
 
+.e-bigger .e-schedule .e-vertical-view .e-header-cells,
+.e-bigger.e-schedule .e-vertical-view .e-header-cells {
+  height: 66px;
+  padding: 8px;
+}
+
 .e-bigger .e-schedule .e-vertical-view .e-header-cells .e-header-day,
 .e-bigger.e-schedule .e-vertical-view .e-header-cells .e-header-day {
   font-size: 14px;
@@ -3764,8 +3772,6 @@
   display: block;
   padding: 8px 18px 8px 18px;
   text-align: right;
-  background-color: #f8f9fa;
-  border-radius: 0 0 6px 6px;
 }
 
 .e-quick-popup-wrapper .e-popup-footer .e-event-edit {
@@ -4132,6 +4138,7 @@
 
 .e-bigger .e-more-popup-wrapper .e-more-event-content,
 .e-more-popup-wrapper .e-more-event-content {
+  color: #212529;
   height: calc(100% - 35px);
   max-height: 150px;
   overflow-y: auto;
@@ -4205,7 +4212,7 @@
 
 .e-bigger .e-more-popup-wrapper .e-more-event-close .e-btn-icon,
 .e-more-popup-wrapper .e-more-event-close .e-btn-icon {
-  margin-top: 8px;
+  margin-top: 3px;
 }
 
 .e-bigger .e-more-popup-wrapper .e-more-event-close:focus, .e-bigger .e-more-popup-wrapper .e-more-event-close:hover,
@@ -4509,12 +4516,6 @@
   color: #212529;
 }
 
-.e-schedule .e-month-view .e-selected-cell.e-current-date .e-date-header,
-.e-schedule .e-month-agenda-view .e-selected-cell.e-current-date .e-date-header {
-  background-color: #212529;
-  color: #e9ecef;
-}
-
 .e-schedule .e-month-view .e-selected-cell .e-more-indicator,
 .e-schedule .e-month-agenda-view .e-selected-cell .e-more-indicator {
   color: #212529;

package/styles/fabric-dark.css

@@ -1847,6 +1847,15 @@
   text-decoration: underline;
 }
 
+.e-schedule .e-timeline-year-view.e-virtual-mask .e-work-cells {
+  background-color: rgba(0, 0, 0, 0.08);
+  box-shadow: inset 0 0 0 8px #282727;
+}
+
+.e-schedule .e-timeline-year-view.e-virtual-mask .e-work-cells:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
 .e-schedule .e-timeline-year-view .e-event-table {
   position: absolute;
   top: 0;
@@ -2879,13 +2888,6 @@
   padding: 0 1.5px;
 }
 
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons {
-  padding: 0;
-}
-
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
@@ -4016,6 +4018,7 @@
 
 .e-bigger .e-more-popup-wrapper .e-more-event-content,
 .e-more-popup-wrapper .e-more-event-content {
+  color: #dadada;
   height: calc(100% - 35px);
   max-height: 150px;
   overflow-y: auto;