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”视图，并且它可能仅显示实际年份的事件，而不能显示其中包含多年的列表。我需要它来显示“列表”视图，并显示与所选日期范围匹配的事件。

任何帮助将不胜感激。非常感谢！

Answer 1

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

 // 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”是一种自定义视图，其视图类型设置为“列表”，不受当前年份的限制。

谢谢

全日历日期范围未显示今年的事件

1 个答案: