Fullcalendar - highlighting a day based on event selection

Question

In fullcalendar you can select an event (which triggers) the eventClick function/callback. What I would like to do is highlight the day of the event when the event is clicked (in month view).

For example, if the event is on October 30 and I select the event I would like the background color of the day to be highlighted. This is very similar to how fullcalendar handles "today" where it highlights today in a yellowish color.

I can't seem to figure out how to tie the fc-event class or the event object itself to the actual day div in the calendar. My October 30th event appears within the following div (which is the October 30 box):

<div class="fc-sun fc-widget-content fc-day35 fc-first">

How can I find this div (so that I can highlight it) based on the event object?

Answer 1

You can simply use the select method in full calendar.

For example:

$('#calendar').fullCalendar('select', date);

Where date comes from event.start:

eventClick: function( event, jsEvent, view ) {
    //pass event.start to select method
}

Answer 2

Sorry this is a rough solution, mostly from memory, as I'm not set up with any dev tools at this computer.

Hopefully this is what you're looking for!

//create fullCalendar:
$("#calendar").fullCalendar({
    /* options */

    eventClick: function(event, jsEvent){
        //use the passed-in javascript event to get a jQuery-wrapped reference
        //to the DOM element we clicked on.
        //i can never remember if this is .target, .currentTarget, or .originalTarget
        //... jquery has spoiled me
        var $clickedEvent = $(jsEvent.target);

        //tell the "selectionManager" to find the day this event belongs to,
        //and add the "selected" css class to it
        selectionManager.select($clickedEvent);
    }
});

//define an object that handles the adding-removing of the 'selectedDay' css class
var selectionManager = (function(){
    //i like making private variables :-)
    var $curSelectedDay = null

    //define a "select" method for switching 'selected' state
    return {
        select: function($newEvent) {
            if ($curSelectedDay){
                //if we already had a day chosen, let's get rid of its CSS 'selectedDay' class
                $curSelectedDay.removeClass("selectedDay");
            }
            //find the parent div that has a class matching the pattern 'fc-day', and add the "selectedDay" class to it
            $curSelectedDay = $thisEvent.closest('div[class~="fc-day"]').addClass("selectedDay");
        }       
    };
})();