fix(calendar): Fixing some calendar bugs

Author: johnsully83

demo/pages/elements/calendar/CalendarDemo.ts

@@ -104,8 +104,8 @@ export class CalendarDemoComponent {
         return evt;
     }
 
-    dayClicked(event) {
-        let evt: CalendarEvent = this.getNewEvent(event.day.date, colors.blue, CalendarEventResponse.Maybe);
+    dayClicked(date) {
+        let evt: CalendarEvent = this.getNewEvent(date, colors.blue, CalendarEventResponse.Maybe);
         this.events.push(evt);
         this.events = [...this.events];
     }

demo/pages/elements/calendar/templates/CalendarDemo.html

@@ -9,14 +9,14 @@
     *ngSwitchCase="'month'"
     [(viewDate)]="viewDate"
     [events]="events"
-    (dayClicked)="dayClicked($event)">
+    (dayClicked)="dayClicked($event.day.date)">
     </novo-calendar-month>
 
     <novo-calendar-week
     *ngSwitchCase="'week'"
     [(viewDate)]="viewDate"
     [events]="events"
-    (eventClicked)="dayClicked($event)"
+    (dayClicked)="dayClicked($event.date)"
     [dayStartHour]="0"
     [dayEndHour]="24">
     </novo-calendar-week>
@@ -25,7 +25,6 @@
     *ngSwitchCase="'day'"
     [(viewDate)]="viewDate"
     [events]="events"
-    (eventClicked)="dayClicked($event)"
     [dayStartHour]="0"
     [dayEndHour]="24">
     </novo-calendar-day>

src/elements/calendar/day/CalendarDayEvent.ts

@@ -12,7 +12,8 @@ import { DayViewEvent } from '../../../utils/calendar-utils/CalendarUtils';
         [class.cal-ends-within-day]="!dayEvent.endsAfterDay"
         [ngClass]="dayEvent.event.cssClass"
         [tooltip]="dayEvent.event.title"
-        [tooltipPosition]="tooltipPosition">
+        [tooltipPosition]="tooltipPosition"
+        (click)="eventClicked.emit({event: dayEvent.event})">
           <div class="cal-event-ribbon" [style.backgroundColor]="dayEvent.event.color.primary"></div>
           <div class="cal-event-group">
             <div class="cal-event-title">{{dayEvent.event.title}}</div>

src/elements/calendar/day/CalendarDayView.ts

@@ -73,7 +73,7 @@ const MINUTES_IN_HOUR: number = 60;
               [dayEvent]="dayEvent"
               [tooltipPosition]="tooltipPosition"
               [customTemplate]="eventTemplate"
-              (eventClicked)="eventClicked.emit({event: dayEvent.event})">
+              (eventClicked)="eventClicked.emit($event)">
             </novo-calendar-day-event>
           </div>
         </div>
@@ -290,7 +290,7 @@ export class NovoCalendarDayViewElement implements OnChanges, OnInit, OnDestroy
         this.eventTimesChanged.emit({event: dropEvent.dropData.event, newStart: segment.date});
       }
     }
-  
+
     resizeStarted(event: DayViewEvent, resizeEvent: ResizeEvent, dayViewContainer: HTMLElement): void {
       this.currentResize = {
         originalTop: event.top,
@@ -301,7 +301,7 @@ export class NovoCalendarDayViewElement implements OnChanges, OnInit, OnDestroy
       this.validateResize = ({rectangle}) => resizeHelper.validateResize({rectangle});
       this.cdr.detectChanges();
     }
-  
+
     resizing(event: DayViewEvent, resizeEvent: ResizeEvent): void {
       if (resizeEvent.edges.top) {
         event.top = this.currentResize.originalTop + +resizeEvent.edges.top;
@@ -310,19 +310,19 @@ export class NovoCalendarDayViewElement implements OnChanges, OnInit, OnDestroy
         event.height = this.currentResize.originalHeight + +resizeEvent.edges.bottom;
       }
     }
-  
+
     resizeEnded(dayEvent: DayViewEvent): void {
-  
+
       let pixelsMoved: number;
       if (this.currentResize.edge === 'top') {
         pixelsMoved = (dayEvent.top - this.currentResize.originalTop);
       } else {
         pixelsMoved = (dayEvent.height - this.currentResize.originalHeight);
       }
-  
+
       dayEvent.top = this.currentResize.originalTop;
       dayEvent.height = this.currentResize.originalHeight;
-  
+
       const pixelAmountInMinutes: number = MINUTES_IN_HOUR / (this.hourSegments * SEGMENT_HEIGHT);
       const minutesMoved: number = pixelsMoved * pixelAmountInMinutes;
       let newStart: Date = dayEvent.event.start;
@@ -332,18 +332,18 @@ export class NovoCalendarDayViewElement implements OnChanges, OnInit, OnDestroy
       } else if (newEnd) {
         newEnd = addMinutes(newEnd, minutesMoved);
       }
-  
+
       this.eventTimesChanged.emit({newStart, newEnd, event: dayEvent.event});
       this.currentResize = null;
-  
+
     }
-  
+
     dragStart(event: HTMLElement, dayViewContainer: HTMLElement): void {
       const dragHelper: CalendarDragHelper = new CalendarDragHelper(dayViewContainer, event);
       this.validateDrag = ({x, y}) => !this.currentResize && dragHelper.validateDrag({x, y});
       this.cdr.detectChanges();
     }
-  
+
     eventDragged(dayEvent: DayViewEvent, draggedInPixels: number): void {
       const pixelAmountInMinutes: number = MINUTES_IN_HOUR / (this.hourSegments * SEGMENT_HEIGHT);
       const minutesMoved: number = draggedInPixels * pixelAmountInMinutes;

src/elements/calendar/week/CalendarWeekEvent.ts

@@ -11,7 +11,8 @@ import { WeekViewEvent } from '../../../utils/calendar-utils/CalendarUtils';
         [class.cal-ends-within-week]="!weekEvent.endsAfterWeek"
         [ngClass]="weekEvent.event?.cssClass"
         [tooltip]="weekEvent.event.title"
-        [tooltipPosition]="tooltipPosition">
+        [tooltipPosition]="tooltipPosition"
+        (click)="eventClicked.emit({event: weekEvent.event})">
         <div class="cal-event-ribbon" [style.backgroundColor]="weekEvent.event.color.primary"></div>
         <div class="cal-event-title">{{weekEvent.event?.title}}</div>
         <div class="cal-event-description">{{weekEvent.event?.description}}</div>

src/elements/calendar/week/CalendarWeekView.ts

@@ -71,7 +71,7 @@ const MINUTES_IN_HOUR: number = 60;
             [weekEvent]="weekEvent"
             [tooltipPosition]="tooltipPosition"
             [customTemplate]="eventTemplate"
-            (eventClicked)="eventClicked.emit({event: weekEvent.event})">
+            (eventClicked)="eventClicked.emit($event)">
           </novo-calendar-week-event>
         </div>
       </div>