Scheduler - cherry-pick fixes (T1243027 & T1223907)

e2e/testcafe-devextreme/tests/scheduler/appointments/workWeek/interval.ts

@@ -0,0 +1,59 @@
+import Scheduler from 'devextreme-testcafe-models/scheduler';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import url from '../../../../helpers/getPageUrl';
+import { createWidget } from '../../../../helpers/createWidget';
+import { safeSizeTest } from '../../../../helpers/safeSizeTest';
+
+fixture.disablePageReloads`Appointments with adaptive`
+  .page(url(__dirname, '../../../container.html'));
+
+safeSizeTest('Should correctly render scheduler in workWeek view with interval, skipping weekends (T1243027)', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const scheduler = new Scheduler('#container');
+
+  await takeScreenshot('work_week_interval-2.png', scheduler.workSpace);
+
+  await t.expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxScheduler', {
+  dataSource: [
+    {
+      startDate: '2024-01-05T01:00:00',
+      endDate: '2024-01-07T01:00:00',
+      text: 'Ends in weekend',
+      color: 'red',
+    },
+    {
+      startDate: '2024-01-07T01:00:00',
+      endDate: '2024-01-08T01:00:00',
+      text: 'Starts in weekend',
+      color: 'blue',
+    },
+    {
+      startDate: '2024-01-05T01:00:00',
+      endDate: '2024-01-08T01:00:00',
+      text: 'Goes over weekend',
+      color: 'green',
+    },
+  ],
+  views: [{
+    name: 'myView',
+    type: 'workWeek',
+    allDayPanelMode: 'allDay',
+    intervalCount: 2,
+    maxAppointmentsPerCell: 'unlimited',
+  }],
+  currentView: 'myView',
+  currentDate: '2024-01-01',
+  height: 600,
+  // NOTE: resources are used only to distinguish appts in etalon file
+  resources: [{
+    fieldExpr: 'color',
+    dataSource: [
+      { id: 'red', color: 'red' },
+      { id: 'blue', color: 'blue' },
+      { id: 'green', color: 'green' },
+    ],
+    label: 'Room',
+  }],
+}));

packages/devextreme/js/__internal/scheduler/appointments/m_cell_position_calculator.ts

@@ -110,6 +110,15 @@ class BaseStrategy {
       inAllDayRow && !this.isVerticalGrouping,
     );
 
+    const groupEdgeIndices = this.viewDataProvider.getGroupEdgeIndices(validGroupIndex);
+    const { top: vMin } = this.getCellPosition(
+      {
+        columnIndex: positionByMap.columnIndex,
+        rowIndex: groupEdgeIndices.firstRowIndex,
+      },
+      inAllDayRow && !this.isVerticalGrouping,
+    );
+
     const timeShift = inAllDayRow
       ? 0
       : this.getTimeShiftRatio(positionByMap, date);
@@ -134,6 +143,7 @@ class BaseStrategy {
       columnIndex: position.columnIndex,
       hMax: horizontalHMax,
       vMax: verticalMax,
+      vMin,
       groupIndex: validGroupIndex,
     };
   }

packages/devextreme/js/__internal/scheduler/appointments/rendering_strategies/m_strategy_vertical.ts

