fullcalendar динамически изменять вид по умолчанию в зависимости от ширины экрана - PullRequest
Новая
       34

fullcalendar динамически изменять вид по умолчанию в зависимости от ширины экрана

0 голосов
/ 08 ноября 2019

Я использую 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 на основе screenWidth. Примерно так, но по какой-то причине это не работает: 

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

или 

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

Как я могу адаптировать его к своему календарю? Пожалуйста, помогите!

1 Ответ

2 голосов
/ 08 ноября 2019

Если под «динамическим изменением» вы подразумеваете, что хотите изменить его, когда пользователь изменяет размер своего браузера, вам необходимо прослушать изменение размера окна. 

$(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');
  }
});
...