feat(calendar): multiview kboard navigation #4282

Author: hanastasov

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

@@ -210,6 +210,20 @@ export class IgxCalendarBase implements ControlValueAccessor {
         this._specialDates = value;
     }
 
+    /**
+     * Sets/gets whether the inactive dates (dates that are out of the current month) will be hidden.
+     * Default value is `false`.
+     * ```html
+     * <igx-calendar [hideInactiveDates] = "true"></igx-calendar>
+     * ```
+     * ```typescript
+     * let hideInactiveDates = this.calendar.hideInactiveDates;
+     * ```
+     */
+
+    @Input()
+    public hideInactiveDates: boolean;
+
     /**
      * Emits an event when a date is selected.
      * Provides reference the `selectedDates` property.

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

@@ -4,15 +4,15 @@
 </ng-template>
 
 <ng-template let-result #defaultMonth >
-    <ng-container *ngFor="let view of dayViews; let i of index;">
+    <ng-container *ngFor="let view of dayViews; index as i;">
         <div>
             <span tabindex="0" #monthsBtn (keydown)="activeViewYearKB($event)" (click)="activeViewYear()"
                 class="igx-calendar-picker__date">
-                {{ formattedMonth(view.viewDate) }}
+                {{ formattedMonth(getViewDate(i)) }}
             </span>
             <span tabindex="0" #yearsBtn (keydown)="activeViewDecadeKB($event)" (click)="activeViewDecade()"
                 class="igx-calendar-picker__date">
-                {{ formattedYear(view.viewDate) }}
+                {{ formattedYear(getViewDate(i)) }}
             </span>
         </div>
     </ng-container>
@@ -44,17 +44,18 @@ <h2 class="igx-calendar__header-date">
     </div>
 
     <div style="display: flex">
-        <igx-days-view *ngFor="let view of dayViews; let i of index;" [changeDaysView]="true" #days
-                [animationAction]="view.monthAction"
-                [locale]="view.locale"
-                [value]="view.value"
-                [viewDate]="view.viewDate"
-                [weekStart]="view.weekStart"
-                [formatOptions]="view.formatOptions"
-                [formatViews]="view.formatViews"
-                [selection]="view.selection"
-                [disabledDates]="view.disabledDates"
-                [specialDates]="view.specialDates"
+        <igx-days-view *ngFor="let view of dayViews; index as i;" [changeDaysView]="true" #days
+                [animationAction]="monthAction"
+                [locale]="locale"
+                [value]="value"
+                [viewDate]="viewDate"
+                [weekStart]="weekStart"
+                [formatOptions]="formatOptions"
+                [formatViews]="formatViews"
+                [selection]="selection"
+                [disabledDates]="disabledDates"
+                [specialDates]="specialDates"
+                [hideInactiveDates]="hideInactiveDates"
                 (onViewChanged)="viewChanged($event)"
                 (onDateSelection)="childClicked($event)">
         </igx-days-view>

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

@@ -8,7 +8,9 @@ import {
     Input,
     ViewChild,
     ElementRef,
-    AfterViewInit
+    AfterViewInit,
+    ViewChildren,
+    QueryList
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { fadeIn, scaleInCenter } from '../animations/main';
@@ -21,26 +23,16 @@ import { ICalendarDate, monthRange } from './calendar';
 import { CalendarView, IgxMonthPickerBase } from './month-picker-base';
 import { IgxMonthsViewComponent } from './months-view/months-view.component';
 import { IgxYearsViewComponent } from './years-view/years-view.component';
-import { IgxDaysViewComponent } from './days-view/days-view.component';
-import { DateRangeDescriptor } from '../core/dates';
+import { IgxDaysViewComponent, IViewChangedArgs } from './days-view/days-view.component';
 import { interval } from 'rxjs';
 import { takeUntil, debounce, skipLast, switchMap } from 'rxjs/operators';
 import { ScrollMonth } from './calendar-base';
 
 let NEXT_ID = 0;
 
-export interface IDayView {
-    changeDaysView: boolean;
-    animationAction: string;
-    locale: string;
+export interface IMonthView {
     value: Date | Date[];
     viewDate: Date;
-    weekStart: number;
-    formatOptions: object;
-    formatViews: object;
-    selection: string;
-    disabledDates: DateRangeDescriptor[];
-    specialDates: DateRangeDescriptor[];
 }
 
 /**
@@ -110,30 +102,31 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
     public vertical = false;
 
     /**
-     * Sets/gets the number of dayViews duisplayed.
+     * Sets/gets the number of month views displayed.
      * Default value is `1`.
      * ```html
-     * <igx-calendar [vertical] = "true" [daysViewNumber]="2"></igx-calendar>
+     * <igx-calendar [vertical] = "true" [monthsViewNumber]="2"></igx-calendar>
      * ```
      * ```typescript
-     * let daysViewsDisplayed = this.calendar.daysViewNumber;
+     * let monthViewsDisplayed = this.calendar.monthsViewNumber;
      * ```
      */
     @Input()
