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