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

});

Answer 5

weswesweswes is nearly correct view.element should be view.el

eventRender: function (event, element, view) { 

    var dateString = moment(event.start).format('YYYY-MM-DD');

    view.el.find('.fc-day[data-date="' + dateString + '"]').addClass('fc-has-event');

}

Answer 6

None of these will work for >=v2.0, since fullCalendar started using moment.js for date formatting.

The following worked for me (passed to fullCalendar initialization function):

eventRender: function (event, element, view) { 

var dateString = moment(event.start).format('YYYY-MM-DD');

view.element.find('.fc-day[data-date="' + dateString + '"]').addClass('fc-has-event');

}

Answer 7

You can add class on base of the fullcalender .fc-event class its not direct approach but its works.

Fiddle demo

   $(document).ready(function (){ 
   $(".fc-event").addClass("myclass");
  });

Answer 8

Heres another Fiddle JS FIDDLE

Just by adding

textColor: 'white',
backgroundColor:'purple' 

You can change the style

JS code:

$('#calendar').fullCalendar({

    eventSources: [

        // your event source
        {
            events: [
        {
            title  : 'event1',
            start  : '2013-01-01'
        },
        {
            title  : 'event2',
            start  : '2013-12-05',
            end    : '2013-12-07'
        },
        {
            title  : 'event3',
            start  : '2013-12-15'
        }],

            textColor: 'white',
            backgroundColor:'purple'
        }

        // any other event sources...

    ]

});

Answer 9

Fullcalendar v2, for agendaWeek view:

eventRender: function(event, element, view ){
    if(view.name=='agendaWeek') {
        var weekdays = new Array('sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat');
        var eventweekday = $.fullCalendar.moment(event.start).format('d');
        $('.fc-'+weekdays[eventweekday]).css('background-color', '#FFC');
    }
},

Highlights all days with events.

Answer 10

Had this same issue and had found a bunch of solutions for older versions of FullCalendar (which seemed a bit hacky anyway). However, in v5 you can use eventDidMount and traverse up the DOM to the day cell.

JS Code:

eventDidMount: function(info) {
    $(info.el).closest(".fc-daygrid-day").addClass("has-event");
}