fullcalendar - 调整日历大小以适应窗口大小变化

Question

我正在使用fullcalendar (由Adam Shaw开发的fullcalendar)

我想知道如何让我的fullcalendar根据浏览器窗口的大小动态改变大小？我已经研究了他的“render”函数，但一直无法弄清楚。

也就是说，当用户调整窗口大小时，我希望fullcalendar能够自动调整其宽度和高度以保持适当的纵横比。

- captainrad

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
    });
});

应用类似于宽度的方式。 或者您可以将日历放置在

中并进行操作。

- Matija Grcic

---

太好了。感谢您的帮助！ 附言：我相信您错过了一个额外的“});”，但没关系！ - captainrad

有些选项无法动态设置，例如“handleWindowResize”和“views”（请参见：https://fullcalendar.io/docs/dynamic-options） - Ouatataz

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();
            }
        }
    });
});

- Matt

Answer 3

当前视图在 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（默认设置）。

- Pierre de LESPINAY

Answer 4

我在谷歌上搜索了“响应式日历”，因为这是你想要的，只是我认为你不知道该如何表达。我相信我提供给你的链接可以帮助你入门。我假设你想使用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/

- dkroy

---

抱歉，我应该更清楚地表达。我正在使用Adam Shaws的fullcalendar jQuery插件。我已经更新了我的帖子以澄清！ - captainrad