Add custom HTML to a jQuery FullCalendar cell

Nathan H picture Nathan H · Jan 2, 2012 · Viewed 43.1k times · Source

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...

sample calendar

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

Answer

Gjermund Dahl picture Gjermund Dahl · Jul 3, 2014

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