feat(calendar): calendar multi view #4282

hanastasov · hanastasov · commit 72de46f8e777 · 2019-04-10T13:56:16.000+03:00
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.html b/projects/igniteui-angular/src/lib/calendar/calendar.component.html
@@ -3,15 +3,19 @@
     <span>{{ getFormattedDate().monthday }}</span>
 </ng-template>
 
-<ng-template let-result #defaultMonth>
-    <span tabindex="0" #monthsBtn (keydown)="activeViewYearKB($event)" (click)="activeViewYear()"
-        class="igx-calendar-picker__date">
-        {{ formattedMonth(viewDate) }}
-    </span>
-    <span tabindex="0" #yearsBtn (keydown)="activeViewDecadeKB($event)" (click)="activeViewDecade()"
-        class="igx-calendar-picker__date">
-        {{ formattedYear(viewDate) }}
-    </span>
+<ng-template let-result #defaultMonth >
+    <ng-container *ngFor="let view of dayViews; let i of index;">
+        <div>
+            <span tabindex="0" #monthsBtn (keydown)="activeViewYearKB($event)" (click)="activeViewYear()"
+                class="igx-calendar-picker__date">
+                {{ formattedMonth(view.viewDate) }}
+            </span>
+            <span tabindex="0" #yearsBtn (keydown)="activeViewDecadeKB($event)" (click)="activeViewDecade()"
+                class="igx-calendar-picker__date">
+                {{ formattedYear(view.viewDate) }}
+            </span>
+        </div>
+    </ng-container>
 </ng-template>
 
 <div *ngIf="selection === 'single' && hasHeader" class="igx-calendar__header">
@@ -29,7 +33,7 @@ <h2 class="igx-calendar__header-date">
             (click)="previousMonth()">
             <igx-icon fontSet="material">keyboard_arrow_left</igx-icon>
         </div>
-        <div>
+        <div style="display: contents">
             <ng-container *ngTemplateOutlet="subheaderTemplate ? subheaderTemplate : defaultMonth; context: context">
             </ng-container>
         </div>
@@ -38,20 +42,22 @@ <h2 class="igx-calendar__header-date">
         </div>
     </div>
 
-    <igx-days-view [changeDaysView]="true" #days
-                   [animationAction]="monthAction"
-                   [locale]="locale"
-                   [value]="value"
-                   [viewDate]="viewDate"
-                   [weekStart]="weekStart"
-                   [formatOptions]="formatOptions"
-                   [formatViews]="formatViews"
-                   [selection]="selection"
-                   [disabledDates]="disabledDates"
-                   [specialDates]="specialDates"
-                   (onViewChanged)="viewChanged($event)"
-                   (onDateSelection)="childClicked($event)">
-    </igx-days-view>
+    <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"
+                (onViewChanged)="viewChanged($event)"
+                (onDateSelection)="childClicked($event)">
+        </igx-days-view>
+    </div>
 </div>
 
 <igx-months-view *ngIf="isYearView" [@animateView]="activeView" #months 
@@ -67,5 +73,5 @@ <h2 class="igx-calendar__header-date">
                 [locale]="locale"
                 [formatView]="formatViews.year"
                 [yearFormat]="formatOptions.year" 
-                (onSelection)="changeYear($event)">
+                (onSelection)="changeYear($event, dayViews)">
 </igx-years-view>
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts
@@ -21,9 +21,24 @@ 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';
 
 let NEXT_ID = 0;
 
