Изменить параметры просмотра и заголовка fullCalendar в зависимости от ширины области просмотра?

fullCalendar — это подключаемый модуль календаря jquery. Я использую его для представления данных из одного календаря Google.

У меня есть две контрольные точки ширины области просмотра, для которых я хотел бы, чтобы комбинация представления календаря по умолчанию и параметров заголовка календаря была разной.

В области просмотра менее 700 пикселей:

  • представление по умолчанию должно быть agendaDay, и не должно быть доступных кнопок заголовка для изменения представления, например, на agendaWeek или month.

В окне просмотра более 700 пикселей:

  • Представление по умолчанию должно быть agendaWeek, и должны быть доступны кнопки заголовка для выбора различных представлений (например, agendaDay и month вместе с представлением по умолчанию agendaWeek).

У меня есть рабочий код для более крупной комбинации просмотра календаря и параметров заголовка (см. Ниже).

Мой вопрос заключается в том, какой javascript будет отображать представление по умолчанию agendaDay без параметров заголовка, если ширина области просмотра ниже 700 пикселей, или представление по умолчанию agendaWeek с параметрами заголовка для изменения представления, если ширина области просмотра составляет 700 пикселей или более?

<script src="/libs/jquery/dist/jquery.min.js"></script>
<script src="/libs/moment/moment.js"></script>
<script src="/libs/fullcalendar/dist/fullcalendar.min.js"></script>
<script src="/libs/fullcalendar/dist/gcal.js"></script>
<script>
  $('#calendar').fullCalendar({
    googleCalendarApiKey: 'key',
    events: {
      googleCalendarId: 'id'
    },
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'agendaDay,agendaWeek,month'
    },
    eventBackgroundColor: 'transparent',
    eventBorderColor: '#08c',
    eventTextColor: 'black',
    height: 'auto',
    defaultView: 'agendaWeek',
    allDaySlot: false,
  });
</script>

Примечания

  • В приведенном выше коде пара right: "agendaDay,agendaWeek,month" ключ: значение отображает кнопки параметров представления заголовка, которые я хотел бы удалить для ширины ниже контрольной точки 700 пикселей.

  • Этот стек сообщение о переполнении несколько связано, но рассматривает только изменение представления по умолчанию в зависимости от ширины области просмотра.


javascript jquery responsive-design fullcalendar
person Brian Zelip    schedule 23.01.2015    source источник
comment
Проверьте stackoverflow.com/questions/18296736/, что кажется более или менее тем же вопросом   -  person bhttoan    schedule 23.01.2015
comment
@bhttoan, этот пост связан и предлагает то же решение от того же участника переполнения стека, что и ответ в посте, на который я ссылался в разделе моих заметок выше. Но это не учитывает изменение параметров заголовка в зависимости от области просмотра.   -  person Brian Zelip    schedule 23.01.2015

Ответы (2)


arrow_upward
11
arrow_downward

Fullcalendar не может изменить свои параметры после инициализации. Итак, у вас есть два варианта:

  • Используйте CSS, чтобы условно скрыть кнопки.
  • Уничтожьте и заново создайте FC с новыми параметрами, когда размер превысит отметку в 700 пикселей.

Кроме того, источник.

Пример уничтожения и воссоздания

var $fc = $("#calendar");

var options = { // Create an options object
  googleCalendarApiKey: 'key',
  events: {
    googleCalendarId: 'id'
  },
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'agendaDay,agendaWeek,month'
  },
  eventBackgroundColor: 'transparent',
  eventBorderColor: '#08c',
  eventTextColor: 'black',
  height: 'auto',
  defaultView: 'agendaWeek',
  allDaySlot: false,
}
$fc.fullCalendar(options);

function recreateFC(screenWidth) { // This will destroy and recreate the FC taking into account the screen size
  if (screenWidth < 700) {
    options.header = {
      left: 'prev,next today',
      center: 'title',
      right: ''
    };
    options.defaultView = 'agendaDay';
  } else {
    options.header = {
      left: 'prev,next today',
      center: 'title',
      right: 'agendaDay,agendaWeek,month'
    };
    options.defaultView = 'agendaWeek';
  }
}

$(window).resize(function (e) { //set window resize listener
  recreateFC($(window).width()); //or you can use $(document).width()
});

А вот полностью рабочий пример: http://jsfiddle.net/slicedtoad/kjponpf1/6/

person DanielST    schedule 23.01.2015
comment
как написать javascript для перестройки FC на основе ширины области просмотра? Я вижу, что есть метод уничтожения -- fullcalendar.io/docs/display/destroy - - а как его вернуть с нужными опциями? - person Brian Zelip; 23.01.2015
comment
СПАСИБО! Я подправил одну часть вашего скрипта, чтобы заставить его работать правильно — в операторе if должно быть значение для права, например: право: ''. Я обновлю свой первоначальный вопрос, чтобы отразить это. - person Brian Zelip; 23.01.2015
comment
@BrianZ Ах, да. Если вы не установите его, он станет значением по умолчанию, а не пустым. - person DanielST; 23.01.2015
comment
Я говорил слишком рано. Перейдите к примеру jsfiddle. Когда эта страница загружается в первый раз, заголовок «Январь 2015» находится слева, а кнопка «Сегодня» и стрелки — справа. Эти параметры нигде не указаны. ТОГДА, как только вы измените размер кадра, заголовок будет правильно отображаться в соответствии со сценарием. Почему?? - person Brian Zelip; 23.01.2015
comment
Да, это решает проблему неправильного заголовка при загрузке страницы. Кроме того, для полного ответа, который также изменяет представление календаря для каждого окна просмотра, вы должны добавить options.defaultView = 'agendaDay'; и options.defaultView = 'agendaWeek'; к своим операторам if и else соответственно. Можете ли вы обновить для записи? И еще раз большое спасибо. - person Brian Zelip; 23.01.2015
comment
@slicedtoad также означает, что fullcalendar (если он инициализирован только один раз) не может иметь тернарный оператор в опции... ex.hiddenDays:close_days=(typeof closedays!=='undefined')?closedays:[] - person Dimitris Papageorgiou; 20.05.2015
comment
@DimitrisPapageorgiou В значительной степени. Если опция FC принимает функцию, вы можете использовать ее, но тернарный оператор будет оценивать себя при первой инициализации FC. - person DanielST; 20.05.2015
comment
@slicedtoad большое спасибо за это. Как раз то, что я хотел. - person Michael; 19.03.2016
comment
Поскольку событие изменения размера запускается очень часто, рекомендуется свести к минимуму количество раз, когда объект должен быть уничтожен и повторно инициализирован. Это можно сделать, проверив вновь назначенный defaultView на основе предыдущего и повторно инициализировав его только в том случае, если значение действительно изменилось. Рабочий пример: jsfiddle.net/r52tjn3w - person mulquin; 05.07.2016

arrow_upward
0
arrow_downward

Обновление 2018 года:

Начиная с версии FullCalendar 2.9.0, можно динамически устанавливать параметры после инициализации. Эти изменения параметров будут применяться ко всем представлениям. В настоящее время невозможно установить параметры для конкретных видов таким образом. https://fullcalendar.io/docs/dynamic-options

Информация о конкретных параметрах просмотра здесь: https://fullcalendar.io/docs/view-specific-options

person Jenn Mottram    schedule 14.08.2018