Highlight selected date in FullCalendar

Question

I am trying to make the selected day in FullCalender.io highlighted (similar to the current day).

Following FullCalendar - select a specific day as a week. I tried the following, which basically translates the calendar by clicking and selects a cell that the date corresponds to the date of the click.

dayRender: function(date, cell) { var moment = $('#calendar').fullCalendar('getDate'); if (moment.get('date') == date.get('date')) { $(cell).addClass('fc-state-highlight'); } else { $(cell).removeClass('fc-state-highlight'); } }, dayClick: function (date, allDay, jsEvent, view) { $('#calendar').fullCalendar('render'); }, 

But it does nothing. :-(

Answer 1

you can use this code snippet in v1.x file

 $('#calendar').fullCalendar({ dayClick: function (date, allDay, jsEvent, view) { $(".fc-state-highlight").removeClass("fc-state-highlight"); $(jsEvent.target).addClass("fc-state-highlight"); } }); 

V2.x

 $('#calendar').fullCalendar({ dayClick: function (date, jsEvent, view) { $(".fc-state-highlight").removeClass("fc-state-highlight"); $(jsEvent.target).addClass("fc-state-highlight"); } }); 

CSS .fc-state-highlight {background:red;}

Note: this can be achieved in other ways, also using the data-date attribute for the cell parameter and date for the dayClick function

 $('#calendar').fullCalendar({ dayClick: function (date, jsEvent, view) { $(".fc-state-highlight").removeClass("fc-state-highlight"); $("td[data-date="+date.format('YYYY-MM-DD')+"]").addClass("fc-state-highlight"); } }); 

Answer 2

Based on another answer, this will do what you need:

 dayClick: function (date, jsEvent, view) { $('.fc-day').each(function () { $(this).removeClass("fc-state-highlight"); }); $("td[data-date=" + date.format() + "]").addClass("fc-state-highlight"); }, 

Answer 3

V2.x

 $('#calendar').fullCalendar({ dayClick: function (date, jsEvent, view) { $(".fc-state-highlight").removeClass("fc-state-highlight"); $(this).addClass("fc-state-highlight"); } }); 

CSS .fc-state-highlight {background:red;}

Answer 4

One quick solution is to use selectable :

 var calendar = $('#calendar'); calendar.fullCalendar({ selectable: true }) 

Even roughly this option Allows a user to highlight multiple days or timeslots by clicking and dragging (source: https://fullcalendar.io/docs/selection/selectable/ ), it has the side effect of highlighting the selected day if you click only one day .