Fullcalendar ne rend pas la couleur lors de l'utilisation de eventRender

Question

Lorsque je configure fullCalendar et que je définis la fonction de rappel eventRender, je veux définir la couleur de l'événement en fonction de la valeur de LeadId. Mais cela ne semble pas fonctionner même si la documentation le dit : http://arshaw.com/fullcalendar/docs/event_data/Event_Object/#color-options

Y a-t-il un moyen de définir la couleur de l'événement en fonction des données ?

 calendar = $('#dayview').fullCalendar({
            ....
            timeFormat: 'HH:mm',
            columnFormat: {
                agendaDay: 'dddd dd/MM/yyyy'
            },
            eventClick: function (calEvent, jsEvent, view) {
                var leadUrl = "/Leads/" + calEvent.LeadId;
                window.location = leadUrl;
            },
            eventRender: function (event, element) {
                if (event.LeadId != null) {
                    event.eventColor =  "#B22222";
                    event.eventBackColor = "#B22222";                       
                }
            },

MISE À JOUR :

C'est vraiment étrange. L'événement a toutes mes propriétés renvoyées pour l'événement du serveur. element est juste l'élément DOM pour l'événement. Lorsque je fais glisser/déplacer l'événement ailleurs dans le calendrier, l'événement devient rouge, et si j'inspecte l'objet événement, la couleur est maintenant définie sur Rouge. Donc la question est pourquoi cela ne s'applique-t-il pas au premier rendu, mais lors des rendus ultérieurs (c'est-à-dire après le déplacement), la couleur est appliquée ?

Answer 1

EDIT 2: Quelques nouveaux changements à la classe fc-event-skin... c'est maintenant seulement fc-event, donc le style ne devrait pas poser de problème. Veuillez consulter la note de l'auteur ici classe fc-event de fullcalendar...

EDIT 1: Peut-être pas vraiment un bug.

La meilleure approche est de définir la className dans l'objet event et de l'ajouter aux éléments trouvés par une classe 'fc-event-skin'. Cependant, votre classe ajoutée viendra plus tard dans le css et les couleurs ne seront pas prioritaires, donc vous devez utiliser !important. Cela préserve également les coins arrondis "faux"...

Connectez cette méthode sur le calendrier...

eventRender:
function (event, element, view) {
    element.find('.fc-event-skin').addClass(event.className.join(' '));
}

Ceci dans votre propre feuille de style...

.redGray
{
    border-color: DarkGray !important;
    background-color: LightGray !important;
    color: red !important;
}

RÉPONSE ORIGINALE:

Je pense que c'est un bug mineur dans le code de rendu. Le paramètre d'élément est un objet jQuery, vous pouvez donc le modifier en fonction de vos données d'événement personnalisées. Si vous définissez le style et le texte de l'élément, il sera rendu avec la couleur que vous avez définie; cependant, il me semble que d'autres styles sont supprimés de l'élément tels que les coins arrondis et le formatage de l'heure et du texte.

eventRender: 
function (event, element) {
    if (event.LeadId != null) {
        element.css('color', 'blue');
        element.css('background-color', 'yellow');
        element.text(element.text);
    }

Answer 2

Je crois qu'il s'agit d'un bogue, du moins en quelque sorte. Le problème est que dans renderEvents dans fullcalendar.js, le rappel EventRender est appelé après la fonction setSkinCSS. Ainsi, tout changement de couleur d'un élément ne sera pas reflété avant la prochaine fois qu'il sera rendu.

Je doute que la correction soit facile, mais je pense que cela constitue bel et bien un bogue. Il me semble que le rappel RenderEvent devrait être effectué très tôt, et certainement avant la génération du HTML.

(Ma solution de contournement est d'essayer de définir les couleurs des éléments bien avant les appels à fullcalendar - c'est-à-dire de ne pas utiliser le rappel EventRender de FullCalendar pour définir les couleurs)

Answer 3

Essayez d'utiliser la couleur au lieu de eventColor event.Color = "#B22222";

http://arshaw.com/fullcalendar/docs/event_data/Event_Object/

utilisez ce code

$('#calendar').fullCalendar('renderEvent', {
    id : 99,
    title : 'Un événement',
    start : y + '-' + m + '-28',
    color : 'red'
}, true);

fonctionne très bien pour moi!!

Answer 4

La mise à jour n°2 de la réponse acceptée mentionne que .fc-event-skin n'est plus nécessaire mais l'extrait de code n'a pas été mis à jour.

Vous pouvez désormais dire:

$('#calendar').fullCalendar({
    eventRender: function(event, element) {
        if (event.SomeBool) {
            element.addClass('black-background');
        }
    }
});

où dans votre feuille de style vous avez quelque part :

.black-background {
    color: white !important;
    background-color: black !important;
    border-color: black;
}

Et voilà ! Si certains de vos événements ont SomeBool défini sur true, ils auront un fond noir et un texte blanc.

Answer 5

Voici le code complet :

function addTestEvents() {

        var d = new Date();
        var y = d.getFullYear();
        var m = d.getMonth() + 1;
        if (m < 10)
        m = '0' + m;

        $('#calendar').fullCalendar('renderEvent', {
        id : 99,
        title : 'Un événement quelconque',
        start : y + '-' + m + '-28',
        color : 'rouge'
        }, true);
}