0

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

角度日历示例截图：

在此处输入图像描述

我的应用示例截图：

在此处输入图像描述

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

日历.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;
}

}

日历.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>

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

有什么建议吗？

4

1 回答 1

1

由于您的操作按钮是 FontAwesome Icon 按钮，因此您需要导入 CSS 才能使按钮工作。

您可能忘记在.headindex.html

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

演示

结果：

在此处输入图像描述

于 2021-04-03T18:33:10.210 回答