The issue

I have a Fullcalendar page created and have populated events on the view. The issue is that I only want the calendar to use 100% of the visible height. I can achieve this with the following if the calendar is set to "Month" view;

<div id="calendarholder" class="col-sm-12 full-height">
    <div id='calendar'></div>
</div>

I have a button that calls the following function:

function resize(){
    console.log("resizing....");
    var calHeight = $('#calendarholder').height();
    console.log(calHeight);
    $('#calendar').fullCalendar('option', 'height', calHeight);
  };

The size of the container is set via css with the following and I can confirm the correct size is being detected in the function due to the console output.

.full-height{
    height: calc(100vh - 50px);
}

At the moment, the calendar is being rendered bigger than the screen size and so a scroll bar appears on the side of my page. If I use the above function while the view is set to "Month", I can see the calendar instantly changes to fit to the page. However, if I use the function while I have the option defaultView: "agendaWeek" set, it would appear that it has no affect at all.

What I have tried

The function above

Attempting to set the contentHeight

Attempting to set all the options manually

Manual hacks for the height but this fails to keep the header bar in line with the rest of the columns

I just don't understand why this is not working for the "agendaWeek" view but does for the others.

链接地址: http://www.djcxy.com/p/39426.html

上一篇: 泛型类型转换FROM字符串

下一篇: 无法设置Fullcalendar议程视图的高度