diff --git a/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-horizontal-allDay-0-24).png b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-horizontal-allDay-0-24).png new file mode 100644 index 000000000000..4611acac6915 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-horizontal-allDay-0-24).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-horizontal-allDay-9-14).png b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-horizontal-allDay-9-14).png new file mode 100644 index 000000000000..210d00afd0e8 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-horizontal-allDay-9-14).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-horizontal-hidden-0-24).png b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-horizontal-hidden-0-24).png new file mode 100644 index 000000000000..4611acac6915 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-horizontal-hidden-0-24).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-horizontal-hidden-9-14).png b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-horizontal-hidden-9-14).png new file mode 100644 index 000000000000..210d00afd0e8 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-horizontal-hidden-9-14).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-vertical-allDay-0-24).png b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-vertical-allDay-0-24).png new file mode 100644 index 000000000000..44d43c3d6d97 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-vertical-allDay-0-24).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-vertical-allDay-9-14).png b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-vertical-allDay-9-14).png new file mode 100644 index 000000000000..6be9f121fbd7 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-vertical-allDay-9-14).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-vertical-hidden-0-24).png b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-vertical-hidden-0-24).png new file mode 100644 index 000000000000..44d43c3d6d97 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-vertical-hidden-0-24).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-vertical-hidden-9-14).png b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-vertical-hidden-9-14).png new file mode 100644 index 000000000000..6be9f121fbd7 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(month-vertical-hidden-9-14).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-horizontal-allDay-0-24).png b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-horizontal-allDay-0-24).png new file mode 100644 index 000000000000..dbaa380a7e93 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-horizontal-allDay-0-24).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-horizontal-allDay-9-14).png b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-horizontal-allDay-9-14).png new file mode 100644 index 000000000000..10d99d2f2cd2 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-horizontal-allDay-9-14).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-horizontal-hidden-0-24).png b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-horizontal-hidden-0-24).png new file mode 100644 index 000000000000..dbaa380a7e93 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-horizontal-hidden-0-24).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-horizontal-hidden-9-14).png b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-horizontal-hidden-9-14).png new file mode 100644 index 000000000000..10d99d2f2cd2 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-horizontal-hidden-9-14).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-vertical-allDay-0-24).png b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-vertical-allDay-0-24).png new file mode 100644 index 000000000000..8d1be159f2a1 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-vertical-allDay-0-24).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-vertical-allDay-9-14).png b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-vertical-allDay-9-14).png new file mode 100644 index 000000000000..466d365a414a Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-vertical-allDay-9-14).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-vertical-hidden-0-24).png b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-vertical-hidden-0-24).png new file mode 100644 index 000000000000..8d1be159f2a1 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-vertical-hidden-0-24).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-vertical-hidden-9-14).png b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-vertical-hidden-9-14).png new file mode 100644 index 000000000000..466d365a414a Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/grouping/etalons/group-overflow-(week-vertical-hidden-9-14).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/grouping/overflow.ts b/e2e/testcafe-devextreme/tests/scheduler/grouping/overflow.ts new file mode 100644 index 000000000000..8568721ccee1 --- /dev/null +++ b/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, + })); + }); + }); + }); +}); diff --git a/packages/devextreme/js/__internal/scheduler/appointments/m_cell_position_calculator.ts b/packages/devextreme/js/__internal/scheduler/appointments/m_cell_position_calculator.ts index 6ce4151b1043..82001336096f 100644 --- a/packages/devextreme/js/__internal/scheduler/appointments/m_cell_position_calculator.ts +++ b/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, }; } diff --git a/packages/devextreme/js/__internal/scheduler/appointments/rendering_strategies/m_strategy_vertical.ts b/packages/devextreme/js/__internal/scheduler/appointments/rendering_strategies/m_strategy_vertical.ts index 6f2b1d79b0d1..127723415116 100644 --- a/packages/devextreme/js/__internal/scheduler/appointments/rendering_strategies/m_strategy_vertical.ts +++ b/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) {