title: How to rearrange the buttons in the header in a full calendar
body: <p>I have used FullCalendar to generate some events. I want to rearrange the buttons in the header. </p>
  
  <p>For example, month, week and day buttons should display in first row. The title should be placed between the prev and next button. How to achieve this? </p>
  
  <p>Thanks in advance. </p>
  
  <pre><code>$('#calendar').fullCalendar({
      header: {
          left: 'prev',
          center: 'title',
          right : 'next'
      },
      titleFormat: {
          month: 'MMMM yyyy',
          week: 'MMMM yyyy',
          day: 'MMMM yyyy'                   
      },
      contentHeight: 300,
      height: 200 ,
      eventRender: function(event, element) {
          element.popover({
              title: event.title1,
              placement: 'auto',
              html: true,
              trigger: 'click',
              animation:'true',
              content: event.msg,
              container: 'body'
          });
  
          $('body').on('click', function(e) {
              if (!element.is(e.target) &amp;&amp; element.has(e.target).length === 0 &amp;&amp; $('.popover').has(e.target).length === 0)
                  element.popover('hide');
          });
      },
      events: eventData 
  });
  </code></pre>