Fullcalendar：为什么日历在页面上出现两次？ [英] Fullcalendar: why is the calendar appearing twice on the page?

问题描述

我使用的是Fullcalendar for jQuery，由于某种原因，日历在页面上出现两次。这不是关于在同一页面上有两个fullcalendar实例的问题。

相反，在第一个日历的底部，有第二个相同的日历。

我确认我的网页中只有一个#calendar div，所以这个错误与我的.js有关，我调用fullcalendar.js，我相信。 / b>

非常感谢任何帮助。

JS代码：

< pre $ jQuery（'＃calendar'）。fullCalendar（{


年：jQuery.today.getFullYear（），
月： 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）{
//很多自定义代码
}
}）;


HTML：

 < table>< tr>< td valign =topwidth =700px>< div id =calendar>< / div>< / td>< / TR>< /表> 
  

在javascript中调用fullcalendar（这会将日期选择器放在#calendar div左边的div中）页面）：

  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; 
} 
}） ; 
  

解决方案

好的，我发现这个jQuery插件：

once（）

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

一旦应用到

工作代码：

  jQuery（'＃calendar'）。once（'calendar'）。fullCalendar（{
  

...
}）

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,
          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;
          }
      });

解决方案

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({

... })

这篇关于Fullcalendar：为什么日历在页面上出现两次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！