ужно иметь возможность установить «диапазон дат» с FullCalendar, используя представление «Список». Под диапазоном дат я имею в виду возможность ввода с использованием 2 текстовых полей, 2 разных дат, например:

Текстовое поле 1: 2018-05-05

в

Текстовое поле 2: 2018-05-06

И для фильтрации содержимого календаря, используя представление списка, чтобы отобразить результат и показать события, которые соответствуют этому диапазону дат.

Вот мой код для части FullCalendar:

 $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'listMonth, month,agendaWeek,agendaDay'
      },
      defaultView: 'listMonth',
      locale: 'fr',
      contentHeight: 600,
      navLinks: true, // can click day/week names to navigate views
      selectable: false,
      eventRender: function(event, element, view) { 
        element.find('.fc-widget-header').append("<div style='color:#fff'>Conférencier choisi</div>");
        element.find('.fc-title').append("<br/>" + event.lieu); 
        element.find('.fc-list-item-title').append("<br/>" + event.lieu); 
        element.find('.fc-list-item-title').append("<a href='" + event.lienconferencier + "'><div class='conferencier-calendrier-container'><div style='float:left;background-image:url(" + event.photoconferencier + ");width:40px;height:40px;background-size:cover;border-radius:100px;'></div><div style='float:left;padding-left:5px;font-weight:normal;'><strong>Conférencier</strong><br>" + event.conferencier + "</div></a>"); 
          return ['all', event.status].indexOf($('#filter-status').val()) >= 0 &&
             ['all', event.client].indexOf($('#filter-contact').val()) >= 0 && 
             ['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0 &&
             ['', event.numero].indexOf($('#numero').val()) >= 0;

      },
      selectHelper: true,
      editable: false,
      eventLimit: true, // allow "more" link when too many events
      events: [
        {
          title: 'Example',
          start: '2018-05-05',
          end: '2018-05-06',
          color: '#ff0000',
          lieu: 'Montreal',
          numero: '300445',
          conferencier: 'John Doe',
          photoconferencier: 'http://www.example.com/img/profile.jpg',
          lienconferencier: 'http://www.example.com/profile/link.html',
          url: 'http://www.google.com'
        },
{
          title: 'Example2',
          start: '2018-05-08',
          end: '2018-05-010',
          color: '#ff0000',
          lieu: 'New York',
          numero: '300446',
          conferencier: 'Steve Jobs',
          photoconferencier: 'http://www.example.com/img/profile2.jpg',
          lienconferencier: 'http://www.example.com/profile/link2.html',
          url: 'http://www.apple.com'
        },
      ],
    });

А вот мой код текстовых полей:

<input type="text" placeholder="Date : From" id="start_date">
<input type="text" placeholder="Date : To" id="end_date">

Я думаю, что я должен был бы добавить что-то вроде этого:

$('#start_date').on('change', function () {
                $('#calendar').fullCalendar('rerenderEvents');
            });
$('#end_date').on('change', function () {
                $('#calendar').fullCalendar('rerenderEvents');
            });

Но я не уверен. Также имейте в виду, что есть и другие фильтры. Отсюда «eventRender» часть кода с кучей вещей. Поэтому мне нужно убедиться, что фильтр dateRange не сломает другие фильтры.

Я читал о «visibleRange» на сайте FullCalendar, но я не понимаю, как я могу заставить его работать на основе того, что введено в 2 текстовых поля «диапазон дат». Я думаю, что также было бы неплохо отключить другие виды, которые я установил (чтобы показать результат только в виде списка).

Есть идеи, как я могу заставить это работать? Я как бы потерялся здесь. большое спасибо

РЕДАКТИРОВАТЬ :

Я пробовал этот код:

$('#start_date').on('change', function () {
      $('#calendar').fullCalendar('changeView', 'list', {
        start: 2018-05-10,
        end: 2018-05-30
      });            
});

Который работает. По сути, это то, что я ввожу новую дату в текстовое поле с идентификатором «start_date» (который использует скрипт datepicker, поэтому я пошел с «при изменении»), он меняет представление на представление списка , что здорово, и отображает только события между датой, которую я ввел. Чтобы сделать это динамичным, я сделал это:

$('#start_date').on('change', function () {
  var start_date = $('#start_date').val();
  var end_date = $('#end_date').val();
      $('#calendar').fullCalendar('changeView', 'list', {
        start: start_date,
        end: end_date
      });            
});

У меня есть 2 поля, «start_date» и «end_date». Я думал, что установка параметров «начало» и «конец» в коде changeView для FullCalendar будет обновляться автоматически каждый раз, когда я выбираю новую дату, но это не работает. На самом деле, это работает частично. Если я сначала введу «end_date», а затем «start_date», он будет фильтроваться и отлично работать, показывая правильный диапазон дат. Но после этого я не могу изменить его на другой dateRange, изменив даты в полях. Это действует так, вероятно, потому, что моя функция «на изменении», основанная на элементе «#start_date». Поэтому я должен сначала выбрать end_date, чтобы убедиться, что он фильтрует и изменить представление с помощью параметра end.

Есть идеи, что я делаю не так?

Спасибо

РЕДАКТИРОВАТЬ 2:

Я попытался изменить функцию с события «изменить» на «щелчок» и добавить кнопку «поиск». Здесь есть 2 вопроса. 1 - Работает только один раз. Если я сделаю поиск, затем поменяю дату и снова нажму кнопку «# search-range», ничего не получится.

2 - Когда он работает (первый раз после загрузки страницы), если я выбираю, например, с 1 мая по 5 мая, он по некоторым причинам покажет диапазон с 1 мая по 4 мая. Вот мой код снова:

$('#search-range').on('click', function () {
  var start_date = $('#start_date').val();
  var end_date = $('#end_date').val();
  $('#calendar').fullCalendar('changeView', 'list', {
        start: start_date,
        end: end_date
      });            
});

Есть идеи, что происходит? еще раз спасибо