fullcalendar根据屏幕宽度动态更改默认视图 [英] fullcalendar dynamically change default view based on screen width

问题描述

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

I'm using fullcalendar and the below code works for me to render fullcalendar while also using 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)

但是我想基于screenWidth动态地 changeView defaultView.像这样的东西，但是由于某些原因而无法正常工作:

However I want to dynamically changeView the defaultView based on screenWidth. Something like this, but it's not working for some reason:

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

或

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

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

How can I adapt it to my calendar? Please help!

推荐答案

如果通过动态更改"表示您要在用户调整浏览器大小时进行更改，那么您就需要监听窗口的大小.

If by "dynamically change" you mean you want to change it when the user resizes their browser, then you need to listen for window resize.

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

但是还要检查您的浏览器控制台中是否有错误.看起来从版本4.0开始，这些视图已重命名为

But also check your browser console for errors. It looks like as of version 4.0+ those views have been renamed see changelog so you may need to pass different view names like this:

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

这篇关于fullcalendar根据屏幕宽度动态更改默认视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！