Jquery Full calendar and dynamic event colors

Question

Hi,

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     : '2010-03-10',
    className : 'custom',
  },
  {
    title  : 'event2',
    start  : '2010-03-05',
    end    : '2010-03-07'
  },
  {
    title  : 'event3',
    start  : '2010-03-09 12:30:00',
    allDay : false
  }
]

The CSS to make event1 look different

.custom,
.fc-agenda .custom .fc-event-time,
.custom a {
    background-color: green; /* background color */
    border-color: green;     /* border color */
    color: yellow;           /* text color */
}

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

Answer 2

Here is an example of how to add color dynamicly from an ASP.NET webservice.
http://jake1164.blogspot.com/2010/06/jquery-fullcalendar-and-aspnet.html