diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.html b/projects/igniteui-angular/src/lib/calendar/calendar.component.html
index 07aa445a6d0..858d4715bc4 100644
--- a/projects/igniteui-angular/src/lib/calendar/calendar.component.html
+++ b/projects/igniteui-angular/src/lib/calendar/calendar.component.html
@@ -43,6 +43,7 @@ <h2 class="igx-calendar__header-date">
                    [selection]="selection"
                    [disabledDates]="disabledDates"
                    [specialDates]="specialDates"
+                   (onViewChnaged)="viewChanged($event)"
                    (onDateSelection)="childClicked($event)">
     </igx-days-view>
 </div>
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts
index bacb7706d07..94dc174b024 100644
--- a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts
+++ b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts
@@ -21,7 +21,7 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { IgxYearsViewComponent } from './years-view/years-view.component';
 import { IgxMonthsViewComponent } from './months-view/months-view.component';
 import { KEYS } from '../core/utils';
-import { ICalendarDate, IGX_CALENDAR_COMPONENT } from './calendar';
+import { ICalendarDate } from './calendar';
 
 let NEXT_ID = 0;
 
@@ -43,10 +43,6 @@ let NEXT_ID = 0;
             multi: true,
             provide: NG_VALUE_ACCESSOR,
             useExisting: IgxCalendarComponent
-        },
-        {
-            provide: IGX_CALENDAR_COMPONENT,
-            useExisting: IgxCalendarComponent
         }
     ],
     animations: [
@@ -328,7 +324,7 @@ export class IgxCalendarComponent extends IgxDaysViewComponent {
      *@hidden
      */
     constructor(public elementRef: ElementRef) {
-        super(null);
+        super();
     }
 
     /**
@@ -440,6 +436,13 @@ export class IgxCalendarComponent extends IgxDaysViewComponent {
         this.onSelection.emit(this.selectedDates);
     }
 
+    /**
+     * @hidden
+     */
+    public viewChanged(event) {
+        this.viewDate = this.calendarModel.timedelta(event, 'month', 0);
+    }
+
     /**
      * @hidden
      */
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.ts b/projects/igniteui-angular/src/lib/calendar/calendar.ts
index 23b05d9527e..d05d7c67a51 100644
--- a/projects/igniteui-angular/src/lib/calendar/calendar.ts
+++ b/projects/igniteui-angular/src/lib/calendar/calendar.ts
@@ -332,10 +332,3 @@ export class Calendar {
         return date.getFullYear() > year;
     }
 }
-
-
-export const IGX_CALENDAR_COMPONENT = 'IgxCalendarComponentToken';
-
-export interface IgxCalendarBase {
-    viewDate: Date;
-}
diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts
index ef422703abd..fb63f569a07 100644
--- a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts
+++ b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts
@@ -8,11 +8,9 @@ import {
     QueryList,
     HostBinding,
     forwardRef,
-    DoCheck,
-    Inject,
-    Optional
+    DoCheck
 } from '@angular/core';
-import { ICalendarDate, Calendar, WEEKDAYS, isDateInRanges, IGX_CALENDAR_COMPONENT, IgxCalendarBase } from '../../calendar';
+import { ICalendarDate, Calendar, WEEKDAYS, isDateInRanges } from '../../calendar';
 import { trigger, transition, useAnimation } from '@angular/animations';
 import { slideInLeft, slideInRight } from '../../animations/main';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
@@ -314,6 +312,12 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
     @Output()
     public onDateSelection = new EventEmitter<ICalendarDate>();
 
+    /**
+     * @hidden
+     */
+    @Output()
+    public onViewChnaged = new EventEmitter<Date>();
+
     /**
      * @hidden
      */
@@ -430,7 +434,7 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
     /**
      * @hidden
      */
-    constructor(@Optional() @Inject(IGX_CALENDAR_COMPONENT) public calendar: IgxCalendarBase) {
+    constructor() {
         this.calendarModel = new Calendar();
 
         this.calendarModel.firstWeekDay = this.weekStart;
@@ -648,16 +652,15 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
 
             this._nextDate.setDate(this._nextDate.getDate() - 7);
 
-            this.animationAction = 'prev';
             this.isKeydownTrigger = true;
-            if (this.calendar) {
-                this.calendar.viewDate = this.calendarModel.timedelta(this._nextDate, 'month', 0);
-            }
+            this.animationAction = 'prev';
 
             this.callback = (items?, next?) => {
                 const day = items.find((item) => item.date.date.getTime() === next.getTime()).nativeElement;
                 this.focusPreviousUpDate(day, true);
             };
+
+            this.onViewChnaged.emit(this._nextDate);
         }
     }
 
@@ -685,16 +688,15 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
 
             this._nextDate.setDate(this._nextDate.getDate() + 7);
 
-            this.animationAction = 'next';
             this.isKeydownTrigger = true;
-            if (this.calendar) {
-                this.calendar.viewDate = this.calendarModel.timedelta(this._nextDate, 'month', 0);
-            }
+            this.animationAction = 'next';
 
             this.callback = (items?, next?) => {
                 const day = items.find((item) => item.date.date.getTime() === next.getTime()).nativeElement;
                 this.focusNextDownDate(day, true);
             };
+
+            this.onViewChnaged.emit(this._nextDate);
         }
     }
 
@@ -720,16 +722,15 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
             const dayItem = dates[dates.indexOf(node)];
             this._nextDate = new Date(dayItem.date.date);
 
-            this.animationAction = 'prev';
             this.isKeydownTrigger = true;
-            if (this.calendar) {
-                this.calendar.viewDate = this.calendarModel.timedelta(this._nextDate, 'month', 0);
-            }
+            this.animationAction = 'prev';
 
             this.callback = (items?, next?) => {
                 const day = items.find((item) => item.date.date.getTime() === next.getTime()).nativeElement;
                 this.focusPreviousDate(day);
             };
+
+            this.onViewChnaged.emit(this._nextDate);
         }
     }
 
@@ -756,16 +757,15 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
             const dayItem = dates[dates.indexOf(node)];
             this._nextDate = new Date(dayItem.date.date);
 
-            this.animationAction = 'next';
             this.isKeydownTrigger = true;
-            if (this.calendar) {
-                this.calendar.viewDate = this.calendarModel.timedelta(this._nextDate, 'month', 0);
-            }
+            this.animationAction = 'next';
 
             this.callback = (items?, next?) => {
                 const day = items.find((item) => item.date.date.getTime() === next.getTime()).nativeElement;
                 this.focusNextDate(day);
             };
+
+            this.onViewChnaged.emit(this._nextDate);
         }
     }