FullCalendar does not use option "backgroundColor" for each events

[zablik]

vue: "3.0.7"
primevue: "3.3.5"

Hi,

I want to have different background colors for events displayed in FullCalendar.

In config I try to use all options I've found in origin FullCalendar documentation

      events: [
        {
...........
              {
                "id": 2,
                "title": "Long Event",
                "start": "2019-01-07",
                "end": "2019-01-10",
                color: 'red',
                backgroundColor: 'red',
                borderColor: 'red',
                textColor: 'red',
                eventColor: 'red',
              },
              {
                "id": 3,
                "title": "Repeating Event",
                "start": "2019-01-09T16:00:00",
                color: 'purple',
                backgroundColor: 'purple',
                borderColor: 'purple',
                textColor: 'purple',
                eventColor: 'purple',
              },
...........

... but the background color remains the same as it is defined in (my case is saga-blue/theme.css)

.fc .fc-view-harness .fc-event, .fc .fc-view-harness .fc-event-main {
  background: #0d89ec;
  border: 1px solid #0d89ec;
  color: #ffffff;
}

What can I do to change the background color of the events?

[zablik]

For anyone who faces this issue, I've found a temporary workaround. Hope there is a better way, though.
You need to do like this for every color

<style>

a[style*="background-color: grey"] > * {
  background: grey !important;
}

</style>

[cagataycivici]

Closing as full calendar is deprecated in favor of the official component.

[MikesGlitch]

@cagataycivici Pretty sure this is still a problem. FullCalendar style inline like so

PrimeVue is styling over it further down the chain