jQuery fullcalendar div 更大的日历不能很好地伸展

Question

我有完整的日历工作。但是我有一个侧边栏，用户可以折叠它，然后内容框会变大，但是当用户这样做时，日历就不那么好了。

所以我在考虑窗口调整大小功能，但这仅在浏览器窗口更改时才有效，那么如何使全日历在容器变大或变小时时做出反应？

显示日历的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 的 resize 函数内部绑定到使用 jQuery 的窗口 resize 事件，所以如果你使用 jQuery 触发该事件，一切都很好。唯一的小问题是您还将同时触发绑定到窗口的调整大小事件的任何其他内容。这不应该是一个问题，因为窗口的大小与它的大小相同，这应该相当于无操作，但它的效率有点低。如果您碰巧需要在 fullcalendar 中专门触发 resize 函数，那只能通过破解 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"); });
}