feat(week-view): add current time marker

Closes #1102

Author: mattlewis92

projects/angular-calendar/src/modules/common/util.ts

@@ -58,6 +58,13 @@ export const trackByWeekTimeEvent = (
 
 const MINUTES_IN_HOUR = 60;
 
+function getPixelAmountInMinutes(
+  hourSegments: number,
+  hourSegmentHeight: number
+) {
+  return MINUTES_IN_HOUR / (hourSegments * hourSegmentHeight);
+}
+
 export function getMinutesMoved(
   movedY: number,
   hourSegments: number,
@@ -68,8 +75,10 @@ export function getMinutesMoved(
     movedY,
     eventSnapSize || hourSegmentHeight
   );
-  const pixelAmountInMinutes =
-    MINUTES_IN_HOUR / (hourSegments * hourSegmentHeight);
+  const pixelAmountInMinutes = getPixelAmountInMinutes(
+    hourSegments,
+    hourSegmentHeight
+  );
   return draggedInPixelsSnapSize * pixelAmountInMinutes;
 }
 
@@ -78,7 +87,7 @@ export function getMinimumEventHeightInMinutes(
   hourSegmentHeight: number
 ) {
   return (
-    (MINUTES_IN_HOUR / (hourSegments * hourSegmentHeight)) * hourSegmentHeight
+    getPixelAmountInMinutes(hourSegments, hourSegmentHeight) * hourSegmentHeight
   );
 }
 

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

@@ -50,6 +50,7 @@ export type CalendarDayViewBeforeRenderEvent = CalendarWeekViewBeforeRenderEvent
       [eventActionsTemplate]="eventActionsTemplate"
       [snapDraggedEvents]="snapDraggedEvents"
       [allDayEventsLabelTemplate]="allDayEventsLabelTemplate"
+      [currentTimeMarkerTemplate]="currentTimeMarkerTemplate"
       (eventClicked)="eventClicked.emit($event)"
       (hourSegmentClicked)="hourSegmentClicked.emit($event)"
       (eventTimesChanged)="eventTimesChanged.emit($event)"
@@ -165,6 +166,11 @@ export class CalendarDayViewComponent {
    */
   @Input() allDayEventsLabelTemplate: TemplateRef<any>;
 
+  /**
+   * A custom template to use for the current time marker
+   */
+  @Input() currentTimeMarkerTemplate: TemplateRef<any>;
+
   /**
    * Called when an event title is clicked
    */

projects/angular-calendar/src/modules/day/calendar-day-view.scss

@@ -11,4 +11,9 @@
   .cal-day-column {
     border-left: 0;
   }
+
+  .cal-current-time-marker {
+    margin-left: 70px;
+    width: calc(100% - 70px);
+  }
 }

projects/angular-calendar/src/modules/week/calendar-week-view-current-time-marker.component.ts

@@ -0,0 +1,97 @@
+import {
+  Component,
+  Input,
+  OnChanges,
+  SimpleChanges,
+  TemplateRef
+} from '@angular/core';
+import { BehaviorSubject, interval, Observable } from 'rxjs';
+import { switchMapTo, startWith, map } from 'rxjs/operators';
+import { DateAdapter } from '../../date-adapters/date-adapter';
+
+@Component({
+  selector: 'mwl-calendar-week-view-current-time-marker',
+  template: `
+    <ng-template
+      #defaultTemplate
+      let-columnDate="columnDate"
+      let-dayStartHour="dayStartHour"
+      let-dayStartMinute="dayStartMinute"
+      let-dayEndHour="dayEndHour"
+      let-dayEndMinute="dayEndMinute"
+    >
+      <div
+        class="cal-current-time-marker"
+        *ngIf="(marker$ | async)?.isVisible"
+        [style.top.px]="(marker$ | async)?.top"
+      ></div>
+    </ng-template>
+    <ng-template
+      [ngTemplateOutlet]="customTemplate || defaultTemplate"
+      [ngTemplateOutletContext]="{
+        columnDate: columnDate,
+        dayStartHour: dayStartHour,
+        dayStartMinute: dayStartMinute,
+        dayEndHour: dayEndHour,
+        dayEndMinute: dayEndMinute
+      }"
+    >
+    </ng-template>
+  `
+})
+export class CalendarWeekViewCurrentTimeMarkerComponent implements OnChanges {
+  @Input() columnDate: Date;
+
+  @Input() dayStartHour: number;
+
+  @Input() dayStartMinute: number;
+
+  @Input() dayEndHour: number;
+
+  @Input() dayEndMinute: number;
+
+  @Input() hourSegments: number;
+
+  @Input() hourSegmentHeight: number;
+
+  @Input() customTemplate: TemplateRef<any>;
+
+  private columnDate$ = new BehaviorSubject<Date>(this.columnDate);
+
+  marker$: Observable<{ isVisible: boolean; top: number }> = interval(
+    60 * 1000
+  ).pipe(
+    startWith(0),
+    switchMapTo(this.columnDate$),
+    map(columnDate => {
+      const startOfDay = this.dateAdapter.setMinutes(
+        this.dateAdapter.setHours(columnDate, this.dayStartHour),
+        this.dayStartMinute
+      );
+      const endOfDay = this.dateAdapter.setMinutes(
+        this.dateAdapter.setHours(columnDate, this.dayEndHour),
+        this.dayEndMinute
+      );
+      const hourHeightModifier =
+        (this.hourSegments * this.hourSegmentHeight) / 60;
+      const now = new Date();
+      return {
+        isVisible:
+          this.dateAdapter.isSameDay(columnDate, now) &&
+          now >= startOfDay &&
+          now <= endOfDay,
+        top:
+          this.dateAdapter.differenceInMinutes(now, startOfDay) *
+          hourHeightModifier
+      };
+    })
+  );
+
+  constructor(private dateAdapter: DateAdapter) {}
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.columnDate) {
+      this.columnDate$.next(changes.columnDate.currentValue);
+    }
+  }
+}

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

