FullCalendar - Header/Title to custom <DIV>?

Question

I have build up a custom header in my Full-Calendar project. I control the full calendar functions from my own buttons.

I want to disable the original FC-Header, but I want to keep the "Title". Exactly I want to move the Title to a custom . Please have a look at the following screenshot to get an idea of what I'm talking:

Screenshot - Custom Header

Is this possible? How to?

Thank you!

Answer 1

Yes this can be done easily by using the viewRender callback. It gives you access to the View Object which you can grab the title from. So in my JSFiddle I have set up my calendar to not display a title and then in the viewRender function I grab the title and use jquery to place it into my external element. viewRender will be called when your calendar view changes so it should stay updated.

$(document).ready(function() {
  $('#calendar').fullCalendar({
      header: {
          left: 'prev,next today',
          right: 'month,agendaWeek'
      },
      defaultView: 'month',
      viewRender: function(view) {
        var title = view.title;
        $("#externalTitle").html(title);
      }
  });
});