完整的日历适合容器并隐藏滚动 [英] Full calendar fit to container and hide scroll

问题描述

我无法弄清楚如何缩放全日历以适应其父容器.我想在不滚动的情况下为用户在单个页面上显示周视图(因此他们可以快速查看一周的项目).

I cannot figure out how to scale fullcalendar to fit to it's parent container. I want to display week view on a single page for users without need to scroll (So they quickly review items for a week).

我可以确定是否要缩小文本，缩小插槽高度等等，但是我只是不确定如何根据浏览器窗口的大小动态地执行此操作.
(在我的日历中，我使用的是slotMinutes:10 and times from 8am to 10pm)
带有完整日历的jsfiddle: http://jsfiddle.net/bQXYp/27/

I'm ok if I need to make text small, slots height smaller, etc, but I just not sure how to do this dynamically based on the size of the browser window.
(In my calendar I'm using slotMinutes:10 and times from 8am to 10pm)
jsfiddle with fullcalendar: http://jsfiddle.net/bQXYp/27/

推荐答案

要考虑几个因素.

如果您要坚持将slotMinutes设置为10，那么在不手动修改字体大小以使其几乎难以辨认的情况下，很难在页面上适应从上午8点到晚上10点的时间范围.

If you want to stick to having slotMinutes set to 10, then it is going to be quite difficult to fit time ranges from 8 AM to 10 PM on to the page without manually hacking the font size to be almost illegible.

如果可以将slotMinutes属性增加到30甚至60，则很有可能无需滚动即可显示每周视图.

If you are okay with increasing the slotMinutes attribute to something like 30 or even 60, you have a pretty good chance of getting your weekly view showing up without the need to scroll.

除此之外，还可以使用两个属性来影响日历的尺寸.第一个是height.但是，这会设置无法动态缩放的像素值.第二个是aspectRatio，它允许定义宽度与高度的比率.换句话说，aspectRatio值为2表示它将尝试将高度拉伸为宽度的两倍(如果需要的话，则完全是这样的高度).

Apart from that, there are two properties you could use to influence the dimensions of the calendar. The first one is height. However this sets a pixel value which does not scale dynamically. The second one is aspectRatio which allows to the define the ratio of width to height. In other words, aspectRatio value of 2 means that it will try and stretch the height to be double that of the width (if at all that amount of height is needed).

我在这里设置了一个示例，向您展示了拥有合理的slotMinutes的效果价值.我认为，这对于实现您的需求至关重要.

I have set up an example here that shows you the effect of having a reasonable slotMinutes value. In my opinion, this is what will be most important to be able to achieve what you need.

这篇关于完整的日历适合容器并隐藏滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！