Jquery Full calendar and dynamic event colors

Question

I would like to to pass the colors for the events through my json events source for jquery fullcalendar, how do i achieve this ?

Answer 1

Nothing easier than that. If you check the documentation of jQuery Fullcalendar Event Colors you see that there is a parameter className you can specify for each event object. The content of that parameter gets added as class to the events and thus you only need to specify the css with matching name.

The events (take note of the className parameter on event1)

[
  {
    title     : 'event1',
    start     : '2012-06-10',
    className : 'custom',
  },
  {
    title  : 'event2',
    start  : '2012-06-05',
    end    : '2012-06-07'
  },
  {
    title  : 'event3',
    start  : '2012-06-09 12:30:00',
    allDay : false
  }
]

The CSS to make event1 look different

.custom,
.custom div,
.custom span {
    background-color: green; /* background color */
    border-color: green;     /* border color */
    color: yellow;           /* text color */
}

Check here http://jsbin.com/ijasa3/96 for a quick sample. Note how event1 has green as background and yellow as text color.

---

Another viable way using the options described in jQuery Fullcalendar Event Colors could go along these lines:

Use different Eventsources for the events which need another color:

$('#calendar').fullCalendar({
...
  eventSources: [
    //a full blown EventSource-Object with custom coloring
    {
      events: [  
        {
          title     : 'event1',
          start     : '2012-06-10'
        }
      ],
      backgroundColor: 'green',
      borderColor: 'green',
      textColor: 'yellow'
    },
    //a normal events-array with the default colors used
    [
      {
        title  : 'event2',
        start  : '2012-06-05',
        end    : '2012-06-07'
      },
      {
        title  : 'event3',
        start  : '2012-06-09 12:30:00',
        allDay : false
      }
    ]
  ],
  ...
});

http://jsbin.com/ijasa3/99

Answer 2

With version 1.5 you can set textColor, backgroudColor and borderColor in each event.

Answer 3

If you upgrade to version 1.5 you may find this does not work. The solution appears to be to comment out the style

.fc-event-skin { }

Answer 4

For a better rendering, it is better to use backgroundColor of the EventObject.