JS Fullcalendar background color not setting

Question

I am trying to set the background color of an event with FullCalendar JS http://arshaw.com/fullcalendar/

Here is my JS:

<script>
$('#calendar').fullCalendar({
    events: [
        {
            title: 'Test',
            start: '2014-08-07',
            url: '#',
            backgroundColor: '#FF0000',
            editable: true
        },
    ]
});
</script>

And here is what that produces

Why is it not producing the result I want, the event background colored as red.

Answer 1

You can change the backgroundColor property for your events like:

$('#calendar').fullCalendar({
    {
      title: '1',
      start: new Date(2014, 02, 25, 10, 30),
      allDay: false,
      editable: false,
      backgroundColor: '#ED1317'
    },
    {
      title: '2',
      start: new Date(2014, 02, 26, 10, 30),
      allDay: false,
      editable: false,
      backgroundColor: '#ED1317'
    },
    ...
});

For the other dates, just use the .fc-future and .fc-today CSS properties :

.fc-future,
.fc-today {
    background-color: #10CC55;
}

Updated :

$('#calendar').fullCalendar({
eventSources: [        
    {
        events: [ 
            {
                title  : 'event1',
                start  : '2010-01-01'
            },
            {
                title  : 'event2',
                start  : '2010-01-05',
                end    : '2010-01-07'
            },
            {
                title  : 'event3',
                start  : '2010-01-09 12:30:00',
            }
        ],
        backgroundColor: '#ED1317'
    }  
]