CODEWITHSUNDEEP
javascriptjqueryfullcalendar
emma
emma

Reputation: 111

FullCalendar custom header title

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?

Upvotes: 11

Views: 34462

Answers (5)

Sean Lin
Sean Lin

Reputation: 77

in fullCalender v6:

const calendar = new FullCalendar.Calendar(calendarEl, {
  titleFormat: (info) => `Year: ${info.date.year}  Month: ${info.date.month+1}`,
})

Upvotes: 1

Dionys
Dionys

Reputation: 3113

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'

Upvotes: 31

noomz
noomz

Reputation: 2065

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

Upvotes: 0

sukebe7
sukebe7

Reputation: 89

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.

Upvotes: -1

Brandon
Brandon

Reputation: 69983

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.

Upvotes: 9

Related Questions