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 method即可。

例如：

$('#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");
        }       
    };
})();

Answer 3

这是一个对我有用的稍微简单的解决方案：

$(".fc-state-highlight").removeClass("fc-state-highlight");
$(jsEvent.currentTarget).addClass("fc-state-highlight");

...进入点击处理程序，如：

$('#eventCalendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
        $(".fc-state-highlight").removeClass("fc-state-highlight");
        $(jsEvent.currentTarget).addClass("fc-state-highlight");

    }
});

请注意，这是使用dayClick处理程序而不是eventClick处理程序。我不明白为什么它不应该与eventClick一起使用，但我还没有测试过。

修改

对eventClick处理程序使用类似的方法被证明比我想象的要复杂得多。问题在于，就DOM层次结构而言，“day”的包含td元素与显示为发生的事件的包含div元素之间不存在父/子关系那天。

所以我必须编写一个函数来查找给定日期的正确td元素。我最终得到了类似的东西：

function findContainerForDate(date) {
    var firstDayFound = false;
    var lastDayFound = false;
    var calDate = $('#eventCalendar').fullCalendar('getDate');

    var allDates = $('td[class*="fc-day"]')
    for (var index = 0; index < allDates.length; index++) {
        var container = allDates[index];
        var month = calDate.getMonth();
        var dayNumber = $(container).find(".fc-day-number").html();
        if (dayNumber == 1 && ! firstDayFound) {
            firstDayFound = true;
        }
        else if (dayNumber == 1) {
            lastDayFound = true;
        }

        if (! firstDayFound) {
            month--;
        }
        if (lastDayFound) {
            month++;
        }

        if (month == date.getMonth() && dayNumber == date.getDate()) {
            return container;
        }
    }
}

...然后我可以像这样实现eventClick：

eventClick: function(calEvent, jsEvent, view) {
    var selectedContainer = findContainerForDate(calEvent.start);

    $(".fc-state-highlight").removeClass("fc-state-highlight");
    $(selectedContainer).addClass("fc-state-highlight");
}

Answer 4

eventRender: function (event, element, view) {          
        // like that
        var dateString = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd');
        view.element.find('.fc-day[data-date="' + dateString + '"]').css('background-color', '#FAA732');

        // or that
        var cell = view.dateToCell(event.start);
        view.element.find('tr:eq(' + (cell.row + 1) + ') td:eq(' + cell.col + ')').css('background-color', '#FAA732');
    }

有更好的解决方案吗？

Answer 5

我对aroth的取景器功能的看法

     // based on the given event date return the full calendar day jquery object (<td ...>)
     // matching day and month
     //
     // assumptions:
     //  - the event date is if for the same year as the current viewable month
     //  - the fc-day* TD's are in chronological order
     //  - the fc-day* TD's not for the current month have a class of fc-other-month
     //
    findFullCalendarDayForClickedEvent : function( eventDate ) {

        var foundDay;

        var $theCalendar = $( '#myCalendar' );

        var currentDate = $theCalendar.fullCalendar( 'getDate' );
        var fullCalendarDayContainers = $theCalendar.find( 'td[class*="fc-day"]' );

        for( var i = 0; i < fullCalendarDayContainers.length; i++ ) {

            var $currentContainer = $( fullCalendarDayContainers[ i ] );

            var dayNumber = $currentContainer.find( '.fc-day-number' ).html();

            // first find the matching day
            if ( eventDate.getDate() == dayNumber ) {

                // now month check, if our current container has fc-other-month
                // then the event month and the current month needs to mismatch,
                // otherwise container is missing fc-other-month then the event
                // month and current month need to match
                if( $currentContainer.hasClass( 'fc-other-month' ) ) {

                    if( eventDate.getMonth() != currentDate.getMonth() ) {
                        foundDay = $currentContainer;
                        break;
                    }
                }
                else {
                    if ( eventDate.getMonth() == currentDate.getMonth() ) {
                        foundDay = $currentContainer;
                        break;
                    }
                }
            }
        }

        return foundDay;
    }

Answer 6

感谢Fitz Agard对fullcalendar select 方法的回答，这里的版本甚至适用于多天活动。

基本上它会尝试找到鼠标点击坐标所在的那一天，然后将其日期传递给fullcalendar 选择方法。

function findClickedDay(e) {
 var days = $('#calendar .fc-day');
  for(var i = 0 ; i < days.length ; i++) {
      var day = $(days[i]);
      var mouseX = e.pageX;
      var mouseY = e.pageY;
      var offset = day.offset();
      var width  = day.width();
      var height = day.height();

      if (    mouseX > offset.left && mouseX < offset.left+width 
           && mouseY > offset.top  && mouseY < offset.top+height )
         return day;
  }
}

function myDayClick(date) { ... } // Optional

$('#calendar').fullCalendar({
  dayClick: function(date) { myDayClick(date); }, // Optional
  eventClick: function(event, jsEvent, view) {
    clickedDay = findClickedDay(jsEvent);
    var date = new Date(clickedDay.data('date'));
    $('#calendar').fullCalendar('select', date);
    myDayClick(date); // Optional
  }
});

修改

我刚刚意识到fullCalendar select 方法不会触发 dayClick 回调。因此，如果您设置了 dayClick 回调，则必须将其包装在一个函数（此处称为 myDayClick ）中，并在 eventClick 回调中调用它。如果您没有 dayClick 回调，则可以删除可选部分。

Answer 7

不确定这是否有帮助，但我发现这很有效，类似于kayz1的解决方案......

            $("[data-date='" + $.datepicker.formatDate('yy-mm-dd', new Date(calEvent.start)) + "']").addClass("fc-state-highlight");

Answer 8

这么多答案。很少的调查给我更清晰的代码：fullcalendar v2.1.1

 onDayClick = function( date, jsEvent, view ){
    var cell = view.dateToCell(date);
    var el = view.dayGrid.getCellDayEl(cell);
    var $clickedEvent = $(el);
    $clickedEvent.addClass("SelectedDay");
};

Answer 9

如果升级到fullcalendar v2或更高版本，则非常简单：

$('#calendar').fullCalendar({
    eventClick: function(calEvent, jsEvent, view) {
        // change the border color just for fun
        $(this).css('border-color', 'red');
    }
});

以下是eventClick的链接。