feat(dayView): allow the hour segment template to be customised

Closes #172
mattlewis92 · Apr 4, 2017 · 149b605 · 149b605
1 parent f6bd1fd
commit 149b605
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 7 deletions.
diff --git a/src/components/day/calendarDayView.component.ts b/src/components/day/calendarDayView.component.ts
@@ -8,9 +8,18 @@ import {
   LOCALE_ID,
   Inject,
   OnInit,
-  OnDestroy
+  OnDestroy,
+  TemplateRef
 } from '@angular/core';
-import { getDayView, getDayViewHourGrid, CalendarEvent, DayView, DayViewHour, DayViewHourSegment, DayViewEvent } from 'calendar-utils';
+import {
+  getDayView,
+  getDayViewHourGrid,
+  CalendarEvent,
+  DayView,
+  DayViewHour,
+  DayViewHourSegment,
+  DayViewEvent
+} from 'calendar-utils';
 import { Subject } from 'rxjs/Subject';
 import { Subscription } from 'rxjs/Subscription';
 import { ResizeEvent } from 'angular-resizable-element';
@@ -87,6 +96,7 @@ const SEGMENT_HEIGHT: number = 30;
             *ngFor="let segment of hour.segments"
             [segment]="segment"
             [locale]="locale"
+            [customTemplate]="hourSegmentTemplate"
             (click)="hourSegmentClicked.emit({date: segment.date})"
             [class.cal-drag-over]="segment.dragOver"
             mwlDroppable
@@ -167,6 +177,11 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   @Input() tooltipPlacement: string = 'top';
 
+  /**
+   * A custom template to use to replace the hour segment
+   */
+  @Input() hourSegmentTemplate: TemplateRef<any>;
+
   /**
    * Called when an event title is clicked
    */

diff --git a/src/components/day/calendarDayViewHourSegment.component.ts b/src/components/day/calendarDayViewHourSegment.component.ts
@@ -1,14 +1,23 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, TemplateRef } from '@angular/core';
 import { DayViewHourSegment } from 'calendar-utils';
 
 @Component({
   selector: 'mwl-calendar-day-view-hour-segment',
   template: `
-    <div class="cal-hour-segment" [ngClass]="segment.cssClass">
-      <div [hidden]="!segment.isStart" class="cal-time">
-        {{ segment.date | calendarDate:'dayViewHour':locale }}
+    <ng-template #defaultTemplate>
+      <div class="cal-hour-segment" [ngClass]="segment.cssClass">
+        <div [hidden]="!segment.isStart" class="cal-time">
+          {{ segment.date | calendarDate:'dayViewHour':locale }}
+        </div>
       </div>
-    </div>
+    </ng-template>
+    <ng-template
+      [ngTemplateOutlet]="customTemplate || defaultTemplate"
+      [ngTemplateOutletContext]="{
+        segment: segment,
+        locale: locale
+      }">
+    </ng-template>
   `
 })
 export class CalendarDayViewHourSegmentComponent {
@@ -17,4 +26,6 @@ export class CalendarDayViewHourSegmentComponent {
 
   @Input() locale: string;
 
+  @Input() customTemplate: TemplateRef<any>;
+
 }