diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.html b/projects/igniteui-angular/src/lib/calendar/calendar.component.html
index 88e1a6d8293..fd27a1dd43d 100644
--- a/projects/igniteui-angular/src/lib/calendar/calendar.component.html
+++ b/projects/igniteui-angular/src/lib/calendar/calendar.component.html
@@ -48,7 +48,7 @@ <h2 class="igx-calendar__header-date">
                 [animationAction]="monthAction"
                 [locale]="locale"
                 [value]="value"
-                [viewDate]="viewDate"
+                [viewDate]="getViewDate(i)"
                 [weekStart]="weekStart"
                 [formatOptions]="formatOptions"
                 [formatViews]="formatViews"
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts
index d85843e522e..99caf48edb7 100644
--- a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts
+++ b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts
@@ -119,7 +119,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
     set monthsViewNumber(val: number) {
         this._monthsViewNumber = val;
 
-        for (let i = 0; i < val; i++) {
+        for (let i = 1; i < val; i++) {
             const nextMonthDate = new Date(this.viewDate);
             nextMonthDate.setMonth(nextMonthDate.getMonth() + i);
             const monthView: IMonthView = {