jQuery fullcalendar div больший календарь не растягивается

Question

У меня работает полный календарь.Но у меня есть боковая панель, пользователи могут свернуть это, тогда окно контента становится больше, но когда пользователь делает это, календарь уже не так хорош, как был.

Так что я думал о функции изменения размера окна, но это толькоработает, когда окно браузера изменено, так как сделать так, чтобы fullcalendar реагировал, когда контейнер становится больше или меньше?

JS для отображения календаря:

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

Класс боковой панеликнопка скрытия и показа .hide-btn

JS для скрытия и показа боковой панели:

$(".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);
    }
});

Вот скриншот, что произошло:

Answer 1

Это так просто:

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

Функция изменения размера Fullcalendar внутренне связана с событием изменения размера окна, используя jQuery, поэтому, если вы инициируете это событие, используя jQuery, все отлично. Единственная небольшая проблема заключается в том, что вы также будете одновременно запускать все, что связано с событием изменения размера окна. Это не должно быть проблемой, так как окно имеет такой же размер, как и раньше, это должно быть эквивалентно неактивному режиму, но немного неэффективно. Если вам нужно специально запустить функцию изменения размера внутри fullcalendar, это возможно только путем взлома скрипта fullcalendar. Я могу рассказать вам, как это сделать, если вы спросите.

Поскольку вы используете анимацию, вам нужно будет вызывать ее после завершения анимации, поскольку до тех пор значения положения не будут полностью изменены. Вы делаете это так:

...
  $(".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"); });
}