如果视口是480像素或更少，则更改为FullCalendar中的basicDay视图？ [英] Change to basicDay view in FullCalendar if viewport is 480px or less?

问题描述

我有一个简单的方法来根据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'
}，
 {
网址：'http://www.google.com/mycal2'，
颜色：'white'，
 textColor：'black'
} 
] 
}）
}）; 
  

解决方案

这可能不是您正在寻找的内容，但它可能会让你开始朝着正确的方向前进。

我们的网站是响应式的，我们在大多数页面上都包含了'viewScreenSize'功能...

  var thisScreenWidth = 0，thisScreenHeight = 0; 
函数viewScreenSize（）{
 if（typeof（window.innerWidth）==='number'）{
 //非IE 
 thisScreenWidth = window.innerWidth; 
 thisScreenHeight = window.innerHeight; 
} else if（document.documentElement&&（document.documentElement.clientWidth || document.documentElement.clientHeight））{
 //符合'标准兼容模式'的IE 6+ 
 thisScreenWidth = document.documentElement.clientWidth; 
 thisScreenHeight = document.documentElement.clientHeight; 
} else if（document.body&& ;;（document.body.clientWidth || document.body.clientHeight））{
 // IE 4兼容
 thisScreenWidth = document.body。 clientWidth; 
 thisScreenHeight = document.body.clientHeight; 
 screenWidth = thisScreenWidth; 
} 
 // screenSize =页脚中的div 
 $（＃screenSize）。html（thisScreenWidth +x+ thisScreenHeight）; $（b）
 
 
 
 
 $ b当fullCalendar加载到'$（document）.ready（function（） {}'和我们的屏幕宽度比601 ... 
 
 
 
 if（thisScreenWidth <601）$（'＃calendar'）。fullCalendar（'changeView'， 'basicDay'）; 
 
 
 
当屏幕被调整大小时... 
 <$ c $如果（thisScreenWidth< 601）$（'＃calendar'）。fullCalendar（'changeView'，'basicDay'）; $ b $（'resize'，function（）{
 b else $（'＃calendar'）。fullCalendar（'changeView'，'month'）; 
}）; 
  
工作示例...  http://theelmatclark.com/AboutUs/Calendar  - 仅调整浏览器窗口大小 - 当您调整大小时，当前的宽度/高度显示在[Home]按钮旁边的页脚中。
可能有更好的方法，但我还没有找到一个。祝你好运。
 
 
 
问题...有没有人kn有没有办法将标题分成多行？
 
Is there an easy way to change the view for a user based on the current viewport size in FullCalendar?

What I'd like to do is have month view on desktop, and day view if using an iPhone or mobile device. At the moment with month view all the events are squashed up on mobile.

Current code:
$(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'
            }
        ]
    })
});

解决方案
This may not be exactly what you are looking for, but it may get you started in the right direction.

Our websites are responsive and we include the 'viewScreenSize' function on most every page...
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);
}
When fullCalendar is loaded in '$(document).ready(function () {}' and our screen width is led than 601 ...

if (thisScreenWidth < 601) $('#calendar').fullCalendar('changeView', 'basicDay'); 

When the screen is resized...
$(window).bind('resize', function () {
    if (thisScreenWidth < 601) $('#calendar').fullCalendar('changeView', 'basicDay');
    else $('#calendar').fullCalendar('changeView', 'month');
});
Working example... http://theelmatclark.com/AboutUs/Calendar - merely resize the browser window - as you resize, the current width/height appear in the footer next to the [Home] button.

There may be better ways, but I haven't found one yet. Good luck.

Question... Does anyone know of a way to divide the header into multiple lines?

                        
这篇关于如果视口是480像素或更少，则更改为FullCalendar中的basicDay视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！