javascript - FullCalendar CustomOverride Header title - Stack Overflow

admin管理员组

文章数量:1406950

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.

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.

• javascript
• fullcalendar

Share Improve this question Follow edited May 4, 2015 at 14:45 DanielST 14.2k77 gold badges4444 silver badges6767 bronze badges asked Apr 30, 2015 at 8:47 azertoffazertoff 2111 gold badge11 silver badge22 bronze badges 2

• titleFormat should work fine, no? If you want to change what it looks like, use css. – DanielST Commented May 1, 2015 at 15:34
• Finaly, i use my own header. I wanted to have the title on several lines. (Semaine W) For exemple But as he(it) puts in H2, impossible to pass by the css. – azertoff Commented May 2, 2015 at 16:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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

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

本文标签： javascriptFullCalendar CustomOverride Header titleStack Overflow