CODEWITHSUNDEEP
fullcalendar
Robbie Mills
Robbie Mills

Reputation: 2945

Highlighting the selected date in 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. :-(

Upvotes: 8

Views: 23676

Answers (4)

sandre89
sandre89

Reputation: 5908

One quick workaround is to use selectable:

var calendar = $('#calendar'); 

calendar.fullCalendar({
  selectable: true
})

Even tough 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 only click on one day.

Upvotes: 1

Sachin Jain
Sachin Jain

Reputation: 137

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;}

Upvotes: 1

valar morghulis
valar morghulis

Reputation: 2017

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");
   }
});

Upvotes: 14

Evonet
Evonet

Reputation: 3640

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");
},

Upvotes: 3

Related Questions