6

有没有一种简单的方法可以根据 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'
            }
        ]
    })
});
4

1 回答 1

2

这可能不是您正在寻找的东西，但它可能会让您朝着正确的方向开始。

我们的网站是响应式的，我们在几乎每个页面上都包含“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] 按钮旁边的页脚中。

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

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

于 2013-08-18T11:06:12.590 回答