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

I'm making an angular app with a component that shows events in a calendar, so I've decided to use angular-calendar for the view. In the moth view there's an option that shows all events of a day and allow to modify/delete the event. However, i'm not able to show the action buttons, so i can't show the corresponding dialogs.

Angular-calendar example screenshot:

enter image description here

My app example screenshot:

enter image description here

To implement this I've followed the example and added a CalendarEventAction[] with the modify and delete options and added to my example event like this (I've not included all the code):

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>

However, the buttons doesn't appear and I don't know whats the problem.

Any sugestions?

Solution

Since your action buttons are FontAwesome Icon buttons, you need to import the CSS for the buttons to work.

You probably forgot to add FontAwesome inside the head tag of your index.html.

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

Demo

Result: