refactor(calendar): refactor and clean #4282

Author: hanastasov

projects/igniteui-angular/src/lib/calendar/calendar-base.ts

@@ -211,7 +211,7 @@ export class IgxCalendarBase implements ControlValueAccessor {
     }
 
     /**
-     * Sets/gets whether the inactive dates (dates that are out of the current month) will be hidden.
+     * Sets/gets whether the outside dates (dates that are out of the current month) will be hidden.
      * Default value is `false`.
      * ```html
      * <igx-calendar [hideOutsideDays] = "true"></igx-calendar>

projects/igniteui-angular/src/lib/calendar/calendar.component.html

@@ -33,8 +33,8 @@ <h2 class="igx-calendar__header-date">
             <igx-icon fontSet="material">keyboard_arrow_left</igx-icon>
         </div>
         <div *ngFor="let view of dayViews; index as i;" [style.width.%]="100/monthsViewNumber">
-                <ng-template *ngTemplateOutlet="subheaderTemplate ? subheaderTemplate : defaultMonth; context: getContext(i)">
-                </ng-template>
+            <ng-container *ngTemplateOutlet="subheaderTemplate ? subheaderTemplate : defaultMonth; context: getContext(i)">
+            </ng-container>
         </div>
         <div tabindex="0" class="igx-calendar-picker__next" #nextMonthBtn 
             igxCalendarScrollMonth [startScroll]="startNextMonthScroll" [stopScroll]="stopMonthScroll" [ngStyle]="{

projects/igniteui-angular/src/lib/calendar/calendar.component.ts

@@ -201,7 +201,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
      * @hidden
      */
     @ViewChild('days', { read: IgxDaysViewComponent, static: false })
-    public daysView = new IgxDaysViewComponent;
+    public daysView: IgxDaysViewComponent;
 
     /**
      * @hidden
@@ -346,15 +346,15 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
     /**
      *@hidden
      */
-    private defaultDayView: IMonthView = {
-        value: this.value,
-        viewDate: this.viewDate,
-    };
+    private _monthViewsChanges$: Subscription;
 
     /**
      *@hidden
      */
-    private _monthViewsChanges$: Subscription;
+    private defaultDayView: IMonthView = {
+        value: this.value,
+        viewDate: this.viewDate,
+    };
 
     /**
      *@hidden
@@ -431,6 +431,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
     public startPrevMonthScroll = (isKeydownTrigger = false) => {
         this.startMonthScroll$.next();
         this.daysView.monthScrollDirection = ScrollMonth.PREV;
+
         this.previousMonth(isKeydownTrigger);
     }
 
@@ -531,19 +532,11 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
         this.viewDate = this.calendarModel.timedelta(date, 'month', delta);
     }
 
-    /**
-     * @hidden
-     */
-    public daysViewInit(event: IgxDaysViewComponent) {
-       // this.monthViews.
-    }
-
     /**
      * @hidden
      */
     public changeMonth(event: Date) {
         this.viewDate = new Date(this.viewDate.getFullYear(), event.getMonth());
-
         this.activeView = CalendarView.DEFAULT;
 
         requestAnimationFrame(() => {
@@ -588,17 +581,15 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
      * @hidden
      */
     public getViewDate(i: number): Date {
-        const nextMonthDate = new Date(this.viewDate);
-        nextMonthDate.setMonth(nextMonthDate.getMonth() + i);
-        return nextMonthDate;
+        const date = this.calendarModel.timedelta(this.viewDate, 'month', i);
+        return date;
     }
 
     /**
      * @hidden
      */
     public getContext(i: number) {
-        const date: Date = new Date(this.viewDate);
-        date.setMonth(date.getMonth() + i);
+        const date = this.calendarModel.timedelta(this.viewDate, 'month', i);
         return this.generateContext(date, i);
     }
 
@@ -740,7 +731,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
     @HostListener('keydown.home', ['$event'])
     public onKeydownHome(event: KeyboardEvent) {
         if (this.daysView) {
-            this.monthViews.first.onKeydownHome(event);
+            this.daysView.onKeydownHome(event);
         }
     }
 
@@ -750,7 +741,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
     @HostListener('keydown.end', ['$event'])
     public onKeydownEnd(event: KeyboardEvent) {
         if (this.daysView) {
-            this.monthViews.last.onKeydownEnd(event);
+            this.daysView.onKeydownEnd(event);
         }
     }
 

projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.ts

@@ -161,7 +161,7 @@ export class IgxDayItemComponent {
 
     @HostBinding('class.igx-calendar__date--disabled')
     public get isDisabledCSS(): boolean {
-      return this.isDisabled || this.isOutOfRange || this.isHidden;
+        return this.isDisabled || this.isOutOfRange || this.isHidden;
     }
 
     @HostBinding('class.igx-calendar__date--range')

projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.html

@@ -17,6 +17,6 @@
         [outOfRangeDates]="outOfRangeDates"
         [hideOutsideDays]="hideOutsideDays"
         (onDateSelection)="selectDay($event)">
-            {{ formattedDate(day.date) }}
+        {{ formattedDate(day.date) }}
     </igx-day-item>
 </div>

projects/igniteui-angular/src/lib/calendar/month-picker-base.ts

@@ -1,7 +1,6 @@
 import { IgxCalendarBase } from './calendar-base';
 import { ViewChild, ElementRef, HostBinding } from '@angular/core';
 import { KEYS } from '../core/utils';
-import { IMonthView } from './calendar.component';
 
 /**
  * Sets the calender view - days, months or years.
@@ -63,12 +62,8 @@ export class IgxMonthPickerBase extends IgxCalendarBase {
     /**
      * @hidden
      */
-    public changeYear(event: Date, dayViews: IMonthView[]) {
+    public changeYear(event: Date) {
         this.viewDate = new Date(event.getFullYear(), this.viewDate.getMonth());
-        const yearsDiff = event.getFullYear() - dayViews[0].viewDate.getFullYear();
-        dayViews.forEach((val, index) => {
-            val.viewDate.setMonth(event.getMonth() + 12 * yearsDiff + index);
-        });
         this._activeView = CalendarView.DEFAULT;
 
         requestAnimationFrame(() => {