Добавить пользовательский HTML в ячейку jQuery FullCalendar - PullRequest
Новая
       9

Добавить пользовательский HTML в ячейку jQuery FullCalendar

13 голосов
/ 02 января 2012

Я использую jQuery FullCalendar (http://arshaw.com/fullcalendar/docs/).

Я хочу добавить собственный HTML в каждую дневную ячейку.

Например, в моем случае я хочу иметь разные цвета фона, основанные на некоторой логике, отображать цену посередине ...

sample calendar

Есть ли способ настроить рендеринг ячейки?

Ответы [ 7 ]

17 голосов
/ 04 июля 2014

То, как я это делаю, похоже на обозначение Коннерса: 

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);
}
7 голосов
/ 24 января 2012

Я объясню, как я решил эту проблему для других людей.

Я использовал обратный вызов eventAfterRender .Там я использовал jQuery, чтобы проанализировать параметр «element» и переписать HTML, прежде чем он будет отправлен в браузер.

3 голосов
/ 10 июня 2014

Я решил эту проблему в своем приложении.

В fullcalendar.js вам нужно найти это: 

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

Здесь находится содержимое ячейки.

Я хотел, чтобы время события было справа от ячейки, поэтому: 

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

Я использую библиотеку momentjs для форматирования времени.

Теперь вы можете добавить все, что хотите, к содержимому ячейки календаря и использовать стандартный HTML для его форматирования.

2 голосов
/ 12 мая 2015

Этот ответ предоставил мне очень простой метод: 

cell.prepend('<span class="selector">' + ReturnCellNumber(cellDay,cellMonth,cellYear) + '</span>');
0 голосов
/ 24 октября 2018

Здесь вы можете получить следующее: 

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

Для получения дополнительной информации: Добавить пользовательский HTML-код в ячейку jQuery FullCalendar

0 голосов
/ 24 октября 2018

Попробуйте это: 

  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 голосов
/ 25 мая 2018

Я использовал ответ Gjermund Dahl выше, пока не сделал некоторые изменения в своем календаре. С помощью этого метода я могу сделать форматирование разным для разных представлений. Когда календарь использует списки и временные шкалы, удаление класса заголовка в общем действии при рендеринге приводит к различным результатам в разных представлениях. 

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

Обратите внимание на различные места, которые добавлены в двух видах. Вам нужно будет исследовать свой элемент объекта, чтобы проверить, где вы хотите новый контент. Вы также можете выбрать, где сделать это изменение с большим контролем. Измените innerHTML, или innerText, или что хотите ваше сердце.

...