Question

I have the fullcalendar working. But i have a sidebar users can collapse this then the content box gets bigger but when a user do this then the calendar is not so nice as it was.

So i was thinking of the window resize function but this only works when the browser window is changed so how can make it that fullcalendar reacts when the container gets bigger or smaller?

The JS to show the calendar:

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

$('#calendar').fullCalendar({
    header: {
       left: 'prev,next',
        center: 'title',
        right: 'month,basicWeek,basicDay'
    },
    editable: true
});

The class of the sidebar hide and show button is .hide-btn

The JS for hide and show the sidebar:

$(".hide-btn").click(function(){
    if($("#left").css("width") == "0px"){
        $("#left").animate({width:"230px"}, 500 );
        $("#right").animate({marginLeft:"230px"}, 500);
        $("#wrapper, #container").animate({backgroundPosition:"0 0"}, 500);
        $(".hide-btn.top, .hide-btn.center, .hide-btn.bottom").animate({left:"223px"}, 500);
    }
    else{
        $("#left").animate({width:"0px"}, 500 );
        $("#right").animate({marginLeft:"0px"}, 500);
        $("#wrapper, #container").animate({backgroundPosition:"-230px 0px"}, 500);
        $(".hide-btn.top, .hide-btn.center, .hide-btn.bottom").animate({left:"-7px"}, 500);
    }
});

Here is a screenshot what happend:

Answer 1

Its as simple as this:

$(window).trigger("resize");

Fullcalendar’s resize function is internally bound to the window resize event using jQuery so if you trigger that event using jQuery everything is great. The only slight problem is that you will also trigger anything else bound to the window’s resize event at the same time. That shouldn’t be a problem as since the window is the same size as it was this should be equivalent to a no-op, but its a bit inefficient. If you happen to need to specifically fire the resize function inside fullcalendar, that is only possible by hacking the fullcalendar script. I can tell you how to do it if you ask.

Because you are using animations, you will need to call this after the animations complete as the position values will not have fully changed until then. You do this like this:

...
  $(".hide-btn.top, .hide-btn.center, .hide-btn.bottom").animate({left:"223px"}, 500,
    function() { $(window).trigger("resize"); });
} else {
...
  $(".hide-btn.top, .hide-btn.center, .hide-btn.bottom").animate({left:"-7px"}, 500,
    function() { $(window).trigger("resize"); });
}