Custom Fullcalendar buttons in header
I need to switch between two (or more) full calendars on the same page and would like to add this functionality to a custom button inside the calendar header.
I found some interesting code on custom buttons, but it's a little outdated as it is from Fullcalendar v 1.6.1 and I'm using 2.3.1.
Here's what I found: http://code.google.com/p/fullcalendar/issues/detail?id=225#c17 and later. I have almost succeeded in implementing this: http://code.google.com/p/fullcalendar/issues/detail?id=225#c24 , but the script is rewritten and doesn't match this code.
Anyone with updated code for custom buttons that works as of 2.3.1?
source to share
Custom header buttons are already supported by the fullcalendar plugin. No need to add ad-hoc code
$("#calendar").fullCalendar({
customButtons: {
reload: {
text: 'Reload',
click: function() {
//you code
}
}
},
header: {
left: 'prev,next today',
center: 'title',
right: 'reload'
},
});
source to share
Check the example in the planner:
// 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?
);
}
})
);
See here: http://fullcalendar.io/js/fullcalendar-scheduler-1.0.0-beta/demos/dynamic-add-remove.html
source to share