cannot get eventClick to work

I am trying to use this beautiful component, but I cannot get eventClicked to work. I have a very simple setup with clarity.

This is my template:

 <div>
   <mwl-calendar-day-view
    [viewDate]="viewDate"
    [events]="times"
    [refresh]="false"
    [activeDayIsOpen]="true"
    (eventClicked)="eventClicked($event)">
  </mwl-calendar-day-view>
</div>

And this is my component

import { Component, OnInit } from '@angular/core';
import { CalendarEvent } from '../../../../node_modules/calendar-utils';
import * as moment   from 'moment';

const colors: any = {
  red: {
    primary: '#ad2121',
    secondary: '#FAE3E3'
  },
  blue: {
    primary: '#1e90ff',
    secondary: '#D1E8FF'
  },
  yellow: {
    primary: '#e3bc08',
    secondary: '#FDF1BA'
  }
};

@Component({
  selector: 'app-find-time',
  templateUrl: './find-time.component.html',
  styleUrls: ['./find-time.component.css']
})
export class FindTimeComponent implements OnInit {
  _times : CalendarEvent[]; 
  activeDayIsOpen = true;
  constructor() { }

  ngOnInit() {
    console.log('initializing');
  }

  findNearest(){

  }

  get times() :CalendarEvent[]{
    var dates =  [

      {
        start : moment("2018-05-28T17:00:00").toDate(),
        end : moment("2018-05-28T17:45:00").toDate(),
        title: "Free",
        color: colors.red
      },
      {
        start : moment("2018-05-28T18:00:00").toDate(),
        end : moment("2018-05-28T18:45:00").toDate(),
        title: "Free",
        color: colors.red
      }
    ];
    return dates;
  }

  get viewDate(){
    return moment("2018-05-28").toDate();
  }

  eventClicked( event: CalendarEvent ): void {
    console.log('Event clicked', event);
  }

  public dayClicked(day){
      console.log('day clicked');
  }
}

There is not error in the console, but when I click events, nothing happens. The only oddity is when I hover on the event title, it flickers. seems like a css problem

mattlewis92 / angular-calendar

cannot get eventClick to work #655