Scheduler Timeline Demo: Update UI Texts (#33183)

Co-authored-by: Sergei Burkatskii <sjbur.dev@gmail.com>

Author: arman-boyakhchyan

apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.css

@@ -4,12 +4,21 @@
     width: 100px;
 }
 
+::ng-deep .dx-scheduler-appointment-content {
+  color: white;
+}
+
 .options {
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);
   margin-top: 20px;
 }
 
+.caption {
+  font-size: 18px;
+  font-weight: 500;
+}
+
 .option {
   margin-top: 10px;
   display: flex;

apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.html

@@ -29,12 +29,11 @@
   ></dxi-scheduler-resource>
 </dx-scheduler>
 <div class="options">
+  <div class="caption">Options</div>
   <div class="option">
-    <span>Snap to Cells Mode:</span>
+    <span>Snap to Grid:</span>
     <dx-select-box
       [items]="snapToCellsModeItems"
-      valueExpr="value"
-      displayExpr="text"
       [value]="snapToCellsMode"
       (onValueChanged)="onSnapToCellsModeChanged($event)"
     ></dx-select-box>

apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.ts

@@ -38,11 +38,7 @@ export class AppComponent {
 
   snapToCellsMode: DxSchedulerTypes.SnapToCellsMode = 'always';
 
-  snapToCellsModeItems = [
-    { value: 'auto', text: 'Auto' },
-    { value: 'always', text: 'Always' },
-    { value: 'never', text: 'Never' },
-  ];
+  snapToCellsModeItems: DxSchedulerTypes.SnapToCellsMode[] = ['auto', 'always', 'never'];
 
   constructor(service: Service) {
     this.appointmentsData = service.getAppointments();

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

@@ -13,11 +13,7 @@ const currentDate = new Date(2021, 1, 2);
 const views: SchedulerTypes.ViewType[] = ['timelineDay', 'timelineWeek', 'timelineWorkWeek', 'timelineMonth'];
 const groups = ['priority'];
 
-const snapToCellsModeItems: { value: SchedulerTypes.SnapToCellsMode; text: string }[] = [
-  { value: 'auto', text: 'Auto' },
-  { value: 'always', text: 'Always' },
-  { value: 'never', text: 'Never' },
-];
+const snapToCellsModeItems: SchedulerTypes.SnapToCellsMode[] = ['auto', 'always', 'never'];
 
 const App = () => {
   const [snapToCellsMode, setSnapToCellsMode] = useState<SchedulerTypes.SnapToCellsMode>('always');
@@ -59,12 +55,11 @@ const App = () => {
         />
       </Scheduler>
       <div className="options">
+        <div className="caption">Options</div>
         <div className="option">
-          <span>Snap to Cells Mode:</span>
+          <span>Snap to Grid:</span>
           <SelectBox
             items={snapToCellsModeItems}
-            valueExpr="value"
-            displayExpr="text"
             value={snapToCellsMode}
             onValueChanged={onSnapToCellsModeChanged}
           />

apps/demos/Demos/Scheduler/Timelines/React/styles.css

@@ -4,12 +4,21 @@
     width: 100px;
 }
 
+.dx-scheduler-appointment-content {
+  color: white;
+}
+
 .options {
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);
   margin-top: 20px;
 }
 
+.caption {
+  font-size: 18px;
+  font-weight: 500;
+}
+
 .option {
   margin-top: 10px;
   display: flex;

apps/demos/Demos/Scheduler/Timelines/ReactJs/App.js

@@ -6,11 +6,7 @@ import { data, resourcesData, priorityData } from './data.js';
 const currentDate = new Date(2021, 1, 2);
 const views = ['timelineDay', 'timelineWeek', 'timelineWorkWeek', 'timelineMonth'];
 const groups = ['priority'];
-const snapToCellsModeItems = [
-  { value: 'auto', text: 'Auto' },
-  { value: 'always', text: 'Always' },
-  { value: 'never', text: 'Never' },
-];
+const snapToCellsModeItems = ['auto', 'always', 'never'];
 const App = () => {
   const [snapToCellsMode, setSnapToCellsMode] = useState('always');
   const onSnapToCellsModeChanged = useCallback((e) => {
@@ -49,12 +45,11 @@ const App = () => {
         />
       </Scheduler>
       <div className="options">
+        <div className="caption">Options</div>
         <div className="option">
-          <span>Snap to Cells Mode:</span>
+          <span>Snap to Grid:</span>
           <SelectBox
             items={snapToCellsModeItems}
-            valueExpr="value"
-            displayExpr="text"
             value={snapToCellsMode}
             onValueChanged={onSnapToCellsModeChanged}
           />

apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css

@@ -4,12 +4,21 @@
     width: 100px;
 }
 
+.dx-scheduler-appointment-content {
+  color: white;
+}
+
 .options {
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);
   margin-top: 20px;
 }
 
+.caption {
+  font-size: 18px;
+  font-weight: 500;
+}
+
 .option {
   margin-top: 10px;
   display: flex;

apps/demos/Demos/Scheduler/Timelines/Vue/App.vue

@@ -30,12 +30,11 @@
     />
   </DxScheduler>
   <div class="options">
+    <div class="caption">Options</div>
     <div class="option">
-      <span>Snap to Cells Mode:</span>
+      <span>Snap to Grid:</span>
       <DxSelectBox
         :items="snapToCellsModeItems"
-        value-expr="value"
-        display-expr="text"
         :value="snapToCellsMode"
         @value-changed="onSnapToCellsModeChanged"
       />
@@ -57,11 +56,7 @@ 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 snapToCellsModeItems: DxSchedulerTypes.SnapToCellsMode[] = ['auto', 'always', 'never'];
 
 const snapToCellsMode = ref<DxSchedulerTypes.SnapToCellsMode>('always');
 
@@ -77,12 +72,21 @@ function onSnapToCellsModeChanged(e: DxSelectBoxTypes.ValueChangedEvent) {
     width: 100px;
 }
 
+.dx-scheduler-appointment-content {
+  color: white;
+}
+
 .options {
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);
   margin-top: 20px;
 }
 
+.caption {
+  font-size: 18px;
+  font-weight: 500;
+}
+
 .option {
   margin-top: 10px;
   display: flex;

apps/demos/Demos/Scheduler/Timelines/jQuery/index.html

@@ -16,8 +16,9 @@
     <div class="demo-container">
       <div id="scheduler"></div>
       <div class="options">
+        <div class="caption">Options</div>
         <div class="option">
-          <span>Snap to Cells Mode:</span>
+          <span>Snap to Grid:</span>
           <div id="snap-to-cells-mode"></div>
         </div>
       </div>

apps/demos/Demos/Scheduler/Timelines/jQuery/index.js

@@ -29,13 +29,7 @@ $(() => {
   }).dxScheduler('instance');
 
   $('#snap-to-cells-mode').dxSelectBox({
-    items: [
-      { value: 'auto', text: 'Auto' },
-      { value: 'always', text: 'Always' },
-      { value: 'never', text: 'Never' },
-    ],
-    valueExpr: 'value',
-    displayExpr: 'text',
+    items: ['auto', 'always', 'never'],
     value: scheduler.option('snapToCellsMode'),
     onValueChanged(e) {
       scheduler.option('snapToCellsMode', e.value);