feat(weekView): allow the event template to be customised

Closes #171
mattlewis92 · Mar 29, 2017 · 0be434d · 0be434d
1 parent adf31f7
commit 0be434d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/src/components/week/calendarWeekView.component.ts b/src/components/week/calendarWeekView.component.ts
@@ -72,6 +72,7 @@ import { CalendarEventTimesChangedEvent } from '../../interfaces/calendarEventTi
           <mwl-calendar-week-view-event
             [weekEvent]="weekEvent"
             [tooltipPlacement]="tooltipPlacement"
+            [customTemplate]="eventTemplate"
             (eventClicked)="eventClicked.emit({event: weekEvent.event})">
           </mwl-calendar-week-view-event>
         </div>
@@ -121,6 +122,11 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   @Input() headerTemplate: TemplateRef<any>;
 
+  /**
+   * A custom template to use for week view events
+   */
+  @Input() eventTemplate: TemplateRef<any>;
+
   /**
    * Called when a header week day is clicked
    */

diff --git a/src/components/week/calendarWeekViewEvent.component.ts b/src/components/week/calendarWeekViewEvent.component.ts
@@ -1,23 +1,29 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, TemplateRef } from '@angular/core';
 import { WeekViewEvent } from 'calendar-utils';
 
 @Component({
   selector: 'mwl-calendar-week-view-event',
   template: `
-    <div
-      class="cal-event"
-      [class.cal-starts-within-week]="!weekEvent.startsBeforeWeek"
-      [class.cal-ends-within-week]="!weekEvent.endsAfterWeek"
-      [style.backgroundColor]="weekEvent.event.color.secondary"
-      [ngClass]="weekEvent.event?.cssClass"
-      [mwlCalendarTooltip]="weekEvent.event.title | calendarEventTitle:'weekTooltip':weekEvent.event"
-      [tooltipPlacement]="tooltipPlacement">
-      <mwl-calendar-event-title
-        [event]="weekEvent.event"
-        view="week"
-        (click)="eventClicked.emit()">
-      </mwl-calendar-event-title>
-    </div>
+    <ng-template #defaultTemplate>
+      <div
+        class="cal-event"
+        [class.cal-starts-within-week]="!weekEvent.startsBeforeWeek"
+        [class.cal-ends-within-week]="!weekEvent.endsAfterWeek"
+        [style.backgroundColor]="weekEvent.event.color.secondary"
+        [ngClass]="weekEvent.event?.cssClass"
+        [mwlCalendarTooltip]="weekEvent.event.title | calendarEventTitle:'weekTooltip':weekEvent.event"
+        [tooltipPlacement]="tooltipPlacement">
+        <mwl-calendar-event-title
+          [event]="weekEvent.event"
+          view="week"
+          (click)="eventClicked.emit()">
+        </mwl-calendar-event-title>
+      </div>
+    </ng-template>
+    <ng-template
+      [ngTemplateOutlet]="customTemplate || defaultTemplate"
+      [ngTemplateOutletContext]="{weekEvent: weekEvent, tooltipPlacement: tooltipPlacement, eventClicked: eventClicked}">
+    </ng-template>
   `
 })
 export class CalendarWeekViewEventComponent {
@@ -26,6 +32,8 @@ export class CalendarWeekViewEventComponent {
 
   @Input() tooltipPlacement: string;
 
+  @Input() customTemplate: TemplateRef<any>;
+
   @Output() eventClicked: EventEmitter<any> = new EventEmitter();
 
 }