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

Question

I am using FullCalendar.js in my website. I have set events from backend. I want to change look of the day which has an event. In other words I need some sort of class where I have "fc-day" and an event in it.

My code looks like and you see it on jsFiddle:

$('#calendar').fullCalendar({
    events: [{
        title: 'event1',
        start: '2013-01-01'
    }, {
        title: 'event2',
        start: '2013-12-05',
        end: '2013-12-07'
    }, {
        title: 'event3',
        start: '2013-12-15'
    }]
})

Answer 1

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.

Answer 2

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/

Answer 3

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/

Answer 4

Finally this is how it worked for me take a look at this

jsfiddle

$('#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 = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd');
        view.element.find('.fc-day[data-date="' + dateString + '"]').css('background-color', '#FAA732');
     }

});