全日历跳月而不是周

Question

I'm using Fullcalendar as my calendar on my website. It all works great and it's really easy in use. But I stumbled upon one "problem", as you can see in the picture below, there are two buttons(red arrows) these are for jumping a week forward or backwards.

Now my question, is it possible with fullcalendar to add 2 buttons that will jump one month instead of a week(so there are 4 buttons in total, 2 for weeks, 2 for months)?

I have tried to add 2 buttons and onClick make the calendar jump to curDate+one month, but that didn't work very good.

Answer 1

It's very easy to do using fullcalendar v2.4. All you have to do is use the customButtons and header options when constructing your calendar. For example to add the buttons you request (prev and next month), you can use this code:

  $("#calendar").fullCalendar({ customButtons: { prevMonth: { text: 'previous month', click: function() { $("#calendar").fullCalendar('incrementDate', '-P1M'); } }, nextMonth: { text: 'next month', click: function() { $("#calendar").fullCalendar('incrementDate', 'P1M'); } } }, header: { left: 'prevMonth,today,nextMonth', center: 'title', right: 'month,agendaWeek,agendaDay' } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.js"></script> <div id="calendar"></div> 

More information can be found in the official docs: http://fullcalendar.io/docs/display/customButtons/