@@ -203,10 +203,13 @@ class VerticalRenderingStrategy extends BaseAppointmentsStrategy {
 
     const minHeight = this.getAppointmentMinSize();
     const {
-      vMax,
       hMax,
+      vMax,
+      vMin,
     } = appointmentSettings;
 
+    const maxHeight = this.isVirtualScrolling ? vMax : vMax - vMin;
+
     const hasTailPart = this.options.endViewDate > appointmentSettings.info.appointment.endDate;
     let left = Math.round(appointmentSettings.left + offset);
     let tailHeight = this._getTailHeight(appointmentGeometry, appointmentSettings);
@@ -215,7 +218,7 @@ class VerticalRenderingStrategy extends BaseAppointmentsStrategy {
     while (tailHeight > 0 && left < hMax) {
       tailHeight = Math.max(minHeight, tailHeight);
       columnIndex += cellsDiff;
-      const height = Math.min(tailHeight, vMax);
+      const height = Math.min(tailHeight, maxHeight);
 
       result.push({
         ...appointmentSettings,
@@ -229,7 +232,7 @@ class VerticalRenderingStrategy extends BaseAppointmentsStrategy {
       });
 
       left += offset;
-      tailHeight -= vMax;
+      tailHeight -= maxHeight;
     }
 
     if (hasTailPart && result.length > 0) {
@@ -357,7 +360,14 @@ class VerticalRenderingStrategy extends BaseAppointmentsStrategy {
     } = position.info.appointment;
     const allDay = ExpressionUtils.getField(this.dataAccessors, 'allDay', appointment);
     const duration = this.getAppointmentDurationInMs(startDate, normalizedEndDate, allDay);
-    const durationInMinutes = this._adjustDurationByDaylightDiff(duration, startDate, normalizedEndDate) / toMs('minute');
+    const skippedMinutes = getSkippedHoursInRange(
+      startDate,
+      normalizedEndDate,
+      appointment.allDay,
+      this.viewDataProvider,
+    ) * 60;
+
+    const durationInMinutes = this._adjustDurationByDaylightDiff(duration, startDate, normalizedEndDate) / toMs('minute') - skippedMinutes;
 
     const height = durationInMinutes * this._getMinuteHeight();
 

packages/devextreme/js/__internal/scheduler/r1/utils/base.ts

@@ -445,7 +445,7 @@ export const getSkippedHoursInRange = (
   }
 
   const startDateHours = startDate.getHours();
-  const endDateHours = endDate.getHours() + Math.ceil(endDate.getTime() % HOUR_IN_MS);
+  const endDateHours = endDate.getHours() + (endDate.getTime() % HOUR_IN_MS) / HOUR_IN_MS;
 
   if (viewDataProvider.isSkippedDate(startDate)) {
     if (isAllDay) {

packages/devextreme/testing/testcafe/tests/scheduler/grouping/overflow.ts

@@ -0,0 +1,81 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import Scheduler from 'devextreme-testcafe-models/scheduler';
+import { createWidget } from '../../../helpers/createWidget';
+import url from '../../../helpers/getPageUrl';
+
+fixture.disablePageReloads`Scheduler: Grouping overflow`
+  .page(url(__dirname, '../../container.html'));
+
+['week', 'month'].forEach((viewType) => {
+  ['vertical', 'horizontal'].forEach((groupOrientation) => {
+    ['hidden', 'allDay'].forEach((allDayPanelMode) => {
+      [[9, 14, 60], [0, 24, 360]].forEach(([startDayHour, endDayHour, cellDuration]) => {
+        const allParams = `${viewType}-${groupOrientation}-${allDayPanelMode}-${startDayHour}-${endDayHour}`;
+
+        test(`Long appointments should not overflow group view (${allParams})`, async (t) => {
+          const scheduler = new Scheduler('#container');
+          const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+          await t
+            .expect(await takeScreenshot(`group-overflow-(${allParams}).png`, scheduler.element))
+            .ok()
+            .expect(compareResults.isValid())
+            .ok(compareResults.errorMessages());
+        }).before(async () => createWidget('dxScheduler', {
+          dataSource: [
+            {
+              text: '1',
+              priorityId: 1,
+              startDate: '2021-04-19T16:30:00',
+              endDate: '2021-04-25T18:30:00',
+            }, {
+              text: '2',
+              priorityId: 2,
+              startDate: '2021-04-19T16:30:00',
+              endDate: '2021-04-25T18:30:00',
+            }, {
+              text: '3',
+              priorityId: 3,
+              startDate: '2021-04-19T16:30:00',
+              endDate: '2021-04-25T18:30:00',
+            },
+          ],
+          views: [{
+            type: viewType,
+            name: 'myView',
+            groupOrientation,
+          }],
+          cellDuration,
+          currentView: 'myView',
+          currentDate: new Date(2021, 3, 21),
+          allDayPanelMode,
+          startDayHour,
+          endDayHour,
+          groups: ['priorityId'],
+          resources: [
+            {
+              fieldExpr: 'priorityId',
+              dataSource: [
+                {
+                  text: 'Low Priority',
+                  id: 1,
+                  color: '#1e90ff',
+                }, {
+                  text: 'High Priority',
+                  id: 2,
+                  color: '#ff9747',
+                },
+                {
+                  text: 'Custom',
+                  id: 3,
+                  color: 'red',
+                },
+              ],
+            },
+          ],
+          showAllDayPanel: false,
+        }));
+      });
+    });
+  });
+});