在FullCalendar中突出显示所选日期

Question

我正在尝试突出显示FullCalender.io中的选定日期(类似于当前日期).

在FullCalendar之后- 突出显示周视图中的特定日期我尝试了以下操作,它基本上是在点击时重新呈现日历,并突出显示日期与点击日期匹配的单元格.

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

但它没有做任何事情.:-(

Answer 1

你可以在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;}

注意:这也可以通过利用data-date单元属性和date函数参数等方式来实现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");
   }
});