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

rqenqsqc 于 2022-12-12 发布在 Ruby

关注(0)|答案(3)|浏览(151)

我正在使用fullcalendar，下面的代码可以在使用turbolink的同时渲染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');
}

我怎样才能使它适应我的日历？请帮助！

ruby

来源：https://stackoverflow.com/questions/58758782/fullcalendar-dynamically-change-default-view-based-on-screen-width

3条答案

按热度按时间

vdzxcuhz1#

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

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

但是也要检查你的浏览器控制台是否有错误。看起来从4.0+版本开始，那些视图已经被重命名了请参见changelog，所以你可能需要传递不同的视图名称，如下所示：

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

赞(0）回复(0）举报 2022-12-12

guz6ccqo2#

如果有人感兴趣，这里是你将如何做它与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 }
    />
}

赞(0）回复(0）举报 2022-12-12

pcww981p3#

对于版本5：

window.addEventListener('resize', function(){
    if (document.body.clientWidth < 800) {
        calendar.changeView('listMonth');
    } else {
        calendar.changeView('dayGridMonth');
    }
})

https://codepen.io/rsaraceni/pen/zYabYxz?editors=0010

赞(0）回复(0）举报 2022-12-12

我来回答

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

3条答案

相关问题

热门标签

最新问答