Merge pull request #7761 from IgniteUI/add-calendar-events-10x

Add calendar events when presented month/year in view is changed

Author: zdrawku

CHANGELOG.md

@@ -5,6 +5,14 @@ All notable changes for each version of this project will be documented in this
 ## 10.1.0
 
 ### New Features
+- `IgxCalendar` and `IgxMonthPicker`
+    - `onViewDateChanged` emitted after the month/year presented in the view is changed after user interaction.
+    - `onActiveViewChanged` event emitted after the active view (DEFAULT, YEAR, DECADE) is changed after user interaction.
+    - `viewDate` day value is always 1.
+    - `activeView` setter is now available as an input property.
+- `IgxGridState` directive
+    - Added support for expansion states, column selection and row pinning.
+    - Added support for `IgxTreeGrid` and `IgxHierarchicalGrid` (including child grids)
 - `IgxColumn`
     - Added `byHeader` parameter to the `autosize` method which specifies if the autosizing should be based only on the header content width.
 - `IgxToast`

projects/igniteui-angular/src/lib/calendar/README.md

@@ -133,7 +133,7 @@ The calendar header will not be rendered when the selection is either `multi` or
 
 - `viewDate: Date`
 
-Controls the year/month that will be presented in the default view when the calendar renders. By default it is the current year/month.
+Controls the year/month that will be presented in the default view when the calendar renders. By default it is the first day of the current year/month.
 
 - `value: Date | Date[]`
 
@@ -173,7 +173,17 @@ Controls the visibility of the dates that do not belong to the current month.
 - `onSelection(): Date | Date[]`
 
 Event fired when a value is selected through UI interaction.
-Returns the selected value (depending on the type of selection).
+Emits the selected value (depending on the type of selection).
+
+- `onViewDateChanged(): IViewDateChangeEventArgs`
+
+Event fired after the the month/year presented in the view is changed.
+Emits an object containing the previous and current value of the `viewDate` property.
+
+- `onActiveViewChanged(): CalendarView`
+
+Event fired after the active view is changed.
+Emits an CalendarView enum, indicating the `activeView` property value.
 
 
 ### Methods

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

@@ -4,6 +4,7 @@ import { ControlValueAccessor } from '@angular/forms';
 import { DateRangeDescriptor } from '../core/dates';
 import { Subject } from 'rxjs';
 import { isDate } from '../core/utils';
