Question

我正在使用fullcalendar（fullcalendar by adam shaw）

我想知道我需要做什么才能让我的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;
}

对于任何其他自定义（更改高度或默认视图），请使用FullCalendar的内置windowResize事件。接受答案的缺点是，对于每个像素更改，函数将在窗口调整大小时运行。相反，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();
            }
        }
    });
});

Answer 3

我用谷歌搜索“响应日历”，因为这就是你想要的我只是认为你不知道怎么说出来。我相信我提供给你的链接可以帮助你。我假设你想使用javascript / jquery这样做，因为你的标签。如果链接有用，那也没关系，因为现在你知道要搜索什么，祝你好运！

响应式日历演示：
http://dbushell.com/demos/calendar/v1_03-01-12.html
http://www.manystrands.com/projects/calendar.html（在一定程度上改变议程观点。）

更多信息：
http://dbushell.com/2012/01/04/responsive-calendar-demo/

Answer 4

由于当前视图是在windowResize回调中传递的。

可以通过以下方式简单地管理响应行为：

$('#calendar').fullCalendar({
    # ...
    windowResize: function (view) {
        var current_view = view['name'];
        var expected_view = $(window).width() > 576 ? 'agendaWeek' : 'agendaDay';
        if (current_view !== expected_view) {
            $('#calendar').fullCalendar('changeView', expected_view);
        }
    }
})

此外，应确保将handleWindowResize设置为true（这是默认设置）

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

4 个答案: