Add custom HTML to a jQuery FullCalendar cell

Question

I am using the jQuery FullCalendar (http://arshaw.com/fullcalendar/docs/).

I want to add some custom HTML to each day-cell.

For example in my case I want to have different background colors based on some logic, display a price in the middle...

Is there a way to customize the rendering of a cell?

Answer 1

The way I do this is like Conners indicated:

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

Answer 2

I will explain how I solved this issue for other people.

I used the eventAfterRender callback. In there I used jQuery to parse the "element" parameter and re-write the html before it is sent to the browser.

Answer 3

This is the way I dealt with this issue in my application.

In fullcalendar.js, you need to find this:

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

This is where the content of the cell is created.

I wanted to have the time of the event on the right side of the cell, so:

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

I am using the momentjs library to format the time.

Now, you can add whatever you want to the calendar cell content, and use standard html to format it.