@@ -241,6 +241,16 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
             class="cal-day-column"
             *ngFor="let column of view.hourColumns; trackBy: trackByHourColumn"
           >
+            <mwl-calendar-week-view-current-time-marker
+              [columnDate]="column.date"
+              [dayStartHour]="dayStartHour"
+              [dayStartMinute]="dayStartMinute"
+              [dayEndHour]="dayEndHour"
+              [dayEndMinute]="dayEndMinute"
+              [hourSegments]="hourSegments"
+              [hourSegmentHeight]="hourSegmentHeight"
+              [customTemplate]="currentTimeMarkerTemplate"
+            ></mwl-calendar-week-view-current-time-marker>
             <div class="cal-events-container">
               <div
                 *ngFor="
@@ -531,6 +541,11 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   @Input() daysInWeek: number;
 
+  /**
+   * A custom template to use for the current time marker
+   */
+  @Input() currentTimeMarkerTemplate: TemplateRef<any>;
+
   /**
    * Called when a header week day is clicked. Adding a `cssClass` property on `$event.day` will add that class to the header element
    */

projects/angular-calendar/src/modules/week/calendar-week-view.scss

@@ -76,6 +76,10 @@ $cal-week-view-vars: map-merge($cal-vars, $cal-week-view-vars);
     .cal-hour:last-child :not(:last-child) .cal-hour-segment {
       border-bottom-color: map-get($theme, border-color);
     }
+
+    .cal-current-time-marker {
+      background-color: map-get($theme, current-time-marker-color);
+    }
   }
 }
 
@@ -124,6 +128,13 @@ $cal-week-view-vars: map-merge($cal-vars, $cal-week-view-vars);
     height: 100%;
   }
 
+  .cal-current-time-marker {
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    z-index: 2;
+  }
+
   .cal-all-day-events {
     border: solid 1px;
     border-top: 0;

projects/angular-calendar/src/modules/week/calendar-week.module.ts

@@ -7,6 +7,7 @@ import { CalendarWeekViewHeaderComponent } from './calendar-week-view-header.com
 import { CalendarWeekViewEventComponent } from './calendar-week-view-event.component';
 import { CalendarCommonModule } from '../common/calendar-common.module';
 import { CalendarWeekViewHourSegmentComponent } from './calendar-week-view-hour-segment.component';
+import { CalendarWeekViewCurrentTimeMarkerComponent } from './calendar-week-view-current-time-marker.component';
 
 export {
   CalendarWeekViewComponent,
@@ -30,15 +31,17 @@ export { getWeekViewPeriod } from '../common/util';
     CalendarWeekViewComponent,
     CalendarWeekViewHeaderComponent,
     CalendarWeekViewEventComponent,
-    CalendarWeekViewHourSegmentComponent
+    CalendarWeekViewHourSegmentComponent,
+    CalendarWeekViewCurrentTimeMarkerComponent
   ],
   exports: [
     ResizableModule,
     DragAndDropModule,
     CalendarWeekViewComponent,
     CalendarWeekViewHeaderComponent,
     CalendarWeekViewEventComponent,
-    CalendarWeekViewHourSegmentComponent
+    CalendarWeekViewHourSegmentComponent,
+    CalendarWeekViewCurrentTimeMarkerComponent
   ]
 })
 export class CalendarWeekModule {}

