CODEWITHSUNDEEP
phpjquerypythonjsonfullcalendar
Renjitha
Renjitha

Reputation: 49

change the background color of the events in FullCalendar

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

Upvotes: 1

Views: 15861

Answers (4)

Smit kalwal
Smit kalwal

Reputation: 432

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....

Upvotes: 1

Anil Mahajan
Anil Mahajan

Reputation: 214

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

Upvotes: 2

loganup1
loganup1

Reputation: 11

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.

Upvotes: 1

ncrocfer
ncrocfer

Reputation: 2570

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;
}

Upvotes: 6

Related Questions