Fullcalendar - highlighting a day based on event selection

Arthur Frankel picture Arthur Frankel · Oct 19, 2011 · Viewed 28.4k times · Source

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

Fitz Agard picture Fitz Agard · Apr 17, 2013

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
}