程序员经验分享-hwhale

使用复选框过滤 FullCalendar 事件（使用 JavaScript 的客户端）

2024-04-03

我有一个运行良好的 fullcalendar 脚本，它根据数据属性通过以下方式将 css 类添加到事件中eventRender。我现在需要使用复选框过滤这些特定属性，但我根本不知道应该如何实现这一点！

我的脚本如下所示：

<script>
    $(document).ready(function() {
        $('#calendar').fullCalendar({
            eventRender: function(calEvent, element, view) {
                if (calEvent.risk == "normal") {
                    element.css('background-color', '#99FF99');
                }
                if (calEvent.risk == "event") {
                    element.css('background-color', '#415eec');
                }
                if (calEvent.risk == "whisper") {
                    element.css('background-color', '#D7CDD5');
                }
            },
            allDaySlot: true,
            displayEventTime: true,
            displayEventEnd: true,
            editable: false,
            firstDay: 1,
            weekNumbers: true,
            selectable: false,
            weekNumberCalculation: "ISO",
            eventLimit: true, 
            events: 'parts/events22.php'
        });
    });
</script>

html 复选框：

<div class="checkbox">
  <label><input type="checkbox" value="normal">Normal</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="event">Event</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="whisper">Whisper</label>
</div>

有人知道我如何将复选框值连接到calEvent.risk，即特定的数据属性以便过滤它们？ 或者有人对使用全日历进行多选过滤有不同的想法？如果有任何帮助，我将非常感激！


在复选框上设置更改处理程序以重新呈现事件。 eventRender 返回 false 会阻止其显示，因此请创建一个过滤函数来获取检查的值，并在 event.risk 位于这些值中时返回

    $(document).ready(function() {
      $('#calendar').fullCalendar({
        eventRender: function(calEvent, element, view) {
          if (calEvent.risk == "normal") {
            element.css('background-color', '#99FF99');
          }
          if (calEvent.risk == "event") {
            element.css('background-color', '#415eec');
          }
          if (calEvent.risk == "whisper") {
            element.css('background-color', '#D7CDD5');
          }
          return filter(calEvent); // Only show if appropriate checkbox is checked
        },
        allDaySlot: true,
        displayEventTime: true,
        displayEventEnd: true,
        editable: false,
        firstDay: 1,
        weekNumbers: true,
        selectable: false,
        weekNumberCalculation: "ISO",
        eventLimit: true,
        events: 'parts/events22.php',
        events: [{
          start: moment().add(1, 'day'),
          title: 'Normal',
          risk: 'normal'
        }, {
          start: moment().add(2, 'day'),
          title: 'Event',
          risk: 'event'
        }, {
          start: moment().add(3, 'day'),
          title: 'Whisper',
          risk: 'whisper'
        }]
      });

      /* When a checkbox changes, re-render events */
      $('input:checkbox.calFilter').on('change', function() {
        $('#calendar').fullCalendar('rerenderEvents');
      });
    });

    function filter(calEvent) {
      var vals = [];
      $('input:checkbox.calFilter:checked').each(function() {
        vals.push($(this).val());
      });
      return vals.indexOf(calEvent.risk) !== -1;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.css" rel="stylesheet"/>
<div class="checkbox">
  <label>
    <input class='calFilter' type="checkbox" value="normal" checked>Normal</label>
</div>
<div class="checkbox">
  <label>
    <input class='calFilter' type="checkbox" value="event">Event</label>
</div>
<div class="checkbox">
  <label>
    <input class='calFilter' type="checkbox" value="whisper">Whisper</label>
</div>
<div id='calendar'></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

CheckBox

fullcalendar

使用复选框过滤 FullCalendar 事件（使用 JavaScript 的客户端） 的相关文章

随机推荐

热门标签