Fügen Sie benutzerdefinierte HTML, jQuery FullCalendar Zelle

Die Art, wie ich tun dies ist, wie Conners angegeben:

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

InformationsquelleAutor Gjermund Dahl

Dies ist die Art, wie ich behandelt dieses Problem in meiner Anwendung.

In fullcalendar.js Sie müssen, um diese zu finden:

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

Dies ist, wo der Inhalt der Zelle erstellt wird.

Wollte ich die Zeit der Veranstaltung auf der rechten Seite der Zelle, so:

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

Ich bin mit dem momentjs Bibliothek zur Formatierung der Zeit.

Nun, Sie können hinzufügen, was Sie wollen, den Kalender, den Inhalt einer Zelle, und verwenden Sie standard-html zu formatieren.

InformationsquelleAutor Nicolas Giszpenc

Hatte ich mich schon mit Gjermund Dahl's Antwort oben, bis ich einige Veränderungen an meinem Kalender. Mit dieser Methode kann ich machen das die Formatierung für verschiedene Ansichten. Wenn der Kalender verwendet-Listen und Zeitplänen, entfernen Sie den Titel der Klasse in eine Decke action auf dem Rendern produziert unterschiedliche Ergebnisse in verschiedenen Ansichten.

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

Beachten Sie die verschiedenen Orte, die sind angehängt, in der zwei Ansichten. Sie müssen entdecken Sie Ihr element-Objekt zu überprüfen, wo Sie möchten, dass Ihre neuen Inhalte. Sie können auch wählen, wo Sie diese änderung vornehmen, mit mehr Kontrolle. Ändern Sie die innerHTML oder innerText, oder was auch immer Ihr Herz begehrt.

InformationsquelleAutor jchuck

Versuchen Sie dies:

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

InformationsquelleAutor Tanavirrul haq