使日历适合容器

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',        
    });

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

日历是否可以'maximize'适合容器？

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

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

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

Answer 1

添加以下内容，您将获得所需的显示：

.fc-slats table{
      height: 800px ;
    }

要使其动态调整，您需要获取容器的高度并重新设置。

 $( window ).resize(function() {
   var newHeight = $('#container').height();
   $( ".fc-slats > table" ).css( "height", newHeight );
});

Answer 2

改进@BrianMcAuliffe 的回答。

有必要添加 .fc-slats > table 底部差异的高度，因此您需要避免 headers、工具栏、自定义元素等的大小，它们会因您的自定义而异设置或样式。将内容 table 高度设置为容器高度会溢出容器。

底部的差异可以这样获得：

var bottomContainerPos = $('#container')[0].getBoundingClientRect().bottom;
var bottomTablePos = $('.fc-slats')[0].getBoundingClientRect().bottom;
var bottomDifference = bottomContainerPos - bottomTablePos ;

现在我们可以将差异添加到实际高度：

 var newHeight = parseInt(currentHeight) + bottomDifference;
 $( ".fc-slats > table" ).css( "height", newHeight );

由于 table 边框，仍有一些像素可能出现在下方。

你可以查看一下in this plnkr

更新

修改 table 样式时，仍会根据默认行大小创建广告位，因此添加活动不会与其时间对齐，因为您可以检查向该提案添加任何活动。 Plnkr to reproduce it with events

Answer 3

好的，根据马里奥的回答，我已经纠正了错误。

基本上：

创建日历
获取尺寸
将尺码添加为 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

使日历适合容器

Fit calendar to container

fullcalendar

更新