Fullcalendar - 根据事件选择突出显示一天

Question

在fullcalendar中,您可以选择事件(触发)eventClick函数/回调.我想要做的是突出显示事件发生的那一天(在月视图中).

例如,如果事件是在10月30日,我选择了该事件,我希望突出显示当天的背景颜色.这与fullcalendar处理"今天"的方式非常相似,今天它以黄色突出显示.

我似乎无法弄清楚如何将fc-event类或事件对象本身绑定到日历中的实际日div.我的10月30日活动出现在以下div中(即10月30日的方框):

<div class="fc-sun fc-widget-content fc-day35 fc-first">

如何基于事件对象找到这个div(以便我可以突出显示它)？

Answer 1

您只需在完整日历中使用select方法即可.

例如:

$('#calendar').fullCalendar('select', date);

date来自哪里event.start:

eventClick: function( event, jsEvent, view ) {
    //pass event.start to select method
}

Answer 2

对不起,这是一个粗略的解决方案,主要来自内存,因为我没有在这台计算机上安装任何开发工具.

希望这是你正在寻找的!

//create fullCalendar:
$("#calendar").fullCalendar({
    /* options */

    eventClick: function(event, jsEvent){
        //use the passed-in javascript event to get a jQuery-wrapped reference
        //to the DOM element we clicked on.
        //i can never remember if this is .target, .currentTarget, or .originalTarget
        //... jquery has spoiled me
        var $clickedEvent = $(jsEvent.target);

        //tell the "selectionManager" to find the day this event belongs to,
        //and add the "selected" css class to it
        selectionManager.select($clickedEvent);
    }
});

//define an object that handles the adding-removing of the 'selectedDay' css class
var selectionManager = (function(){
    //i like making private variables :-)
    var $curSelectedDay = null

    //define a "select" method for switching 'selected' state
    return {
        select: function($newEvent) {
            if ($curSelectedDay){
                //if we already had a day chosen, let's get rid of its CSS 'selectedDay' class
                $curSelectedDay.removeClass("selectedDay");
            }
            //find the parent div that has a class matching the pattern 'fc-day', and add the "selectedDay" class to it
            $curSelectedDay = $thisEvent.closest('div[class~="fc-day"]').addClass("selectedDay");
        }       
    };
})();