Fullcalendar 将日历安装到容器中

我正在尝试将完整日历安装到容器上，但没有成功。我一直在修改

contentHeight

、

height

和

aspectRatio

，但没有结果

contentHeight:'auto'

如果容器不大于内容，则可以正常工作，并显示滚动条

我得到的最佳日历配置如下所示：

$（“#日历”）.fullCalendar({
标题：{
左：''，
中心：''，
对：“”
},
defaultView:'agendaWeek'，
contentHeight:'auto'，//auto
慢速持续时间：“00:60:00”，
});

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

$（“#日历”）.fullCalendar({
标题：{
左：''，
中心：''，
对：“”
},
defaultView:'agendaWeek'，
contentHeight:766，//指定高度而不是自动高度
慢速持续时间：“00:60:00”，
});

日历将展开，但仅显示最后一行，显示丑陋的最后一行，如，而不是增加每一行以适应内容。如下所示：

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

我做了一个测试

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

---

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

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

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

要使其动态调整，您需要获得容器的高度并重置

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

---

改进@BrianMcAuliffe答案

有必要在

.fc slats>表中添加底部差异的高度，因此您需要避免标题、工具栏、自定义元素等的大小，这些大小可能会根据您的自定义设置或样式而有所不同。将内容表高度设置为容器高度将使容器溢出


底部的差异可通过如下方式获得：

var bottomContainerPos=$（'#container'）[0].getBoundingClientRect（）.bottom；
var bottomTablePos=$（'.fc slats'）[0].getBoundingClientRect（）.bottom；
var bottomDifference=bottomContainerPos-bottomTablePos；

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

var newHeight=parseInt（当前高度）+底部差；
$（.fc板条>表格”）.css（“高度”，新高度）；

由于表格边框的原因，下面仍可能出现一些像素

你可以查一下

更新
修改表格样式时，插槽仍然基于默认行大小创建，因此添加事件不会与其小时数对齐，因为您可以检查是否将任何事件添加到此提案中
 好的，基于马里奥的回答，我已经纠正了这个错误

基本上：


创建日历
知道尺寸了吗
将大小添加为CSS规则
摧毁FC
重新创建FC，使其以正确的大小初始化

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

var createFC=function（）{
$（“#日历”）.fullCalendar({
标题：{
左：''，
中心：''，
对：“”
},
defaultView:'agendaWeek'，
contentHeight:“自动”，
默认日期：“2015-02-12”，
//contentHeight:766，//这适合仅扩展最后一行的内容
慢速持续时间：“00:60:00”，
活动：[{
标题：“从7到17…未正确对齐”，
开始：“2015-02-12 07:00:00”，
完：“2015-02-12 17:00:00”
}, ]
});
}
//添加css样式表
addGlobalStyle=函数（css）{
var头、样式；
head=document.getElementsByTagName（'head'）[0]；
如果（！头）{
返回；
}
style=document.createElement（'style'）；
style.type='text/css'；
style.innerHTML=css；
头。附属物（样式）；
}
createFC（）//创建第一个FC
//计算尺寸
var bottomDifference=$（'#container'）[0]。getBoundingClientRect（）.bottom-$（'.fc slats'）[0]。getBoundingClientRect（）.bottom；
var currentHeight=$（.fc板条>表格”）.css（“高度”）；
var newHeight=parseInt（当前高度）+底部差；
//$（.fc板条>表格”）.css（“高度”，新高度）；
addGlobalStyle（“.fc板条>表格{height:+newHeight+“px}”）；
//销毁完整日历
$（'日历'）.fullCalendar（'销毁'）；
//再次创建它，这次在init上使用正确的CSS规则
createFC（）；

非常好。下面出现一条蓝色细线的原因是，表格上的所有行都需要具有相同的像素高度。因此，表的大小调整只能按24步（插槽数）进行。否则，您将有模糊的边框。我刚刚意识到插槽是基于默认样式渲染的，因此不会与新的时间线对齐：（谢谢，@slicedtoad。更有趣的是，就像在我的例子中，我将日历包装在angularJs指令中…这变得非常棘手。无论如何，我在项目中也打开了一个问题。也许你也想在那里分享你的代码。此外，如果能将这个问题开箱即用，那就太好了。