Fullcalendar wrong size on first load

Question

I have a problem on the first load of fullcalendar each time you open the browser. When I refresh the page, it all works just fine.

It's the size that is wrong. Not the size of the frame, but the content.

This is how it looks:

I have read the documentation, but i can't find anything about this.

Here comes my 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');

}

})

Thankful for any help!

Best Regards Linus

Answer 1

I had the same problem. Solved it by doing this from the page loading the calendar, should work in the same page as well in the $(document).ready function:

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

Not really sure why this happens, but the fix (it's kind of ugly though) works fine for me.