diff --git a/projects/element-ng/datepicker/components/si-calendar-body.component.html b/projects/element-ng/datepicker/components/si-calendar-body.component.html
index ea1d8aca0..8bb9eea17 100644
--- a/projects/element-ng/datepicker/components/si-calendar-body.component.html
+++ b/projects/element-ng/datepicker/components/si-calendar-body.component.html
@@ -12,15 +12,7 @@
         class="si-calendar-cell"
         [attr.data-row]="rowIndex"
         [attr.data-col]="colIndex"
-        [class.range-hover]="
-          previewRange() && selection().previewRangeHover(col, activeHover(), startDate())
-        "
-        [class.range-hover-end]="
-          previewRange() && selection().previewRangeHoverEnd(col, activeHover(), startDate())
-        "
-        [class.range]="selection().inRange(col, startDate(), endDate())"
-        [class.range-start]="selection().isRangeSelected(col, startDate())"
-        [class.range-end]="selection().isRangeSelected(col, endDate())"
+        [class]="cellRangeClasses()[rowIndex][colIndex]"
       >
         <button
           siCalendarDateCell
diff --git a/projects/element-ng/datepicker/components/si-calendar-body.component.ts b/projects/element-ng/datepicker/components/si-calendar-body.component.ts
index d39fffebd..16d74e6e0 100644
--- a/projects/element-ng/datepicker/components/si-calendar-body.component.ts
+++ b/projects/element-ng/datepicker/components/si-calendar-body.component.ts
@@ -201,6 +201,37 @@ export class SiCalendarBodyComponent {
       : new SingleSelectionStrategy(this.compareAdapter())
   );
 
+  protected readonly cellRangeClasses = computed(() => {
+    const rows = this.rows();
+    const previewRange = this.previewRange();
+    const sel = this.selection();
+    const hover = this.activeHover();
+    const start = this.startDate();
+    const end = this.endDate();
+
+    return rows.map(row =>
+      row.map(col => {
+        const classes: string[] = [];
+        if (previewRange && sel.previewRangeHover(col, hover, start)) {
+          classes.push('range-hover');
+        }
+        if (previewRange && sel.previewRangeHoverEnd(col, hover, start)) {
+          classes.push('range-hover-end');
+        }
+        if (sel.inRange(col, start, end)) {
+          classes.push('range');
+        }
+        if (sel.isRangeSelected(col, start)) {
+          classes.push('range-start');
+        }
+        if (sel.isRangeSelected(col, end)) {
+          classes.push('range-end');
+        }
+        return classes.join(' ');
+      })
+    );
+  });
+
   /**
    * Focus calendar cell which is marked as active cell.
    */