How to customize event action text color: 'Edit' and 'Delete' within an event in the day/week view

[sebastianrychlik]

Describe the bug

I have been trying to customize the color of the event action text (':Edit Delete') within an event in the day view of the calendar. Is there any way to customize the color of the event action text within an event? Currenty, the text is white, so it is hardly visible.

Minimal reproduction of the problem with instructions

Screenshots

Versions

• @angular/core: "^16.0.1"
• angular-calendar: "^0.29.0"
• Browser name and version: Chrome version 118.0.5993.70

[matts-bot]

Thanks so much for opening an issue! If you'd like to support this project, then please consider sponsoring me

[sebastianrychlik]

The solution: declare actions array, e.g.:

  actions: CalendarEventAction[] = [
    {
      label: '<span class="text-primary link m-l-5">: Edit</span>',
      onClick: ({ event }: { event: CalendarEvent }): void => {
        this.handleEvent('Edit', event);
      },
    },
    {
      label: '<span class="text-primary m-l-5">Delete</span>',
      onClick: ({ event }: { event: CalendarEvent }): void => {
        this.events = this.events.filter((iEvent) => iEvent !== event);
        this.handleEvent('Deleted', event);
      },
    },
  ];

then declare the event with this.actions assigned to actiions properity:

  events: CalendarEvent[] = [
    {
      start: subDays(startOfDay(new Date()), 1),
      end: addDays(new Date(), 1),
      title: 'A 3 day event',
      color: colors.red,
      actions: this.actions,
    }]