fullcalendar - 使日历适合容器

Question

我试图在容器上安装完整日历，但没有成功。我一直在修改 contentHeight、height 和 aspectRatio，但没有结果。

contentHeight:'auto' 如果容器不大于内容则工作正常，显示滚动条。

我得到的最佳日历配置如下:

$('#calendar').fullCalendar({
   header: {
            left: '',
            center: '',
            right: ''
        },
    defaultView:'agendaWeek',
    contentHeight:'auto',       //auto
    slotDuration: '00:60:00',        
});

如果我动态获取大小并设置它:

$('#calendar').fullCalendar({
       header: {
                left: '',
                center: '',
                right: ''
            },
        defaultView:'agendaWeek',
        contentHeight:766,     //specific height instead of auto
        slotDuration: '00:60:00',        
    });

日历会扩展，但只会扩展最后一行，显示丑陋的最后一行，而不是增加每一行以适应内容。它看起来像下面这样:

是否可以“最大化”日历以适合容器？

我做了一个plnkr where you can reproduce/fork it .

注意:我无法调整容器大小，容器高度是动态的。

我正在使用 2.3.2 版本，但它与我测试的所有其他版本相同。

Answer 1

好的，基于 Mario 的回答，我已经纠正了错误。

基本上:

• 创建日历
• 获取尺寸
• 将尺寸添加为 CSS 规则
• 摧毁FC
• 重新创建 FC，使其以正确的大小进行初始化

这不是最优雅的解决方案，但它会起作用。如果您要加载外部事件，请确保不要在您创建的第一个 FC 中加载它们。

var createFC = function () {
    $('#calendar').fullCalendar({
        header: {
            left: '',
            center: '',
            right: ''
        },
        defaultView: 'agendaWeek',
        contentHeight: 'auto',
        defaultDate: '2015-02-12',
        //contentHeight:766, //This fit the content expanding only last row
        slotDuration: '00:60:00',
        events: [{
            title: 'From 7 to 17... Not aligned properly',
            start: '2015-02-12 07:00:00',
            end: '2015-02-12 17:00:00'
        }, ]

    });
}
//Adds a css style sheet
addGlobalStyle = function (css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) {
        return;
    }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

createFC(); //Create the first FC

//Calculate size
var bottomDifference = $('#container')[0].getBoundingClientRect().bottom - $('.fc-slats')[0].getBoundingClientRect().bottom;
var currentHeight = $(".fc-slats > table").css("height");
var newHeight = parseInt(currentHeight) + bottomDifference;
//$( ".fc-slats > table" ).css( "height", newHeight );
addGlobalStyle(".fc-slats > table {height:" + newHeight + "px}");

//Destroy the fullcalendar
$('#calendar').fullCalendar('destroy');
//Create it again, this time with the correct CSS rules on init
createFC();

plnkr Demo