fullcalendar根据屏幕宽度动态更改默认视图

2024-05-05 • 问答

我正在使用fullcalendar，下面的代码对我来说可以渲染fullcalendar，同时还可以使用Turbolinks。

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基于defaultView的{{1}}。像这样的东西，但是由于某些原因而无法正常工作：

screenWidth

或

if (window.innerWidth < 800) {
            $('#event_calendar').fullCalendar('changeView','agendaDay');
        }

如何使其适合我的日历？请帮忙！

如果“动态更改”是指您要在用户调整浏览器大小时进行更改，那么您需要侦听窗口调整大小。

$(window).resize(function() {
  if(window.innerWidth < 800){
    $('#event_calendar').fullCalendar('changeView','agendaDay');
  } else {
    $('#event_calendar').fullCalendar('changeView','agendaWeek');
  }
});

还要检查您的浏览器控制台中是否有错误。从版本4.0+开始，这些视图已重命名为see changelog，因此您可能需要传递不同的视图名称，如下所示：

$(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 }
    />
}

fullcalendar根据屏幕宽度动态更改默认视图

talang2009 回答：fullcalendar根据屏幕宽度动态更改默认视图

大家都在问