Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highlighting the selected date in FullCalendar

Tags:

fullcalendar

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. :-(

like image 363
Robbie Mills Avatar asked May 10 '15 02:05

Robbie Mills


People also ask

How do I highlight the date in Fullcalendar?

fullCalendar('getDate'); if (moment. get('date') == date. get('date')) { $(cell). addClass('fc-state-highlight'); } else { $(cell).

How do I turn off past dates in Fullcalendar?

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.


2 Answers

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");
   }
});
like image 196
valar morghulis Avatar answered Oct 02 '22 23:10

valar morghulis


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");
},
like image 35
Evonet Avatar answered Oct 02 '22 21:10

Evonet