Customizing time hours in Full Calendar - fullcalendar

Question

I'm using Full Calendar from HTML5Admin, but I need that the calendar show in the rows moments set by me ##periods= ['pre-breakfast', 'post-breakfast', 'pre-lunch', 'post-lunch', 'afternoon', 'pre-dinner', 'post-dinner'] instead to show the time hours in the rows (7am, 8am, 9am, 10am, ....). I don't know if this is possible. I'm using moment.js as well. My code looks like this:
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
scrollTime: '07:00:00',
minTime: '07:00:00',
maxTime: '22:00:00',
defaultView: 'agendaWeek',
header:{left:"prev,next,today",
center:"title",
right:"month, agendaWeek, agendaDay"},
// put your options and callbacks here
})
});

Answer 1

I think is not possible just changing the default properties of the calendar, but you could modify the source code.
The method in charge of draw the text of the slots , in fullcalendar 2.2.0, is slatRowHtml:
Specifically this code:
axisHtml =
'<td class="fc-axis fc-time ' + view.widgetContentClass + '" ' + view.axisStyleAttr() + '>' +
((!slotNormal || !minutes) ? // if irregular slot duration, or on the hour, then display the time
'<span>' + // for matchCellWidths
htmlEscape(calendar.formatDate(slotDate, view.opt('axisFormat'))) +
'</span>' :
''
) +
'</td>';
You should add a new statement to verify your ranges and then modify 'axisHtml' to your preferences.
As you can see, slotTime is a moment:
var slotTime = moment.duration(+this.minTime); // wish there was .clone() for durations
So you can define your owns moment limits and then use the native momentJs comparators:
var mySpecificText;
var afternoon = moment(...);
var preLunch = moment(...);
if (slotTime.isBefore(afternoon) && slotTime.isAfter(preLunch){
mySpecificText = "Pre Lunch";
axisHtml = '<td class="fc-axis fc-time ' + view.widgetContentClass + '" ' + view.axisStyleAttr() + '><span>' + mySpecificText + ' </span> </td>'
}