From c30a9354aa42bde340c05aada11704d727df7bbb Mon Sep 17 00:00:00 2001
From: Roman Semenov <roman.semenov@devexpress.com>
Date: Fri, 22 Nov 2024 10:29:39 +0400
Subject: [PATCH] fix

---
 .../Overview/Angular/app/app.component.css    | 45 ++++++++++++++++---
 .../Overview/Angular/app/app.service.ts       |  4 +-
 .../Demos/Scheduler/Overview/React/data.ts    |  4 +-
 .../Demos/Scheduler/Overview/React/styles.css | 41 ++++++++++++++---
 .../Demos/Scheduler/Overview/ReactJs/data.js  |  4 +-
 .../Scheduler/Overview/ReactJs/styles.css     | 40 ++++++++++++++---
 .../Demos/Scheduler/Overview/Vue/App.vue      |  6 ++-
 .../Demos/Scheduler/Overview/Vue/DataCell.vue |  1 +
 .../Scheduler/Overview/Vue/ResourceCell.vue   | 25 ++++++++++-
 .../Demos/Scheduler/Overview/Vue/data.ts      |  4 +-
 .../Demos/Scheduler/Overview/jQuery/data.js   |  4 +-
 .../Scheduler/Overview/jQuery/styles.css      | 29 +++++++++++-
 12 files changed, 171 insertions(+), 36 deletions(-)

diff --git a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css
index 23d46263aa6c..b1db6edc05f4 100644
--- a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css
@@ -1,3 +1,8 @@
+::ng-deep .dx-scheduler-group-header-content,
+::ng-deep .dx-scheduler-date-table-cell {
+  position: relative;
+}
+
 ::ng-deep .dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell {
   opacity: 1;
   color: rgba(0, 0, 0, 0.3) !important;
@@ -27,11 +32,6 @@
   color: rgba(255, 255, 255, 1);
 }
 
-::ng-deep .dx-scheduler-group-header-content,
-::ng-deep .dx-scheduler-date-table-cell {
-  position: relative;
-}
-
 ::ng-deep .dx-scheduler-date-table-cell .dx-template-wrapper {
   position: absolute;
   height: 100%;
@@ -40,11 +40,32 @@
 }
 
 ::ng-deep .avatar {
-  width: 155px;
+  width: 124px;
   float: left;
   overflow: hidden;
   position: relative;
-  height: 125px;
+  height: 124px;
+  border: 1px solid rgba(0, 0, 0, 0.24);
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 1);
+}
+
+::ng-deep .avatar[title="John Heart"] img {
+  position: relative;
+  width: 126px;
+  height: 130px;
+  object-fit: contain;
+  top: 5px;
+  left: 3px;
+}
+
+::ng-deep .avatar[title="Sandra Johnson"] img {
+  position: relative;
+  width: 126px;
+  height: 130px;
+  object-fit: contain;
+  top: 5px;
+  left: 3px;
 }
 
 ::ng-deep .name {
@@ -69,14 +90,24 @@
   font-size: 11pt;
   font-weight: normal;
   padding: 25px 20px;
+  color: #707070;
+}
+
+::ng-deep .dx-color-scheme-contrast .info {
+  color: #fff;
 }
 
 ::ng-deep .day-cell {
+  width: 100%;
   height: 100%;
   background-position: center center;
   background-repeat: no-repeat;
 }
 
+::ng-deep .dx-scheduler-appointment {
+  color: rgba(255, 255, 255, 1);
+}
+
 ::ng-deep .employee-1 {
   background-color: rgba(55, 126, 58, 0.08);
 }
diff --git a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts
index d768b2e0d7c5..b9517b42751a 100644
--- a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts
+++ b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts
@@ -28,14 +28,14 @@ const employees: Employee[] = [{
   text: 'John Heart',
   id: 1,
   color: 'rgba(50, 134, 56, 1)',
-  avatar: '../../../../images/gym/coach-man.png',
+  avatar: '../../../../images/employees/19.png',
   age: 27,
   discipline: 'ABS, Fitball, StepFit',
 }, {
   text: 'Sandra Johnson',
   id: 2,
   color: 'rgba(194, 81, 0, 1)',
-  avatar: '../../../../images/gym/coach-woman.png',
+  avatar: '../../../../images/employees/31.png',
   age: 25,
   discipline: 'ABS, Fitball, StepFit',
 }];
diff --git a/apps/demos/Demos/Scheduler/Overview/React/data.ts b/apps/demos/Demos/Scheduler/Overview/React/data.ts
index 9663f8babd69..956626097f0f 100644
--- a/apps/demos/Demos/Scheduler/Overview/React/data.ts
+++ b/apps/demos/Demos/Scheduler/Overview/React/data.ts
@@ -83,14 +83,14 @@ export const employees: Resource[] = [{
   text: 'John Heart',
   id: 1,
   color: 'rgba(50, 134, 56, 1)',
-  avatar: '../../../../images/gym/coach-man.png',
+  avatar: '../../../../images/employees/19.png',
   age: 27,
   discipline: 'ABS, Fitball, StepFit',
 }, {
   text: 'Sandra Johnson',
   id: 2,
   color: 'rgba(194, 81, 0, 1)',
-  avatar: '../../../../images/gym/coach-woman.png',
+  avatar: '../../../../images/employees/31.png',
   age: 25,
   discipline: 'ABS, Fitball, StepFit',
 }];
