fullcalendar - 调整窗口大小的日历大小

Question

我正在使用fullcalendar(adam shaw的fullcalendar)

我想知道我需要做什么,以便我的fullcalendar根据浏览器窗口的大小动态地改变大小？我已经调查了他的'渲染'功能,但是一直无法解决这个问题.

(即,当用户调整其窗口大小时,我希望fullcalendar将其宽度和高度重新调整为适当的宽高比)

Answer 1

这些都记录在案.

让我们看看,沿着这条路尝试一下:

//function to calculate window height
function get_calendar_height() {
      return $(window).height() - 30;
}

//attacht resize event to window and set fullcalendar height property
$(document).ready(function() {
    $(window).resize(function() {
        $('#calendar').fullCalendar('option', 'height', get_calendar_height());
    });


    //set fullcalendar height property
    $('#calendar').fullCalendar({   
            //options
            height: get_calendar_height
    });
});

应用类似于宽度.或者你可以在div中放置日历并以这种方式进行操作.

Answer 2

对于宽度,我们使日历变得灵活,随着响应式设计进行调整,并且它在较大的显示器上工作得很好:

#calendar {
    width: 100%;
    margin: 0 auto;
}

对于任何其他自定义(更改高度或默认视图),请使用windowResizeFullCalendar 的内置事件.接受答案的缺点是,对于每个像素更改,函数将在窗口调整大小时运行.相反,windowResize事件在调整大小完成后触发.

现在,响应式日历的问题在于你仍然受到桌子的支配 - 这是一个在小型移动屏幕上的可怕地方.

对于我们的项目,如果用户位于小于769px的屏幕上,我们会选择强制显示日视图.您可以在此示例中查看我们的方法.如果它对您不起作用,至少它会为您提供有关如何实施解决方案的指导.

$(function(){
    var $calendar = $('#calendar');
    $calendar.fullCalendar({
        windowResize: function() {
            var ww = $(window).width();
            var view = (ww <= 768) ? 'basicDay' : 'month';
            var currentView = $('#calendar').fullCalendar('getView');
            if(view != currentView){
                $calendar.fullCalendar('changeView',view);
            }
            if(ww <= 768){
                $calendar.find('.fc-header-right .fc-button').hide();
            }else{
                $calendar.find('.fc-header-right .fc-button').show();
            }
        }
    });
});