diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.ts b/projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.ts
index 18096d00c67..5fe28032534 100644
--- a/projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.ts
+++ b/projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.ts
@@ -111,7 +111,8 @@ export class IgxDayItemComponent {
     @HostBinding('class.igx-days-view__date--selected')
     public get isSelectedCSS(): boolean {
     const selectable =
-        !this.isInactive || (this.isWithinRange && this.selection === "range");
+        !this.isInactive || this.isWithinPreviewRange ||
+        (this.isWithinRange && this.selection === "range");
     return !this.isDisabled && selectable && this.selected;
     }