Calendar: range should not be rendered on non month views (T1186223) (#…

…25614)

packages/devextreme/js/ui/calendar/ui.calendar.base_view.js

@@ -341,15 +341,19 @@ const BaseView = Widget.inherit({
     },
 
     _updateSelectedClass: function(value) {
+        if(this._isRangeMode() && !this._isMonthView()) {
+            return;
+        }
+
         this._$selectedCells?.forEach(($cell) => { $cell.removeClass(CALENDAR_SELECTED_DATE_CLASS); });
         this._$selectedCells = value.map((value) => this._getCellByDate(value));
         this._$selectedCells.forEach(($cell) => { $cell.addClass(CALENDAR_SELECTED_DATE_CLASS); });
     },
 
     _renderRange: function() {
-        const { allowValueSelection, selectionMode, value, range } = this.option();
+        const { allowValueSelection, value, range } = this.option();
 
-        if(!allowValueSelection || selectionMode !== 'range') {
+        if(!allowValueSelection || !this._isRangeMode() || !this._isMonthView()) {
             return;
         }
 
@@ -374,9 +378,9 @@ const BaseView = Widget.inherit({
     },
 
     _renderHoveredRange() {
-        const { allowValueSelection, selectionMode, hoveredRange } = this.option();
+        const { allowValueSelection, hoveredRange } = this.option();
 
-        if(!allowValueSelection || selectionMode !== 'range') {
+        if(!allowValueSelection || !this._isRangeMode() || !this._isMonthView()) {
             return;
         }
 
@@ -397,6 +401,14 @@ const BaseView = Widget.inherit({
         this._$rangeEndHoverCell?.addClass(CALENDAR_CELL_RANGE_HOVER_END_CLASS);
     },
 
+    _isMonthView: function() {
+        return this.option('zoomLevel') === 'month';
+    },
+
+    _isRangeMode: function() {
+        return this.option('selectionMode') === 'range';
+    },
+
     getCellAriaLabel: function(date) {
         return this._getCellText(date);
     },

packages/devextreme/testing/testcafe/tests/editors/calendar/common.ts

@@ -396,4 +396,18 @@ test('Calendar with disabled dates rendered correct', async (t) => {
       zoomLevel,
     }, '#calendar');
   });
+
+  test(`Calendar with range selectionMode rendered correct (maxZoomLevel=${zoomLevel})`, async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+    await testScreenshot(t, takeScreenshot, `Calendar with range selection (maxZoomLevel=${zoomLevel}).png`, { element: '#container' });
+
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).before(async () => createWidget('dxCalendar', {
+    value: [new Date(2023, 0, 5), new Date(2023, 0, 17), new Date(2099, 1, 2)],
+    selectionMode: 'range',
+    maxZoomLevel: zoomLevel,
+  }));
 });