FullCalendar 5 - How do I get the colour of each event?

Question

I am setting a specific event's colour in FullCalendar 5 with (each event can have a different colour):

color: 'Red',

I am then trying to retrieve the specific event's colour with:

eventClick: function(info) {
    var eventObj = info.event;
    $('#updateColour').val(eventObj.color);
}

However, "eventObj.color" is undefined. How do I get the colour of each event?

Answer 1

I reproduced the problem you're seeing in the simple snippet below. It looks like you've bumped into a bug, or something undocumented, or maybe just a bug in the documentation.

The eventColor (a whole-calendar-level property) documentation says:

This option can be overridden ... on a per-event basis with the color Event Object option.

But clicking through to the linked eventObject docs, there is no such color option listed. Instead there are backgroundColor and borderColor properties.

In the snippet I tried both specifying an event color, and reading it. Setting works - the event is drawn with the specified colour on the calendar. But just as you found, reading it fails, color is undefined.

Setting and reading backgroundColor and borderColor works fine, and by specifying both color and backgroundColor on a single event, it seems color is shorthand for setting both backgroundColor and borderColor (see Events 2 and 3 in the snippet).

So there's a workaround: we can set color, which transparently sets backgroundColor, which we can then read. See the snippet for a demo.

Update:

Regarding your extra question in the comments:

Also, this only gives a coloured dot next to the event when it has a start and end time. Is there a way to have a background colour for events that have a start and end time?

I haven't used it but I searched and came across the eventDisplay property, which seems to be what you're after. I updated the snippet and specified the block option, which changes an event with start and end times from a list-item to a block, just like all day events - see Event 4.

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    initialDate: '2021-11-07',
    eventDisplay: 'block',
    events: [{
        title: 'Event 1',
        start: '2021-11-01',
        color: 'Red',
      },
      {
        title: 'Event 2',
        start: '2021-11-02',
        backgroundColor: 'green',
        color: 'red'
      },
      {
        title: 'Event 3',
        start: '2021-11-03',
        color: 'red',
        backgroundColor: 'blue',
      },
      {
        title: 'Event 4',
        start: "2021-11-04T10:00:00-08:00",
        end: "2021-11-04T11:30:00-08:00",
        color: 'orange',
      },
    ],
    eventClick: function(info) {
      alert('color: ' + info.event.color + '; backgroundColor: ' + info.event.backgroundColor);
    }
  });

  calendar.render();
});

<link href='https://cdn.jsdelivr.net/npm/[email protected]/main.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/[email protected]/main.min.js'></script>

<div id='calendar'></div>