fullcalendar 高度自适应实现

情况描述：

fullcalendar 日历自己可以根据窗口宽度自适应，但是高度却是根据aspectRatio 属性来计算高度。

默认情况下，aspectRatio设置的宽高比是1.35 : 1，如果窗口的的宽高比小于这个比例的时候，就会出现日历超出显示范围的情况，也就是出现滚动条，月份的日历还好只有一个滚动条，但是周、日却会出现两个滚动条，显得很难看。

解决办法：

由于fullcalendar本身没有提供高度自适应的属性，那就写一个js脚本来动态改变高度，代码如下：

$('#calendar').fullCalendar({
    ...
    height : window.innerHeight-20,
    windowResize: function(view) {
        $('#calendar').fullCalendar('option', 'height', window.innerHeight-20);
    }
    ...
});

 

fullcalendar自身提供了windowResize事件，每次窗口改变大小之后会触发这个事件，这时候改变fullcalendar的高度为窗口高度减去20像素即可。之所以要减去20像素，是因为fullcalendar的高度会比设置的高度要高一小部分，减去20比较合适。