Fullcalendar: Custom titleFormat for week view in fullCalendar

Created on 6 Dec 2016  路  2Comments  路  Source: fullcalendar/fullcalendar

I'm trying to upgrading fullCalendar from 1.6 to 3.0

Previously my titleFormat was :

titleFormat: {
    month: "MMMM yyyy",
    week: "'Week from 'd [MMMM] { 'to' d MMMM  yyyy}",
    day: "dddd d MMMM yyyy"
},

Now I use the view specific options as describe in the titleFormat documentation :

    views: {
        month: {
            titleFormat: "MMMM YYYY",                  
        },
        week: {
            columnFormat: "dddd d",            
        },
        day: {
            titleFormat: "dddd d MMMM YYYY",
            columnFormat: "dddd d",           
        }
    },

But I can't reproduce the same text for the week. Indeed, according to the formatRange documentation:

FullCalendar will intelligently use it to format both dates with a dash in between.

Am I missing something ?

Most helpful comment

possible with the momentjs literal text formatting (with the [ ] commands) as well as the undocumented titleRangeSeparator setting:

    views: {
      week: {
        titleFormat: '[Week from] D MMMM YYYY',
        titleRangeSeparator: ' to ',
      }
    },

http://jsbin.com/nuruxizuli/1/edit?js,output

All 2 comments

possible with the momentjs literal text formatting (with the [ ] commands) as well as the undocumented titleRangeSeparator setting:

    views: {
      week: {
        titleFormat: '[Week from] D MMMM YYYY',
        titleRangeSeparator: ' to ',
      }
    },

http://jsbin.com/nuruxizuli/1/edit?js,output

@arshaw I am using full calendar in Vue.js. I am currently facing to customize this title. The issue is my week is "May 8 - 10, 2020" because i have set
:validRange="{start: new Date()}"
I want the title to show the complete week duration. It should say "May 4 - 10, 2020".

Also, I want to show complete week events. Currently validRange is preventing previous events to show in Week. My default view is defaultView="timeGridWeek"

Thank you in advance!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

StarpTech picture StarpTech  路  41Comments

arshaw picture arshaw  路  29Comments

arshaw picture arshaw  路  42Comments

arshaw picture arshaw  路  31Comments

arshaw picture arshaw  路  45Comments