Highlighting the selected date in FullCalendar

Question

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

It doesn't look like dayclick is calling the render function — Robbie Mills, May 13 '15 at 00:56
have you tried the answer i have posted below, i hope it solves your problem — valar morghulis, May 13 '15 at 03:56

valar morghulis · Accepted Answer · 2015-05-13T06:19:40.457

14

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

edited May 13 '15 at 06:19

answered May 13 '15 at 02:57

valar morghulis

2,007
27
34

I've tried your v2.x option and it highlights the day (although for some reason takes many clicks on some cells before they work?) but doesn't unhighlight the old cells. So you end up with every cell looking like it's 'selected' – Robbie Mills May 13 '15 at 05:00
The last option using data-date is much more reliable with the clicks, so will use that, but it still needs to unselect all other days – Robbie Mills May 13 '15 at 05:01
Robbie i have added the required code, and you can use whichever method you feel comfortable or works for you. – valar morghulis May 13 '15 at 05:36
Just one small item - in week view this doesn't work and the console brings up Uncaught Error: Syntax error, unrecognized expression: td[data-date=2015-05-12T10:00:00], any ideas? – Robbie Mills May 13 '15 at 06:07
1

Actually I fixed this by changing to date.format('YYYY-MM-DD') – Robbie Mills May 13 '15 at 06:14
1

ok i added it to the answer and also the previous `.format()` would work fine for `basicWeek` but for `agendaWeek` you got the solution right. – valar morghulis May 13 '15 at 06:21
just want to know how to use the above solution in angular typescript v12 – Manish Gupta May 08 '23 at 13:04

score 3 · Answer 2 · answered May 13 '15 at 05:20

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

score 1 · Answer 3 · answered Aug 31 '16 at 05:55

1

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

answered Aug 31 '16 at 05:55

Sachin Jain

147
1
10

score 1 · Answer 4 · answered Aug 18 '17 at 02:33

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.

Highlighting the selected date in FullCalendar

4 Answers4