fullcalendar: set color of individual events using a JSON feed

Question

I'm trying to display events from a JSON feed in different colors, but they all appear in the same default color. is there a way of setting the event objects color property using JSON? Is there a list of which of the event object properties are available to JSON?

fullcalendar code:

  $('#calendar').fullCalendar({
      header: {
                left: 'prev,next,today',
                center: 'title',
                right: ''
              },
      events: '/events/feed',
  });

output of json feed:

[
    {
        "id": "1",
        "title": "Green Event",
        "start": "2014-05-05 09:00:00",
        "end": "2014-05-05 17:00:00",
        "allDay": true,
        "color": "00FF00"
    },
    {
        "id": "2",
        "title": "Red Event",
        "start": "2014-05-06 09:00:00",
        "end": "2014-05-06 17:00:00",
        "allDay": true,
        "color": "FF0000"
    }
]

Answer 1

You need to put # before color, replace "color": "FF0000" with color: '#00FF00' and try

Answer 2

These are color attributes you can use in the latest version of fullCalendar:

eventColor

eventBackgroundColor

eventBorderColor

eventTextColor

also you should use '#' for example:

{ "id": "1", "title": "Green Event", "start": "2014-05-05 09:00:00", "end": "2014-05-05 17:00:00", "allDay": true, "eventColor": "#FF0000" }

Answer 3

There is also the className property of the event object, where you may set a css class for each event.

Answer 4

The approach which worked for me used the attribute "color" and used the "#" before the hex digits. For example, the following displays with a red background:

color: "#FF0000"
id: "aa49c82f33dc6"
start: "2013-04-21T07:00:00Z"
status: "COMPLETED"
title: "This is the Event Title"
unix_start: 1366527600