Fullcalendar color properties working only when allDay: true

Question

I'm only getting a background color when my object is like this:

   {
      title: "Conference",
      start: "2022-08-11",
      end: "2022-08-13",
      color: "purple", // override!
    }

When I have:

   {
      title: "Meeting",
      start: "2022-08-12T10:30:00",
      end: "2022-08-12T12:30:00",
    }

or even with:

    events = [...],
    eventsColor: "purple"
});

It's not showing any color. Color properties only work when I use allDay: true.

How can I use colors in allDay: false events?

Answer 1

You didn't mention it, but I assume you're looking at the default dayGridMonth view when you're seeing the situation you describe in your question.

If so, this behaviour is documented. The eventDisplay option defines how the event appears in different scenarios. The default value is auto, which the documentation explains causes the following behaviour:

When in daygrid, renders the event as a solid rectangle if it is all-day or multi-day. If a timed event, will render it with a dot. When in other views, will render normally.

So if you want to change this, you can simply change the option's value - for example:

eventDisplay: "block"

Demo: https://codepen.io/ADyson82/pen/gOzZeQy

Note also though that if you set a colour on an event which isn't all-day, without using the eventDisplay setting, then adding

color: "purple" 

to the event would still set the colour of the dot - demo: https://codepen.io/ADyson82/pen/abGPGoq

---

Regarding your other attempt, eventsColor: "purple" is incorrect. Again as per the documentation, the correct option is eventColor. There's no such option as eventsColor, so that would have no effect.

If you set this correctly, then it works: https://codepen.io/ADyson82/pen/ExLGEqo (but of course it only sets a background colour if the event is being displayed in block mode. For other events, it controls the colour of the dot instead, as per my remarks above.)