jQuery fullcalendar div大日历不舒展

Question

我有fullcalendar的工作。但我有一个侧边栏用户可以折叠这个，然后内容框变得更大，但是当用户这样做时，日历并不像以前那么好。

所以我想到了窗口调整大小的功能，但这只适用于浏览器窗口更改，以便如何使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事件。唯一的小问题是，你也会同时触发绑定到窗口的resize事件的其他东西。这应该不成问题，因为窗口的尺寸与它的尺寸相同，应该相当于无操作，但效率不高。如果您碰巧需要在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"); }); 
}