Keynes Keynes - 1 year ago 245
Javascript Question

Fullcalendar: How to add a new button to the existing buttons in header?

I am trying to add a new button to the existing buttons in the header. I am not able to find out how to do it. Presently, i have prev,next,today,month,agendaWeek,agendaDay in the header. I want one more button to add new events. So that after click of the button, i could add new events through a pop up.

My code is as follows:

utc: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
editable: true,
droppable: true,

eventAfterRender: function(event, element, view) {


My html code is as follows:-

<meta charset='utf-8' />
<link href='fullcalendar-2.7.1/fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar-2.7.1/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='fullcalendar-2.7.1/lib/moment.min.js' type='text/javascript'> </script>
<script src='fullcalendar-2.7.1/lib/jquery.min.js' type='text/javascript'></script>
<script src='fullcalendar-2.7.1/lib/jquery-ui.min.js'></script>
<script src='fullcalendar-2.7.1/lib/fullcalendar.min.js'></script>
<div id='calendar'></div>

Is there a way to do it through FullCalendar? Thanks in Advance..

Answer Source

You can add custom button using this code:

    customButtons: {
        add_event: {
            text: 'Add',
            click: function() {
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'add_event'
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download