Fullcalendar custom buttons in header

Question

I need to switch between two (or more) fullcalendars on the same page, and would like to add this function to a custom button inside the calendar header.

I've found some interesting code on custom buttons but it is a bit outdated as it refers to Fullcalendar v 1.6.1 and I'm using 2.3.1.

This is what I've found: http://code.google.com/p/fullcalendar/issues/detail?id=225#c17 and later. I've almost got success implementing this: http://code.google.com/p/fullcalendar/issues/detail?id=225#c24 but the script is re-written and don't match this code.

Anyone having an updated code for custom buttons that works with 2.3.1?

Answer 1

Check the example in the scheduler:

// ad-hoc way of getting an add button in there.
// for a better solution, please star this issue:
//  https://code.google.com/p/fullcalendar/issues/detail?id=225
$('.fc-toolbar .fc-left').prepend(
    $('<button type="button" class="fc-button fc-state-default fc-corner-left fc-corner-right">+ room</button>')
        .on('click', function() {
            var title = prompt('Room name');
            if (title) {
                $('#calendar').fullCalendar(
                'addResource',
                { title: title },
                true // scroll to the new resource?
             );
        }
    })
);

Here : http://fullcalendar.io/js/fullcalendar-scheduler-1.0.0-beta/demos/dynamic-add-remove.html

Answer 2

Custom buttons in header is already supported by the fullcalendar plugin. Not needed to add ad-hoc code

$("#calendar").fullCalendar({
    customButtons: {
        reload: {
            text: 'Reload',
            click: function() {
               //you code 
            }
        }
    },
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'reload'
    },
 });