title: Fullcalendar adding row below header title
body: <p>I want to add another row below the title (in the header, not in events) without necessarily altering the fullcalendar .css file</p>
  
  <p>Is there a way to add using eventAfterRender, to alter the .css and add another element?</p>
  
  <p>I want to add a row with the text "Only open events are displayed" below the month/year title.  I am using just the basic view on the following page:</p>
  
  <p><a href="http://fullcalendar.io/js/fullcalendar-2.3.1/demos/basic-views.html" rel="nofollow noreferrer">http://fullcalendar.io/js/fullcalendar-2.3.1/demos/basic-views.html</a></p>
  
  <p>Unfortunately, I cannot upload a jsfiddle of my calendar as it is embedded within an iOS app that has custom commands for fetching data, it only works within the app.  Just struggling with the basics, in what to append and how.  I am using the base files (fullcalendar.css).</p>
  
  <p>Any guidance appreciated.</p>
  
  <p>Actually, I solved this myself.  I am clearing the title and re-rendering after all event.  I have added a line below the heading with some html showing the number of open activities in the database (openactivities global variable).</p>
  
  <p>You can add sub heading after the toolbar by using the following:</p>
  
  <pre><code>eventAfterAllRender: function (view, element) {
      if (view.type === "agendaWeek") {
          $("#calendar").find('.fc-toolbar &gt; div &gt; h2').empty().append("&lt;div&gt;"+ 
          view.start.format('MMM DD') + " - " + view.end.format('MMM DD') +
          "&lt;br/&gt;&lt;h6 style=\"font-size:18px\"&gt;Number of open activities: " +
          openactivities + "&lt;/div&gt;");
      } else if (view.type === "agendaDay") {
          $("#calendar").find('.fc-toolbar &gt; div &gt; h2').empty().append("&lt;div&gt;"+ 
          view.start.format('DD MMMM YYYY') + "&lt;br/&gt;&lt;h6 style=\"font-size:18px\"
          &gt;Number of open activities: " + openactivities + "&lt;/div&gt;");
      } else if (view.type === "month") {
          $("#calendar").find('.fc-toolbar &gt; div &gt; h2').empty().append("&lt;div&gt;"+ 
          view.start.format('MMMM YYYY') + "&lt;h6 style=\"font-size:18px\"&gt;
          &lt;br/&gt;Number of open activities: " + openactivities + "&lt;/div&gt;");
      }
  }
  </code></pre>
  
  <p>I needed to use .empty first and enter the entire format as appending the div without clearing first was causing issues.  It didn't appear to at first but the heading was sometimes duplicated when dragging events and dropping.</p>
  
  <p>I also tried other methods, afterRender appeared to be ok but the heading wasn't displayed the first time the calendar was displayed.</p>
  
  <p>My calendar is working, embedded in an iOS app using drag / drop as a front end to our application mySQL database.  Unfortunately, my experience with HTML and JavaScript is limited, I'm not a programmer....</p>
  
  <p>I hope I have put this to bed now, thanks to the following post:
  <a href="https://stackoverflow.com/questions/29963108/fullcalendar-custom-override-header-title/30033205#30033205">FullCalendar Custom/Override Header title</a></p>