FullCalendar Custom/Override Header title

Question

I want change the titleFormat of my calendar.

At present, the title is in an h2 tag and we cannot personalize it by adding html code to the titleFormat option. For

Answer 1

A simple way is to overwrite the view.title within the viewRender event:

...
,
header: {
  center: 'title',
},
viewRender: function(view, element) {
  view.title = 'Your Custom Title';
},
...

Answer 2

Okay, this isn't really supported but here's a workaround. JSFiddle

viewRender: function (view, element) {
    //The title isn't rendered until after this callback, so we need to use a timeout.
    if(view.type === "agendaWeek"){
        window.setTimeout(function(){
            $("#calendar").find('.fc-toolbar > div > h2').empty().append(
                "<div>"+view.start.format('MMM Do [to]')+"</div>"+
                "<div>"+view.end.format('MMM Do')+"</div>"
            );
        },0);
    }else if(view.type === "agendaDay"){
        window.setTimeout(function(){
            $("#calendar").find('.fc-toolbar > div > h2').empty().append(
                "<div>"+view.start.format('ffffdd D MMMM YYYY')+"</div>"
            );
        },0);
    }
},

I don't know if it's the most stable thing in the world but, at worst, it might have a slight aesthetic glitch sometimes (like when a new FC version gets released.).