首次加载时Fullcalendar大小错误

Question

每次打开浏览器时，第一次加载fullcalendar时出现问题。 当我刷新页面时，一切正常。

它的大小是错误的。不是框架的大小，而是内容。

它的外观如下：

我已阅读文档，但我无法找到相关内容。

我的jquery来了：

 $('#kalender1').fullCalendar({


   firstDay: 1,
   header: {right:'today prev,next month,agendaWeek'} ,
   defaultView: 'agendaWeek',
  // timeFormat: 'h(:mm)', // uppercase H for 24-hour clock
   minTime:'6' ,
   maxTime: '21' ,
   eventResize: function(event,dayDelta,minuteDelta,revertFunc) {

var internidevent = event.value
var minutes = minuteDelta
var whataction = 4
//alert(minuteDelta)

$.post('save.asp', {whataction:whataction, internidevent:internidevent, minutes:minutes})
   },
   eventClick: function(calEvent, jsEvent, view) {

    //alert('Event: ' + calEvent.title);
    //alert('id: ' + calEvent.value + '');
    var sellerid = <%=value%>
    var event = calEvent.value

    $.colorbox({href:"editevent.asp?sellerid="+sellerid+'&event='+event, iframe:"true",width:"800", height:"800"})


    // change the border color just for fun
    $(this).css('border-color', 'red');

},
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
    var internidevent = event.value
    var minusday = dayDelta
    var minusminutes = minuteDelta



    var whataction = 3


    $.post('save.asp',{whataction:whataction,internidevent:internidevent,minusday:minusday,minusminutes:minusminutes})


    //if (allDay) {
      //  alert("Event is now all-day");
    //}else{
      //  alert("Event has a time-of-day");
    //}

   // if (!confirm("Are you sure about this change?")) {
     //   revertFunc();
   // }

},

      dayClick: function(date, allDay, jsEvent, view) {







    // change the day's background color just for fun
   // $(this).css('background-color', 'red');

}

})

感谢任何帮助！

最好的问候Linus

Answer 1

我遇到了同样的问题。通过从加载日历的页面执行此操作解决它，应该在$（document）.ready函数中的同一页面中工作：

<script type="text/javascript">
    setTimeout("jQuery('#kalender1').fullCalendar( 'render' );",100);
</script>

不确定为什么会发生这种情况，但修复（虽然它有点丑陋）对我来说很好。

Answer 2

如果在隐藏div中初始化fullcalendar，则不会显示。在这种情况下，您必须强制渲染方法。你可以在这里找到更多细节。 （http://arshaw.com/fullcalendar/docs/display/render/）

如果有标签：

$('#tabs').tabs({
    show: function(event, ui) {
        $('#calendar').fullCalendar('render');
    }
});

Answer 3

我意识到这是一个老问题，但是如果你在jQuery的document ready（）处理程序中调用fullCalendar，通常会发生这个问题。在就绪事件触发时，浏览器可能没有完全呈现页面，因此fullCalendar不知道它所加载的容器的宽度。

将fullCalendar调用放入window.onload（）事件处理程序中，日历不会呈现，直到浏览器加载完页面，此时它将知道容器的正确大小。

$(window).load(function() {
  $('#calendar').fullcalendar('render');
}

Magnus Winter的方法通过在渲染日历之前暂停100毫秒来做类似的事情，这为浏览器提供了足够的时间来处理页面。

Answer 4

我有同样的问题，但它是用jquery模式。我在jquery模式弹出框中添加了fullcalendar。所以当它弹出显示时，它没有渲染fullcalendar。在阅读完这个问题后，我试图找出它并完美地解决了这个问题。这是解决方案：

$('#new_jb').click(
function(event, ui) {
    $('#calendar').fullCalendar('render');

})

在上面的代码中#new_jb是弹出窗口的按钮ID，而#calendar是我的日历ID，用于呈现'日历。

希望这会对某人有所帮助。 ： - ）