如果视口为480px或更小，则更改为FullCalendar中的basicDay视图

Question

有没有一种简单的方法可以根据FullCalendar中的当前视口大小更改用户的视图？

我想做的是在桌面上有月视图，如果使用iPhone或移动设备，则有日视图。目前，以月为单位，所有的活动都在手机上被压缩了。

当前代码：

$(document).ready(function() {
    $("#primary #calendar").fullCalendar({
        header: {
            left: 'prev,next',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        timeFormat: 'h(:mm)tt',         
        eventSources: [
            {
                url: 'http://www.google.com/mycal1',
                color: 'blue',
                textColor: 'white'
            },
            {
                url: 'http://www.google.com/mycal2',
                color: 'white',
                textColor: 'black'
            }
        ]
    })
});

Answer 1

这可能不是你想要的，但它可能会让你朝着正确的方向开始。

我们的网站响应迅速，我们在大多数页面上都包含"viewScreenSize"功能。。。

var thisScreenWidth = 0, thisScreenHeight = 0;
function viewScreenSize() {
    if (typeof (window.innerWidth) === 'number') {
        //Non-IE
        thisScreenWidth = window.innerWidth;
        thisScreenHeight = window.innerHeight;
    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        //IE 6+ in 'standards compliant mode'
        thisScreenWidth = document.documentElement.clientWidth;
        thisScreenHeight = document.documentElement.clientHeight;
    } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        //IE 4 compatible
        thisScreenWidth = document.body.clientWidth;
        thisScreenHeight = document.body.clientHeight;
        screenWidth = thisScreenWidth;
    }
    // screenSize = div in page footer  
    $("#screenSize").html(thisScreenWidth + "x" + thisScreenHeight);
}

当fullCalendar加载到"$（document）.ready（function（）｛｝"中，并且我们的屏幕宽度大于601时。。。

if（thisScreenWidth<601）$（'#calendar'）.fullCalendar（'changeView'，'basicDay'）；

调整屏幕大小时。。。

$(window).bind('resize', function () {
    if (thisScreenWidth < 601) $('#calendar').fullCalendar('changeView', 'basicDay');
    else $('#calendar').fullCalendar('changeView', 'month');
});

工作示例。。。http://theelmatclark.com/AboutUs/Calendar-仅调整浏览器窗口的大小-当您调整大小时，当前宽度/高度显示在[主页]按钮旁边的页脚中。

也许还有更好的方法，但我还没有找到。祝你好运

问题。。。有人知道把标题分成多行的方法吗？