projects/angular-calendar/src/variables.scss

@@ -7,6 +7,7 @@ $cal-bg-active: #ededed !default;
 $cal-today-bg: #e8fde7 !default;
 $cal-weekend-color: #8b0000 !default;
 $cal-badge-color: #b94a48 !default;
+$cal-current-time-marker-color: #ea4334 !default;
 $cal-white: #fff !default;
 $cal-gray: #555 !default;
 $cal-black: #000 !default;
@@ -42,6 +43,9 @@ $cal-vars: map-merge(
     // the badge background color on the month view
     badge-color: $cal-badge-color,
 
+    // the current time marker color on the week and day view
+    current-time-marker-color: $cal-current-time-marker-color,
+
     // a standard white color used for tooltip text and month view event titles
     white: $cal-white,
 

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

@@ -106,7 +106,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.destroy();
   });
 
-  it('should call the event clicked callback', async(() => {
+  it('should call the event clicked callback', () => {
     const fixture: ComponentFixture<
       CalendarDayViewComponent
     > = TestBed.createComponent(CalendarDayViewComponent);
@@ -123,16 +123,15 @@ describe('CalendarDayViewComponent component', () => {
     ];
 
     fixture.detectChanges();
-    fixture.componentInstance.eventClicked.subscribe(val => {
-      expect(val).to.deep.equal({
-        event: fixture.componentInstance.events[0],
-        sourceEvent: window['event']
-      });
-    });
+    const spy = sinon.spy();
+    fixture.componentInstance.eventClicked.subscribe(spy);
     fixture.nativeElement.querySelector('.cal-event-title').click();
-  }));
+    const call = spy.getCall(0).args[0];
+    expect(call.event).to.equal(fixture.componentInstance.events[0]);
+    expect(call.sourceEvent).to.be.an.instanceOf(MouseEvent);
+  });
 
-  it('should call the event clicked callback on all day events', async(() => {
+  it('should call the event clicked callback on all day events', () => {
     const fixture: ComponentFixture<
       CalendarDayViewComponent
     > = TestBed.createComponent(CalendarDayViewComponent);
@@ -150,14 +149,13 @@ describe('CalendarDayViewComponent component', () => {
     ];
 
     fixture.detectChanges();
-    fixture.componentInstance.eventClicked.subscribe(val => {
-      expect(val).to.deep.equal({
-        event: fixture.componentInstance.events[0],
-        sourceEvent: window['event']
-      });
-    });
+    const spy = sinon.spy();
+    fixture.componentInstance.eventClicked.subscribe(spy);
     fixture.nativeElement.querySelector('.cal-event-title').click();
-  }));
+    const call = spy.getCall(0).args[0];
+    expect(call.event).to.equal(fixture.componentInstance.events[0]);
+    expect(call.sourceEvent).to.be.an.instanceOf(MouseEvent);
+  });
 
   it('should add a custom CSS class to events', () => {
     const fixture: ComponentFixture<
@@ -743,6 +741,7 @@ describe('CalendarDayViewComponent component', () => {
     triggerDomEvent('mouseleave', event);
     fixture.detectChanges();
     expect(!!document.body.querySelector('.cal-tooltip')).to.equal(false);
+    fixture.destroy();
   }));
 
   it('should disable the tooltip', fakeAsync(() => {
@@ -771,6 +770,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.detectChanges();
     flush();
     expect(!!document.body.querySelector('.cal-tooltip')).to.equal(false);
+    fixture.destroy();
   }));
 
   it('should allow events to be dragged and dropped', () => {