Scheduler - Appointments overflow groups in certain cases (T1223907)

e2e/testcafe-devextreme/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,
+        }));
+      });
+    });
+  });
+});

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