Keynes Keynes - 1 month ago 17
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:

$('#calendar').fullCalendar({
utc: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,

eventAfterRender: function(event, element, view) {
element.append(event.title);
}

});


My html code is as follows:-

<html>
<head>
<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>
</head>
<body>
<div id='calendar'></div>
</body>


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

Answer

You can add custom button using this code:

 $("#calendar").fullCalendar({
    customButtons: {
        add_event: {
            text: 'Add',
            click: function() {
               alert(); 
            }
        }
    },
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'add_event'
    },
 });
Comments