change the background color of the events in FullCalendar

Question

I'm using the FullCalendar v1.6.1 version . I want to change the event background color in accordance with some conditions,and the rest of events in another color . but I don't know how make to diferent events.

in my table , table name is booking :

id --- + ---   the_date   
 1           2014-02-25 
 2           2014-02-26
 3           2014-02-27
 4           2014-03-22
 5           2014-04-15
 6           2014-04-17

I want to change the event background color of the above dates in red , and rest of the them in green .

Any idea how can i colorize differently each event?

Thanks in advance

Answer 1

You can set the backgroundColor property for your specific events :

$('#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 rest of the dates, just use the .fc-future and .fc-today CSS properties :

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

Answer 2

if you want to change background color of events you can use

 eventRender: function (event, element, view) 
      {
              var date = new Date(); //this is your todays date

                if (event.start >= date)
                  $(element).css("backgroundColor", "red");

     }

and if you want to change background color of day then you can user dayRender CallBack of Fullcalender

 dayRender: function (date, element, view) 
        {


                var date = new Date(date);
                var day = date.getDate().toString();
                if (day.length == 1)
                    day = 0 + day;
                var year = date.getFullYear();
                var month = (date.getMonth() + 1).toString();
                if (month.length == 1)
                    month = 0 + month;
                var dateStr = year + "-" + month + "-" + day ;

                // YourDates is Json array of your default dates

                for (var i = 0; i < YourDates.length; i++) 
               {
                 //here you campare calender dates to your default dates
                   if ( dateStr.toString() == YourDates[i].toString() ) 
                    {
                        $(element).css("background", "red"); // it will set backgroud of that date

                    }

                }


      }

for More Info :dayRender:FullCalender

Answer 3

The calendar triggers the event 'eventAfterRender' after each event draw. The same provides access to event and element as well. You can implement your requirement, by comparing the event.start or event.end date to current date, and change the color of the element as required.

Answer 4

For changing the background color I did in this manner

{
    title: 'Long Event',
    start: new Date(y, m, d - 5),
    end: new Date(y, m, d - 2),
    backgroundColor: App.getLayoutColorCode('green')
}

Hope this helps....