使用FullCalendar
插件-我试图改变视图,为移动的设备"basicDay"
,但在桌面上,我仍然希望视图保持为“basicWeek”。
我是一个JS新手,尝试了各种不同的if/elseif
语句与JS
和PHP
,但我不能让日历显示正确的移动的设备。
你会看到我下面的代码,我使用的参数"windowResize"
-它工作得很好!仅当窗口调整大小时,但是当日历从移动终端加载时,视图仍然是“basicWeek”。
我尝试了各种说法来解决这个问题,没有运气,例如:
if( $(window).width() < 765 ) {
<?php $view = 'basicDay'; ?>
} else {
<?php $view = 'basicWeek' ?>
}
然后用PHP
回显该值(显然不起作用),并尝试过用JS
执行其他if/elseif
语句。下面是我的fullCalendar代码:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
},
titleFormat:'MMMM D YYYY',
hiddenDays: [0],
columnFormat: 'dddd',
defaultView: <?php echo "'" . $view . "'" ?>,
// responsive
windowResize: function(view) {
if ($(window).width() < 765){
$('#calendar').fullCalendar( 'changeView', 'basicDay' );
} else {
$('#calendar').fullCalendar( 'changeView', 'basicWeek' );
}
},
timeFormat: 'hh:mm A',
});
所以只是为了确认,我如何让我的日历在台式机上保持在basicWeek中,但在移动的设备上显示为basicDay?
先谢谢你。
6条答案
按热度按时间cld4siwp1#
使用功能检测移动的:
之后,在初始化日历时,调用此函数并设置defaultView如下:
osh3o9ms2#
如果您想使用窗口宽度而不是检测移动的功能,这将起作用。
avkwfej43#
在上一个版本的完整日历(4.3.1)中,您需要制作下一个:
f8rj6qna4#
如果任何人如果寻找的解决方案,将工作时,媒体查询的变化(不仅对日历初始化),我设法得到这个工作使用enquire.js库。
初始化您的日历与默认视图对应的移动的所需的视图(使用移动优先的方法在这里)。在我的情况下,我想在移动的/平板电脑上将日历折叠到monthList,并在更大的屏幕上使用月视图。
之后,附加enquir.register方法来监视媒体更改。Enquire还在页面加载时运行媒体检查,以便日历显示在所需的视图中。
pbgvytdp5#
从v5开始,
defaultView
被重命名为intialView
,所以可以这样做:nzrxty8p6#
我使用Typescript和Fullcalendar的React版本(带钩子),我想要一个解决方案,可以在调整大小时更改日历视图-以及根据当前浏览器宽度加载默认视图-所以这个解决方案可能会帮助那些有类似需求的人。
浏览器宽度小于765 px时,默认加载列表视图,否则加载日网格视图。如果浏览器宽度超过765 px的阈值,则视图会发生变化。
作为示例,我对类型定义和方法签名有点松懈,所以如果您要使用它,我建议您相应地修改它。