Currently in the process of developing an angular application featuring a calendar component to showcase events, I opted to utilize angular-calendar for the visual representation. While exploring the month view functionality, I encountered an issue where the action buttons failed to display, thus hindering the ability to access corresponding dialogs.
Notable screenshots include:
Following along with the example, I integrated a CalendarEventAction[] containing modify and delete options into my event configuration (excerpt provided below):
Simplified version found in 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,
}];
Seeking assistance as the button functionalities fail to appear despite following the prescribed steps outlined in the example. Any guidance would be appreciated!