Custom columns in fullcalendar list view - fullcalendar

Question

I'd like to add more columns to my list day view. So far the only way I have found to achieve this is by manually adding columns in the eventRender function.
Like so:
$('#calendar').fullCalendar({
defaultView: 'listDay',
eventRender: function (event, element, view) {
element.find(".fc-list-item-time").after("<td>Extra column 1 here</td>");
element.find(".fc-list-item-time").after("<td>Extra column 2 here</td>");
element.find(".fc-list-item-time").after("<td>Etc</td>");
}
});
Is there a better way of achieving more columns?
(I did find the relevant feature request on github and upvoted it.)

Answer 1

i would do that in the viewRender function.
$('#calendar').fullCalendar({
defaultView: 'listDay',
viewRender: function (view, element) {
element.find(".fc-list-item-time").after("<td>Extra column 1 here</td>");
element.find(".fc-list-item-time").after("<td>Extra column 2 here</td>");
element.find(".fc-list-item-time").after("<td>Etc</td>");
}
});
Edit:
If you want to have dynamic cols content for each event you have to use eventRender to add the cols
adding more cols will break the row with the header, because this is set to a fixed colspan. you can add cols in eventRender and then in viewRender, count those cols and set the colspan of the header row to that.
viewRender: function(view, element){
var cols = element.find('.fc-list-item')[0].children.length;
$.each(element.find('.fc-widget-header'),function(){
$(this).attr('colspan',cols);
});
}

Answer 2

Hi I tried to add a column. It goes. But add a column to .fc-widget-header add in the same way element.find('.fc-widget-header').after('<td class=\"fc-widget-header\" colspan=\"1\"></td>'); it is not.