diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Angular/app/app.component.css
index 461de2f87473..75eb7273ef59 100644
--- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Angular/app/app.component.css
@@ -1,3 +1,7 @@
+::ng-deep .dx-scheduler-timeline .dx-scheduler-cell-sizes-horizontal {
+  width: 100px;
+}
+
 ::ng-deep .dx-scheduler-appointment {
   color: #000;
   font-weight: 500;
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/styles.css b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/styles.css
index e3d73f429139..f9853cc68495 100644
--- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/styles.css
+++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/styles.css
@@ -1,3 +1,7 @@
+.dx-scheduler-timeline .dx-scheduler-cell-sizes-horizontal {
+  width: 100px;
+}
+
 .dx-scheduler-appointment {
   color: #000;
   font-weight: 500;
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css
index e3d73f429139..f9853cc68495 100644
--- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css
@@ -1,3 +1,7 @@
+.dx-scheduler-timeline .dx-scheduler-cell-sizes-horizontal {
+  width: 100px;
+}
+
 .dx-scheduler-appointment {
   color: #000;
   font-weight: 500;
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/App.vue b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/App.vue
index df34979876c3..922ef39e7bc8 100644
--- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/App.vue
@@ -92,6 +92,10 @@ function onAppointmentDblClick(e: DxSchedulerTypes.AppointmentDblClickEvent) {
 </script>
 
 <style scoped>
+.dx-scheduler-timeline .dx-scheduler-cell-sizes-horizontal {
+  width: 100px;
+}
+
 .dx-scheduler-appointment {
   color: #000;
   font-weight: 500;
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/jQuery/styles.css b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/jQuery/styles.css
index e3d73f429139..f9853cc68495 100644
--- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/jQuery/styles.css
@@ -1,3 +1,7 @@
+.dx-scheduler-timeline .dx-scheduler-cell-sizes-horizontal {
+  width: 100px;
+}
+
 .dx-scheduler-appointment {
   color: #000;
   font-weight: 500;
diff --git a/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.css
new file mode 100644
index 000000000000..8715394f9a75
--- /dev/null
+++ b/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.css
@@ -0,0 +1,5 @@
+::ng-deep .dx-scheduler-timeline-day .dx-scheduler-cell-sizes-horizontal,
+::ng-deep .dx-scheduler-timeline-week .dx-scheduler-cell-sizes-horizontal,
+::ng-deep .dx-scheduler-timeline-work-week .dx-scheduler-cell-sizes-horizontal {
+    width: 100px;
+}
\ No newline at end of file
diff --git a/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.ts b/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.ts
index d61dbcc6860f..12687ebc2c96 100644
--- a/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.ts
@@ -18,6 +18,7 @@ if (window && window.config?.packageConfigPaths) {
 @Component({
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
+  styleUrls: [`.${modulePrefix}/app.component.css`],
   providers: [Service],
   imports: [
     DxSchedulerModule,
diff --git a/apps/demos/Demos/Scheduler/Timelines/React/index.html b/apps/demos/Demos/Scheduler/Timelines/React/index.html
index cfb9b3aa6769..ee451f8288ff 100644
--- a/apps/demos/Demos/Scheduler/Timelines/React/index.html
+++ b/apps/demos/Demos/Scheduler/Timelines/React/index.html
@@ -6,6 +6,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
     <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
+    <link rel="stylesheet" type="text/css" href="styles.css" />
 
     <script src="../../../../node_modules/core-js/client/shim.min.js"></script>
     <script src="../../../../node_modules/systemjs/dist/system.js"></script>
diff --git a/apps/demos/Demos/Scheduler/Timelines/React/styles.css b/apps/demos/Demos/Scheduler/Timelines/React/styles.css
new file mode 100644
index 000000000000..241ae31e69f5
--- /dev/null
+++ b/apps/demos/Demos/Scheduler/Timelines/React/styles.css
@@ -0,0 +1,5 @@
+.dx-scheduler-timeline-day .dx-scheduler-cell-sizes-horizontal,
+.dx-scheduler-timeline-week .dx-scheduler-cell-sizes-horizontal,
+.dx-scheduler-timeline-work-week .dx-scheduler-cell-sizes-horizontal {
+    width: 100px;
+}
diff --git a/apps/demos/Demos/Scheduler/Timelines/ReactJs/index.html b/apps/demos/Demos/Scheduler/Timelines/ReactJs/index.html
index d6d83f735a76..db31b0fd60c6 100644
--- a/apps/demos/Demos/Scheduler/Timelines/ReactJs/index.html
+++ b/apps/demos/Demos/Scheduler/Timelines/ReactJs/index.html
@@ -19,6 +19,11 @@
       type="text/css"
       href="../../../../node_modules/devextreme-dist/css/dx.light.css"
     />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="styles.css"
+    />
 
     <script src="../../../../node_modules/core-js/client/shim.min.js"></script>
     <script src="../../../../node_modules/systemjs/dist/system.js"></script>
diff --git a/apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css
new file mode 100644
index 000000000000..241ae31e69f5
--- /dev/null
+++ b/apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css
@@ -0,0 +1,5 @@
+.dx-scheduler-timeline-day .dx-scheduler-cell-sizes-horizontal,
+.dx-scheduler-timeline-week .dx-scheduler-cell-sizes-horizontal,
+.dx-scheduler-timeline-work-week .dx-scheduler-cell-sizes-horizontal {
+    width: 100px;
+}
diff --git a/apps/demos/Demos/Scheduler/Timelines/Vue/App.vue b/apps/demos/Demos/Scheduler/Timelines/Vue/App.vue
index abccd0361a5c..934e56c8aac9 100644
--- a/apps/demos/Demos/Scheduler/Timelines/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/Timelines/Vue/App.vue
@@ -42,3 +42,11 @@ const groups = ['priority'];
 const currentDate = new Date(2021, 1, 2);
 const dataSource = data;
 </script>
+
+<style scoped>
+.dx-scheduler-timeline-day .dx-scheduler-cell-sizes-horizontal,
+.dx-scheduler-timeline-week .dx-scheduler-cell-sizes-horizontal,
+.dx-scheduler-timeline-work-week .dx-scheduler-cell-sizes-horizontal {
+    width: 100px;
+}
+</style>
diff --git a/apps/demos/Demos/Scheduler/Timelines/jQuery/index.html b/apps/demos/Demos/Scheduler/Timelines/jQuery/index.html
index 454e7dcbb1b3..1248636ce82c 100644
--- a/apps/demos/Demos/Scheduler/Timelines/jQuery/index.html
+++ b/apps/demos/Demos/Scheduler/Timelines/jQuery/index.html
@@ -10,6 +10,7 @@
     <script src="../../../../node_modules/devextreme-dist/js/dx.all.js"></script>
     <script src="data.js"></script>
     <script src="index.js"></script>
+    <link rel="stylesheet" type="text/css" href="styles.css" />
   </head>
   <body class="dx-viewport">
     <div class="demo-container">
diff --git a/apps/demos/Demos/Scheduler/Timelines/jQuery/styles.css b/apps/demos/Demos/Scheduler/Timelines/jQuery/styles.css
new file mode 100644
index 000000000000..241ae31e69f5
--- /dev/null
+++ b/apps/demos/Demos/Scheduler/Timelines/jQuery/styles.css
@@ -0,0 +1,5 @@
+.dx-scheduler-timeline-day .dx-scheduler-cell-sizes-horizontal,
+.dx-scheduler-timeline-week .dx-scheduler-cell-sizes-horizontal,
+.dx-scheduler-timeline-work-week .dx-scheduler-cell-sizes-horizontal {
+    width: 100px;
+}
diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/VirtualScrolling/Angular/app/app.component.css
index 65e66700b6be..21bf31a684e2 100644
--- a/apps/demos/Demos/Scheduler/VirtualScrolling/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/VirtualScrolling/Angular/app/app.component.css
@@ -6,5 +6,5 @@
 ::ng-deep .dx-scheduler-timeline .dx-scheduler-date-table .dx-scheduler-cell-sizes-horizontal,
 ::ng-deep .dx-scheduler-timeline .dx-scheduler-header-panel .dx-scheduler-cell-sizes-horizontal,
 ::ng-deep .dx-scheduler-date-table .dx-scheduler-cell-sizes-horizontal {
-  width: 150px;
+  width: 100px;
 }
diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/React/styles.css b/apps/demos/Demos/Scheduler/VirtualScrolling/React/styles.css
index 0cd27251c611..6020d2fad8be 100644
--- a/apps/demos/Demos/Scheduler/VirtualScrolling/React/styles.css
+++ b/apps/demos/Demos/Scheduler/VirtualScrolling/React/styles.css
@@ -3,5 +3,5 @@
 }
 
 #scheduler .dx-scheduler-cell-sizes-horizontal {
-  width: 150px;
+  width: 100px;
 }
diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/styles.css b/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/styles.css
index 0cd27251c611..6020d2fad8be 100644
--- a/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/styles.css
@@ -3,5 +3,5 @@
 }
 
 #scheduler .dx-scheduler-cell-sizes-horizontal {
-  width: 150px;
+  width: 100px;
 }
diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/Vue/styles.css b/apps/demos/Demos/Scheduler/VirtualScrolling/Vue/styles.css
index 0cd27251c611..6020d2fad8be 100644
--- a/apps/demos/Demos/Scheduler/VirtualScrolling/Vue/styles.css
+++ b/apps/demos/Demos/Scheduler/VirtualScrolling/Vue/styles.css
@@ -3,5 +3,5 @@
 }
 
 #scheduler .dx-scheduler-cell-sizes-horizontal {
-  width: 150px;
+  width: 100px;
 }
diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/jQuery/styles.css b/apps/demos/Demos/Scheduler/VirtualScrolling/jQuery/styles.css
index 0cd27251c611..6020d2fad8be 100644
--- a/apps/demos/Demos/Scheduler/VirtualScrolling/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/VirtualScrolling/jQuery/styles.css
@@ -3,5 +3,5 @@
 }
 
 #scheduler .dx-scheduler-cell-sizes-horizontal {
-  width: 150px;
+  width: 100px;
 }
diff --git a/apps/demos/testing/etalons/Scheduler-VirtualScrolling (fluent.blue.light).png b/apps/demos/testing/etalons/Scheduler-VirtualScrolling (fluent.blue.light).png
index 7f7c17de3b9c..892a1b126c8f 100644
Binary files a/apps/demos/testing/etalons/Scheduler-VirtualScrolling (fluent.blue.light).png and b/apps/demos/testing/etalons/Scheduler-VirtualScrolling (fluent.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-VirtualScrolling (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-VirtualScrolling (material.blue.light).png
index 648d0931bd6f..0893810a7d1d 100644
Binary files a/apps/demos/testing/etalons/Scheduler-VirtualScrolling (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-VirtualScrolling (material.blue.light).png differ