Fullcalendar-выделение дня на основе выбора события

вы можете просто использовать выберите способ в полный календарь.

например:

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

здесь date происходит от event.start:

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

вот немного более простое решение, которое сработало для меня:

$(".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 также, но я еще не проверил это.

Edit:

использование сопоставимого подхода для eventClick обработчик оказался более сложным, чем я я так и думал. Проблема в том, что с точки зрения иерархии DOM между содержащим 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");
}

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

есть ли лучшее решение?

мой взгляд на функцию finder 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;
    }

благодаря ответу Фитца Агарда за существование fullcalendar выберите метод, вот версия, которая работает даже для нескольких дней событий.

в основном он пытается найти день, когда координаты щелчка мыши находятся внутри, а затем передает свою дату в 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
  }
});

EDIT:

Я только что понял fullCalendar выберите метод не вызывает dayClick обратный. Итак, если вы установили dayClick обратный вызов вы должны обернуть его в функцию (называемую myDayClick здесь) и позвоните в eventClick обратный. Если у вас нет dayClick обратный вызов, то вы можете удалить дополнительно запасные части.

Не уверен, что это помогает, Но я обнаружил, что это работает довольно хорошо, подобно решению kayz1...

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

так много ответов. Небольшие исследования дают мне более четкий код: 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");
};

при обновлении до fullcalendar v2 или выше это очень просто:

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

вот ссылка eventClick.