Geek asks and answers

Fullcalendar: why is the calendar displayed twice on the page?

I use Fullcalendar for jQuery and for some reason the calendar appears twice on the page. It is not a question of having two instances of fullcalendar on the same page.

Rather, there is a second identical calendar at the bottom of the first calendar.

I confirmed that there is only one #calendar div on my page, so the error has something to do with my .js, which causes fullcalendar.js, I suppose.

Any help is greatly 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>

Another fullcalendar call in javascript (this puts the datepicker in the div to the left of the #calendar div on the same page):

jQuery('#datepicker_for_calendar').datepicker({
          defaultDate: jQuery.today,
          minDate: 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;
          }
      });
+3
source share
3 answers

Ok, after a long error checking, I found this jQuery plugin:

once()

http://plugins.jquery.com/project/once

#calendar .fullcalendar , .

:

jQuery('#calendar').once('calendar').fullCalendar({

... })

+1

a.html(''); f() -.
, , , , .
- .fullCalendar('destroy') - .
, , .

+3

I recently ran into the same problem and tried once () the jQuery plugin that did not work for me. However, I reloaded the non-minified source into the initialRender method as well. I added the following line as the first line in the method and enabled my calendar duplication method.

element.html('');

My hunch is that my problem came from the fact that I reinitialized the calendar on a decreasing change without refreshing the page, which seems like the js code was constantly adding the calendar to the existing div without clearing the existing calendar.

+2
source

More articles:


All Articles