-    get daysViewNumber() {
-        return this._daysViewNumber;
+    get monthsViewNumber() {
+        return this._monthsViewNumber;
     }
 
-    set daysViewNumber(val: number) {
-        this._daysViewNumber = val;
+    set monthsViewNumber(val: number) {
+        this._monthsViewNumber = val;
 
-        for (let i = 1; i < val; i++) {
-            const dayView = Object.assign({}, this.defaultDayView);
-            dayView.value = null;
-            const nextMonthDate = new Date(dayView.viewDate);
+        for (let i = 0; i < val; i++) {
+            const nextMonthDate = new Date(this.viewDate);
             nextMonthDate.setMonth(nextMonthDate.getMonth() + i);
-            dayView.viewDate = nextMonthDate;
-            this.dayViews.push(dayView);
+            const monthView: IMonthView = {
+                value: null,
+                viewDate: nextMonthDate
+            };
+            this.dayViews.push(monthView);
         }
     }
 
@@ -201,7 +194,10 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
      * @hidden
      */
     @ViewChild('days', { read: IgxDaysViewComponent, static: false })
-    public daysView: IgxDaysViewComponent;
+    public daysView = new IgxDaysViewComponent;
+
+    @ViewChildren('days', { read: IgxDaysViewComponent })
+    public monthViews: QueryList<IgxDaysViewComponent>;
 
     /**
      * @hidden
@@ -335,32 +331,22 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
     /**
      *@hidden
      */
-    private _daysViewNumber = 1;
-
-    /**
-     *@hidden
-    */
-    private defaultDayView: IDayView = {
-        changeDaysView: true,
-        animationAction: this._monthAction,
-        locale: this.locale,
-        value: this.value,
-        viewDate: this.viewDate,
-        weekStart: this.weekStart,
-        formatOptions: this.formatOptions,
-        formatViews: this.formatViews,
-        selection: this.selection,
-        disabledDates: this.disabledDates,
-        specialDates: this.specialDates
-    };
+    private _monthsViewNumber = 1;
 
     /**
      *@hidden
      */
-    private dayViews: Array<IDayView> = [this.defaultDayView];
+    private dayViews = [];
 
     public ngAfterViewInit() {
 
+        this.monthViews.forEach((item, index) => {
+            const prevMonthView = this.getMonthView(index - 1);
+            const nextMonthView = this.getMonthView(index + 1);
+            item.nextMonthView = nextMonthView;
+            item.prevMonthView = prevMonthView;
+        });
+
         this.startMonthScroll$.pipe(
             takeUntil(this.stopMonthScroll$),
             switchMap(() => this.daysView.scrollMonth$.pipe(
@@ -400,7 +386,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
      */
     public previousMonth(isKeydownTrigger = false) {
         this.viewDate = this.calendarModel.timedelta(this.viewDate, 'month', -1);
-        this.dayViews.forEach((val, index) => {
+        this.dayViews.forEach((val) => {
             val.viewDate = this.calendarModel.timedelta(val.viewDate, 'month', -1);
         });
         this._monthAction = 'prev';
@@ -415,6 +401,9 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
      */
     public nextMonth(isKeydownTrigger = false) {
         this.viewDate = this.calendarModel.timedelta(this.viewDate, 'month', 1);
+        this.dayViews.forEach((val) => {
+            val.viewDate = this.calendarModel.timedelta(val.viewDate, 'month', 1);
+        });
         this._monthAction = 'next';
 
         if (this.daysView) {
@@ -518,8 +507,14 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
     /**
      * @hidden
      */
-    public viewChanged(event) {
-        this.viewDate = this.calendarModel.timedelta(event, 'month', 0);
+    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);
     }
 
     /**
@@ -570,6 +565,15 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
         this._onChangeCallback(this.selectedDates);
     }
 
+    /**
+     * @hidden
+     */
+    public getViewDate(i: number): Date {
+        const nextMonthDate = new Date(this.viewDate);
+        nextMonthDate.setMonth(nextMonthDate.getMonth() + i);
+        return nextMonthDate;
+    }
+
     /**
      * @hidden
      */
@@ -746,4 +750,16 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
         };
         return { $implicit: formatObject };
     }
+
+    /**
+     * Helper method returning previous/next day views
+     * @hidden
+     */
+    private getMonthView(index): IgxDaysViewComponent {
+        if (index === -1 || index === this.monthViews.length ) {
+            return null;
+        } else {
+            return this.monthViews.toArray()[index];
+        }
+    }
 }

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

@@ -29,6 +29,9 @@ export class IgxDayItemComponent {
     @Input()
     public specialDates: DateRangeDescriptor[];
 
+    @Input()
+    public hideInactiveDates: boolean;
+
     @Output()
     public onDateSelection = new EventEmitter<ICalendarDate>();
 
@@ -73,6 +76,10 @@ export class IgxDayItemComponent {
         return this.date.isNextMonth || this.date.isPrevMonth;
     }
 
+    public get isHidden(): boolean {
+        return this.hideInactiveDates && this.isInactive;
+    }
+
     public get isToday(): boolean {
         const today = new Date(Date.now());
         const date = this.date.date;
@@ -124,6 +131,11 @@ export class IgxDayItemComponent {
         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 && !this.selected;

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

@@ -4,8 +4,17 @@
     </span>
 </div>
 
-<div *ngFor="let week of getCalendarMonth; last as isLast; index as i; trackBy: rowTracker" class="igx-calendar__body-row" [@animateChange]="animationAction" (@animateChange.done)="animationDone($event, isLast)">
-    <igx-day-item [date]="day" [selection]="selection" [value]="value" [disabledDates]="disabledDates" [specialDates]="specialDates" [outOfRangeDates]="outOfRangeDates" (onDateSelection)="selectDay($event)" *ngFor="let day of week; trackBy: dateTracker">
-        {{ formattedDate(day.date) }}
+<div *ngFor="let week of getCalendarMonth; last as isLast; index as i; trackBy: rowTracker" class="igx-calendar__body-row"
+    [@animateChange]="animationAction"
+    (@animateChange.done)="animationDone($event, isLast)">
+    <igx-day-item [date]="day" *ngFor="let day of week; trackBy: dateTracker"
+        [selection]="selection"
+        [value]="value"
+        [disabledDates]="disabledDates"
+        [specialDates]="specialDates"
+        [outOfRangeDates]="outOfRangeDates"
+        [hideInactiveDates]="hideInactiveDates"
+        (onDateSelection)="selectDay($event)" >
+            {{ formattedDate(day.date) }}
     </igx-day-item>
 </div>