FullCalendar.js: Rendering background with time labels?

Question

I am starting to use Fullcalendar and love the docs. However, I am stuck with the following problem:

Rendering background with time labels?

I have one user specifying his available times, and another user who can do a selection out of those given times. To allow selection we need to set rendering: 'background' in the events array, otherwise the main event is blocking the event insert. But when using background rendering the time labels disappear:

So how can I tell Fullcalendar to keep on displaying those time labels even in background rendering mode?

I would be happy if somebody could help me out.

Answer 1

Adding time labels to background events doesn't come "out of the box" but it's easy enough to do with the eventRender callback.

eventRender: function(event, element, view ){
    if(event.rendering === "background"){
        // Just add some text or html to the event element.
        element.append( event.start.format('HH:mm') + " - " + 
                       event.end.format('HH:mm'));
    }
},

You can of course add a span or two if you want better formatting.

Here's a JSFiddle with it working (Using the same base code as your other question)