diff --git a/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.css
index 8715394f9a75..fde578e9fbd7 100644
--- a/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.css
@@ -2,4 +2,17 @@
 ::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;
+}
+
+.options {
+  padding: 20px;
+  background-color: rgba(191, 191, 191, 0.15);
+  margin-top: 20px;
+}
+
+.option {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
\ No newline at end of file
diff --git a/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.html
index 21c3d025c826..2d3d78d34bd5 100644
--- a/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.html
+++ b/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.html
@@ -10,6 +10,7 @@
   [groups]="['priority']"
   [currentDate]="currentDate"
   [height]="580"
+  [snapToCellsMode]="snapToCellsMode"
 >
   <dxi-scheduler-resource
     fieldExpr="ownerId"
@@ -27,3 +28,15 @@
     icon="tags"
   ></dxi-scheduler-resource>
 </dx-scheduler>
+<div class="options">
+  <div class="option">
+    <span>Snap to Cells Mode:</span>
+    <dx-select-box
+      [items]="snapToCellsModeItems"
+      valueExpr="value"
+      displayExpr="text"
+      [value]="snapToCellsMode"
+      (onValueChanged)="onSnapToCellsModeChanged($event)"
+    ></dx-select-box>
+  </div>
+</div>
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 12687ebc2c96..45732b9c4cc7 100644
--- a/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.ts
@@ -1,6 +1,8 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
-import { DxSchedulerModule } from 'devextreme-angular';
+import { DxSchedulerModule, DxSelectBoxModule } from 'devextreme-angular';
+import type { DxSchedulerTypes } from 'devextreme-angular/ui/scheduler';
+import type { DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
 import {
   Priority, Resource, Appointment, Service,
 } from './app.service';
@@ -22,6 +24,7 @@ if (window && window.config?.packageConfigPaths) {
   providers: [Service],
   imports: [
     DxSchedulerModule,
+    DxSelectBoxModule,
   ],
 })
 export class AppComponent {
@@ -33,11 +36,23 @@ export class AppComponent {
 
   currentDate: Date = new Date(2021, 1, 2);
 
+  snapToCellsMode: DxSchedulerTypes.SnapToCellsMode = 'always';
+
+  snapToCellsModeItems = [
+    { value: 'auto', text: 'Auto' },
+    { value: 'always', text: 'Always' },
+    { value: 'never', text: 'Never' },
+  ];
+
   constructor(service: Service) {
     this.appointmentsData = service.getAppointments();
     this.resourcesData = service.getResources();
     this.prioritiesData = service.getPriorities();
   }
+
+  onSnapToCellsModeChanged(e: DxSelectBoxTypes.ValueChangedEvent): void {
+    this.snapToCellsMode = e.value;
+  }
 }
 
 bootstrapApplication(AppComponent, {
diff --git a/apps/demos/Demos/Scheduler/Timelines/React/App.tsx b/apps/demos/Demos/Scheduler/Timelines/React/App.tsx
index 3ec30a6ce2d9..1bde415e26e9 100644
--- a/apps/demos/Demos/Scheduler/Timelines/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/Timelines/React/App.tsx
@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 
 import Scheduler, {
   Resource,
   type SchedulerTypes,
 } from 'devextreme-react/scheduler';
+import SelectBox from 'devextreme-react/select-box';
+import type { SelectBoxTypes } from 'devextreme-react/select-box';
 
 import { data, resourcesData, priorityData } from './data.ts';
 
@@ -11,36 +13,65 @@ const currentDate = new Date(2021, 1, 2);
 const views: SchedulerTypes.ViewType[] = ['timelineDay', 'timelineWeek', 'timelineWorkWeek', 'timelineMonth'];
 const groups = ['priority'];
 
-const App = () => (
-  <Scheduler
-    timeZone="America/Los_Angeles"
-    dataSource={data}
-    views={views}
-    defaultCurrentView="timelineMonth"
-    defaultCurrentDate={currentDate}
-    height={580}
-    groups={groups}
-    cellDuration={60}
-    firstDayOfWeek={0}
-    startDayHour={8}
-    endDayHour={20}
-  >
-    <Resource
-      fieldExpr="ownerId"
-      allowMultiple={true}
-      dataSource={resourcesData}
-      label="Owner"
-      useColorAsDefault={true}
-      icon="user"
-    />
-    <Resource
-      fieldExpr="priority"
-      allowMultiple={false}
-      dataSource={priorityData}
-      label="Priority"
-      icon="tags"
-    />
-  </Scheduler>
-);
+const snapToCellsModeItems: { value: SchedulerTypes.SnapToCellsMode; text: string }[] = [
+  { value: 'auto', text: 'Auto' },
+  { value: 'always', text: 'Always' },
+  { value: 'never', text: 'Never' },
+];
+
+const App = () => {
+  const [snapToCellsMode, setSnapToCellsMode] = useState<SchedulerTypes.SnapToCellsMode>('always');
+
+  const onSnapToCellsModeChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
+    setSnapToCellsMode(e.value);
+  }, []);
+
+  return (
+    <>
+      <Scheduler
+        timeZone="America/Los_Angeles"
+        dataSource={data}
+        views={views}
+        defaultCurrentView="timelineMonth"
+        defaultCurrentDate={currentDate}
+        height={580}
+        groups={groups}
+        cellDuration={60}
+        firstDayOfWeek={0}
+        startDayHour={8}
+        endDayHour={20}
+        snapToCellsMode={snapToCellsMode}
+      >
+        <Resource
+          fieldExpr="ownerId"
+          allowMultiple={true}
+          dataSource={resourcesData}
+          label="Owner"
+          useColorAsDefault={true}
+          icon="user"
+        />
+        <Resource
+          fieldExpr="priority"
+          allowMultiple={false}
+          dataSource={priorityData}
+          label="Priority"
+          icon="tags"
+        />
+      </Scheduler>
+      <div className="options">
+        <div className="option">
+          <span>Snap to Cells Mode:</span>
+          <SelectBox
+            items={snapToCellsModeItems}
+            valueExpr="value"
+            displayExpr="text"
+            value={snapToCellsMode}
+            onValueChanged={onSnapToCellsModeChanged}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
 
 export default App;
diff --git a/apps/demos/Demos/Scheduler/Timelines/React/styles.css b/apps/demos/Demos/Scheduler/Timelines/React/styles.css
index 241ae31e69f5..54ffbf9e6b86 100644
--- a/apps/demos/Demos/Scheduler/Timelines/React/styles.css
+++ b/apps/demos/Demos/Scheduler/Timelines/React/styles.css
@@ -3,3 +3,16 @@
 .dx-scheduler-timeline-work-week .dx-scheduler-cell-sizes-horizontal {
     width: 100px;
 }
+
+.options {
+  padding: 20px;
+  background-color: rgba(191, 191, 191, 0.15);
+  margin-top: 20px;
+}
+
+.option {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
diff --git a/apps/demos/Demos/Scheduler/Timelines/ReactJs/App.js b/apps/demos/Demos/Scheduler/Timelines/ReactJs/App.js
index e3d601cfdf95..46a74d70fd3b 100644
--- a/apps/demos/Demos/Scheduler/Timelines/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/Timelines/ReactJs/App.js
@@ -1,39 +1,66 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import Scheduler, { Resource } from 'devextreme-react/scheduler';
+import SelectBox from 'devextreme-react/select-box';
 import { data, resourcesData, priorityData } from './data.js';
 
 const currentDate = new Date(2021, 1, 2);
 const views = ['timelineDay', 'timelineWeek', 'timelineWorkWeek', 'timelineMonth'];
 const groups = ['priority'];
-const App = () => (
-  <Scheduler
-    timeZone="America/Los_Angeles"
-    dataSource={data}
-    views={views}
-    defaultCurrentView="timelineMonth"
-    defaultCurrentDate={currentDate}
-    height={580}
-    groups={groups}
-    cellDuration={60}
-    firstDayOfWeek={0}
-    startDayHour={8}
-    endDayHour={20}
-  >
-    <Resource
-      fieldExpr="ownerId"
-      allowMultiple={true}
-      dataSource={resourcesData}
-      label="Owner"
-      useColorAsDefault={true}
-      icon="user"
-    />
-    <Resource
-      fieldExpr="priority"
-      allowMultiple={false}
-      dataSource={priorityData}
-      label="Priority"
-      icon="tags"
-    />
-  </Scheduler>
-);
+const snapToCellsModeItems = [
+  { value: 'auto', text: 'Auto' },
+  { value: 'always', text: 'Always' },
+  { value: 'never', text: 'Never' },
+];
+const App = () => {
+  const [snapToCellsMode, setSnapToCellsMode] = useState('always');
+  const onSnapToCellsModeChanged = useCallback((e) => {
+    setSnapToCellsMode(e.value);
+  }, []);
+  return (
+    <>
+      <Scheduler
+        timeZone="America/Los_Angeles"
+        dataSource={data}
+        views={views}
+        defaultCurrentView="timelineMonth"
+        defaultCurrentDate={currentDate}
+        height={580}
+        groups={groups}
+        cellDuration={60}
+        firstDayOfWeek={0}
+        startDayHour={8}
+        endDayHour={20}
+        snapToCellsMode={snapToCellsMode}
+      >
+        <Resource
+          fieldExpr="ownerId"
+          allowMultiple={true}
+          dataSource={resourcesData}
+          label="Owner"
+          useColorAsDefault={true}
+          icon="user"
+        />
+        <Resource
+          fieldExpr="priority"
+          allowMultiple={false}
+          dataSource={priorityData}
+          label="Priority"
+          icon="tags"
+        />
+      </Scheduler>
+      <div className="options">
+        <div className="option">
+          <span>Snap to Cells Mode:</span>
+          <SelectBox
+            items={snapToCellsModeItems}
+            valueExpr="value"
+            displayExpr="text"
+            value={snapToCellsMode}
+            onValueChanged={onSnapToCellsModeChanged}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
 export default App;
diff --git a/apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css
index 241ae31e69f5..54ffbf9e6b86 100644
--- a/apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css
@@ -3,3 +3,16 @@
 .dx-scheduler-timeline-work-week .dx-scheduler-cell-sizes-horizontal {
     width: 100px;
 }
+
+.options {
+  padding: 20px;
+  background-color: rgba(191, 191, 191, 0.15);
+  margin-top: 20px;
+}
+
+.option {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
diff --git a/apps/demos/Demos/Scheduler/Timelines/Vue/App.vue b/apps/demos/Demos/Scheduler/Timelines/Vue/App.vue
index 934e56c8aac9..1fc10b98274d 100644
--- a/apps/demos/Demos/Scheduler/Timelines/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/Timelines/Vue/App.vue
@@ -10,6 +10,7 @@
     :end-day-hour="20"
     :groups="groups"
     :first-day-of-week="0"
+    :snap-to-cells-mode="snapToCellsMode"
     current-view="timelineMonth"
   >
     <DxResource
@@ -28,19 +29,45 @@
       icon="tags"
     />
   </DxScheduler>
+  <div class="options">
+    <div class="option">
+      <span>Snap to Cells Mode:</span>
+      <DxSelectBox
+        :items="snapToCellsModeItems"
+        value-expr="value"
+        display-expr="text"
+        :value="snapToCellsMode"
+        @value-changed="onSnapToCellsModeChanged"
+      />
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
+import { ref } from 'vue';
 import {
   DxScheduler,
   DxResource,
   type DxSchedulerTypes,
 } from 'devextreme-vue/scheduler';
+import DxSelectBox, { type DxSelectBoxTypes } from 'devextreme-vue/select-box';
 import { data, priorityData, resourcesData } from './data.ts';
 
 const views: DxSchedulerTypes.ViewType[] = ['timelineDay', 'timelineWeek', 'timelineWorkWeek', 'timelineMonth'];
 const groups = ['priority'];
 const currentDate = new Date(2021, 1, 2);
 const dataSource = data;
+
+const snapToCellsModeItems: { value: DxSchedulerTypes.SnapToCellsMode; text: string }[] = [
+  { value: 'auto', text: 'Auto' },
+  { value: 'always', text: 'Always' },
+  { value: 'never', text: 'Never' },
+];
+
+const snapToCellsMode = ref<DxSchedulerTypes.SnapToCellsMode>('always');
+
+function onSnapToCellsModeChanged(e: DxSelectBoxTypes.ValueChangedEvent) {
+  snapToCellsMode.value = e.value;
+}
 </script>
 
 <style scoped>
@@ -49,4 +76,17 @@ const dataSource = data;
 .dx-scheduler-timeline-work-week .dx-scheduler-cell-sizes-horizontal {
     width: 100px;
 }
+
+.options {
+  padding: 20px;
+  background-color: rgba(191, 191, 191, 0.15);
+  margin-top: 20px;
+}
+
+.option {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
 </style>
diff --git a/apps/demos/Demos/Scheduler/Timelines/jQuery/index.html b/apps/demos/Demos/Scheduler/Timelines/jQuery/index.html
index 1248636ce82c..a46f8ed427b2 100644
--- a/apps/demos/Demos/Scheduler/Timelines/jQuery/index.html
+++ b/apps/demos/Demos/Scheduler/Timelines/jQuery/index.html
@@ -15,6 +15,12 @@
   <body class="dx-viewport">
     <div class="demo-container">
       <div id="scheduler"></div>
+      <div class="options">
+        <div class="option">
+          <span>Snap to Cells Mode:</span>
+          <div id="snap-to-cells-mode"></div>
+        </div>
+      </div>
     </div>
   </body>
 </html>
diff --git a/apps/demos/Demos/Scheduler/Timelines/jQuery/index.js b/apps/demos/Demos/Scheduler/Timelines/jQuery/index.js
index 1676dc0713d4..5cc2a1123518 100644
--- a/apps/demos/Demos/Scheduler/Timelines/jQuery/index.js
+++ b/apps/demos/Demos/Scheduler/Timelines/jQuery/index.js
@@ -1,5 +1,5 @@
 $(() => {
-  $('#scheduler').dxScheduler({
+  const scheduler = $('#scheduler').dxScheduler({
     timeZone: 'America/Los_Angeles',
     dataSource: data,
     views: ['timelineDay', 'timelineWeek', 'timelineWorkWeek', 'timelineMonth'],
@@ -9,6 +9,7 @@ $(() => {
     startDayHour: 8,
     endDayHour: 20,
     cellDuration: 60,
+    snapToCellsMode: 'always',
     groups: ['priority'],
     resources: [{
       fieldExpr: 'ownerId',
@@ -25,5 +26,19 @@ $(() => {
       icon: 'tags',
     }],
     height: 580,
+  }).dxScheduler('instance');
+
+  $('#snap-to-cells-mode').dxSelectBox({
+    items: [
+      { value: 'auto', text: 'Auto' },
+      { value: 'always', text: 'Always' },
+      { value: 'never', text: 'Never' },
+    ],
+    valueExpr: 'value',
+    displayExpr: 'text',
+    value: scheduler.option('snapToCellsMode'),
+    onValueChanged(e) {
+      scheduler.option('snapToCellsMode', e.value);
+    },
   });
 });
diff --git a/apps/demos/Demos/Scheduler/Timelines/jQuery/styles.css b/apps/demos/Demos/Scheduler/Timelines/jQuery/styles.css
index 241ae31e69f5..54ffbf9e6b86 100644
--- a/apps/demos/Demos/Scheduler/Timelines/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/Timelines/jQuery/styles.css
@@ -3,3 +3,16 @@
 .dx-scheduler-timeline-work-week .dx-scheduler-cell-sizes-horizontal {
     width: 100px;
 }
+
+.options {
+  padding: 20px;
+  background-color: rgba(191, 191, 191, 0.15);
+  margin-top: 20px;
+}
+
+.option {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
diff --git a/apps/demos/testing/etalons/Scheduler-Timelines (fluent.blue.light).png b/apps/demos/testing/etalons/Scheduler-Timelines (fluent.blue.light).png
index e71e84fca248..aa14aeec5e67 100644
Binary files a/apps/demos/testing/etalons/Scheduler-Timelines (fluent.blue.light).png and b/apps/demos/testing/etalons/Scheduler-Timelines (fluent.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-Timelines (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-Timelines (material.blue.light).png
index 4d140c3dd336..8d325e1f4309 100644
Binary files a/apps/demos/testing/etalons/Scheduler-Timelines (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-Timelines (material.blue.light).png differ
diff --git a/apps/react-storybook/stories/demos/scheduler/timelines/Timelines.stories.tsx b/apps/react-storybook/stories/demos/scheduler/timelines/Timelines.stories.tsx
new file mode 100644
index 000000000000..fa5cf663ef1b
--- /dev/null
+++ b/apps/react-storybook/stories/demos/scheduler/timelines/Timelines.stories.tsx
@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import React, { useState } from 'react';
+
+import Scheduler, {
+  Resource,
+} from 'devextreme-react/scheduler';
+import SelectBox from 'devextreme-react/select-box';
+import { data, resourcesData, priorityData } from './data';
+
+import './timelines.css';
+import { SnapToCellsMode } from 'devextreme/js/ui/scheduler';
+
+const meta: Meta = {
+  title: 'Demos/Scheduler/Timelines',
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const currentDate = new Date(2021, 1, 2);
+
+export const Timelines: Story = {
+  render: () => {
+    const [snapToCellsMode, setSnapToCellsMode] = useState<SnapToCellsMode>('always');
+    
+    return (
+      <>
+        <Scheduler
+          timeZone="America/Los_Angeles"
+          dataSource={data}
+          views={['timelineDay', 'timelineWeek', 'timelineWorkWeek', 'timelineMonth']}
+          defaultCurrentView="timelineMonth"
+          defaultCurrentDate={currentDate}
+          height={580}
+          groups={['priority']}
+          cellDuration={60}
+          firstDayOfWeek={0}
+          startDayHour={8}
+          endDayHour={20}
+          snapToCellsMode={snapToCellsMode}
+        >
+          <Resource
+            fieldExpr="ownerId"
+            allowMultiple={true}
+            dataSource={resourcesData}
+            label="Owner"
+            useColorAsDefault={true}
+            icon="user"
+          />
+          <Resource
+            fieldExpr="priority"
+            allowMultiple={false}
+            dataSource={priorityData}
+            label="Priority"
+            icon="tags"
+          />
+        </Scheduler>
+        <div className="options">
+          <div className="option">
+            <span>Snap to Cells Mode:</span>
+            <SelectBox
+              items={[
+                { value: 'auto', text: 'Auto' },
+                { value: 'always', text: 'Always' },
+                { value: 'never', text: 'Never' },
+              ]}
+              valueExpr="value"
+              displayExpr="text"
+              value={snapToCellsMode}
+              onValueChanged={(e) => {
+                setSnapToCellsMode(e.value);
+              }}
+            />
+          </div>
+        </div>
+      </>
+    );
+  },
+};
diff --git a/apps/react-storybook/stories/demos/scheduler/timelines/data.ts b/apps/react-storybook/stories/demos/scheduler/timelines/data.ts
new file mode 100644
index 000000000000..7f6882600a42
--- /dev/null
+++ b/apps/react-storybook/stories/demos/scheduler/timelines/data.ts
@@ -0,0 +1,385 @@
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
+
+type Appointment = SchedulerTypes.Appointment & { ownerId: number[], priority: number };
+
+type Resource = {
+  text: string;
+  id: number;
+  color: string;
+};
+
+export const data: Appointment[] = [{
+  text: 'Google AdWords Strategy',
+  ownerId: [2],
+  startDate: new Date('2021-02-01T16:00:00.000Z'),
+  endDate: new Date('2021-02-01T17:30:00.000Z'),
+  priority: 1,
+}, {
+  text: 'New Brochures',
+  ownerId: [1],
+  startDate: new Date('2021-02-01T18:30:00.000Z'),
+  endDate: new Date('2021-02-01T21:15:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Brochure Design Review',
+  ownerId: [4],
+  startDate: new Date('2021-02-01T20:15:00.000Z'),
+  endDate: new Date('2021-02-01T23:15:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Website Re-Design Plan',
+  ownerId: [3],
+  startDate: new Date('2021-02-01T23:45:00.000Z'),
+  endDate: new Date('2021-02-02T18:15:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Rollout of New Website and Marketing Brochures',
+  ownerId: [1],
+  startDate: new Date('2021-02-02T15:15:00.000Z'),
+  endDate: new Date('2021-02-02T17:45:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Update Sales Strategy Documents',
+  ownerId: [2],
+  startDate: new Date('2021-02-02T19:00:00.000Z'),
+  endDate: new Date('2021-02-02T20:45:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Non-Compete Agreements',
+  ownerId: [4],
+  startDate: new Date('2021-02-03T16:15:00.000Z'),
+  endDate: new Date('2021-02-03T17:00:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Approve Hiring of John Jeffers',
+  ownerId: [2],
+  startDate: new Date('2021-02-03T17:00:00.000Z'),
+  endDate: new Date('2021-02-03T18:15:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Update NDA Agreement',
+  ownerId: [1],
+  startDate: new Date('2021-02-03T18:45:00.000Z'),
+  endDate: new Date('2021-02-03T20:45:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Update Employee Files with New NDA',
+  ownerId: [2],
+  startDate: new Date('2021-02-03T21:00:00.000Z'),
+  endDate: new Date('2021-02-03T23:45:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Submit Questions Regarding New NDA',
+  ownerId: [1],
+  startDate: new Date('2021-02-05T01:00:00.000Z'),
+  endDate: new Date('2021-02-04T16:30:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Submit Signed NDA',
+  ownerId: [2],
+  startDate: new Date('2021-02-04T19:45:00.000Z'),
+  endDate: new Date('2021-02-04T21:00:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Review Revenue Projections',
+  ownerId: [3],
+  startDate: new Date('2021-02-05T00:15:00.000Z'),
+  endDate: new Date('2021-02-04T15:00:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Comment on Revenue Projections',
+  ownerId: [2],
+  startDate: new Date('2021-02-05T16:15:00.000Z'),
+  endDate: new Date('2021-02-05T18:15:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Provide New Health Insurance Docs',
+  ownerId: [3],
+  startDate: new Date('2021-02-05T19:45:00.000Z'),
+  endDate: new Date('2021-02-05T21:15:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Review Changes to Health Insurance Coverage',
+  ownerId: [2],
+  startDate: new Date('2021-02-05T21:15:00.000Z'),
+  endDate: new Date('2021-02-05T22:30:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Review Training Course for any Omissions',
+  ownerId: [2],
+  startDate: new Date('2021-02-08T21:00:00.000Z'),
+  endDate: new Date('2021-02-09T19:00:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Recall Rebate Form',
+  ownerId: [1],
+  startDate: new Date('2021-02-08T19:45:00.000Z'),
+  endDate: new Date('2021-02-08T20:15:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Create Report on Customer Feedback',
+  ownerId: [4],
+  startDate: new Date('2021-02-09T22:15:00.000Z'),
+  endDate: new Date('2021-02-10T00:30:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Review Customer Feedback Report',
+  ownerId: [2],
+  startDate: new Date('2021-02-09T23:15:00.000Z'),
+  endDate: new Date('2021-02-10T01:30:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Customer Feedback Report Analysis',
+  ownerId: [3],
+  startDate: new Date('2021-02-10T16:30:00.000Z'),
+  endDate: new Date('2021-02-10T17:30:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Prepare Shipping Cost Analysis Report',
+  ownerId: [4],
+  startDate: new Date('2021-02-10T19:30:00.000Z'),
+  endDate: new Date('2021-02-10T20:30:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Provide Feedback on Shippers',
+  ownerId: [2],
+  startDate: new Date('2021-02-10T21:15:00.000Z'),
+  endDate: new Date('2021-02-10T23:00:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Select Preferred Shipper',
+  ownerId: [1],
+  startDate: new Date('2021-02-11T00:30:00.000Z'),
+  endDate: new Date('2021-02-11T03:00:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Complete Shipper Selection Form',
+  ownerId: [2],
+  startDate: new Date('2021-02-11T15:30:00.000Z'),
+  endDate: new Date('2021-02-11T17:00:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Upgrade Server Hardware',
+  ownerId: [4],
+  startDate: new Date('2021-02-11T19:00:00.000Z'),
+  endDate: new Date('2021-02-11T21:15:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Upgrade Personal Computers',
+  ownerId: [3],
+  startDate: new Date('2021-02-11T21:45:00.000Z'),
+  endDate: new Date('2021-02-11T23:30:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Upgrade Apps to Windows RT or stay with WinForms',
+  ownerId: [1],
+  startDate: new Date('2021-02-12T17:30:00.000Z'),
+  endDate: new Date('2021-02-12T20:00:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Estimate Time Required to Touch-Enable Apps',
+  ownerId: [1],
+  startDate: new Date('2021-02-12T21:45:00.000Z'),
+  endDate: new Date('2021-02-12T23:30:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Report on Tranistion to Touch-Based Apps',
+  ownerId: [2],
+  startDate: new Date('2021-02-13T01:30:00.000Z'),
+  endDate: new Date('2021-02-13T02:00:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Submit New Website Design',
+  ownerId: [2],
+  startDate: new Date('2021-02-15T15:00:00.000Z'),
+  endDate: new Date('2021-02-15T17:00:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Create Icons for Website',
+  ownerId: [4],
+  startDate: new Date('2021-02-15T18:30:00.000Z'),
+  endDate: new Date('2021-02-15T20:15:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Create New Product Pages',
+  ownerId: [1],
+  startDate: new Date('2021-02-16T16:45:00.000Z'),
+  endDate: new Date('2021-02-16T18:45:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Approve Website Launch',
+  ownerId: [3],
+  startDate: new Date('2021-02-16T19:00:00.000Z'),
+  endDate: new Date('2021-02-16T22:15:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Update Customer Shipping Profiles',
+  ownerId: [3],
+  startDate: new Date('2021-02-17T16:30:00.000Z'),
+  endDate: new Date('2021-02-17T18:00:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Create New Shipping Return Labels',
+  ownerId: [4],
+  startDate: new Date('2021-02-17T19:45:00.000Z'),
+  endDate: new Date('2021-02-17T21:00:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Get Design for Shipping Return Labels',
+  ownerId: [3],
+  startDate: new Date('2021-02-17T22:00:00.000Z'),
+  endDate: new Date('2021-02-17T23:30:00.000Z'),
+  priority: 1,
+}, {
+  text: 'PSD needed for Shipping Return Labels',
+  ownerId: [4],
+  startDate: new Date('2021-02-18T15:30:00.000Z'),
+  endDate: new Date('2021-02-18T16:15:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Contact ISP and Discuss Payment Options',
+  ownerId: [1],
+  startDate: new Date('2021-02-18T18:30:00.000Z'),
+  endDate: new Date('2021-02-18T23:00:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Prepare Year-End Support Summary Report',
+  ownerId: [2],
+  startDate: new Date('2021-02-19T00:00:00.000Z'),
+  endDate: new Date('2021-02-19T03:00:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Review New Training Material',
+  ownerId: [3],
+  startDate: new Date('2021-02-19T15:00:00.000Z'),
+  endDate: new Date('2021-02-19T16:15:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Distribute Training Material to Support Staff',
+  ownerId: [2],
+  startDate: new Date('2021-02-19T19:45:00.000Z'),
+  endDate: new Date('2021-02-19T21:00:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Training Material Distribution Schedule',
+  ownerId: [2],
+  startDate: new Date('2021-02-19T21:15:00.000Z'),
+  endDate: new Date('2021-02-19T23:15:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Approval on Converting to New HDMI Specification',
+  ownerId: [4],
+  startDate: new Date('2021-02-22T16:30:00.000Z'),
+  endDate: new Date('2021-02-22T17:15:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Create New Spike for Automation Server',
+  ownerId: [3],
+  startDate: new Date('2021-02-22T17:00:00.000Z'),
+  endDate: new Date('2021-02-22T19:30:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Code Review - New Automation Server',
+  ownerId: [1],
+  startDate: new Date('2021-02-22T20:00:00.000Z'),
+  endDate: new Date('2021-02-22T22:00:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Confirm Availability for Sales Meeting',
+  ownerId: [1],
+  startDate: new Date('2021-02-23T17:15:00.000Z'),
+  endDate: new Date('2021-02-23T22:15:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Reschedule Sales Team Meeting',
+  ownerId: [2],
+  startDate: new Date('2021-02-23T23:15:00.000Z'),
+  endDate: new Date('2021-02-24T01:00:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Send 2 Remotes for Giveaways',
+  ownerId: [3],
+  startDate: new Date('2021-02-24T16:30:00.000Z'),
+  endDate: new Date('2021-02-24T18:45:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Discuss Product Giveaways with Management',
+  ownerId: [1],
+  startDate: new Date('2021-02-24T19:15:00.000Z'),
+  endDate: new Date('2021-02-24T23:45:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Replace Desktops on the 3rd Floor',
+  ownerId: [2],
+  startDate: new Date('2021-02-25T16:30:00.000Z'),
+  endDate: new Date('2021-02-25T17:45:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Update Database with New Leads',
+  ownerId: [3],
+  startDate: new Date('2021-02-25T19:00:00.000Z'),
+  endDate: new Date('2021-02-25T21:15:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Mail New Leads for Follow Up',
+  ownerId: [1],
+  startDate: new Date('2021-02-25T21:45:00.000Z'),
+  endDate: new Date('2021-02-25T22:30:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Send Territory Sales Breakdown',
+  ownerId: [2],
+  startDate: new Date('2021-02-26T01:00:00.000Z'),
+  endDate: new Date('2021-02-26T03:00:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Territory Sales Breakdown Report',
+  ownerId: [1],
+  startDate: new Date('2021-02-26T15:45:00.000Z'),
+  endDate: new Date('2021-02-26T16:45:00.000Z'),
+  priority: 1,
+}, {
+  text: 'Report on the State of Engineering Dept',
+  ownerId: [3],
+  startDate: new Date('2021-02-26T21:45:00.000Z'),
+  endDate: new Date('2021-02-26T22:30:00.000Z'),
+  priority: 2,
+}, {
+  text: 'Staff Productivity Report',
+  ownerId: [4],
+  startDate: new Date('2021-02-26T23:15:00.000Z'),
+  endDate: new Date('2021-02-27T02:30:00.000Z'),
+  priority: 2,
+}];
+
+export const resourcesData: Resource[] = [
+  {
+    text: 'Samantha Bright',
+    id: 1,
+    color: '#C2185B',
+  }, {
+    text: 'John Heart',
+    id: 2,
+    color: '#2E7D32',
+  }, {
+    text: 'Todd Hoffman',
+    id: 3,
+    color: '#1564C0',
+  }, {
+    text: 'Sandra Johnson',
+    id: 4,
+    color: '#DD2C00',
+  },
+];
+
+export const priorityData: Resource[] = [
+  {
+    text: 'Low Priority',
+    id: 1,
+    color: '#1564C0',
+  }, {
+    text: 'High Priority',
+    id: 2,
+    color: '#DD2C00',
+  },
+];
diff --git a/apps/react-storybook/stories/demos/scheduler/timelines/timelines.css b/apps/react-storybook/stories/demos/scheduler/timelines/timelines.css
new file mode 100644
index 000000000000..801fcc0569ca
--- /dev/null
+++ b/apps/react-storybook/stories/demos/scheduler/timelines/timelines.css
@@ -0,0 +1,24 @@
+.dx-scheduler-timeline.dx-scheduler-timeline-day .dx-scheduler-cell-sizes-horizontal,
+.dx-scheduler-timeline.dx-scheduler-timeline-week .dx-scheduler-cell-sizes-horizontal,
+.dx-scheduler-timeline.dx-scheduler-timeline-work-week .dx-scheduler-cell-sizes-horizontal {
+    width: 100px;
+    min-width: 100px;
+}
+
+.dx-scheduler-timeline-month .dx-scheduler-cell-sizes-horizontal {
+    width: 200px;
+    min-width: 200px;
+}
+
+.options {
+  padding: 20px;
+  background-color: rgba(191, 191, 191, 0.15);
+  margin-top: 20px;
+}
+
+.option {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}