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

Я использую fullcalendar, и приведенный ниже код работает для меня, чтобы отображать 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 defaultView на основе screenWidth. Что-то вроде этого, но почему-то не работает:

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

or 

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

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


ruby javascript fullcalendar turbolinks fullcalendar-3
person Yshmarov    schedule 08.11.2019    source источник
comment
какую версию fullcalendar вы используете? а как ты его устанавливал?   -  person lacostenycoder    schedule 08.11.2019

Ответы (2)


arrow_upward
3
arrow_downward

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

$(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');
  }
});
person lacostenycoder    schedule 08.11.2019

arrow_upward
1
arrow_downward

Если кому-то интересно, вот как вы это сделаете с 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 }
    />
}
person Cornelius Lamb    schedule 28.09.2020