Question

我正在尝试使用FullCalendar脚本使用文本框过滤我日历中的事件。我设法使用基于Stackoverflow上其他主题的下拉菜单，但无法根据文本框中的关键字找到过滤事件。

以下是我为了使下拉过滤器正常工作而添加的代码：

这是为了重新渲染事件。

$('#filter-conferencier').on('change', function () {
            $('#calendar').fullCalendar('rerenderEvents');
        });

而且，对于FullCalendar选项：

    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'listMonth, month,agendaWeek,agendaDay'
      },
      defaultView: 'listMonth',
      locale: 'fr',
      contentHeight: 600,
      navLinks: true,
      selectable: false,
      eventRender: function(event) { 
          return ['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0;
      },
...

查看“eventRender”部分。这就是我根据下拉菜单中选择的内容过滤事件的方法。它有效。

还要根据此文本输入中的内容过滤内容：

<input type="text" id="numero">

我首先添加了此代码：

$('#numero').on('input', function () {
            $('#calendar').fullCalendar('rerenderEvents');
        });

而现在，那就是我迷失的地方。我尝试像这样更改eventRender部分的代码：

return ['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0 && [event.numero].($('#numero').val());

哪个不起作用。我认为这将检查每个事件的“event.numero”，并使其与“numero”输入字段内的值匹配。我不相信它会起作用，但事实并非如此。

以下是完整的“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.conferencier].indexOf($('#filter-conferencier').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'
        },
      ],
    });

下拉菜单和文本字段代码为：

<select id="filter-conferencier">
<option value="all">Conférencier...</option>
<option value="john-doe">John Doe</option>
<option value="steve-jobs">Steve Jobs</option>
</select>

<input type="text" id="numero" placeholder="Numéro de contrat">

（“element.find”部分是将可视内容添加到listMonth视图中）

知道我需要改变什么来使这项工作？

非常感谢！

Answer 1

你离我很远，你只需要：

1）使用indexOf（） - 没有这个语法错误

2）通过向数组添加额外值来处理字段为空的条件

3）检查indexOf是否返回0或更多的值

它实际上与使用下拉列表的原始版本几乎完全相同 - 您仍然只是检查输入字段中的值。唯一真正的区别是输入字段的名称，以及用于表示未应用过滤器的额外值。

我在这里给代码添加了一些额外的空格，这样你就可以更容易地看到两个测试之间结构的相似性：

return 
   ['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0 
&& [''   , event.numero      ].indexOf($('#numero').val()             ) >= 0;

有关正常工作的演示，请参阅http://jsfiddle.net/sbxpv25p/573/。

使用FullCalendar和输入字段

1 个答案: