Question

我尝试创建一个日历，将其大小调整为父级div但没有成功。它使用宽度而不是高度。

我还没有修改过Fullcalendar lib的任何属性。我不希望有固定的高度，因为我希望div / calendar调整为用户屏幕大小。

HTML：

<body>
<div class="div-container">
<div id='calendar'></div>
</div>
</body>

CSS：

.div-container{
width: 90%;
margin: 0 auto;
height: 100px!important;
}

Answer 1

Fullcalendar有一个windowResize回调，根据他们的文档是：

在日历的尺寸因更改而被更改后触发浏览器窗口正在调整大小。

考虑到这一点，以及它具有高度属性的事实，如果你得到你正在寻找的div的高度，你应该能够做到这样的事情：

function get_height() {
      return $(window).height();
}

$('#calendar').fullcalendar({
    height: get_height(),
    windowResize:  function(view) {
        $('#calendar').fullCalendar('option', 'height', get_calendar_height());
    },
    [...]

确保您使用的选择器（在这种情况下为$（窗口））实际上具有高度，或者您的日历不会有任何高度。

Fullcalendar：将日历高度调整为父div

1 个答案: