FullCalendar custom header title

I need to show a custom header title in t开发者_JS百科he 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?

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'

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.

You can try this. I use this to hack Buddhist era display:

const computeTitle = FullCalendar.View.prototype.computeTitle;
FullCalendar.View.prototype.computeTitle = function (dateProfile) {
  const $ = jQuery;
  if (dateProfile.currentRangeUnit === 'month') {
      const cal = jQuery(".js-drupal-fullcalendar").fullCalendar('getCalendar');
      const era = cal.moment(dateProfile.date).year() + 543;
      return cal.moment(dateProfile.date).format('MMMM') + ' ' + era;
  }

  return computeTitle(dateProfile);
};

P.S: This pull request is seem to stale: https://github.com/fullcalendar/fullcalendar/pull/3532

you can just poke the name in before the calendar gets rendered, or even at the very top of the page:

<?php
echo "<center><h1>$fullname</h1></center>";
?>

Ugly, but works.