Scheduler: Fix appointment rendering when virtual scrolling is enable…

…d (T1263428) (#28611)

Co-authored-by: Alyar <>

e2e/testcafe-devextreme/tests/scheduler/virtualScrolling/appointments.ts

@@ -1,4 +1,5 @@
 import Scheduler from 'devextreme-testcafe-models/scheduler';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import { getStyleAttribute, setStyleAttribute } from '../../../helpers/domUtils';
 import { createWidget } from '../../../helpers/createWidget';
 import url from '../../../helpers/getPageUrl';
@@ -39,3 +40,48 @@ test.skip('Appointment should not repaint after scrolling if present on viewport
     }],
   });
 });
+
+test('The appointment should render correctly when scrolling vertically (T1263428)', async (t) => {
+  const scheduler = new Scheduler('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await scrollTo(new Date('2024-11-12T09:00:00+0100'));
+
+  await takeScreenshot('T1263428-virtual-scrolling-render-appointment.png', scheduler.element);
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxScheduler', {
+    height: 500,
+    width: 900,
+    timeZone: 'Europe/Vienna',
+    dateSerializationFormat: 'yyyy-MM-ddTHH:mm:ssxx',
+    currentDate: new Date(2024, 10, 11, 20, 54, 23, 361),
+    cellDuration: 20,
+    firstDayOfWeek: 1,
+    startDayHour: 12.0,
+    endDayHour: 18.0,
+    allDayPanelMode: 'hidden',
+    scrolling: {
+      mode: 'virtual',
+    },
+    crossScrollingEnabled: true,
+    currentView: 'week',
+    textExpr: 'Subject',
+    startDateExpr: 'StartDate',
+    endDateExpr: 'EndDate',
+    views: [{
+      type: 'week',
+      groupByDate: true,
+      startDayHour: 6.0,
+      endDayHour: 22.0,
+    }],
+    dataSource: [{
+      Subject: 'Website Re-Design Plan',
+      StartDate: new Date('2024-11-11T12:10:00+0100'),
+      EndDate: new Date('2024-11-12T21:00:00+0100'),
+    }],
+  });
+});

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

@@ -207,8 +207,8 @@ class VerticalRenderingStrategy extends BaseAppointmentsStrategy {
       vMax,
       vMin,
     } = appointmentSettings;
-
-    const maxHeight = this.isVirtualScrolling ? vMax : vMax - vMin;
+    const { bottomVirtualRowHeight = 0 } = this.viewDataProvider.getViewOptions();
+    const maxHeight = this.isVirtualScrolling ? vMax + bottomVirtualRowHeight : vMax - vMin;
 
     const hasTailPart = this.options.endViewDate > appointmentSettings.info.appointment.endDate;
     let left = Math.round(appointmentSettings.left + offset);