[英]fullcalendar dynamically change default view based on screen width
我正在使用 fullcalendar,下面的代码可以让我在使用 turbolinks 的同时渲染 fullcalendar。
function eventCalendar() {
return $('#event_calendar').fullCalendar({
defaultView: 'agendaWeek',
header: {
left: 'prev,today,next',
center: 'title',
right: 'agendaDay,agendaWeek'
},
});
};
function clearCalendar() {
$('#event_calendar').fullCalendar('delete'); // In case delete doesn't work.
$('#event_calendar').html('');
};
$(document).on('turbolinks:load', eventCalendar);
$(document).on('turbolinks:before-cache', clearCalendar)
但是我想根据changeView
动态screenWidth
defaultView
。 像这样的东西,但由于某种原因它不起作用:
if (window.innerWidth < 800) {
$('#event_calendar').fullCalendar('changeView', 'agendaDay');
}
要么
if(window.innerWidth < 800){
$('#event_calendar').fullCalendar('changeView', 'agendaDay');
}else{
$('#event_calendar').fullCalendar('changeView', 'agendaWeek');
}
我怎样才能使它适应我的日历? 请帮忙!
如果“动态更改”是指您想在用户调整浏览器大小时更改它,那么您需要监听 window 调整大小。
$(window).resize(function() {
if(window.innerWidth < 800){
$('#event_calendar').fullCalendar('changeView', 'agendaDay');
} else {
$('#event_calendar').fullCalendar('changeView', 'agendaWeek');
}
});
但还要检查您的浏览器控制台是否有错误。 看起来从 4.0+ 版本开始,这些视图已被重命名, 请参见更改日志,因此您可能需要传递不同的视图名称,如下所示:
$(window).resize(function() {
if(window.innerWidth < 800){
$('#event_calendar').fullCalendar('changeView', 'timeGridDay');
} else {
$('#event_calendar').fullCalendar('changeView', 'timeGridWeek');
}
});
如果有人对此感兴趣,那么您将如何使用 React/Typescript 进行操作。
import React, { FunctionComponent } from 'react';
import FullCalendar, { ViewContentArg } from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
const Calendar: FunctionComponent = (): JSX.Element => {
const handleSize = (event: ViewContentArg): void => {
let contentAPi = event.view.calendar;
if (window.innerWidth < 800) {
contentApi.changeView('timeGridDay');
} else {
contentApi.changeView('timeGridWeek');
}
}
return <FullCalendar
plugins={ [dayGridPlugin, timeGridPlugin, interactionPlugin] }
windowResize={ handleSize }
/>
}
对于版本 5:
window.addEventListener('resize', function(){
if (document.body.clientWidth < 800) {
calendar.changeView('listMonth');
} else {
calendar.changeView('dayGridMonth');
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.