fix(monthView): cell events should be clickable

Closes #111

Author: Matt Lewis

src/components/month/calendarMonthCell.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { MonthViewDay } from 'calendar-utils';
+import { MonthViewDay, CalendarEvent } from 'calendar-utils';
 
 @Component({
   selector: 'mwl-calendar-month-cell',
@@ -20,7 +20,8 @@ import { MonthViewDay } from 'calendar-utils';
         [tooltipPlacement]="tooltipPlacement"
         mwlDraggable
         [dropData]="{event: event}"
-        [dragAxis]="{x: event.draggable, y: event.draggable}">
+        [dragAxis]="{x: event.draggable, y: event.draggable}"
+        (click)="$event.stopPropagation(); eventClicked.emit({event: event})">
       </div>
     </div>
   `,
@@ -51,4 +52,6 @@ export class CalendarMonthCellComponent {
 
   @Output() unhighlightDay: EventEmitter<any> = new EventEmitter();
 
+  @Output() eventClicked: EventEmitter<{event: CalendarEvent}> = new EventEmitter<{event: CalendarEvent}>();
+
 }

src/components/month/calendarMonthView.component.ts

@@ -56,7 +56,8 @@ import { CalendarEventTimesChangedEvent } from '../../interfaces/calendarEventTi
               mwlDroppable
               (dragEnter)="day.dragOver = true"
               (dragLeave)="day.dragOver = false"
-              (drop)="day.dragOver = false; eventDropped(day, $event.dropData.event)">
+              (drop)="day.dragOver = false; eventDropped(day, $event.dropData.event)"
+              (eventClicked)="eventClicked.emit({event: $event.event})">
             </mwl-calendar-month-cell>
           </div>
           <mwl-calendar-open-day-events

test/calendarMonthView.component.spec.ts

@@ -383,4 +383,35 @@ describe('calendarMonthView component', () => {
     fixture.destroy();
   });
 
+  it('should handle the click event on month cell events', () => {
+    const fixture: ComponentFixture<CalendarMonthViewComponent> = TestBed.createComponent(CalendarMonthViewComponent);
+    fixture.componentInstance.viewDate = new Date('2016-06-27');
+    fixture.componentInstance.events = [{
+      start: new Date('2016-05-30'),
+      end: new Date('2016-06-02'),
+      title: 'foo',
+      color: {
+        primary: 'blue',
+        secondary: ''
+      }
+    }];
+    fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}});
+    fixture.detectChanges();
+    let eventClickedEvent: any;
+    fixture.componentInstance.eventClicked.subscribe((event) => {
+      eventClickedEvent = event;
+    });
+    let dayClickedFired: boolean = false;
+    fixture.componentInstance.dayClicked.subscribe(() => {
+      dayClickedFired = true;
+    });
+    const event: HTMLElement = fixture.nativeElement.querySelector(
+      '.cal-days .cal-cell-row .cal-cell:nth-child(4) .cal-events .cal-event'
+    );
+    event.click();
+    fixture.destroy();
+    expect(eventClickedEvent).to.deep.equal({event: fixture.componentInstance.events[0]});
+    expect(dayClickedFired).to.be.false;
+  });
+
 });