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 example put a span tag on my fixed value of the titleFormat (which is [] there).

I would want to know if it is possible to override the updateTitle method of the class Header, without modifying fullcalendar.js. Or another possibility.

I have 2 views : week with title format '[Semaine] W' and custom one Day with title format 'dddd D MMMM YYYY'.

My version of FullCalendar is v2.3.0.

Answer 1

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('dddd 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.).

Answer 2

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';
},
...