jQuery fullCalendar set background color for cell

Question

I want to set background-color for cell with date 2014-10-22. I find a solution:

         date = new Date(y,m,d);
        date = $.fullCalendar.formatDate(date,          


        

Answer 1

Try this:

var $calendar = $('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
    },

    defaultView: 'month',    
    dayRender: function (date, cell) {
         date = new Date();
         date = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
         $('.fc-day[data-date="'+ date +'"]').addClass('cellBg');
    }
});

see Fiddle

Answer 2

Fergoso: Thanks for your Fiddle. It helped me a lot. I wanted to color the Saturdays, Sundays, and some specific holidays, so, I just updated the Fiddle to do it: http://jsfiddle.net/CYnJY/203

This are the only things I changed there:

//Month is zero-based, so, 9 is october
var holiday_date = new Date(2014,9,20);
var date_as_locale = date.toLocaleDateString();
if (date_as_locale == holiday_date.toLocaleDateString()) {
    enter code here`cell.css("background-color", "red");
}
holiday_date = new Date(2014,9,27);
if (date_as_locale == holiday_date.toLocaleDateString()) {
    enter code here`cell.css("background-color", "red");
}
var day_of_the_week = date.getDay();
if ((day_of_the_week == 0) || (day_of_the_week == 6)){
    cell.css("background-color", "red");
}

I only have there two holidays: 20th and 27th of October, 2014. I now there is a better way of doing this, but for now it can be used for demonstration purposes. I will improve it later in order to: 1) The holidays must be independent of the year, ie: the 1st of January must be selected for all years and not just in 2014. 2) The holidays should come from a database, something like the answer from milz here: Add Italian holidays into fullcalendar

PS: This should be a comment to Fergoso's solution, but since I don't have enough reputation, I can't post it as a comment.

Best regards Josef

Answer 3

CSS solution helped me fix this:

For Today date:-

.fc-today {
        background-color: #ffffff;
 }

 .ui-widget-content .ui-state-highlight {
        background-color: #fff !important;
        background-image: none;
 }

For Other days:

.fc-day {
        background-color: green;
}

Good Luck.

Answer 4

@user3058157 wanted to highlight holidays on the agenda views. Unfortunately, according to the docs of FullCalendar 2.1.1 the dayRender callback only works with the month and the basic views. I tried with the agenda views, but no luck.

Some people even talked about hacking the source and insert your own function/trigger. I really don't like this approach because it possible won't work with later versions, so, what I did was to use an eventSource which uses a json feed and set the color and TextColor event properties like this:

$('#calendar').fullCalendar({
    //Add your configuration properties here
    //...
    eventSources: [
    {
        url: 'get_events.php',
        type: 'POST',
        error: function() {
        alert('there was an error while fetching events!');
    }
});

Then you just have to create the get_event.php file. Mine looks like this (please note that this is a proof of concept, the original data should actually come from a database, I know it isn't efficient, and you even can get only the events you want according to the start and end date and not just create all of them each time you call the php page):

    $events = array();
    //Holidays (I included Saturdays and Sundays as well)
    $events[] = array(
        //You can add an id if you want. This is useful if you
        //want to delete the event afterwards
        "id" => 1,
        //Make sure to use utf8_encode if you have special chars
        "title" => utf8_encode("New year"),
        //background and text color for holidays
        "color" => "#C0C0C0",
        "textColor" => "#000000",
        //I only added this fields in order to be able to
        //compare my dates with the ones given by FullCalendar.
        //With a database you won't need this, ie: in mysql you
        //only need to pass the start and end date strings
        "start_date_time" => new DateTime('2014-01-01 00:00:00'),
        "end_date_time" => new DateTime('2014-01-01 23:59:59'),
        //Make sure to do this if you aren't using the allDay Slot
        "allDay" => False,
        //This is a flag I included to differentiate this event
        //from the user events. I'm dynamically deleting events
        //when the user clicks on them, but this excludes holidays
        "holiday" => True
    );
    //Add some more here
    //...

    //Now your own events
    $events[] = array(
        "id" => 30,
        "title" => utf8_encode("Team meeting"),
        "start_date_time" => new DateTime('2014-01-08 10:00:00'),
        "end_date_time" => new DateTime('2014-01-08 10:30:00'),
    );

    //The following is only to simulate a search based
    //on the start and end dates (It is inefficient, I know, but it's
    //a proof of concept as I said) 
    $events_for_web = array();
    foreach ($events as $event)
    {
        if (($start <= $event["start_date_time"]) && ($event["end_date_time"] <= $end))
        {
            //start_date_time and end_date_time must be converted to a string
            //because this is the format supported by FullCalendar
            $event["start"] = $event["start_date_time"]->format('Y-m-d H:i:s');
            $event["end"] = $event["end_date_time"]->format('Y-m-d H:i:s');
            $events_for_web[] = $event;
        }
    }

    //Now just output everything as json, which is what
    //FullCalendar expects:
    echo json_encode($events_for_web);
?>

I hope that this is useful to you.

Best regards Josef