Adjusting custom view in Fullcalendar by Adam Shaw - fullcalendar

Question

I've followed the outlines in FullCalendar Change Week View to Vertical List instead of Horizontal Table Columns to create a custom vertical week view in fullcalendar.
The implementation is taken from the original post shown in this fiddle: http://jsfiddle.net/nomatteus/dVGN2/3/
This lays out the view like this:
<table>
<thead>
.tr.td.headercontent....
</thead>
<tbody>
.tr.td.eventcontent....
</tbody>
</table>
However the vertWeek view is used on small screens (smartphones etc), so I would like to have the day header and content to be layed out horizontal to take up less space in height like in this screenshot:
http://i.imgur.com/F4AkoSw.png
The MAN 8. is styled manually as I like it, but TIR 9 is how it is rendered by the view.
I would like to achieve this:
<table>
<thead>
</thead>
<tbody>
<tr>
<td> headercontent
<td> eventcontent
</tr>
</tbody>
</table>
I have tried to understand the fullcalendar code to move the header into the same as the eventcontent - but it seems like the view is rendered in different places for thead and tbody for that container.
Could anyone point me in the right direction on how to modify the code to achieve this?

Answer 1

Post of implemented answer for sharing:
Seems like my understandig was a litte bit inaccurate. The header was placed in an overlapping table above the table containing the events. Tried to traverse the DOM and place the header during the dayRender function, but the corresponding tbody for the event was not yet created.
Simplified illustration:
table
thead
**header**
tbody
table
thead
tbody (not created at dayRender, but available at eventRender)
**event*
The solution was quite simple - hide the .fc-day-number:
dayRender: function( date, cell ) {
// Get the current view
var view = $('#meal_calendar').fullCalendar('getView');
// Check if the view is the new vertWeek -
// in case you want to use different views you don't want to mess with all of them
if (view.name == 'vertWeek') {
// Hide the widget header - looks wierd otherwise
$('.fc-widget-header').hide();
// Remove the default day number with an empty space. Keeps the right height according to your font.
//$('.fc-day-number').html('<div class="fc-vertweek-day"> </div>');
$('.fc-day-number').hide();
// Create a new date string to put in place
var this_date = date.format('ddd, MMM Do');
// Place the new date into the cell header.
cell.append('<div class="fc-vertweek-header"><div class="fc-vertweek-day">'+this_date+'</div></div>');
}
},
In addition I styled the td.fc-event-container in my CSS like this:
td.fc-event-container {
padding-left: 68px;
}
Quite possibly a hack - hours to research, two lines to correct. But works for me......