I'm trying to make the selected day in FullCalender.io highlighted (similarly to how the current day is).
Following FullCalendar - Highlight a particular day in week view I've tried the following, which basically re-renders the calendar on a click, and highlights the cell who's date matches the clicked date .
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's not doing anything. :-(
fullCalendar('getDate'); if (moment. get('date') == date. get('date')) { $(cell). addClass('fc-state-highlight'); } else { $(cell).
You can try the following thread's solution(dayClick or select function to disable the dayclick for the past dates in fullcalendar). You can visit the fullcalendar support center and post your fullcalendar question on the StackOverflow fullcalendar tag.
you can use this piece of code in v1.x
$('#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 achived by other ways also by making use of data-date
attribute of cell and date
parameter of function dayClick
$('#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");
}
});
Building on from the other 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");
},
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With