feat(month-view): add columnHeaderClicked output

Closes #722

Author: agilob

projects/angular-calendar/src/modules/month/calendar-month-view-header.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, TemplateRef } from '@angular/core';
+import { Component, Input, TemplateRef, EventEmitter, Output } from '@angular/core';
 import { WeekDay } from 'calendar-utils';
 import { trackByWeekDayHeaderDate } from '../common/util';
 
@@ -17,6 +17,7 @@ import { trackByWeekDayHeaderDate } from '../common/util';
           [class.cal-today]="day.isToday"
           [class.cal-future]="day.isFuture"
           [class.cal-weekend]="day.isWeekend"
+          (click)="handleCellClicked(day)"
           [ngClass]="day.cssClass">
           {{ day.date | calendarDate:'monthViewColumnHeader':locale }}
         </div>
@@ -38,5 +39,12 @@ export class CalendarMonthViewHeaderComponent {
   @Input()
   customTemplate: TemplateRef<any>;
 
+  @Output()
+  columnHeaderClicked: EventEmitter<number> = new EventEmitter<number>();
+
   trackByWeekDayHeaderDate = trackByWeekDayHeaderDate;
+
+  public handleCellClicked(event: WeekDay) {
+    this.columnHeaderClicked.emit(event.date.getDay());
+  }
 }

projects/angular-calendar/src/modules/month/calendar-month-view.component.ts

@@ -58,6 +58,7 @@ export interface CalendarMonthViewEventTimesChangedEvent<
       <mwl-calendar-month-view-header
         [days]="columnHeaders"
         [locale]="locale"
+        (columnHeaderClicked)="columnHeaderClicked.emit($event)"
         [customTemplate]="headerTemplate">
       </mwl-calendar-month-view-header>
       <div class="cal-days">
@@ -220,6 +221,13 @@ export class CalendarMonthViewComponent
     event: CalendarEvent;
   }>();
 
+
+  /**
+   * Called when a header week day is clicked. Returns ISO day number.
+   */
+  @Output()
+  columnHeaderClicked = new EventEmitter<number>();
+
   /**
    * Called when an event is dragged and dropped
    */

projects/angular-calendar/test/calendar-month-view.component.spec.ts

@@ -77,6 +77,21 @@ describe('calendarMonthView component', () => {
     fixture.destroy();
   });
 
+  it('should emit on the columnHeaderClicked output', (done) => {
+    const fixture: ComponentFixture<
+      CalendarMonthViewComponent
+    > = TestBed.createComponent(CalendarMonthViewComponent);
+    fixture.componentInstance.viewDate = new Date('2016-06-29');
+    fixture.componentInstance.ngOnChanges({ viewDate: {} });
+    fixture.detectChanges();
+    fixture.componentInstance.columnHeaderClicked.subscribe(val => {
+      expect(val).to.equal(0);
+      done();
+    });
+    fixture.nativeElement.querySelector('.cal-header .cal-cell').click();
+    fixture.detectChanges();
+  });
+
   it('should generate the week view with default colors for events', () => {
     const fixture: ComponentFixture<
       CalendarMonthViewComponent

src/app/demo-modules/clickable-days/component.ts

@@ -14,4 +14,6 @@ export class DemoComponent {
   events: CalendarEvent[] = [];
 
   clickedDate: Date;
+
+  clickedColumn: number;
 }

src/app/demo-modules/clickable-days/template.html

@@ -6,13 +6,15 @@
 <div class="alert alert-info">
   Click on a day on the view.
   <strong *ngIf="clickedDate">You clicked on this day: {{ clickedDate | date:'medium' }}</strong>
+  <strong *ngIf="clickedColumn != null">You clicked on this column: {{ clickedColumn }}</strong>
 </div>
 
 <div [ngSwitch]="view">
   <mwl-calendar-month-view
     *ngSwitchCase="'month'"
     [viewDate]="viewDate"
     [events]="events"
+    (columnHeaderClicked)="clickedColumn = $event"
     (dayClicked)="clickedDate = $event.day.date">
   </mwl-calendar-month-view>
   <mwl-calendar-week-view
@@ -26,4 +28,4 @@
     [viewDate]="viewDate"
     [events]="events">
   </mwl-calendar-day-view>
-</div>
+</div>