How to highlight a day which has an event in FullCalendar.js?

You can use eventRender() property of Full Canendar.

This works for me with fullcalendar v2:

$('#calendar').fullCalendar({
         events: [
        {
            title  : 'event1',
            start  : '2014-04-01'
        },
        {
            title  : 'event2',
            start  : '2014-04-05',
        },
        {
            title  : 'event3',
            start  : '2014-04-15'
        }
    ],
    eventRender: function (event, element, view) { 
        // like that
        var dateString = moment(event.start).format('YYYY-MM-DD');
        $('#calendar').find('.fc-day-number[data-date="' + dateString + '"]').css('background-color', '#FAA732');
     }

});

Note: You will need Moment library for this.


I could not find a desired property or method to use in the documentation of Fullcalendar.

I came up with a kind of a messy solution: adding a class by data-attributes:

function addClassByDate(date) {
    var dataAttr = getDataAttr(date);
    $("[data-date='" + dataAttr + "']").addClass("hasEvent");
}

function getDataAttr(date) {
    return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate().toString().length === 2 ? date.getDate() : "0" + date.getDate());
};

It works fine for the settings, you've provided in your question.

The working example could be found here: http://jsfiddle.net/6NShN/9/


This is how I did it to give background color to each and every events.

JS FIDDLE DEMO

events: [
     {
       title: 'Test1',
       start: new Date(2014, 2, 28, 12, 0),
       end: new Date(2014, 2, 30, 12, 0), 
       backgroundColor: '#80ACED',
     },
     {
       title: 'Test2',
       start: new Date(2014, 2, 14, 3, 55),
       end: new Date(2014, 2, 21, 12, 0), 
       backgroundColor: '#80ACED',
     },
     {
       title: 'Test3',
       start: new Date(2014, 2, 2, 12, 0),
       end: new Date(2014, 2, 2, 12, 0), 
       backgroundColor: '#E82525',
     }
       ]

Hope this helps. Refer : http://arshaw.com/fullcalendar/docs/event_data/Event_Object/