javascript - 全日历日期范围不显示今年过去的事件

Question

我在 2018 年 5 月创建了一个主题，内容是需要帮助来添加 2 个文本字段，这些文本字段将充当 Fullcalendar 的“日期范围”工具。允许我输入“从”和“到”日期，过滤事件以仅显示这两个日期之间的事件。

这是该主题的链接: Change date range to show events in FullCalendar

它工作正常，除了我发现如果我尝试在“从”字段中插入一个 2018 年的日期，并在“到”字段中插入一个 2019 年的日期，它将不起作用并且只会显示来自2018 年。好像日期范围函数的编码方式不允许用户超过当前年份。

对于那些还没有阅读有关它的旧主题的人，这里是我正在使用的“日期范围过滤器”功能:

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');
    });

我认为问题在于它在代码中使用了“listYear” View ，并且它可能只显示实际年份的事件，但不能显示包含多年的列表。我需要它来显示“列表” View ，其中包含与所选日期范围相匹配的事件。

如有任何帮助，我们将不胜感激。非常感谢!

Answer 1

感谢用户 ADyson，我创建了一个不基于“当前年份”的 View ，并将其应用于代码的“如果月份不同，切换到年份列表”部分。所以现在，那部分看起来像这样:

 // If months are different, switch to the year list.
  if ('listYear' !== v.name && ! a) {
    $('#calendar').fullCalendar('changeView', 'perTotal'); //That's where I made the change...it's now "perTotal" instead of "listYear".
  // Otherwise, switch back to month list, if needed.
  } else if ('listMonth' !== v.name) {
    $('#calendar').fullCalendar('changeView', 'listMonth');
  }
}

“perTotal”为自定义 View ， View 类型设置为“list”，不受当年限制。

谢谢