FullCalendar custom header title

Question

I need to show a custom header title in the calendar. I am handling 16 calendars and I need every one of them to show their own title. I have tried everything I could modifying this part of the code:

firstDay: <?php echo $iFirstDay; ?>,
header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
},

But everytime I edit the center to add something else apart from the title my calendar doesn't show any title at all. What should I do?

Answer 1

If you are using fullCalender v2 you will have to escape string by putting them between scare brackets. This is because of the moment.js library (see the moment doc).

So that would be

firstDay: <?php echo $iFirstDay; ?>,
header: {
  left: 'prev,next today',
  center: 'title',
  right: 'month,agendaWeek,agendaDay'
},
titleFormat: '[Hello, World!]',

From moment.js doc:

Escaping characters To escape characters in format strings, you can wrap the characters in square brackets.

moment().format('[today] dddd'); // 'today Sunday'

Answer 2

You don't change the center attribute. That just specifies what gets placed in the center of the header.

If you want to change the contents of the title itself, you need to change the titleFormat.

firstDay: <?php echo $iFirstDay; ?>,
header: {
  left: 'prev,next today',
  center: 'title',
  right: 'month,agendaWeek,agendaDay'
},
titleFormat: '\'Hello, World!\'',

titleFormat uses a formatted date as the value, so if you want to display literal text, you need to wrap it in single quotes, but just remember to escape them.