diff --git a/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html b/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html
index af95a79931d..aeca84c201d 100644
--- a/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html
+++ b/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html
@@ -12,6 +12,7 @@
         [date]="date"
         [showActive]="showActive"
         (itemSelection)="selectDate($event)"
+        (mousedown)="onMouseDown()"
     >
         <span class="igx-calendar-view__item-inner" aria-hidden="true">
             {{ formattedMonth(month).formatted | titlecase }}
diff --git a/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts b/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts
index 0bd18ef3b47..4882cc58dc8 100644
--- a/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts
+++ b/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts
@@ -136,6 +136,15 @@ export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements
         super(dayInterval);
     }
 
+    /**
+     * @hidden
+     */
+    protected onMouseDown() {
+        if (this.tabIndex !== -1) {
+            this.el.nativeElement.focus();
+        }
+    }
+
     /**
      * Returns the locale representation of the month in the months view.
      *
diff --git a/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.html b/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.html
index bebc8f46e58..28082a19ab9 100644
--- a/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.html
+++ b/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.html
@@ -13,6 +13,7 @@
         [date]="date"
         [showActive]="showActive"
         (itemSelection)="selectDate($event)"
+        (mousedown)="onMouseDown()"
     >
         <span class="igx-calendar-view__item-inner" aria-hidden="true">
             {{ formattedYear(year).formatted }}
diff --git a/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts b/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts
index 5f69163e234..61c2793e098 100644
--- a/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts
+++ b/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts
@@ -155,4 +155,13 @@ export class IgxYearsViewComponent extends IgxCalendarViewDirective implements C
             year: this.yearFormat,
         });
     }
+
+    /**
+     * @hidden
+     */
+    protected onMouseDown() {
+        if (this.tabIndex !== -1) {
+            this.el.nativeElement.focus();
+        }
+    }
 }