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

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

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

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

sample calendar

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

Ответы

Ответ 1

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

Я использовал обратный вызов eventAfterRender. Там я использовал jQuery для анализа параметра "element" и перезаписи html перед его отправкой в ​​браузер.

Ответ 2

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

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

Ответ 3

Именно так я рассматривал эту проблему в своем приложении.

В 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 для его форматирования.

Ответ 4

Этот ответ предоставил очень простой метод, который работал у меня:

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