diff --git a/apps/demos/Demos/Scheduler/Overview/React/styles.css b/apps/demos/Demos/Scheduler/Overview/React/styles.css
index 8b1934c9bc49..9c4075d10dc2 100644
--- a/apps/demos/Demos/Scheduler/Overview/React/styles.css
+++ b/apps/demos/Demos/Scheduler/Overview/React/styles.css
@@ -1,3 +1,8 @@
+.dx-scheduler-group-header,
+.dx-scheduler-date-table-cell {
+  position: relative;
+}
+
 .dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell {
   opacity: 1;
   color: rgba(0, 0, 0, 0.3) !important;
@@ -27,11 +32,6 @@
   color: rgba(255, 255, 255, 1);
 }
 
-.dx-template-wrapper,
-.dx-scheduler-date-table-cell {
-  position: relative;
-}
-
 .dx-scheduler-date-table-cell .dx-template-wrapper {
   position: absolute;
   height: 100%;
@@ -40,11 +40,32 @@
 }
 
 .avatar {
-  width: 155px;
+  width: 124px;
   float: left;
   overflow: hidden;
   position: relative;
-  height: 125px;
+  height: 124px;
+  border: 1px solid rgba(0, 0, 0, 0.24);
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 1);
+}
+
+.avatar[title="John Heart"] img {
+  position: relative;
+  width: 126px;
+  height: 130px;
+  object-fit: contain;
+  top: 5px;
+  left: 3px;
+}
+
+.avatar[title="Sandra Johnson"] img {
+  position: relative;
+  width: 126px;
+  height: 130px;
+  object-fit: contain;
+  top: 5px;
+  left: 3px;
 }
 
 .name {
@@ -77,11 +98,16 @@
 }
 
 .day-cell {
+  width: 100%;
   height: 100%;
   background-position: center center;
   background-repeat: no-repeat;
 }
 
+.dx-scheduler-appointment {
+  color: rgba(255, 255, 255, 1);
+}
+
 .employee-1 {
   background-color: rgba(55, 126, 58, 0.08);
 }
@@ -109,3 +135,4 @@
 .training-background-2 {
   background-image: url("../../../../images/gym/icon-fitball.png");
 }
+
diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js
index 523bb0003b48..bb2bf5fdad09 100644
--- a/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js
+++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js
@@ -83,7 +83,7 @@ export const employees = [
     text: 'John Heart',
     id: 1,
     color: 'rgba(50, 134, 56, 1)',
-    avatar: '../../../../images/gym/coach-man.png',
+    avatar: '../../../../images/employees/19.png',
     age: 27,
     discipline: 'ABS, Fitball, StepFit',
   },
@@ -91,7 +91,7 @@ export const employees = [
     text: 'Sandra Johnson',
     id: 2,
     color: 'rgba(194, 81, 0, 1)',
-    avatar: '../../../../images/gym/coach-woman.png',
+    avatar: '../../../../images/employees/31.png',
     age: 25,
     discipline: 'ABS, Fitball, StepFit',
   },
diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css
index 8b1934c9bc49..b0d902880294 100644
--- a/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css
@@ -1,3 +1,8 @@
+.dx-scheduler-group-header,
+.dx-scheduler-date-table-cell {
+  position: relative;
+}
+
 .dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell {
   opacity: 1;
   color: rgba(0, 0, 0, 0.3) !important;
@@ -27,11 +32,6 @@
   color: rgba(255, 255, 255, 1);
 }
 
-.dx-template-wrapper,
-.dx-scheduler-date-table-cell {
-  position: relative;
-}
-
 .dx-scheduler-date-table-cell .dx-template-wrapper {
   position: absolute;
   height: 100%;
@@ -40,11 +40,32 @@
 }
 
 .avatar {
-  width: 155px;
+  width: 124px;
   float: left;
   overflow: hidden;
   position: relative;
-  height: 125px;
+  height: 124px;
+  border: 1px solid rgba(0, 0, 0, 0.24);
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 1);
+}
+
+.avatar[title="John Heart"] img {
+  position: relative;
+  width: 126px;
+  height: 130px;
+  object-fit: contain;
+  top: 5px;
+  left: 3px;
+}
+
+.avatar[title="Sandra Johnson"] img {
+  position: relative;
+  width: 126px;
+  height: 130px;
+  object-fit: contain;
+  top: 5px;
+  left: 3px;
 }
 
 .name {
@@ -77,11 +98,16 @@
 }
 
 .day-cell {
+  width: 100%;
   height: 100%;
   background-position: center center;
   background-repeat: no-repeat;
 }
 
+.dx-scheduler-appointment {
+  color: rgba(255, 255, 255, 1);
+}
+
 .employee-1 {
   background-color: rgba(55, 126, 58, 0.08);
 }
diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/App.vue b/apps/demos/Demos/Scheduler/Overview/Vue/App.vue
index 64f32cf302b7..4aeb1819ab51 100644
--- a/apps/demos/Demos/Scheduler/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/Overview/Vue/App.vue
@@ -82,9 +82,13 @@ const dataSource = data;
 
 .dx-scheduler-date-table-cell .dx-template-wrapper {
   position: absolute;
-  width: 100%;
   height: 100%;
+  width: 100%;
   padding-right: 6px;
 }
 
+.dx-scheduler-appointment {
+  color: rgba(255, 255, 255, 1);
+}
+
 </style>
diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue b/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue
index 1c3d9dbd67f8..ca4137464932 100644
--- a/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue
+++ b/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue
@@ -43,6 +43,7 @@ function getCurrentTraining(date, employeeID) {
 </script>
 <style>
 .day-cell {
+  width: 100%;
   height: 100%;
   background-position: center center;
   background-repeat: no-repeat;
diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue b/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue
index 13e00db3a192..b6e75d079810 100644
--- a/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue
+++ b/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue
@@ -28,11 +28,32 @@ withDefaults(defineProps<{
 </script>
 <style>
 .avatar {
-  width: 155px;
+  width: 124px;
   float: left;
   overflow: hidden;
   position: relative;
-  height: 125px;
+  height: 124px;
+  border: 1px solid rgba(0, 0, 0, 0.24);
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 1);
+}
+
+.avatar[title="John Heart"] img {
+  position: relative;
+  width: 126px;
+  height: 130px;
+  object-fit: contain;
+  top: 5px;
+  left: 3px;
+}
+
+.avatar[title="Sandra Johnson"] img {
+  position: relative;
+  width: 126px;
+  height: 130px;
+  object-fit: contain;
+  top: 5px;
+  left: 3px;
 }
 
 .name {
diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/data.ts b/apps/demos/Demos/Scheduler/Overview/Vue/data.ts
index a1630d1d9f57..e808c80ef82a 100644
--- a/apps/demos/Demos/Scheduler/Overview/Vue/data.ts
+++ b/apps/demos/Demos/Scheduler/Overview/Vue/data.ts
@@ -2,14 +2,14 @@ export const employees = [{
   text: 'John Heart',
   id: 1,
   color: 'rgba(50, 134, 56, 1)',
-  avatar: '../../../../images/gym/coach-man.png',
+  avatar: '../../../../images/employees/19.png',
   age: 27,
   discipline: 'ABS, Fitball, StepFit',
 }, {
   text: 'Sandra Johnson',
   id: 2,
   color: 'rgba(194, 81, 0, 1)',
-  avatar: '../../../../images/gym/coach-woman.png',
+  avatar: '../../../../images/employees/31.png',
   age: 25,
   discipline: 'ABS, Fitball, StepFit',
 }];
diff --git a/apps/demos/Demos/Scheduler/Overview/jQuery/data.js b/apps/demos/Demos/Scheduler/Overview/jQuery/data.js
index 535452bbd6c8..18ed81af5b28 100644
--- a/apps/demos/Demos/Scheduler/Overview/jQuery/data.js
+++ b/apps/demos/Demos/Scheduler/Overview/jQuery/data.js
@@ -2,14 +2,14 @@ const employees = [{
   text: 'John Heart',
   id: 1,
   color: 'rgba(50, 134, 56, 1)',
-  avatar: '../../../../images/gym/coach-man.png',
+  avatar: '../../../../images/employees/19.png',
   age: 27,
   discipline: 'ABS, Fitball, StepFit',
 }, {
   text: 'Sandra Johnson',
   id: 2,
   color: 'rgba(194, 81, 0, 1)',
-  avatar: '../../../../images/gym/coach-woman.png',
+  avatar: '../../../../images/employees/31.png',
   age: 25,
   discipline: 'ABS, Fitball, StepFit',
 }];
diff --git a/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css b/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css
index 69f916480f39..b0d902880294 100644
--- a/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css
@@ -40,11 +40,32 @@
 }
 
 .avatar {
-  width: 155px;
+  width: 124px;
   float: left;
   overflow: hidden;
   position: relative;
-  height: 125px;
+  height: 124px;
+  border: 1px solid rgba(0, 0, 0, 0.24);
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 1);
+}
+
+.avatar[title="John Heart"] img {
+  position: relative;
+  width: 126px;
+  height: 130px;
+  object-fit: contain;
+  top: 5px;
+  left: 3px;
+}
+
+.avatar[title="Sandra Johnson"] img {
+  position: relative;
+  width: 126px;
+  height: 130px;
+  object-fit: contain;
+  top: 5px;
+  left: 3px;
 }
 
 .name {
@@ -83,6 +104,10 @@
   background-repeat: no-repeat;
 }
 
+.dx-scheduler-appointment {
+  color: rgba(255, 255, 255, 1);
+}
+
 .employee-1 {
   background-color: rgba(55, 126, 58, 0.08);
 }