+export interface IDayView {
+    changeDaysView: boolean;
+    animationAction: string;
+    locale: string;
+    value: Date | Date[];
+    viewDate: Date;
+    weekStart: number;
+    formatOptions: object;
+    formatViews: object;
+    selection: string;
+    disabledDates: DateRangeDescriptor[];
+    specialDates: DateRangeDescriptor[];
+}
+
 /**
  * **Ignite UI for Angular Calendar** -
  * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/calendar.html)
@@ -90,6 +105,34 @@ export class IgxCalendarComponent extends IgxMonthPickerBase {
     @Input()
     public vertical = false;
 
+    /**
+     * Sets/gets the number of dayViews duisplayed.
+     * Default value is `1`.
+     * ```html
+     * <igx-calendar [vertical] = "true" [daysViewNumber]="2"></igx-calendar>
+     * ```
+     * ```typescript
+     * let daysViewsDisplayed = this.calendar.daysViewNumber;
+     * ```
+     */
+    @Input()
+    get daysViewNumber() {
+        return this._daysViewNumber;
+    }
+
+    set daysViewNumber(val: number) {
+        this._daysViewNumber = val;
+
+        for (let i = 1; i < val; i++) {
+            const dayView = Object.assign({}, this.defaultDayView);
+            dayView.value = null;
+            const nextMonthDate = new Date(dayView.viewDate);
+            nextMonthDate.setMonth(nextMonthDate.getMonth() + i);
+            dayView.viewDate = nextMonthDate;
+            this.dayViews.push(dayView);
+        }
+    }
+
     /**
      * The default `tabindex` attribute for the component.
      *
@@ -273,6 +316,33 @@ export class IgxCalendarComponent extends IgxMonthPickerBase {
      */
     private _monthAction = '';
 
+    /**
+     *@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
+    };
+
+    /**
+     *@hidden
+     */
+    private dayViews: Array<IDayView> = [this.defaultDayView];
+
     /**
      * Returns the locale representation of the month in the month view if enabled,
      * otherwise returns the default `Date.getMonth()` value.
@@ -291,6 +361,9 @@ export class IgxCalendarComponent extends IgxMonthPickerBase {
      */
     public previousMonth(isKeydownTrigger: boolean = false) {
         this.viewDate = this.calendarModel.timedelta(this.viewDate, 'month', -1);
+        this.dayViews.forEach((val, index) => {
+            val.viewDate = this.calendarModel.timedelta(val.viewDate, 'month', -1);
+        });
         this._monthAction = 'prev';
 
         if (this.daysView) {
@@ -315,6 +388,9 @@ export class IgxCalendarComponent extends IgxMonthPickerBase {
      */
     public nextMonth(isKeydownTrigger: boolean = false) {
         this.viewDate = this.calendarModel.timedelta(this.viewDate, 'month', 1);
+        this.dayViews.forEach((val, index) => {
+            val.viewDate = this.calendarModel.timedelta(val.viewDate, 'month', 1);
+        });
         this._monthAction = 'next';
 
         if (this.daysView) {
@@ -401,6 +477,9 @@ export class IgxCalendarComponent extends IgxMonthPickerBase {
      */
     public changeMonth(event: Date) {
         this.viewDate = new Date(this.viewDate.getFullYear(), event.getMonth());
+        this.dayViews.forEach((val, index) => {
+            val.viewDate.setMonth(event.getMonth() + index);
+        });
         this.activeView = CalendarView.DEFAULT;
 
         requestAnimationFrame(() => {
diff --git a/projects/igniteui-angular/src/lib/calendar/month-picker-base.ts b/projects/igniteui-angular/src/lib/calendar/month-picker-base.ts
@@ -1,6 +1,7 @@
 import { IgxCalendarBase } from './calendar-base';
 import { ViewChild, ElementRef, HostBinding } from '@angular/core';
 import { KEYS } from '../core/utils';
+import { IDayView } from './calendar.component';
 
 /**
  * Sets the calender view - days, months or years.
@@ -62,8 +63,12 @@ export class IgxMonthPickerBase extends IgxCalendarBase {
     /**
      * @hidden
      */
-    public changeYear(event: Date) {
+    public changeYear(event: Date, dayViews: IDayView[]) {
         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(() => {
diff --git a/src/app/calendar/calendar.sample.html b/src/app/calendar/calendar.sample.html
@@ -11,7 +11,7 @@ <h4 class="sample-title">Default Calendar</h4>
                     <button igxButton="flat" igxRipple (click)="deselect()">Deselect</button>
                 </div>
                 <igx-card>
-                    <igx-calendar #calendar1 weekStart="1" selection="range"></igx-calendar>
+                    <igx-calendar #calendar1 weekStart="1" selection="multi" [daysViewNumber]="3"></igx-calendar>
                 </igx-card>
             </div>
 
