jquery - How to rearrange the buttons in the header in a full calendar -

i have used fullcalendar generate events. want rearrange buttons in header.

for example, month, week , day buttons should display in first row. title should placed between prev , next button. how achieve this?

thanks in advance.

$('#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) && element.has(e.target).length === 0 && $('.popover').has(e.target).length === 0)                 element.popover('hide');         });     },     events: eventdata  }); 

there no available methods in fullcalendar provide need.

you can, however, add manually. in following code, i've added functions addbuttons , bindbuttonactions called after fullcalendar has initialized. first function creates dom needed buttons , appends generated content fullcalendar header.

the second method binds click action buttons (that is, when click on week, there call changeview method).

the other option change fullcalendar's source code disagree option because more difficult update plugin.

here working jsfiddle , code.

<div id="calendar"></div> <script>     $(document).ready(function() {         $('#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) && element.has(e.target).length === 0 && $('.popover').has(e.target).length === 0)                         element.popover('hide');                 });             }         });          addbuttons();          bindbuttonactions();          function addbuttons() {             // create buttons             var month = $("<span/>")                 .addclass("fc-button fc-button-month fc-state-default fc-corner-left fc-state-active")                 .attr({                     unselectable: "on"                 })                 .text("moth");              var week = $("<span/>")                 .addclass("fc-button fc-button-agendaweek fc-state-default")                 .attr({                     unselectable: "on"                 })                 .text("week");              var day = $("<span/>")                 .addclass("fc-button fc-button-agendaday fc-state-default fc-corner-right")                 .attr({                     unselectable: "on"                 })                 .text("day");              // create tr buttons.             // please note, if want buttons placed @ center or right,             // have append more <td> elements             var tr = $("<tr/>").append(                 $("<td/>")                     .addclass("fc-header-left")                     .append(month)                     .append(week)                     .append(day)             );              // insert row before title.             $(".fc-header").find("tr:first").before(tr);         }          function bindbuttonactions(){             var date = new date();             // bind actions buttons             $(".fc-button-month, .fc-button-agendaweek, .fc-button-agendaday").on('click', function() {                 var view = "month";                 if ($(this).hasclass("fc-button-agendaweek")) {                     view = "agendaweek";                 } else if ($(this).hasclass("fc-button-agendaday")) {                     view = "agendaday";                 }                  $('#calendar').fullcalendar('changeview', view);             });         }     }); </script>