title: Change date range to show events in FullCalendar
body: <p>I need to be able to set a "date range" with FullCalendar, using the "List" view. By date range, I mean being able to enter using 2 text fields, 2 different dates, for example :</p>
  
  <p>Text field 1 : 2018-05-05</p>
  
  <p>to</p>
  
  <p>Text field 2 : 2018-05-06</p>
  
  <p>And to filter the content of the calendar, using the List view to display the result, and show events that matches that date range.</p>
  
  <p>Here's my code for the FullCalendar part:</p>
  
  <pre><code> $('#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("&lt;div style='color:#fff'&gt;Conférencier choisi&lt;/div&gt;");
          element.find('.fc-title').append("&lt;br/&gt;" + event.lieu); 
          element.find('.fc-list-item-title').append("&lt;br/&gt;" + event.lieu); 
          element.find('.fc-list-item-title').append("&lt;a href='" + event.lienconferencier + "'&gt;&lt;div class='conferencier-calendrier-container'&gt;&lt;div style='float:left;background-image:url(" + event.photoconferencier + ");width:40px;height:40px;background-size:cover;border-radius:100px;'&gt;&lt;/div&gt;&lt;div style='float:left;padding-left:5px;font-weight:normal;'&gt;&lt;strong&gt;Conférencier&lt;/strong&gt;&lt;br&gt;" + event.conferencier + "&lt;/div&gt;&lt;/a&gt;"); 
            return ['all', event.status].indexOf($('#filter-status').val()) &gt;= 0 &amp;&amp;
               ['all', event.client].indexOf($('#filter-contact').val()) &gt;= 0 &amp;&amp; 
               ['all', event.conferencier].indexOf($('#filter-conferencier').val()) &gt;= 0 &amp;&amp;
               ['', event.numero].indexOf($('#numero').val()) &gt;= 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'
          },
        ],
      });
  </code></pre>
  
  <p>And here's my text fields code:</p>
  
  <pre><code>&lt;input type="text" placeholder="Date : From" id="start_date"&gt;
  &lt;input type="text" placeholder="Date : To" id="end_date"&gt;
  </code></pre>
  
  <p>I think I would have to add something like this:</p>
  
  <pre><code>$('#start_date').on('change', function () {
                  $('#calendar').fullCalendar('rerenderEvents');
              });
  $('#end_date').on('change', function () {
                  $('#calendar').fullCalendar('rerenderEvents');
              });
  </code></pre>
  
  <p>But I am not sure. Also, please keep in mind that there's other filters too. Hence the "eventRender" part in the code with a bunch of stuff. So I need to make sure that "dateRange" filter won't break the other filters.</p>
  
  <p>I read about "visibleRange" on FullCalendar's website, but I do not understand how I can make it work based on what is entered in the 2 "date range" text fields. I think also disabling the other views that I have set (to show the result in the List view only), would be a good idea.</p>
  
  <p>Any idea how I can make it work? I'm kind of lost here.
  Thanks a lot</p>
  
  <hr>
  
  <p>EDIT :</p>
  
  <p>I have tried this code:</p>
  
  <pre><code>$('#start_date').on('change', function () {
        $('#calendar').fullCalendar('changeView', 'list', {
          start: 2018-05-10,
          end: 2018-05-30
        });            
  });
  </code></pre>
  
  <p>Which is working. Basically, what it does is that I enter a new date in a text field with the ID of "start_date" (which uses a datepicker script, to that's why I went with "on change"), it changes the view to the list view, which is great, and displays only the events between the date I have entered. So to make it dynamic, I did this :</p>
  
  <pre><code>$('#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
        });            
  });
  </code></pre>
  
  <p>I have 2 fields, "start_date", and "end_date".
  I thought that setting the "start" and "end" option in the changeView code for FullCalendar would update automatically everytime I select a new date, but it doesn't work. In fact, it works partially. If I enter the "end_date" first, then the "start_date", it will filter and work perfectly, showing the right date range. But after that, I cannot change it for another dateRange by changing the dates in the fields.
  It acts like this probably because my function is "on change", based on the "#start_date" element. So I have to select the end_date first, to make sure it filters and change the view with something in the "end" option.</p>
  
  <p>Any idea what I am doing wrong?</p>
  
  <p>Thanks</p>
  
  <hr>
  
  <p>EDIT 2 :</p>
  
  <p>I tried changing the function from a "change" event to "click", and adding a "search" button. There's 2 issues here.
  1 - It works only once. If I make a search, then change the date, and click again on the "#search-range" button, it won't do anything.</p>
  
  <p>2 - When it works (first time after page load), if I select from May 1rst to May 5th for example, it will show the range from May 1rst to May 4th, for some reasons. Here's my code again :</p>
  
  <pre><code>$('#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
        });            
  });
  </code></pre>
  
  <p>Any ideas what's going on?
  Thanks again</p>