fix(calendar): fix selection bugs clear code #4282

Author: hanastasov

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

@@ -28,7 +28,6 @@ import { IgxDaysViewComponent } from './days-view/days-view.component';
 import { interval, Subscription } from 'rxjs';
 import { takeUntil, debounce, skipLast, switchMap } from 'rxjs/operators';
 import { ScrollMonth } from './calendar-base';
-import { IMonthView, IViewChangedArgs } from './calendar.interface';
 
 let NEXT_ID = 0;
 
@@ -120,7 +119,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
             for (let i = this._monthsViewNumber; i < val; i++) {
                 const nextMonthDate = new Date(this.viewDate);
                 nextMonthDate.setMonth(nextMonthDate.getMonth() + i);
-                const monthView: IMonthView = {
+                const monthView = {
                     value: null,
                     viewDate: nextMonthDate
                 };
@@ -347,15 +346,15 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
     /**
      *@hidden
      */
-    private defaultDayView: IMonthView = {
+    private defaultDayView = {
         value: this.value,
         viewDate: this.viewDate,
     };
 
     /**
      *@hidden
      */
-    public dayViews: Array<IMonthView> = [this.defaultDayView];
+    public dayViews = [this.defaultDayView];
 
     public ngAfterViewInit() {
         this.setSiblingMonths(this.monthViews);
@@ -518,16 +517,9 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
     /**
      * @hidden
      */
-    public viewChanged(event: IViewChangedArgs) {
-        let date = this.viewDate,
-            delta = event.delta;
-        if (event.moveToFirst) {
-            delta = 0;
-            date = event.date;
-        }
-        this.viewDate = this.calendarModel.timedelta(date, 'month', delta);
+    public viewChanged(event) {
+        this.viewDate = this.calendarModel.timedelta(event, 'month', 0);
     }
-
     /**
      * @hidden
      */
@@ -778,7 +770,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
 
 
     /**
-     * Helper method sthat sets references for prev/next months for each month in the view
+     * Helper method that sets references for prev/next months for each month in the view
      * @hidden
      */
     private setSiblingMonths(monthViews: QueryList<IgxDaysViewComponent>) {

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

@@ -22,6 +22,7 @@ export class IgxDayItemComponent {
      *
      */
     @Input()
+    @HostBinding('class.igx-calendar__date--selected')
     public get selected(): any {
         return this._selected;
     }
@@ -85,14 +86,17 @@ export class IgxDayItemComponent {
         return this.elementRef.nativeElement;
     }
 
+    @HostBinding('class.igx-calendar__date--inactive')
     public get isInactive(): boolean {
         return this.date.isNextMonth || this.date.isPrevMonth;
     }
 
+    @HostBinding('class.igx-calendar__date--hidden')
     public get isHidden(): boolean {
         return this.hideOutsideDays && this.isInactive;
     }
 
+    @HostBinding('class.igx-calendar__date--current')
     public get isToday(): boolean {
         const today = new Date(Date.now());
         const date = this.date.date;
@@ -102,6 +106,7 @@ export class IgxDayItemComponent {
         );
     }
 
+    @HostBinding('class.igx-calendar__date--weekend')
     public get isWeekend(): boolean {
         const day = this.date.date.getDay();
         return day === 0 || day === 6;
@@ -123,6 +128,7 @@ export class IgxDayItemComponent {
         return isDateInRanges(this.date.date, this.outOfRangeDates);
     }
 
+    @HostBinding('class.igx-calendar__date--special')
     public get isSpecial(): boolean {
         if (this.specialDates === null) {
             return false;
@@ -139,53 +145,16 @@ export class IgxDayItemComponent {
         return this.date.isCurrentMonth && !(this.isWeekend && this.selected);
     }
 
-    @HostBinding('class.igx-calendar__date--inactive')
-    public get isInactiveCSS(): boolean {
-        return this.isInactive;
-    }
-
-    @HostBinding('class.igx-calendar__date--hidden')
-    get isHiddenCSS(): boolean {
-        return this.isHidden;
-    }
-
-    @HostBinding('class.igx-calendar__date--current')
-    public get isTodayCSS(): boolean {
-        return this.isToday;
-    }
-
-    @HostBinding('class.igx-calendar__date--selected')
-    public get isSelectedCSS(): boolean {
-        return this.isCurrentMonth && this.selected;
-    }
-
-    @HostBinding('class.igx-calendar__date--selected-dimmed')
-    public get isSelectedDimmedCSS(): boolean {
-        return !this.isCurrentMonth && this.isSingleSelection && this.selected;
-    }
-
-    @HostBinding('class.igx-calendar__date--weekend')
-    public get isWeekendCSS(): boolean {
-        return this.isWeekend;
-    }
-
     @HostBinding('class.igx-calendar__date--disabled')
     public get isDisabledCSS(): boolean {
         return this.isHidden || this.isDisabled || this.isOutOfRange;
     }
 
-
-    @HostBinding('class.igx-calendar__date--special')
-    public get isSpecialCSS(): boolean {
-        return this.isSpecial;
-    }
-
     @HostBinding('class.igx-calendar__date--single')
     public get isSingleSelection(): boolean {
         return this.selection !== CalendarSelection.RANGE;
     }
 
-
     private _selected = false;
 
     constructor(private elementRef: ElementRef) { }