如果视口是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 - 仅调整浏览器窗口的大小 - 当您调整大小时，当前宽度/高度显示在 [Home] 按钮旁边的页脚中。

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

问题...有谁知道将标题分成多行的方法吗？