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 ac78526f137..3fef0f3702d 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
@@ -183,6 +183,14 @@
             @extend %date-range-preview-inactive !optional;
         }
 
+        @include e(date, $mods: ('range-preview', 'weekend')) {
+            @extend %date-range-preview-weekend !optional;
+        }
+
+        @include e(date, $mods: ('range-preview', 'weekend', 'active')) {
+            @extend %date-range-preview-weekend-active !optional;
+        }
+
         @include e(date, $mods: ('range-preview', 'current')) {
             @extend %date-range-preview-current !optional;
         }
@@ -466,6 +474,10 @@
             @extend %date-disabled-range !optional;
         }
 
+        @include e(date, $mods: ('disabled', 'range', 'inactive')) {
+            @extend %date-disabled-range-inactive !optional;
+        }
+
         @include e(date, $mods: ('disabled', 'range-preview')) {
             @extend %date-disabled-range-preview !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 14004190d7e..7e13a2425a0 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
@@ -535,11 +535,11 @@
             height: $date-height;
             position: relative;
 
-            @if $bootstrap-theme {
-                color: var-get($theme, 'weekday-color');
-            } @else {
+            @if not $bootstrap-theme {
                 color: var-get($theme, 'week-number-foreground');
                 background: var-get($theme, 'week-number-background');
+            } @else {
+                color: var-get($theme, 'weekday-color');
             }
 
             border-top-left-radius: var-get($theme, 'week-number-border-radius');
@@ -904,7 +904,7 @@
             background: var-get($theme, 'date-special-range-background');
 
             &:hover {
-                color: var-get($theme, 'date-special-hover-foreground');
+                color: var-get($theme, 'date-special-range-hover-foreground');
                 background: var-get($theme, 'date-special-range-hover-background');
 
                 @if $variant == 'indigo' {
@@ -952,7 +952,7 @@
 
     %date-selected-special-range-active {
         %date-inner {
-            color: var-get($theme, 'date-special-focus-foreground');
+            color: var-get($theme, 'date-special-range-focus-foreground');
             background: var-get($theme, 'date-special-range-focus-background');
 
             &::after {
@@ -1176,11 +1176,15 @@
     @if $variant == 'indigo' {
         %date-selected-current-special {
             %date-inner {
+                border-color: var-get($theme, 'date-current-border-color');
+
                 &::after {
                     border-color: var-get($theme, 'date-selected-special-border-color');
                 }
 
                 &:hover {
+                    border-color: var-get($theme, 'date-current-hover-border-color');
+
                     // stylelint-disable-next-line
                     &::after {
                         border-color: var-get($theme, 'date-selected-special-hover-border-color');
@@ -1191,6 +1195,8 @@
 
         %date-selected-current-special-active {
             %date-inner {
+                border-color: var-get($theme, 'date-current-focus-border-color');
+
                 &::after {
                     border-color: var-get($theme, 'date-selected-special-focus-border-color');
                 }
@@ -1241,7 +1247,7 @@
                 border-color: transparent;
 
                 &::after {
-                    border-color: var-get($theme, 'date-current-border-color');
+                    border-color: var-get($theme, 'date-selected-current-border-color');
                 }
             }
 
@@ -1258,7 +1264,7 @@
 
                     // stylelint-disable-next-line
                     &::after {
-                        border-color: var-get($theme, 'date-current-hover-border-color');
+                        border-color: var-get($theme, 'date-selected-current-hover-border-color');
                     }
                 }
             }
@@ -1278,7 +1284,7 @@
                 border-color: transparent;
 
                 &::after {
-                    border-color: var-get($theme, 'date-current-focus-border-color');
+                    border-color: var-get($theme, 'date-selected-current-focus-border-color')
                 }
             }
         }
@@ -1289,13 +1295,13 @@
         %date-inner {
             @if $variant == 'indigo' {
                 &::after {
-                    border-color: var-get($theme, 'date-current-border-color');
+                    border-color: var-get($theme, 'date-selected-current-border-color');
                 }
 
                 &:hover {
                     // stylelint-disable-next-line
                     &::after {
-                        border-color: var-get($theme, 'date-current-hover-border-color');
+                        border-color: var-get($theme, 'date-selected-current-hover-border-color');
                     }
                 }
             }
@@ -1311,7 +1317,9 @@
             }
 
             @if $variant == 'indigo' {
-                border-color: var-get($theme, 'date-current-border-color');
+                color: var-get($theme, 'date-special-foreground');
+                border-color: var-get($theme, 'date-selected-current-border-color');
+                background: var-get($theme, 'date-current-background');
             }
 
             &:hover {
@@ -1328,7 +1336,7 @@
 
                 @if $variant == 'indigo' {
                     background: var-get($theme, 'date-selected-current-range-hover-background');
-                    border-color: var-get($theme, 'date-current-hover-border-color');
+                    border-color: var-get($theme, 'date-selected-current-hover-border-color');
                 }
             }
 
@@ -1370,7 +1378,7 @@
 
             @if $variant == 'indigo' {
                 background: var-get($theme, 'date-selected-current-range-focus-background');
-                border-color: var-get($theme, 'date-current-focus-border-color');
+                border-color: var-get($theme, 'date-selected-current-focus-border-color');
 
                 &::after {
                     border-color: var-get($theme, 'date-special-hover-border-color');
@@ -1485,6 +1493,7 @@
     %date-range-selected-first,
     %date-range-selected-last {
         background: transparent;
+        border-inline-color: transparent;
         border-block-color: transparent;
 
         @if $variant == 'fluent' {
@@ -1506,7 +1515,10 @@
             z-index: -1;
             color: var-get($theme, 'date-selected-foreground');
             background: var-get($theme, 'date-selected-range-background');
-            border-block: $border-size solid transparent;
+
+            @if $variant == 'material' and $variant == 'indigo' {
+                border-block: $border-size solid transparent;
+            }
         }
 
         &::before {
@@ -1717,7 +1729,6 @@
             }
         }
 
-
         %date-first-preview {
             %date-inner {
                 border-start-start-radius: var-get($theme, 'date-range-border-radius');
@@ -1759,19 +1770,25 @@
             }
         }
 
-        %date-inner {
-            color: var-get($theme, 'date-selected-range-foreground');
-
-            &:hover {
-                @if not $bootstrap-theme {
-                    color: var-get($theme, 'date-selected-range-hover-foreground');
-                } @else {
-                    color: var-get($theme, 'date-selected-foreground');
+        @if $variant == 'fluent' {
+            %date-inner {
+                &:hover {
+                    color: var-get($theme, 'content-foreground');
                 }
             }
         }
     }
 
+    %date-range-preview-weekend-active {
+        %date-inner {
+            @if not $bootstrap-theme {
+                color: var-get($theme, 'date-hover-foreground');
+            } @else {
+                color: var-get($theme, 'date-selected-foreground');
+            }
+        }
+    }
+
     %date-range-preview-inactive {
         %date-inner {
             color: var-get($theme, 'inactive-color');
@@ -1780,7 +1797,7 @@
 
     %date-range-preview-current {
         %date-inner {
-            color: var-get($theme, 'date-selected-current-range-foreground');
+            color: var-get($theme, 'date-current-foreground');
 
             @if $variant == 'bootstrap' {
                 color: var-get($theme, 'date-selected-current-range-foreground');
@@ -2013,9 +2030,13 @@
     %date-disabled-range {
         %date-inner {
             color: var-get($theme, 'date-disabled-range-foreground');
+        }
+    }
 
+    %date-disabled-range-inactive {
+        %date-inner {
             @if $variant == 'fluent' {
-                opacity: .38;
+                color: var-get($theme, 'date-disabled-range-foreground');
             }
         }
     }
@@ -2037,7 +2058,7 @@
 
     %date-disabled-inactive {
         %date-inner {
-            color: var-get($theme, 'inactive-color');
+            color: var-get($theme, 'date-disabled-foreground');
             opacity: 1;
         }
     }