Как отобразить все события года? - PullRequest
Новая
       10

Как отобразить все события года?

3 голосов
/ 02 марта 2020

Мне нужно отобразить все события года, начиная с текущей даты, поэтому с марта по декабрь я пытался настроить свойство visibleRange следующим образом: 

document.addEventListener('DOMContentLoaded', function() {

var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'list' ],

  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'listDay'
  },
  views: {
    listDay: { buttonText: 'list day' },
    listWeek: { buttonText: 'list week' }
  },

  defaultView: 'listWeek',
  navLinks: true, 
  editable: true,
  eventLimit: true,
  events: <?= json_encode($events) ?>,
  visibleRange: {
     start: '2020-03-01',
     end: '2020-12-31'
  }
});

calendar.render();
});

проблема в том, что Я получаю только месяц March есть ли способ достичь этого?

1 Ответ

2 голосов
/ 02 марта 2020

Я получаю только март месяц

На самом деле, согласно вашему коду, вы получите только одну неделю или один день. Вы не можете даже показать целый месяц, основываясь на том, что вы написали.

Проблема с вашей попыткой, хотя и является простой логической. Вы определены как listWeek и listDay. Имена в них фиксируют период времени - «неделя» и «день», которые будут охватывать представления. Этот фиксированный период имеет приоритет над любой настройкой visibleRange.

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

header: {
  left: 'prev,next today',
  center: 'title',
  right: 'list'
},
defaultView: 'list',

Однако выше ограничит вас только указанным точным периодом времени. Вы не можете перейти в другой год. Чтобы создать эту динамику c, вы можете использовать функцию для вычисления видимого диапазона каждый раз, когда необходимо изменить представление: 

visibleRange: function(currentDate) {
  var yr = currentDate.getFullYear();
  return {
    start: yr + '-03-01',
    end: yr + '-12-31'
  }
},
dateIncrement: { "years": 1}

Демо: https://codepen.io/ADyson82/pen/XWbgyGZ

PS Указание имени представления без периода времени уже продемонстрировано в документации visibleRange .

...