diff --git a/src/material/core/focus-indicators/_focus-indicators.scss b/src/material/core/focus-indicators/_focus-indicators.scss
index 9a57b9f34fe7..ed53ce4a28d7 100644
--- a/src/material/core/focus-indicators/_focus-indicators.scss
+++ b/src/material/core/focus-indicators/_focus-indicators.scss
@@ -70,6 +70,9 @@
   // is present.
   .mat-focus-indicator.mat-option.mat-active::before,
 
+  // The focus indicator in the calendar is placed on an element inside the cell.
+  .mat-calendar-body-active .mat-focus-indicator::before,
+
   // For all other components, render the focus indicator on focus.
   .mat-focus-indicator:focus::before {
     content: '';
diff --git a/src/material/datepicker/calendar-body.html b/src/material/datepicker/calendar-body.html
index cb6d2d4d1e6c..78605033398d 100644
--- a/src/material/datepicker/calendar-body.html
+++ b/src/material/datepicker/calendar-body.html
@@ -29,7 +29,7 @@
   </td>
   <td *ngFor="let item of row; let colIndex = index"
       role="gridcell"
-      class="mat-calendar-body-cell mat-focus-indicator"
+      class="mat-calendar-body-cell"
       [ngClass]="item.cssClasses"
       [tabindex]="_isActiveCell(rowIndex, colIndex) ? 0 : -1"
       [attr.data-mat-row]="rowIndex"
@@ -54,7 +54,7 @@
       [style.width]="_cellWidth"
       [style.paddingTop]="_cellPadding"
       [style.paddingBottom]="_cellPadding">
-      <div class="mat-calendar-body-cell-content"
+      <div class="mat-calendar-body-cell-content mat-focus-indicator"
         [class.mat-calendar-body-selected]="_isSelected(item)"
         [class.mat-calendar-body-today]="todayValue === item.compareValue">
         {{item.displayValue}}
diff --git a/src/material/datepicker/calendar-body.spec.ts b/src/material/datepicker/calendar-body.spec.ts
index bc5b0c9cf1fb..20c16da6caf7 100644
--- a/src/material/datepicker/calendar-body.spec.ts
+++ b/src/material/datepicker/calendar-body.spec.ts
@@ -107,7 +107,7 @@ describe('MatCalendarBody', () => {
     });
 
     it('should have a focus indicator', () => {
-      expect(cellEls.every(element => element.classList.contains('mat-focus-indicator')))
+      expect(cellEls.every(element => !!element.querySelector('.mat-focus-indicator')))
           .toBe(true);
     });