如何在角度日历上设置 onClick 事件？答案

【问题标题】：How to set onClick event on angular-calendar?如何在角度日历上设置 onClick 事件？
【发布时间】：2019-01-29 21:47:07
【问题描述】：

我想为我的 Angular 项目使用日历模块。到目前为止，我找到了这个：https://github.com/mattlewis92/angular-calendar

我的 Angular 网站显示日历，但我不知道如何设置 onClick 事件。我只是在我的 component.html 文件中插入了这段代码：

<mwl-calendar-month-view
  [viewDate]="viewDate"
  [events]="events">
</mwl-calendar-month-view>

如何设置 onClick 事件，当用户点击某天时调用该事件？

【问题讨论】：

回购有一些文档的链接。你应该从那里开始。
您可以通过阅读文档找到解决问题的方法（按照 github repo 页面中的链接）。
如果有人能回答这个问题就好了。不幸的是，与 angular-calendar 相关的人（糟糕地）重复使用了“事件”一词。

标签： javascript angular calendar

【解决方案1】：

我正在使用 Angular-Calender。您可以使用eventClicked 事件绑定来处理它。

在component.html上：

<mwl-calendar-month-view
  [viewDate]="viewDate"
  [events]="events">
  (eventClicked)="eventClicked($event)"
</mwl-calendar-month-view>

关于component.ts

import { CalendarEvent } from 'angular-calendar';

.
.
eventClicked({ event }: { event: CalendarEvent }): void {
  console.log( event);
}

Documentation

【讨论】：

【解决方案2】：

查找 dayClicked 监听器

(dayClicked)="dayClicked($event.day)"

  <mwl-calendar-month-view
    *ngSwitchCase="CalendarView.Month"
    [viewDate]="viewDate"
    [events]="events"
    [refresh]="refresh"
    [activeDayIsOpen]="activeDayIsOpen"
    (dayClicked)="dayClicked($event.day)"
    (eventClicked)="handleEvent('Clicked', $event.event)"
    (eventTimesChanged)="eventTimesChanged($event)"
  >

dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
    console.log("dayClicked", date, events );
}

【讨论】：