为Fullcalendar eventRender选择多个复选框 [英] Multiple checkbox select for Fullcalendar eventRender

问题描述

在我的fullcalendar上，我有几个复选框，我想要像过滤器一样作出反应。
简而言之：我想筛选一个，所有，三个，两个（多个）...等等。

我来了到目前为止，我可以选择一个复选框，并且它返回正确的事件，但它当然不适用于两个或更多复选框。
但我不知道，如何做到这一点！我的JavaScript技能不太好。

使用Json文件获取事件，这是我在模型中使用Ruby on Rails 4创建的。但我不想分裂这个Json。所以我寻找一个完整的Javascript版本。

我认为，代码会更好地展示我的意思。

Html：

 < input id =hamburgclass =event_filter_boxname =event_filter_selecttype =checkboxvalue =Hamburg> Hamburg< / input> 
< input id =schleswig-holsteinclass =event_filter_boxname =event_filter_selecttype =checkboxvalue =Schleswig-Holstein> Schleswig-Holstein< / input> 
 
< input id =partyclass =event_filter_boxname =event_filter_selecttype =checkboxvalue =Party>派对< / input> 
< input id =concertclass =event_filter_boxname =event_filter_selecttype =checkboxvalue =Concert> Concert< / input> 
< input id =festivalclass =event_filter_boxname =event_filter_selecttype =checkboxvalue =Festival> Festival< / input> 
 
< div id =calendar>< / div> 
  

Javascript：

  $（document）.ready（function（）{
 $（'input [class = event_filter_box]'）。change（function（）{
 $ （'#calendar'）。fullCalendar（'rerenderEvents'）; 
}）; 
}）; 
 
 
 $（＃calendar）。fullCalendar（{
 events：[
 {
 title：'汉堡派对活动'，
 start：'2015-11-11'，
 address_city：'Hamburg'，
 kind：'Party'，
}，
 {
 title：'汉堡Conzert活动'，
开始：'2015-11-10'，
 address_city：'汉堡'，
类：'音乐会'，
}，
 {
 title：'石勒苏益格 - 荷尔斯泰因节日活动'，
开始：'2015-11-08'，
结束：'2015-11-12'，
 address_city： 'Schleswig-Holstein'，
 kind：'Festival'，
}，
]，
 defaultView：basicWeek，
 eventRender：function eventRender（event，element （$：'input [id = hamburg]'）。（'：checked'））{
 return ['all'，event.address_city] .indexOf（$（ '#hamburg'）。val（））> = 0 
} else if（$（'input [id = schleswig-holstein]'）。is（'：checked ））{
 return ['all'，event.address_city] .indexOf（$（'＃schleswig-holstein'）.val（））> = 0 
} else if（$（'input （'：checked'））{
 return ['all'，event.kind] .indexOf（$（'＃party'）.val（））> = 0 （$：
）else if（$（'input [id = concert]'）。is（'：checked'））{
 return ['all'，event.kind] .indexOf（$（' （'：checked'））{
 return ['all'）。val（））> = 0 
} else if（$（'input [id = festival]'）。 ，event.kind] .indexOf（$（'＃festival'）.val（））> = 0 
} 
}，
}）; 
  

codepen

Javascript有多重选择？感谢之前=）

解决方案

小提琴演示： http://jsfiddle.net/gohrbk41/1/

我改变了一点HTML，为数据添加了标签，类型来区分城市和实物

 <！ - 我将数据类型添加到复选框 - > 
< input id =hamburgclass =event_filter_boxname =event_filter_selecttype =checkboxvalue =Hamburgdata-type =address_city> Hamburg< / input> 
< input id =schleswig-holsteinclass =event_filter_boxname =event_filter_selecttype =checkboxvalue =Schleswig-Holsteindata-type =address_city> Schleswig-Holstein<输入> 
 
< input id =partyclass =event_filter_boxname =event_filter_selecttype =checkboxvalue =Partydata-type =kind> Party< / input> 
< input id =concertclass =event_filter_boxname =event_filter_selecttype =checkboxvalue =Concertdata-type =kind> Concert< / input> 
< input id =festivalclass =event_filter_boxname =event_filter_selecttype =checkboxvalue =Festivaldata-type =kind> Festival< / input> 
 
< div id =calendar>< / div> 
  

而对于javascript

  $（document）.ready（function（）{
 $（'input [class = event_filter_box]'）。change（function（）{
 $（'＃calendar' ）.fullCalendar（'rerenderEvents'）; 
}）; 
}）; 
 
 
 $（＃calendar）。fullCalendar（{
 events：[
 {
 title：'汉堡派对活动'，
 start：'2015-11-11'，
 address_city：'Hamburg'，
 kind：'Party'，
}，
 {
 title：'汉堡Conzert活动'，
开始：'2015-11-10'，
 address_city：'汉堡'，
类：'音乐会'，
}，
 {
 title：'石勒苏益格 - 荷尔斯泰因节日活动'，
开始：'2015-11-08'，
结束：'2015-11-12'，
 address_city： 'Schleswig-Holstein'，
 kind：'Festival'，
}，
]，
 defaultView：basicWeek，
 eventRender：function eventRender（event，element ，view）{
 var display = true; 
 var addresses = []; 
 var kinds = []; 
 //查找所有启用的事件过滤器的复选框
 //并保存值。
 $（input [name ='ev ent_filter_select']：checked）。each（function（）{
 //我在上面的HTML中指定了data-type属性来区分
 //位置和事件类型之间的区别。 （$（this）.data（'type'）=='address_city'））{
 addresses.push（$（this）
 
 //分别保存每个类型
 if .VAL（））; （$（this）.data（'type'）=='kind'）{
 kinds.push（$（this）.val（））; 
 
 else if 
} 
}）; 
 
 //如果有地点检查
 if（addresses.length）{
 display = display&& addresses.indexOf（event.address_city）> = 0; 
} 
 
 //如果有特定类型的事件
 if（kinds.length）{
 display = display&& kinds.indexOf（event.kind）> = 0; 
} 
 
返回显示; 
}，
}）; 
  

