无法在事件预览中显示操作按钮。 ¿我忘了什么？

Question

我正在制作一个 angular 应用程序，其中包含一个在日历中显示事件的组件，因此我决定使用 angular-calendar 作为视图。在飞蛾视图中，有一个选项可以显示一天中的所有事件并允许 modify/delete 该事件。但是，我无法显示操作按钮，因此无法显示相应的对话框。

Angular-日历示例截图：

enter image description here

我的应用示例截图：

enter image description here

为了实现这一点，我遵循 example 并添加了一个带有修改和删除选项的 CalendarEventAction[]，并像这样添加到我的示例事件中（我没有包含所有代码）：

calendar.component.ts:

actions: CalendarEventAction[] = [
{
  label: '<i class="fas fa-fw fa-pencil-alt"></i>',
  a11yLabel: 'Edit',
  onClick: ({ event }: { event: CalendarEvent }): void => {
    this.inspectEvent(event)
  },
},
{
  label: '<i class="fas fa-fw fa-trash-alt"></i>',
  a11yLabel: 'Delete',
  onClick: ({ event }: { event: CalendarEvent }): void => {
    this.events = this.events.filter((iEvent) => iEvent !== event);
    this.inspectEvent(event)
  },
}];

events: CalendarEvent[] = [
{
  start: startOfDay(new Date()),
  title: 'First event',
  end: endOfDay(new Date()),
  actions: this.actions,
}];

dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
if (isSameMonth(date, this.viewDate)) {
  if (
    (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
    events.length === 0
  ) {
    this.activeDayIsOpen = false;
  } else {
    this.activeDayIsOpen = true;
  }
  this.viewDate = date;
}

}

calendar.component.html:

<div class="calendarView" [ngSwitch]="view">
    
        <mwl-calendar-month-view *ngSwitchCase="CalendarView.Month" 
        [activeDayIsOpen]="activeDayIsOpen" 
        [refresh]="refresh" 
        [viewDate]="viewDate" 
        [events]="events" 
        (dayClicked)="dayClicked($event.day)" 
        (eventClicked) ="inspectEvent($event.event)">
        </mwl-calendar-month-view>
    
        <mwl-calendar-week-view *ngSwitchCase="CalendarView.Week" 
        [refresh]="refresh" 
        [viewDate]="viewDate" 
        [events]="events" 
        (eventClicked) ="inspectEvent($event.event)">
        </mwl-calendar-week-view>
    
        <mwl-calendar-day-view *ngSwitchCase="CalendarView.Day" 
        [refresh]="refresh" 
        [viewDate]="viewDate" 
        [events]="events" 
        (eventClicked) ="inspectEvent($event.event)">
        </mwl-calendar-day-view>
    
</div>

但是，按钮没有出现，我不知道是什么问题。

有什么建议吗？

Answer 1

由于您的操作按钮是 FontAwesome 图标按钮，您需要导入 CSS 按钮才能正常工作。

您可能忘记在 index.html 的 head 标签内添加 FontAwesome。

<head>
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</head>

Demo

结果：

无法在事件预览中显示操作按钮。 ¿我忘了什么？

Cannot show the action buttons on an event preview. ¿Something I forgot?

typescript

angular

angular-calendar