UPDATE

The items appear with the dot and not the background color because they're built with a time of day on them. Remove the time so that start is just the date (ie. 2021-12-07), then they get the background color correctly as expected so the question now becomes how to get the background color even with the time of day on them...

Referencing

• change the background color of the events in FullCalendar, and
• https://fullcalendar.io/docs/eventBackgroundColor

I've added backgroundColor values to my events, but this only seems to change the dot on the events:

You'll notice that using extendedProps to set the background color doesn't work either.

I'm trying to get the event to appear in a block of the given color similar to this:

Here's my events array; how can I get fullcalendar to change the background color on the event?

events: [
    {
        title: 'event1',
        start: '2021-12-07T08:00:00',
        backgroundColor: '#ff00ff'
    },
    {
        title: 'event3',
        start: '2021-12-07T09:00:00',
        backgroundColor: '#4d96f1'
    },
    {
        title: 'event2',
        start: '2021-12-08T08:00:00',
        backgroundColor: '#00ff00',
        extendedProps: {
            backgroundColor: '#00ff00'
        },
    }
],