更改日期范围以在FullCalendar中显示事件

Question

我需要能够使用“列表”视图设置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”过滤器不会破坏其他过滤器。

我在FullCalendar的网站上读到了“visibleRange”，但我不明白如何根据在2个“日期范围”文本字段中输入的内容使其工作。 我认为也禁用我设置的其他视图（仅在List视图中显示结果），这是一个好主意。

知道如何让它工作吗？ 我有点迷失在这里。 非常感谢

---

编辑：

我试过这段代码：

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

这是有效的。 基本上，它的作用是我在ID为“start_date”的文本字段中输入一个新日期（使用了一个datepicker脚本，这就是为什么我选择了“on change”），它将视图更改为列表视图，这很棒，只显示我输入的日期之间的事件。 所以为了让它变得动态，我这样做了：

$('#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”。 我认为在FullCalendar的changeView代码中设置“start”和“end”选项会在每次选择新日期时自动更新，但它不起作用。 事实上，它部分起作用。 如果我首先输入“end_date”，然后输入“start_date”，它将过滤并完美地工作，显示正确的日期范围。 但在那之后，我无法通过更改字段中的日期来更改另一个dateRange。 它的行为可能是因为我的函数是“on change”，基于“#start_date”元素。 所以我必须首先选择end_date，以确保它过滤并使用“end”选项中的某些内容更改视图。

知道我做错了什么吗？

谢谢

---

编辑2：

我尝试将功能从“更改”事件更改为“单击”，然后添加“搜索”按钮。 这里有2个问题。 1 - 它只工作一次。 如果我进行搜索，然后更改日期，再次单击“＃search-range”按钮，它将不会执行任何操作。

2 - 当它工作时（页面加载后第一次），如果我从5月1日到5月5日选择，它将显示从5月1日到5月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
      });            
});

有什么想法发生了什么？ 再次感谢

Answer 1

您可能正在寻找validRange选项 。

$('#start_date').on('change', function(){
  $('#calendar').fullCalendar('option', 'validRange', {
    // Don't worry if user didn't provide *any* inputs.
    start: this.value,
    end: $('#end_date').val()
  });
});

$('#end_date').on('change', function(){
  $('#calendar').fullCalendar('option', 'validRange', {
    // Don't worry if user didn't provide *any* inputs.
    start: $('#start_date').val(),
    end: this.value
  });
});

演示： https ： //jsfiddle.net/8wd7sxyv/

UPDATE

结束日期现在包括在内。 因此，如果结束日期是2018-05-31 ，则包括当天的事件 - 默认行为仅包括2018-05-30 。

如果开始日期和结束日期在同一个月，则视图为listMonth ; 否则，它是listYear 。

function filterByDateRange(start_date, end_date, format) {
  var s = $.fullCalendar.moment(start_date),
      e = $.fullCalendar.moment(end_date),
      v = $('#calendar').fullCalendar('getView'),
      a, b;

  // Start date is invalid; set it to the start of the month.
  if (! s.isValid()) {
    b = e.isValid();
    s = b ? e.clone() : $.fullCalendar.moment();
    s.date(1);
    $('#start_date').val(s.format(format));
    a = true;
  }
  // End date is invalid; set it to the end of the month.
  if (! e.isValid()) {
    b = s.isValid();
    e = b ? s.clone() : $.fullCalendar.moment();
    e.date(e.daysInMonth());
    $('#end_date').val(e.format(format));
    a = true;
  }

  // Start date is after end date; set it to a day before the end date.
  if (s.isAfter(e)) {
    s = e.clone().add('-1', 'day');
    $('#start_date').val(s.format(format));
  // End date is before start date; set it to a day after the start date.
  } else if (e.isBefore(s)) {
    e = s.clone().add('1', 'day');
    $('#end_date').val(e.format(format));
  }

  // Add 1 day so that `end_date` is inclusive.
  e = e.isValid() ? e.add('1', 'day') : e;

  $('#calendar').fullCalendar('option', 'validRange', {
    start: s.isValid() ? s : null,
    end: e.isValid() ? e : null
  });

  a = a || s.isSame(e, 'month');
  // If months are different, switch to the year list.
  if ('listYear' !== v.name && ! a) {
    $('#calendar').fullCalendar('changeView', 'listYear');
  // Otherwise, switch back to month list, if needed.
  } else if ('listMonth' !== v.name) {
    $('#calendar').fullCalendar('changeView', 'listMonth');
  }
}

$('#start_date').on('change', function(){
  filterByDateRange(this.value, $('#end_date').val(), 'YYYY-MM-DD');
});

$('#end_date').on('change', function(){
  filterByDateRange($('#start_date').val(), this.value, 'YYYY-MM-DD');
});

演示： https ： //jsfiddle.net/8wd7sxyv/6/