Question

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

关注FullCalendar - Highlight a particular day in week view我尝试了以下内容，它基本上会在点击时重新呈现日历，并突出显示日期与点击日期匹配的单元格。

    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的{{1}}参数

，也可以通过其他方式实现此目的

dayClick

Answer 2

在另一个答案的基础上，这将满足您的需求：

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

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

Answer 3

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

Answer 4

一种快速解决方法是使用selectable：

var calendar = $('#calendar'); 

calendar.fullCalendar({
  selectable: true
})

即使选择Allows a user to highlight multiple days or timeslots by clicking and dragging（来源：https://fullcalendar.io/docs/selection/selectable/），如果您只点击一天，它也会突出显示所选日期的副作用。

在FullCalendar中突出显示所选日期

4 个答案: