Fullcalendar - mettre en évidence un jour basé sur la sélection de l'événement

Désolé c'est une ébauche de solution, surtout à partir de la mémoire, comme je ne suis pas configuré avec tous les outils de dev sur cet ordinateur.

J'espère que c'est ce que vous cherchez!

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

Ici est un peu plus simple solution qui a fonctionné pour moi:

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

...qui se passe à l'intérieur de votre gestionnaire de clic, comme:

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

    }
});

Noter que c'est à l'aide de la dayClick gestionnaire de la place de la eventClick gestionnaire. Je ne vois pas pourquoi il ne devrait pas travailler avec eventClick ainsi, mais je n'ai pas testé encore.

Edit:

À l'aide d'une approche comparable pour la eventClick gestionnaire s'est avéré plus compliqué que ce que je croyais être. Le problème est que, en termes de hiérarchie DOM, il n'y a pas de relation parent/enfant entre le contenant td élément pour un "jour" et le contenant div éléments pour les événements montre que ce processus se déroule sur une journée.

Donc j'ai dû écrire une fonction pour la recherche de la bonne td élément pour une date donnée. Je me suis retrouvé avec quelque chose comme:

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

...et puis j'ai pu mettre en œuvre eventClick comme ceci:

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

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

Mon prendre sur aroth du finder fonction

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

Ne sais pas si cela aide, mais j'ai trouvé que cela fonctionne tout à fait bien, semblable à kayz1 la solution...

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

Si vous mettez à niveau à fullcalendar v2 ou plus elle est très simple:

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

Voici le lien pour eventClick.