Scheduler: Provide the SnapToCellsMode option — add snapToCellsMode to "Timelines" demo

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;
 }

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>

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, {

apps/demos/Demos/Scheduler/Timelines/React/App.tsx

@@ -1,46 +1,77 @@
-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';
 
 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;

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;
+}

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;

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;
+}

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>