web-dev-qa-db-fra.com

Ajouter du code HTML personnalisé à une cellule jQuery FullCalendar

J'utilise le jQuery FullCalendar ( http://arshaw.com/fullcalendar/docs/ ).

Je veux ajouter du code HTML personnalisé à chaque cellule journalière. 

Par exemple, dans mon cas, je veux avoir différentes couleurs de fond basées sur une logique, afficher un prix au milieu ...

sample calendar

Existe-t-il un moyen de personnaliser le rendu d'une cellule?

jquerycalendarrenderingfullcalendar
12
Nathan H

Je vais expliquer comment j'ai résolu ce problème pour d'autres personnes.

J'ai utilisé le eventAfterRender callback. Dans celui-ci, jQuery a été utilisé pour analyser le paramètre "element" et réécrire le code HTML avant son envoi au navigateur.

6
Nathan H

La façon dont je fais cela est comme Conners a indiqué:

eventRender: function(event, element) {
    element.find(".fc-event-title").remove();
    element.find(".fc-event-time").remove();
    var new_description =   
        moment(event.start).format("HH:mm") + '-'
        + moment(event.end).format("HH:mm") + '<br/>'
        + event.customer + '<br/>'
        + '<strong>Address: </strong><br/>' + event.address + '<br/>'
        + '<strong>Task: </strong><br/>' + event.task + '<br/>'
        + '<strong>Place: </strong>' + event.place + '<br/>'
    ;
    element.append(new_description);
}
16
Gjermund Dahl

C’est ainsi que j’ai traité cette question dans ma candidature.

Dans fullcalendar.js, vous devez trouver ceci:

html +=
    "<span class='fc-event-title'>" +
    htmlEscape(event.title || '') +
    "</span>" +
    "</div>";

C'est ici que le contenu de la cellule est créé.

Je voulais avoir l'heure de l'événement sur le côté droit de la cellule, alors:

html +=
    "<span class='fc-event-title'><div style='float:right'>" + moment(event.start).format('hh:mm a') + "</div>" +
    htmlEscape(event.title || '') +
    "</span>" +
    "</div>";

J'utilise la bibliothèque momentjs pour formater l'heure.

Maintenant, vous pouvez ajouter ce que vous voulez au contenu de la cellule du calendrier et utiliser le format HTML standard pour le formater.

3
Nicolas Giszpenc

Cette réponse fourni une méthode très simple qui a fonctionné pour moi:

cell.prepend('<span class="selector">' + ReturnCellNumber(cellDay,cellMonth,cellYear) + '</span>');
2
mark groeneveld

J'avais utilisé la réponse de Gjermund Dahl ci-dessus jusqu'à ce que je modifie mon calendrier. Avec cette méthode, je peux rendre la mise en forme différente pour différentes vues. Lorsque le calendrier utilise des listes et des calendriers, la suppression de la classe de titre dans une action globale lors du rendu génère des résultats variés selon les différentes vues.

eventRender: function(event, element) {

    // explore the element object
    // console.log(element);        

    // edit list view titles
    // during the render, check for the list class to be in the element
    // if there is a fc-list-class then we are going to make our changes accordingly
    if( element[0].className === 'fc-list-item' ){
        // create your new name
        var x = '<strong>' + event.title + ' ' + model + '</strong><br/>' +  cust;
        // create array to be added to element                   
        var update = { innerHTML: x };
        // replace element with update value in the right place    
        $.extend( true, element[0].childNodes[2], update ); 
    }

    // edit timeline view titles
    // during the render, check for the timeline class to be in the element
    // if there is a fc-timeline-event then we are going to make our changes accordingly
    if( element[0].className.indexOf( 'fc-timeline-event' ) === 0 ) {
        var x = '<span class="fc-title">' + '<strong>'
        + customer + '</strong><br/>'+ new + ' ' + make + ' ' + model + '</span>';
        // create array to be added to element                   
        var update = { innerHTML: x };
        // replace element with update value in the right place    
        $.extend( true, element[0].childNodes[0].firstChild, update );
    } 
}

Notez les différents endroits ajoutés dans les deux vues. Vous devrez explorer votre objet élément pour voir où vous voulez votre nouveau contenu. Vous pouvez également choisir où effectuer ce changement avec davantage de contrôle. Changez le innerHTML, ou le innerText, ou tout ce que votre coeur désire.

0
jchuck

Essaye ça:

  eventRender: function (event, element) {
            let new_description = '<div class="fc-content"><span class="fc-title '+event.className+'">' + event.title + '</span>'
                + '<span class="fc-time">' + event.start.format('hh:mma') + '-' + event.end.format('hh:mma') + '</span>'
                + '<span class="' + event.statusCss + '">' + event.status + '</span></div>'
            ;
            element.html(new_description);
        }
0
Tanavirrul haq

Ici, vous pouvez obtenir ceci:

    dayRender: function(date, cell) {
            cell.append('<div style="text-align:center; background-color:blue; color:#fff;padding:2px 0;margin-top:20px;">Add Your Text!</div>');
           },

Pour plus d'informations: Ajouter du code HTML personnalisé à une cellule jQuery FullCalendar

0
Ajay Malhotra