+import { CalendarView } from './month-picker-base';
 
 /**
  * Sets the selction type - single, multi or range.
@@ -20,6 +21,11 @@ export enum ScrollMonth {
     NONE = 'none'
 }
 
+export interface IViewDateChangeEventArgs {
+    previousValue: Date;
+    currentValue: Date;
+}
+
 /** @hidden @internal */
 @Directive({
     selector: '[igxCalendarBase]',
@@ -168,7 +174,8 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
      * Sets the date that will be presented in the default view when the component renders.
      */
     public set viewDate(value: Date) {
-        this._viewDate = this.getDateOnly(value);
+        const date = this.getDateOnly(value).setDate(1);
+        this._viewDate = new Date(date);
     }
 
     /**
@@ -240,6 +247,34 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
     @Output()
     public onSelection = new EventEmitter<Date | Date[]>();
 
+    /**
+     * Emits an event when the month in view is changed.
+     * ```html
+     * <igx-calendar (onViewDateChanged)="viewDateChanged($event)"></igx-calendar>
+     * ```
+     * ```typescript
+     * public viewDateChanged(event: IViewDateChangeEventArgs) {
+     *  let newDate = event.newViewDate;
+     * }
+     * ```
+     */
+    @Output()
+    public onViewDateChanged = new EventEmitter<IViewDateChangeEventArgs>();
+
+    /**
+     * Emits an event when the active view is changed.
+     * ```html
+     * <igx-calendar (onActiveViewChanged)="activeViewChanged($event)"></igx-calendar>
+     * ```
+     * ```typescript
+     * public activeViewChanged(event: CalendarView) {
+     *  let activeView = event;
+     * }
+     * ```
+     */
+    @Output()
+    public onActiveViewChanged  = new EventEmitter<CalendarView>();
+
     /**
      * @hidden
      */

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

@@ -22,7 +22,7 @@ <h2 class="igx-calendar__header-date">
     </h2>
 </div>
 
-<div *ngIf="isDefaultView" class="igx-calendar__body" [@animateView]="activeView" (swiperight)="previousMonth()"
+<div *ngIf="isDefaultView" class="igx-calendar__body" [@animateView]="activeView" (@animateView.done)="viewRendered($event)" (swiperight)="previousMonth()"
     (swipeleft)="nextMonth()">
     <div class="igx-calendar-picker">
         <div tabindex="0" class="igx-calendar-picker__prev" #prevMonthBtn
@@ -63,15 +63,15 @@ <h2 class="igx-calendar__header-date">
     </div>
 </div>
 
-<igx-months-view *ngIf="isYearView" [@animateView]="activeView" #months
+<igx-months-view *ngIf="isYearView" [@animateView]="activeView" #months (@animateView.done)="viewRendered($event)"
                  [date]="viewDate"
                  [locale]="locale"
                  [formatView]="formatViews.month"
                  [monthFormat]="formatOptions.month"
                  (onSelection)="changeMonth($event)">
 </igx-months-view>
 
-<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade
+<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade (@animateView.done)="viewRendered($event)"
                 [date]="viewDate"
                 [locale]="locale"
                 [formatView]="formatViews.year"

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

@@ -7,12 +7,14 @@ import {
     Calendar, IgxCalendarComponent, IgxCalendarModule, isLeap,
     monthRange, weekDay, WEEKDAYS
 } from './public_api';
-import { UIInteractions } from '../test-utils/ui-interactions.spec';
+import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
 import { DateRangeDescriptor, DateRangeType } from '../core/dates/dateRange';
 
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { IgxDayItemComponent } from './days-view/day-item.component';
 import { HelperTestFunctions } from './calendar-helper-utils';
+import { CalendarView } from './month-picker-base';
+import { IViewDateChangeEventArgs } from './calendar-base';
 
 describe('IgxCalendar - ', () => {
 
@@ -252,8 +254,8 @@ describe('IgxCalendar - ', () => {
                 expect(calendar.formatOptions).toEqual(jasmine.objectContaining(defaultOptions));
                 expect(calendar.formatViews).toEqual(jasmine.objectContaining(defaultViews));
                 expect(headerYear.nativeElement.textContent.trim()).toMatch('2018');
-                expect(headerWeekday.nativeElement.textContent.trim()).toMatch('Mon');
-                expect(headerDate.nativeElement.textContent.trim()).toMatch('Sep 17');
+                expect(headerWeekday.nativeElement.textContent.trim()).toMatch('Sat');
+                expect(headerDate.nativeElement.textContent.trim()).toMatch('Sep 1');
                 expect(bodyYear.nativeElement.textContent.trim()).toMatch('2018');
                 expect(bodyMonth.nativeElement.textContent.trim()).toMatch('Sep');
 
@@ -267,8 +269,8 @@ describe('IgxCalendar - ', () => {
                 expect(calendar.formatOptions).toEqual(jasmine.objectContaining(Object.assign(defaultOptions, formatOptions)));
                 expect(calendar.formatViews).toEqual(jasmine.objectContaining(Object.assign(defaultViews, formatViews)));
                 expect(headerYear.nativeElement.textContent.trim()).toMatch('18');
-                expect(headerWeekday.nativeElement.textContent.trim()).toMatch('Mon');
-                expect(headerDate.nativeElement.textContent.trim()).toMatch('September 17');
+                expect(headerWeekday.nativeElement.textContent.trim()).toMatch('Sat');
+                expect(headerDate.nativeElement.textContent.trim()).toMatch('September 1');
                 expect(bodyYear.nativeElement.textContent.trim()).toMatch('18');
                 expect(bodyMonth.nativeElement.textContent.trim()).toMatch('September');
 
@@ -283,8 +285,8 @@ describe('IgxCalendar - ', () => {
                 expect(calendar.formatOptions).toEqual(jasmine.objectContaining(Object.assign(defaultOptions, formatOptions)));
                 expect(calendar.formatViews).toEqual(jasmine.objectContaining(Object.assign(defaultViews, formatViews)));
                 expect(headerYear.nativeElement.textContent.trim()).toMatch('2018');
-                expect(headerWeekday.nativeElement.textContent.trim()).toMatch('Mon');
-                expect(headerDate.nativeElement.textContent.trim()).toMatch('September 17');
+                expect(headerWeekday.nativeElement.textContent.trim()).toMatch('Sat');
+                expect(headerDate.nativeElement.textContent.trim()).toMatch('September 1');
                 expect(bodyYear.nativeElement.textContent.trim()).toMatch('2018');
                 expect(bodyMonth.nativeElement.textContent.trim()).toMatch('8');
             });
@@ -305,8 +307,8 @@ describe('IgxCalendar - ', () => {
                 fixture.detectChanges();
 
                 expect(headerYear.nativeElement.textContent.trim()).toMatch('2018');
-                expect(headerWeekday.nativeElement.textContent.trim()).toMatch('Mon');
-                expect(headerDate.nativeElement.textContent.trim()).toMatch('Sep 17');
+                expect(headerWeekday.nativeElement.textContent.trim()).toMatch('Sat');
+                expect(headerDate.nativeElement.textContent.trim()).toMatch('Sep 1');
                 expect(bodyYear.nativeElement.textContent.trim()).toMatch('2018');
                 expect(bodyMonth.nativeElement.textContent.trim()).toMatch('Sep');
                 expect(bodyWeekday.nativeElement.textContent.trim()).toMatch('Sun');
@@ -319,8 +321,8 @@ describe('IgxCalendar - ', () => {
                 bodyWeekday = dom.query(By.css(HelperTestFunctions.WEEKSTART_LABEL_CSSCLASS));
                 expect(calendar.locale).toEqual(locale);
                 expect(headerYear.nativeElement.textContent.trim()).toMatch('18');
-                expect(headerWeekday.nativeElement.textContent.trim()).toMatch('lun.,');
-                expect(headerDate.nativeElement.textContent.trim()).toMatch('17 sept.');
+                expect(headerWeekday.nativeElement.textContent.trim()).toMatch('sam.,');
+                expect(headerDate.nativeElement.textContent.trim()).toMatch('1 sept.');
                 expect(bodyYear.nativeElement.textContent.trim()).toMatch('18');
                 expect(bodyMonth.nativeElement.textContent.trim()).toMatch('sept.');
                 expect(bodyWeekday.nativeElement.textContent.trim()).toMatch('Dim.');
@@ -1559,36 +1561,41 @@ describe('IgxCalendar - ', () => {
                 prev.nativeElement.focus();
 
                 expect(prev.nativeElement).toBe(document.activeElement);
-
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', prev.nativeElement);
                 tick(100);
                 fixture.detectChanges();
 
                 expect(calendar.viewDate.getMonth()).toEqual(4);
-
                 const next = dom.queryAll(By.css(HelperTestFunctions.CALENDAR_NEXT_BUTTON_CSSCLASS))[0];
                 next.nativeElement.focus();
                 expect(next.nativeElement).toBe(document.activeElement);
 
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', next.nativeElement);
-                tick(100);
-                fixture.detectChanges();
 
+                fixture.detectChanges();
+                tick(100);
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', next.nativeElement);
                 tick(100);
                 fixture.detectChanges();
 
+
                 expect(calendar.viewDate.getMonth()).toEqual(6);
             }));
 
-            it('Should open years view, navigate through and select an year via KB.', () => {
+            it('Should open years view, navigate through and select an year via KB.', fakeAsync(() => {
                 const year = dom.queryAll(By.css(HelperTestFunctions.CALENDAR_DATE_CSSCLASS))[1];
                 year.nativeElement.focus();
 
                 expect(year.nativeElement).toBe(document.activeElement);
 
+                spyOn(calendar.onActiveViewChanged, 'emit').and.callThrough();
+
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', document.activeElement);
                 fixture.detectChanges();
+                tick();
+
+                expect(calendar.onActiveViewChanged.emit).toHaveBeenCalledTimes(1);
+                expect(calendar.onActiveViewChanged.emit).toHaveBeenCalledWith(CalendarView.DECADE);
 
                 const years = dom.queryAll(By.css(HelperTestFunctions.YEAR_CSSCLASS));
                 let currentYear = dom.query(By.css(HelperTestFunctions.CURRENT_YEAR_CSSCLASS));
@@ -1609,20 +1616,33 @@ describe('IgxCalendar - ', () => {
                 currentYear = dom.query(By.css(HelperTestFunctions.CURRENT_YEAR_CSSCLASS));
                 expect(currentYear.nativeElement.textContent.trim()).toMatch('2016');
 
+                const previousValue = fixture.componentInstance.calendar.viewDate;
+                spyOn(calendar.onViewDateChanged, 'emit').and.callThrough();
+
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', currentYear.nativeElement);
+
                 fixture.detectChanges();
+                tick();
 
+                const eventArgs: IViewDateChangeEventArgs = { previousValue, currentValue: fixture.componentInstance.calendar.viewDate };
+                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledTimes(1);
+                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledWith(eventArgs);
                 expect(calendar.viewDate.getFullYear()).toEqual(2016);
-            });
+            }));
 
-            it('Should open months view, navigate through and select a month via KB.', () => {
+            it('Should open months view, navigate through and select a month via KB.', fakeAsync(() => {
                 const month = dom.queryAll(By.css(HelperTestFunctions.CALENDAR_DATE_CSSCLASS))[0];
                 month.nativeElement.focus();
+                spyOn(calendar.onActiveViewChanged, 'emit').and.callThrough();
 
                 expect(month.nativeElement).toBe(document.activeElement);
 
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', document.activeElement);
                 fixture.detectChanges();
+                tick();
+
+                expect(calendar.onActiveViewChanged.emit).toHaveBeenCalledTimes(1);
+                expect(calendar.onActiveViewChanged.emit).toHaveBeenCalledWith(CalendarView.YEAR);
 
                 const months = dom.queryAll(By.css(HelperTestFunctions.MONTH_CSSCLASS));
                 const currentMonth = dom.query(By.css(HelperTestFunctions.CURRENT_MONTH_CSSCLASS));
@@ -1651,11 +1671,18 @@ describe('IgxCalendar - ', () => {
 
                 expect(document.activeElement.textContent.trim()).toMatch('Sep');
 
+                const previousValue = fixture.componentInstance.calendar.viewDate;
+                spyOn(calendar.onViewDateChanged, 'emit').and.callThrough();
+
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', document.activeElement);
                 fixture.detectChanges();
+                tick();
 
+                const eventArgs: IViewDateChangeEventArgs = { previousValue, currentValue: fixture.componentInstance.calendar.viewDate };
+                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledTimes(1);
+                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledWith(eventArgs);
                 expect(calendar.viewDate.getMonth()).toEqual(8);
-            });
+            }));
 
             it('Should navigate to the first enabled date from the previous month when using "arrow up" key.', fakeAsync(() => {
                 const dateRangeDescriptors: DateRangeDescriptor[] = [];

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

@@ -466,6 +466,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      * @internal
      */
     public previousMonth(isKeydownTrigger = false) {
+        this.previousViewDate = this.viewDate;
         this.viewDate = this.calendarModel.getPrevMonth(this.viewDate);
         this.animationAction = ScrollMonth.PREV;
         this.isKeydownTrigger = isKeydownTrigger;
@@ -478,6 +479,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      * @internal
      */
     public nextMonth(isKeydownTrigger = false) {
+        this.previousViewDate = this.viewDate;
         this.viewDate = this.calendarModel.getNextMonth(this.viewDate);
         this.animationAction = ScrollMonth.NEXT;
         this.isKeydownTrigger = isKeydownTrigger;
@@ -610,6 +612,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
                 this.daysView.daysNavService.focusNextDate(day.nativeElement, args.key, true);
             }
         };
+        this.previousViewDate = this.viewDate;
         this.viewDate = this.nextDate;
     }
 
@@ -618,6 +621,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      * @intenal
      */
     public changeMonth(event: Date) {
+        this.previousViewDate = this.viewDate;
         this.viewDate = this.calendarModel.getFirstViewDate(event, 'month', this.activeViewIdx);
         this.activeView = CalendarView.DEFAULT;
 
@@ -711,6 +715,11 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      * @internal
      */
     public animationDone(event) {
+        if ((event.fromState === ScrollMonth.NONE && (event.toState === ScrollMonth.PREV || event.toState === ScrollMonth.NEXT)) ||
+             (event.fromState === 'void' && event.toState === ScrollMonth.NONE)) {
+            this.onViewDateChanged.emit({ previousValue: this.previousViewDate, currentValue: this.viewDate });
+        }
+
         if (this.monthScrollDirection !== ScrollMonth.NONE) {
             this.scrollMonth$.next();
         }
@@ -736,6 +745,16 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         this.animationAction = ScrollMonth.NONE;
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public viewRendered(event) {
+        if (event.fromState !== 'void') {
+            this.onActiveViewChanged.emit(this.activeView);
+        }
+    }
+
     /**
      * Keyboard navigation of the calendar
      * @hidden
@@ -813,6 +832,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
 
         const isPageDown = event.key === 'PageDown';
         const step = isPageDown ? 1 : -1;
+        this.previousViewDate = this.viewDate;
         this.viewDate = this.calendarModel.timedelta(this.viewDate, 'year', step);
 
         this.animationAction = isPageDown ? ScrollMonth.NEXT : ScrollMonth.PREV;