Javascript Fullcalendar:在调整窗口大小时调整高度(也称为收缩,同时保留纵横比)

Javascript Fullcalendar:在调整窗口大小时调整高度(也称为收缩,同时保留纵横比),javascript,jquery,html,css,fullcalendar,Javascript,Jquery,Html,Css,Fullcalendar,我完全无法调整FC(fullcalendar)的高度。我正在尝试在一个分区中安装一个FC,希望FC完全填充分区,但不要超出分区。初始化日历时,“高度”属性似乎没有效果。然而,FC的宽度似乎与其父div的宽度相适应,而且,它会相应地调整大小。但足球俱乐部的身高却不一样。这将创建一个不再可读的长而窄的FC。如何在保留长宽比的同时调整FC的大小,使其不会变得不可读? 提前谢谢 附言: 为了清楚起见,我已经阅读了文档,并尝试使用JQuery(以及css)动态设置FC的高度,但这不起作用,我不明白为什么

我完全无法调整FC(fullcalendar)的高度。我正在尝试在一个分区中安装一个FC,希望FC完全填充分区,但不要超出分区。初始化日历时,“高度”属性似乎没有效果。然而,FC的宽度似乎与其父div的宽度相适应,而且,它会相应地调整大小。但足球俱乐部的身高却不一样。这将创建一个不再可读的长而窄的FC。如何在保留长宽比的同时调整FC的大小,使其不会变得不可读? 提前谢谢

附言: 为了清楚起见,我已经阅读了文档,并尝试使用JQuery(以及css)动态设置FC的高度,但这不起作用,我不明白为什么

$(文档).ready(函数(){
//----------计划初始化----------
$('附表1')。完整日历({
主题:假,
//contentHeight:$('#scheduleDiv').height(),
内容高度:“自动”,
//高度:“自动”,
默认日期:“2000-01-03”,
defaultView:'agendaWeek',
columnFormat:'dddd',
全天时段:错,
minTime:“07:00:00”,
maxTime:“21:00:00”,
导航链接:错误,
可编辑:false,
eventLimit:对,
标题:false
});
$(“#附表_1”).fullCalendar('option','height',100);//似乎没有任何效果。。。
});
html{
位置:相对位置;
最小高度:100%;
}
身体{
背景色:#FCFDFE;
最小高度:100%;
边缘底部:60px;
溢出y:滚动;
}

第二纵队


这是因为contentHeight设置为“自动”

因此,它不会反映出您试图在上面一行中设置的代码

为供参考,我提供了以下链接:

要解决高度的具体问题,请尝试将整个日历的高度设置为小于自动计算的日历内容高度。这在逻辑上是不可能的

如果将contentHeight选项也设置为相同的值(或更小),则它将根据需要收缩高度,如下所示:

$(文档).ready(函数(){
//----------计划初始化----------
$('附表1')。完整日历({
主题:假,
默认日期:“2000-01-03”,
defaultView:'agendaWeek',
columnFormat:'dddd',
全天时段:错,
minTime:“07:00:00”,
maxTime:“21:00:00”,
导航链接:错误,
可编辑:false,
eventLimit:对,
标题:false,
身高:100,
内容高度:100
});
//$(“#附表_1”).fullCalendar('option','height',100);//似乎没有任何效果。。。
});
html{
位置:相对位置;
最小高度:100%;
}
身体{
背景色:#FCFDFE;
最小高度:100%;
边缘底部:60px;
溢出y:滚动;
}

第二纵队


但此日历没有内容,对吗?我将内容理解为事件。更改内容高度只会添加一个滚动条,而不考虑纵横比。如何从根本上缩小日程?就fullCalendar而言,“内容”是放置事件的网格,无论是否放置任何事件。至于“微型化”,正如我在回答中所说的,如果你对你的实际意思有一个概念,这会有所帮助。一旦你把它缩小到某一点,它就不可读了。fullCalendar并没有真正的“移动设备”模式,如果这是你想要的。如果您希望内容量更小,可以设置
高度:“auto”
并将
慢速持续时间更改为更大的值(根据您的需要),这将使内容高度在物理上更短。但这只会创建一个滚动条。我希望日历垂直收缩,没有滚动条。您可以使用CSS更改控制滚动条,如下所示:overflow-x:hidden;溢出y:隐藏;这将有助于解决您的问题。
$('#schedule_1').fullCalendar('option', 'height', 100); //Seems to have no effect...