diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
index e7590e2526b..ed82d6134a1 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
@@ -179,6 +179,10 @@
             @extend %date-range-preview !optional;
         }
 
+        @include e(date, $mods: ('range-preview', 'inactive')) {
+            @extend %date-range-preview-inactive !optional;
+        }
+
         @include e(date, $mods: ('range-preview', 'current')) {
             @extend %date-range-preview-current !optional;
         }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
index 88dce836976..aff1bd91756 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
@@ -2389,6 +2389,12 @@
         }
     }
 
+    %date-range-preview-inactive {
+        %date-inner {
+            color: var-get($theme, 'inactive-color');
+        }
+    }
+
     %date-range-preview-current {
         %date-inner {
             color: var-get($theme, 'date-selected-current-range-foreground');