Over my fullcalendar I have a few checkboxes, which I want to be react like a filter. In short: I want to filter for one, all, three, two (multiple)... and so on.

I came this far, that I can select one Checkbox, and it's return the right Events, but it's not working for two ore more checkboxes, of course. But I don't know, how to do this! My Javascript skill is not so good.

I fetch the Events with a Json File, which I created with Ruby on Rails 4 in the Model. But I don't want to split this Json. So I searching for a full Javascript version.

I think, the code will better show, what I mean.

Html:

<input id="hamburg" class="event_filter_box" name="event_filter_select" type="checkbox" value="Hamburg">Hamburg</input>
<input id="schleswig-holstein" class="event_filter_box" name="event_filter_select" type="checkbox" value="Schleswig-Holstein">Schleswig-Holstein</input>

<input id="party" class="event_filter_box" name="event_filter_select"  type="checkbox" value="Party">Party</input>
<input id="concert" class="event_filter_box" name="event_filter_select" type="checkbox" value="Concert">Concert</input>
<input id="festival" class="event_filter_box" name="event_filter_select" type="checkbox" value="Festival">Festival</input>

<div id="calendar"></div>

Javascript:

$(document).ready(function() {
  $('input[class=event_filter_box]').change(function() {
    $('#calendar').fullCalendar('rerenderEvents');
  });
});


$("#calendar").fullCalendar({
  events: [
    {
      title: 'Party Event in Hamburg',
      start: '2015-11-11',
      address_city: 'Hamburg',
      kind: 'Party',
    }, 
    {
      title: 'Conzert Event in Hamburg',
      start: '2015-11-10',
      address_city: 'Hamburg',
      kind: 'Concert',
    }, 
    {
      title: 'Festival Event in Schleswig-Holstein',
      start: '2015-11-08',
      end: '2015-11-12',
      address_city: 'Schleswig-Holstein',
      kind: 'Festival',
    }, 
  ],
  defaultView: "basicWeek",
  eventRender: function eventRender( event, element, view ) {
    if ($('input[id=hamburg]').is(':checked')) {
      return ['all', event.address_city].indexOf($('#hamburg').val()) >= 0
    } else if ($('input[id=schleswig-holstein]').is(':checked')) {
      return ['all', event.address_city].indexOf($('#schleswig-holstein').val()) >= 0
    } else if ($('input[id=party]').is(':checked')) {
      return ['all', event.kind].indexOf($('#party').val()) >= 0
    } else if ($('input[id=concert]').is(':checked')) {
      return ['all', event.kind].indexOf($('#concert').val()) >= 0
    } else if ($('input[id=festival]').is(':checked')) {
      return ['all', event.kind].indexOf($('#festival').val()) >= 0
    }
  },
});

codepen

How has the Javascript to be, for a multiple Select? Thank's before =)

解决方案

Fiddle demo: http://jsfiddle.net/gohrbk41/1/

I changed the HTML a little bit, adding tags for data-type to differentiate between city and kind

<!-- I added data-type to the checkboxes -->
<input id="hamburg" class="event_filter_box" name="event_filter_select" type="checkbox" value="Hamburg" data-type="address_city">Hamburg</input>
<input id="schleswig-holstein" class="event_filter_box" name="event_filter_select" type="checkbox" value="Schleswig-Holstein" data-type="address_city">Schleswig-Holstein</input>

<input id="party" class="event_filter_box" name="event_filter_select"  type="checkbox" value="Party" data-type="kind">Party</input>
<input id="concert" class="event_filter_box" name="event_filter_select" type="checkbox" value="Concert" data-type="kind">Concert</input>
<input id="festival" class="event_filter_box" name="event_filter_select" type="checkbox" value="Festival" data-type="kind">Festival</input>

<div id="calendar"></div>

And for the javascript

$(document).ready(function() {
  $('input[class=event_filter_box]').change(function() {
    $('#calendar').fullCalendar('rerenderEvents');
  });
});


$("#calendar").fullCalendar({
  events: [
    {
      title: 'Party Event in Hamburg',
      start: '2015-11-11',
      address_city: 'Hamburg',
      kind: 'Party',
    }, 
    {
      title: 'Conzert Event in Hamburg',
      start: '2015-11-10',
      address_city: 'Hamburg',
      kind: 'Concert',
    }, 
    {
      title: 'Festival Event in Schleswig-Holstein',
      start: '2015-11-08',
      end: '2015-11-12',
      address_city: 'Schleswig-Holstein',
      kind: 'Festival',
    }, 
  ],
  defaultView: "basicWeek",
  eventRender: function eventRender( event, element, view ) {
      var display = true;
      var addresses = [];
      var kinds = [];
      // Find all checkbox that are event filters that are enabled
      // and save the values.
      $("input[name='event_filter_select']:checked").each(function () {
          // I specified data-type attribute in above HTML to differentiate
          // between locations and kinds of events.

          // Saving each type separately
          if ($(this).data('type') == 'address_city') {
              addresses.push($(this).val());
          }
          else if ($(this).data('type') == 'kind') {
              kinds.push($(this).val());
          }
      });

      // If there are locations to check
      if (addresses.length) {
          display = display && addresses.indexOf(event.address_city) >= 0;
      }

      // If there are specific types of events
      if (kinds.length) {
          display = display && kinds.indexOf(event.kind) >= 0;
      }

      return display;
  },
});

这篇关于为Fullcalendar eventRender选择多个复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！