Fullcalendar: why is the calendar appearing twice on the page?
I am using Fullcalendar for jQuery and for some reason the calendar is appearing twice on the page. This is not a question about having two instances of fullcalendar on the same page.
Rather, at the bottom of the first calendar, there is a second identical calendar.
I confirmed that there is only one #calendar div in my page, so the error has something to do with my .js that calls fullcalendar.js, I believe.
Any help much appreciated.
JS Code:
jQuery('#calendar').fullCalendar({
year: jQuery.today.getFullYear(),
month: jQuery.today.getMonth(),
date: jQuery.today.getDate(),
theme: true,
contentHeight: 1000,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaDay',
dayClick: function(date, allDay, jsEvent, view) {
// a lot of custom code
}
});
HTML:
<table><tr><td valign="top" width="700px"><div id="calendar"></div></td></tr></table>
Other call of fullcalendar in javascript (this puts a datepicker in div to left of #calendar div on same page):
jQuery('#datepicker_for_calendar').datepicker({
defaultDate: jQuery.today,
minDa开发者_开发技巧te: jQuery.startDate,
maxDate: jQuery.endDate,
inline: true,
showButtonPanel: true,
onSelect: function(dateText, inst) {
var d = new Date(dateText);
jQuery('#calendar').fullCalendar('gotoDate', d);
selectedDate = d;
}
});
I was recently experiencing the same issue and tried the once() jQuery plugin, which didn't work for me. However, I re-downloaded the non-minified source and within the initialRender method I added the following line as the first line in the method and it resolved my duplicate calendar method.
element.html('');
My guess is my issue was coming from the fact that I was reinitializing the calendar on a drop down change without refreshing the page, which seems that the js code was constantly appending the calendar to the existing div without clearing out the existing calendar.
Add a.html('');
to function f()
in the minified version.
I had mine open up in a dialog, every time I clicked a button to open there would be another calendar.
After a bit of reading, I found the method to use - .fullCalendar('destroy')
- that way you do not need to edit the plugin.
Now, upon closing the dialog and re-opening, only one calendar appears.
Ok, after a long week of bug testing everything, I found this jQuery plugin:
once()
http://plugins.jquery.com/project/once
Once applied to the #calendar div before .fullcalendar, problem solved, only one calendar rendered.
Working code:
jQuery('#calendar').once('calendar').fullCalendar({
... })
This should do this trick http://api.jquery.com/one.
So akin to @netefficacy (using one instead of once):
$('#calendar').one('calendar').fullCalendar({...})
精彩评论