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

当在'$（document）.ready（function（）{}'中加载fullCalendar并且我们的屏幕宽度超过601时...

if（thisScreenWidth＆lt; 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]按钮旁边的页脚中。

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

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

如果视口是480px或更低，请更改为FullCalendar中的basicDay视图？

1 个答案: