Промяна на опциите за изглед на пълен календар и заглавка въз основа на ширината на прозореца за изглед?

fullCalendar е добавка за календар на jquery. Използвам го за представяне на данни от един google календар.

Имам две точки на прекъсване на ширината на прозореца за изглед, за които бих искал комбинацията от изглед на календара по подразбиране и опции за заглавката на календара да е различна.

При по-малко от 700px изгледен прозорец:

  • изгледът по подразбиране трябва да бъде agendaDay и не трябва да има налични опции за бутон за заглавие за промяна на изгледа, например на agendaWeek или month.

При прозорец за изглед над 700px:

  • Изгледът по подразбиране трябва да е agendaWeek и трябва да има налични бутони за заглавки за избор на различни изгледи (като agendaDay и month заедно с изгледа по подразбиране на agendaWeek).

Имам работещ код за по-голямата комбинация от изглед на календар и опции за заглавка (вижте по-долу).

Въпросът ми е какъв javascript ще представи изглед по подразбиране на agendaDay без опции за заглавка, ако ширината на прозореца за изглед е под 700px, или изглед по подразбиране на agendaWeek с опции за заглавка за промяна на изгледа, ако ширината на прозореца за изглед е 700px или повече?

<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" изобразява бутоните за опции за изглед на заглавката, които бих искал да бъдат премахнати за ширини под точката на прекъсване от 700px.

  • Този стек overflow post е донякъде свързано, но разглежда само промяната на изгледа по подразбиране въз основа на ширината на прозореца за изглед.


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 с новите опции, когато размерът се промени над знака 700px.

Освен това източник.

Пример за унищожаване и създаване наново

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 трябва да има стойност за right, така: right: ''. Ще актуализирам първоначалния си въпрос, за да отразя това. - 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