在FullCalendar中突出显示所选日期

我正试图突出显示FullCalender.io中选定的日期（与当前日期类似）

下面我尝试了下面的方法，它基本上在单击时重新呈现日历，并突出显示与单击日期匹配的单元格

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

---

但它什么也没做-（

您可以在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

CSS

.fc状态突出显示{背景：红色；}

注意：这也可以通过其他方式实现，方法是利用单元格的

数据日期

属性和函数的

日期

参数

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

---

根据另一个答案，这将满足您的需要：

dayClick: function (date, jsEvent, view) {
    $('.fc-day').each(function () {
        $(this).removeClass("fc-state-highlight");
    });

    $("td[data-date=" + date.format() + "]").addClass("fc-state-highlight");
},

v2.X

---

CSS

.fc状态突出显示{background:red；}

一个快速解决方法是使用

可选的

：

var calendar = $('#calendar'); 

calendar.fullCalendar({
  selectable: true
})

---

甚至这个选项

也允许用户通过单击并拖动来突出显示多天或多个时间段（来源：），如果只单击一天，则会有突出显示所选日期的副作用。
发出警报，查看时刻日期是否正确比较dayclick似乎没有调用渲染功能请提及您的完整日历版本我正在使用最新版本-2.3.1您尝试过我在下面发布的答案吗，希望它能解决您的问题我试过你的v2.x选项，它突出了这一天（尽管出于某种原因，在某些单元格工作之前需要多次单击？）但不要取消选中旧单元格。因此，最终每个单元格看起来都是“选中”的。最后一个使用数据日期的选项通过单击更可靠，因此将使用该选项，但它仍然需要取消选中所有其他日期。如果我添加了所需的代码，您可以使用任何您觉得舒服或适合您的方法。实际首先，我通过更改为date.format（'YYYY-MM-DD'）解决了这个问题。好的，我将它添加到了答案中，并且前面的
。format（）
对于
basicWeek
来说效果很好，但是对于
agendaWeek
来说，您得到了正确的解决方案。
$('#calendar').fullCalendar({
  dayClick: function (date, jsEvent, view) {
    $(".fc-state-highlight").removeClass("fc-state-highlight");
    $(this).addClass("fc-state-highlight");
  }
});

var calendar = $('#calendar'); 

calendar.fullCalendar({
  selectable: true
})