CODEWITHSUNDEEP
javascriptfullcalendar
azertoff
azertoff

Reputation: 21

FullCalendar Custom/Override Header title

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.

Upvotes: 2

Views: 12946

Answers (2)

Jorgen
Jorgen

Reputation: 440

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

Upvotes: -4

DanielST
DanielST

Reputation: 14133

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.).

Upvotes: 6

Related Questions