Question

This is an interesting problem that I have searched here and all over my site JS and CSS and cannot find the culprit:

FullCalendar is implemented in a WordPress site (using MySiteMyWay Echelon theme) and everything works superbly EXCEPT the normal header TITLE for the calendar does not display.

Here are the standard elements:

$caldrw = '<script type=\'text/javascript\'>
jQuery(document).ready(function($) {
$(\'#fc-calendar\').fullCalendar({
editable: false,
titleFormat: {
month: \'MMMM YYYY\',
week: "MMM d[ yyyy]{ \'&#8212;\'[ MMM] d yyyy}",
day: \'dddd, MMM d, yyyy\'
},
header: {
left:   \'today,prev,next\',
center: \'title\',
right:  \'month,agendaWeek,agendaDay\'
},
theme: false,
defaultView: \'month\',
aspectRatio: 1.75,
firstHour: 7,

etc …

The escaped ‘ are present because the script is being set as a php variable to insert into a page as content.

Here’s the interesting part …
All the other header parameters display and function perfectly left, right or center. Title will not display in any location. I suspect there may be a JS or css conflict but I cannot find it.

I am using the latest

fullcalendar css (eventify.fullcall.css) and 
fullcakendar js (fullcalendar.min.js), 
jQuery UI (jquery.ui.core.js and eventify.ui.theme.css),
qTip 1+ (qtip.js),
gCal (gcal.js) and
jQuery 1.7.1.

Here is the URL for the calendar on the site (view source provides the complete code and references to css and js files):
http://riverchurchbishop.com/calendar/

Thanks in advance for your guidance.

Answer 1

The title is getting displayed in the center of the calendar. But it’s color is either the same as your screen or the display is hidden or there is some filter with opacity 0.

The title is formed in a H2 tag in the calendar DIV. So any settings that apply to H2 in your file will apply to the title element.

This is the markup of the header title.

<td class="fc-header-center">
  <span class="fc-header-title">
    <h2>June YYYY</h2>
  </span>
</td>

So, check the CSS that you have for H2 (I saw many) – edit using specific classes and you should see the title display fine.

Hope this helps!