Scheduler: Update Offset topics (DevExpress#8124) (DevExpress#8128)

Author: arman-boyakhchyan

api-reference/10 UI Components/dxScheduler/1 Configuration/offset.md

@@ -5,20 +5,12 @@ default: 0
 ---
 ---
 ##### shortDescription
-Specifies the minute offset within Scheduler indicating the starting point of a day.
+Specifies the minute offset applied to configured day durations in all views.
 
 ---
-This property moves the interval between [startDayHour](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/startDayHour.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#startDayHour') and [endDayHour](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/endDayHour.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#endDayHour'). The offset is a multiple of 5 and can range from -1440 minutes (-24 hours) to 1440 minutes (24 hours). For instance, if the following is true:
+This property shifts the interval between [startDayHour](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/startDayHour.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#startDayHour') and [endDayHour](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/endDayHour.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#endDayHour'). The **offset** value can range from `-1440` (24 hours behind) to `1440` (24 hours ahead). 
 
-- The offset is set to 240. 
-
-- **startDayHour** is 0 (default).
-
-- **endDayHour** is 24 (default). 
-
-Then, the day starts and ends at 04:00 AM instead of 00:00.
-
-You can combine this property with different values of **startDayHour**, **endDayHour**, and [cellDuration](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/cellDuration.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#cellDuration') to get the desired result. For example, the following code snippet uses all these properties, and as a result, the day starts at 4:40 AM and ends at 12:00 PM.
+You can implement **offset** along with different **startDayHour**, **endDayHour**, and [cellDuration](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/cellDuration.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#cellDuration') combinations to customize views. The following code snippet integrates these properties to configure days from 4:40 AM to 11:40 AM and a 40-minute cell duration:
 
 ---
 ##### jQuery
@@ -57,15 +49,12 @@ You can combine this property with different values of **startDayHour**, **endDa
         />
     </template>
 
-    <script>
-    // ...
-    </script>
-
 ##### React
 
-    <!-- tab: App.js -->
-    // ...
-    export default function App() {
+    <!-- tab: App.tsx -->
+    import { Scheduler } from 'devextreme-react/scheduler';
+
+    function App() {
         return (
             <Scheduler ...
                 offset="-20"
@@ -78,7 +67,12 @@ You can combine this property with different values of **startDayHour**, **endDa
 
 ---
 
-[note] This property has no effect on the agenda view.
+[note]
+
+- This property has no effect in the agenda view.
+- The **offset** value must be a multiple of 5.
+
+[/note]
 
 #include btn-open-demo with {
     href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Scheduler/WorkShifts/"

api-reference/10 UI Components/dxScheduler/1 Configuration/views/offset.md

@@ -5,22 +5,15 @@ default: 0
 ---
 ---
 ##### shortDescription
-Specifies the minute offset within the view indicating the starting point of a day.
+Specifies the minute offset applied to configured day durations in the view.
 
 ---
-This property moves the interval between [startDayHour](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/views/startDayHour.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#startDayHour') and [endDayHour](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/views/endDayHour.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#endDayHour'). The offset is a multiple of 5 and can range from -1440 minutes (-24 hours) to 1440 minutes (24 hours). For instance, if the following is true:
+This property shifts the interval between [startDayHour](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/views/startDayHour.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#startDayHour') and [endDayHour](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/views/endDayHour.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#endDayHour'). The **offset** value can be between `-1440` (24 hours back) and `1440` (24 hours forward).
 
-- The offset is set to 240. 
-
-- **startDayHour** is 0 (default).
-
-- **endDayHour** is 24 (default). 
-
-Then, the day starts and ends at 04:00 AM instead of 00:00.
-
-You can combine this property with different values of **startDayHour**, **endDayHour**, and [cellDuration](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/views/cellDuration.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#cellDuration') to get the desired result. For example, the following code snippet uses all these properties, and as a result, the day starts at 4:40 AM and ends at 12:00 PM.
+You can implement **offset** along with different **startDayHour**, **endDayHour**, and [cellDuration](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/views/cellDuration.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#cellDuration') combinations to customize the view. The following code snippet integrates these properties to configure days from 4:40 AM to 11:40 AM and a 40-minute cell duration:
 
 ---
+
 ##### jQuery
 
     <!-- tab: index.js -->
@@ -68,15 +61,12 @@ You can combine this property with different values of **startDayHour**, **endDa
         </DxScheduler>
     </template>
 
-    <script>
-    // ...
-    </script>
-
 ##### React
 
-    <!-- tab: App.js -->
-    // ...
-    export default function App() {
+    <!-- tab: App.tsx -->
+    import { Scheduler } from 'devextreme-react/scheduler';
+    
+    function App() {
         return (
             <Scheduler ... >
                 <View
@@ -92,7 +82,12 @@ You can combine this property with different values of **startDayHour**, **endDa
 
 ---
 
-[note] This property has no effect on the agenda view.
+[note]
+
+- This property has no effect in the agenda view.
+- The **offset** value must be a multiple of 5.
+
+[/note]
 
 #include btn-open-demo with {
     href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Scheduler/WorkShifts/"