CODEWITHSUNDEEP
jqueryjsonfullcalendar
Linus
Linus

Reputation: 105

Fullcalendar wrong size on first load

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: This is what it looks like

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

Upvotes: 5

Views: 7313

Answers (4)

Hibiscus
Hibiscus

Reputation: 592

I realize this is an old question, but this problem typically happens if you are calling fullCalendar in jQuery's document ready() handler. At the time that the ready event fires the browser may not have fully rendered the page so fullCalendar doesn't know the width of the container it's loading into.

Put your fullCalendar call into a window.onload() event handler instead and the calendar won't render until the browser has finished loading the page, at which time it will know the correct size of the container. 

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

Magnus Winter's method does a similar thing by pausing for 100 milliseconds before rendering the calendar, which gives the browser enough time to process the page.

Upvotes: 4

Rishi Mehta
Rishi Mehta

Reputation: 73

I hade a same issue but it was with jquery modal. i added fullcalendar in jquery modal popup box. so when it popup shows, its didnt render fullcalendar. after reading this question, i try to figure out it and solved it perfectly. this is the solution :

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

})

in above code #new_jb is a button id for popup and #calendar is my calendar id which renders' calendar.

Hope this will help someone. :-)

Upvotes: 1

Sanjay Kumar
Sanjay Kumar

Reputation: 1474

If fullcalendar is initialized in hidden div then it will not display. In this case, you must force render method. You can find more details here. (http://arshaw.com/fullcalendar/docs/display/render/)

In case of tabs:

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

Upvotes: 3

Magnus Winter
Magnus Winter

Reputation: 931

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.

Upvotes: 5

Related Questions