fix(calendar): fix coloring inactive days #4282

IgniteUI · Sep 17, 2019 · f371d65 · f371d65
1 parent 81e6264
commit f371d65
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 47 deletions.
diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.ts b/projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.ts
@@ -22,7 +22,6 @@ export class IgxDayItemComponent {
      *
      */
     @Input()
-    @HostBinding('class.igx-calendar__date--selected')
     public get selected(): any {
         return this._selected;
     }
@@ -54,22 +53,13 @@ export class IgxDayItemComponent {
     @HostBinding('class.igx-calendar__date--first')
     public isFirstInRange = false;
 
-    @Input()
-    @HostBinding('class.igx-calendar__date--firstday')
-    public isFirstInMonth = false;
-
-    @Input()
-    @HostBinding('class.igx-calendar__date--lastday')
-    public isLastInMonth = false;
-
     @Input()
     @HostBinding('class.igx-calendar__date--range')
     public isWithinRange = false;
 
     @Output()
     public onDateSelection = new EventEmitter<ICalendarDate>();
 
-
     public get isCurrentMonth(): boolean {
         return this.date.isCurrentMonth;
     }
@@ -86,6 +76,11 @@ export class IgxDayItemComponent {
         return this.elementRef.nativeElement;
     }
 
+    @HostBinding('class.igx-calendar__date--selected')
+    public get isSelectedCSS(): boolean {
+        return (!this.isDisabled && this.selected);
+    }
+
     @HostBinding('class.igx-calendar__date--inactive')
     public get isInactive(): boolean {
         return this.date.isNextMonth || this.date.isPrevMonth;

diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.html b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.html
@@ -14,8 +14,6 @@
         [selected]="isSelected(day)"
         [isLastInRange]="isLastInRange(day)"
         [isFirstInRange]="isFirstInRange(day)"
-        [isFirstInMonth]="isFirstInMonth(day)"
-        [isLastInMonth]="isLastInMonth(day)"
         [isWithinRange]="isWithinRange(day.date, true)"
         [disabledDates]="disabledDates"
         [specialDates]="specialDates"

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
@@ -202,11 +202,9 @@ export class IgxDaysViewComponent extends IgxCalendarBase implements DoCheck {
      */
     public isSelected(date: ICalendarDate): boolean {
         let selectedDates: Date | Date[];
-        if (this.isDateDisabled(date.date)) {
-            return false;
-        }
-
-        if (!this.value || (Array.isArray(this.value) && this.value.length === 0)) {
+        if (this.isDateDisabled(date.date) || !this.value ||
+            (Array.isArray(this.value) && this.value.length === 0)
+            )  {
             return false;
         }
 
@@ -260,21 +258,6 @@ export class IgxDaysViewComponent extends IgxCalendarBase implements DoCheck {
         return isEqual((this.value as Date[])[0], date.date);
     }
 
-    /**
-     * @hidden
-     */
-    public isFirstInMonth(date: ICalendarDate): boolean {
-        const checkLast = false;
-        return this.isFirstLastInMonth(checkLast, date);
-    }
-
-    /**
-     * @hidden
-     */
-    public isLastInMonth(date: ICalendarDate): boolean {
-        const checkLast = false;
-        return this.isFirstLastInMonth(checkLast, date);
-    }
 
     /**
      * @hidden
@@ -656,21 +639,6 @@ export class IgxDaysViewComponent extends IgxCalendarBase implements DoCheck {
         return !!day && day.isCurrentMonth && !day.isHidden && !day.isDisabled && !day.isOutOfRange;
     }
 
-    /**
-     * @hidden
-     */
-    private isFirstLastInMonth(checkLast: boolean, date: ICalendarDate): boolean {
-        const inc = checkLast ? 1 : -1;
-        if (date.isCurrentMonth && !this.isSingleSelection && this.isWithinRange(date.date, true)) {
-            const nextDay = new Date(date.date);
-            nextDay.setDate(nextDay.getDate() + inc);
-            if (this.isWithinRange(nextDay, true) && date.date.getMonth() + inc === nextDay.getMonth()) {
-                return true;
-            }
-        }
-        return false;
-    }
-
     /**
      * @hidden
      */

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss
@@ -68,6 +68,10 @@
         @extend %cal-value--hidden !optional;
     }
 
+    @include e(date, 'range') {
+        @extend %cal-value--range !optional;
+    }
+
     @include e(date, $mods: ('selected', 'current')) {
         @extend %cal-value--current--selected !optional;
     }

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
@@ -627,6 +627,28 @@
 
     %cal-value--hidden%cal-value--disabled-range {
         background: transparent !important;
+
+        &::after, &::before {
+            background: transparent !important;
+        }
+    }
+
+    %cal-value--range%cal-value--inactive%cal-value--selected {
+        background: transparent !important;
+
+        %cal-value-content {
+            color: --var($theme, 'date-disabled-text-color');
+            background: transparent !important;
+        }
+    }
+
+    %cal-value--range%cal-value--inactive%cal-value--selected%cal-value--single {
+        background: transparent !important;
+
+        %cal-value-content {
+            color: --var($theme, 'date-selected-text-color');
+            background: --var($theme, 'date-selected-background') !important;
+        }
     }
 
     %cal-value--first {